/*
Theme Name: Seven Scrubs (Flatsome)
Theme URI: https://sevenscrubs.co.za
Author: BrothersWeb
Author URI: https://brothersweb.co.za
Description: Seven Scrubs look for Flatsome. Pages, footer, fonts and colours are all edited the normal Flatsome way (UX Builder and Theme Options). This file only adds the opening screen, the WhatsApp button and a few finishing touches.
Template: flatsome
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: sevenscrubs
*/

:root { --ss-paper: #F7F1EA; --ss-ink: #1C1814; --ss-nude: #D8C1A7; --ss-sand: #EFE4D6; --ss-muted: #7A6C5F; --ss-line: #E3D6C6; }

/* ---------- header: thin line under it ---------- */
.header-main { border-bottom: 1px solid var(--ss-line); }
.header-main .nav > li > a { font-weight: 400; }

/* ---------- light, airy titles ---------- */
h1, h2, h3, h4, .heading-font { letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 5.5vw, 5.4rem); line-height: 1.02; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; }
.lead { font-size: 1.35em; line-height: 1.35; }

/* ---------- opening screen: counts to 100 in the corner, then slides away ---------- */
.ss-loader { position: fixed; inset: 0; z-index: 99999; background: var(--ss-paper); display: grid; place-items: center; animation: ss-lift .7s cubic-bezier(.7,0,.2,1) 1.3s forwards; }
.ss-loader img { width: min(190px, 40vw); aspect-ratio: 2 / 3; object-fit: cover; animation: ss-grow 1.3s ease-out forwards; }
.ss-loader-label { position: absolute; left: clamp(16px, 3vw, 40px); top: 22px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ss-ink); }
.ss-loader-count { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 10px; font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 115%; font-size: clamp(64px, 13vw, 170px); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ss-ink); }
.ss-loader-count::after { content: "%"; font-size: .3em; vertical-align: .9em; margin-left: .05em; }
.ss-seen .ss-loader { display: none !important; }
@keyframes ss-lift { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes ss-grow { from { transform: scale(.72); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ss-loader { display: none; } }

/* ---------- homepage banner: on phones the words sit on a soft card over the photo ---------- */
@media (max-width: 549px) {
  .ss-hero .text-box .text-box-content { background: rgba(247,241,234,.92); padding: 18px; border-radius: 14px; }
  .ss-hero .bg { background-position: 12% 50% !important; }
}

/* ---------- soft corners on photos and products ---------- */
.ss-round img, .ss-round .img-inner, .product-small .box-image, .woocommerce-product-gallery img { border-radius: 14px; overflow: hidden; }
.button, button, input[type="submit"] { text-transform: none; letter-spacing: 0; }
.quantity input[type="number"] { border-radius: 999px; }

/* ---------- shop grid: photo, name, price ---------- */
.product-small .name.product-title a { font-weight: 400; }
.product-small .price { color: var(--ss-muted); }

/* ---------- footer ---------- */
.ss-footer { border-top: 1px solid var(--ss-line); }
.ss-footer h4 { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-muted); margin-bottom: .6rem; }
.ss-footer a { color: var(--ss-ink); line-height: 2; }
.ss-footer .ss-foot-logo img { max-width: 120px; }
.ss-muted { color: var(--ss-muted); font-size: .9em; }
.absolute-footer { border-top: 1px solid var(--ss-line); font-size: 13px; color: var(--ss-muted); }

/* ---------- made-to-order notes under the add-to-cart button ---------- */
.ss-facts { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ss-line); font-size: .92em; color: var(--ss-muted); }
.ss-facts p { margin: 0 0 .4rem; }
.ss-facts strong { color: var(--ss-ink); font-weight: 500; }

/* ---------- floating WhatsApp button ---------- */
.ss-wa { position: fixed; right: 18px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); z-index: 50; width: 52px; height: 52px; border-radius: 50%; background: var(--ss-ink); color: var(--ss-paper) !important; display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(0,0,0,.45); }
.ss-wa svg { width: 26px; height: 26px; fill: currentColor; }