/*
Theme Name: Tisaz Drapery Studio
Theme URI: https://tisazdraperystudio.com
Author: Tisaz Drapery Studio
Author URI: https://tisazdraperystudio.com
Description: Custom one-page theme for Tisaz Drapery Studio — luxury curtains & bespoke blinds, Walton-on-Thames. Converted from the original static landing page design, unchanged.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tisaz
*/

/* ============================================================================
   HOW THIS FILE IS ORGANISED
   ----------------------------------------------------------------------------
   This is one single stylesheet for the whole one-page site. It's split into
   labelled sections, each starting with a short comment line, in the same
   order the sections appear on the page: topbar, header, hero, strip,
   why, collections, process, guide, fabrics, brands, gallery, visit,
   faq, footer, then the responsive breakpoints at the bottom.

   Colours/fonts live in the :root{} block right below — change a colour
   there once and it updates everywhere it's used (var(--green) etc).
   ============================================================================ */

:root{
    --green:#30492B; --green-deep:#22351F; --cream:#F3EAD9; --cream-soft:#F8F3E9;
    --gold:#B8964E; --sand:#C8B89A; --ink:#2A2A26; --line:rgba(48,73,43,.16);
    --display:'Cormorant Garamond', Georgia, serif; --body:'Outfit', system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* IMPORTANT: do NOT add "overflow-x:hidden" directly to html or body. It looks
   harmless and is a common "fix" for horizontal-scrollbar issues (like the
   floating WhatsApp/back-to-top buttons becoming reachable only by scrolling
   sideways on some phones), but it silently breaks position:sticky on the
   header just below — the sticky header would stop sticking, with no obvious
   error anywhere. We hit exactly that mistake once already.
   The real fix for horizontal-overflow issues lives on ".tz-overflow-guard"
   instead (see just below) — a wrapper div that's a SIBLING of <header>, not
   an ancestor of it, so it can safely clip overflow without ever touching
   header's sticky behaviour. It's opened in index.php right after
   get_header(), and closed in footer.php right before the floating buttons. */
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--cream-soft);line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased}
.tz-overflow-guard{overflow-x:hidden;width:100%;}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--body);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--gold)}
/* topbar */
.topbar{background:var(--green-deep);color:var(--cream);font-size:.78rem;letter-spacing:.04em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:20px}
.topbar a{opacity:.85;transition:opacity .2s}.topbar a:hover{opacity:1}
.topbar-left{display:flex;align-items:center;gap:18px;flex-wrap:nowrap}
.topbar-left span{white-space:nowrap}
.topbar-right{flex-shrink:0;white-space:nowrap}
/* header */
header{position:sticky;top:0;z-index:50;background:rgba(248,243,233,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* changed height -> min-height: lets the header grow a little taller if a bigger logo image is uploaded, instead of cutting it off */
header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:78px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .name{font-family:var(--display);font-size:1.85rem;font-weight:600;color:var(--green);letter-spacing:.02em}
.brand .tag{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-top:4px;font-weight:500}
nav.main{display:flex;gap:30px;align-items:center}
nav.main a{font-size:.85rem;color:var(--green);position:relative}
nav.main a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .25s}
nav.main a:hover::after{width:100%}
.btn{display:inline-block;font-family:var(--body);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;padding:13px 26px;border-radius:2px;transition:all .25s;cursor:pointer;border:1px solid var(--green)}
.btn-solid{background:var(--green);color:var(--cream)}.btn-solid:hover{background:var(--green-deep)}
.btn-ghost{background:transparent;color:var(--green)}.btn-ghost:hover{background:var(--green);color:var(--cream)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#fff}.btn-gold:hover{background:#a08344}
/* hamburger button — only visible on mobile (see the @media 920px rules near the bottom of this file) */
.menu-toggle{display:none;background:none;border:none;color:var(--green);font-size:1.7rem;line-height:1;cursor:pointer;padding:8px;margin:-8px;}
/* the mobile dropdown menu itself MUST default to hidden on every screen size (not just inside
   the 920px media query below) — otherwise on desktop, with no display rule at all, the browser
   falls back to showing it as a plain unstyled list of links. This one line fixes that. */
.mobile-nav{display:none;}

/* ============================================================================
   SITE SEARCH (header icon + full-width overlay)
   ----------------------------------------------------------------------------
   .header-search-btn = the little magnifier icon in the header.
   .search-overlay    = the panel that drops down when it's clicked. Hidden by
                        default; JS (in footer.php) adds ".open" to reveal it.
                        It submits to WordPress's normal ?s= search, and results
                        are shown by search.php.
   ============================================================================ */
.header-search-btn{
    background:none;border:none;cursor:pointer;color:var(--green);
    display:inline-flex;align-items:center;justify-content:center;
    padding:8px;margin:-8px;line-height:1;transition:color .2s;
}
.header-search-btn:hover{ color:var(--gold); }

.search-overlay{
    position:fixed;
    top:0; left:0; right:0;
    background:var(--cream-soft);
    border-bottom:1px solid var(--line);
    box-shadow:0 16px 28px rgba(0,0,0,.12);
    padding:22px 0;
    z-index:9990; /* above everything including sticky header */
    display:none;
}
.search-overlay.open{ display:block; }
.search-overlay .search-form{
    display:flex;
    align-items:center;
    gap:12px;
}
.search-overlay .search-field{
    flex:1;
    min-width:0; /* lets the input shrink on small screens instead of overflowing */
    padding:14px 16px;
    border:1px solid var(--line);
    background:#fff;
    font-family:var(--body);
    font-size:1rem;
    color:var(--ink);
    border-radius:2px;
}
.search-overlay .search-field:focus{ outline:none;border-color:var(--gold); }
.search-overlay .search-submit{ flex-shrink:0;cursor:pointer; }
.search-overlay .search-close{
    flex-shrink:0;
    background:none;border:none;
    font-size:1.8rem;line-height:1;
    color:#9a9a90;cursor:pointer;
    padding:4px 8px;
}
.search-overlay .search-close:hover{ color:var(--green); }
.mobile-search-link{ cursor:pointer; }

/* search overlay wrap needs to be the positioning parent for the suggestions dropdown */
.search-overlay .wrap{ position:relative; }

/* ---- live search suggestions dropdown (appears below the search field) ---- */
.search-suggestions{
    display:none;
    position:absolute;
    top:100%;
    left:28px;   /* match .wrap padding */
    right:28px;  /* match .wrap padding */
    z-index:9991; /* above the fixed overlay (9990) */
    background:#fff;
    border:1px solid var(--line);
    border-top:none;
    border-radius:0 0 4px 4px;
    overflow:hidden;
    box-shadow:0 12px 28px rgba(0,0,0,.12);
    max-height:320px;
    overflow-y:auto;
}
.search-suggestions.has-results{ display:block; }
.search-suggestion{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 16px;
    border-bottom:1px solid var(--line);
    color:var(--ink);
    transition:background .15s;
    text-decoration:none;
}
.search-suggestion:last-child{ border-bottom:none; }
.search-suggestion:hover{ background:var(--cream-soft); }
.ss-thumb{
    width:44px;height:44px;
    object-fit:cover;
    border-radius:2px;
    flex-shrink:0;
    border:1px solid var(--line);
}
.ss-thumb-placeholder{
    background:linear-gradient(135deg,var(--green) 0%,#3c5836 100%);
    flex-shrink:0;
}
.ss-text{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.ss-title{ font-size:.9rem;font-weight:500;color:var(--green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ss-type{
    font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold);font-weight:600;
}
.search-suggestion-empty{
    padding:12px 16px;
    font-size:.85rem;
    color:#77776e;
}
@media(max-width:560px){
    .search-overlay .search-submit{ padding:13px 18px;font-size:.78rem; }
    .search-overlay .search-field{ font-size:.95rem; }
}

/* hero */
.hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(120deg,var(--green-deep) 0%,var(--green) 55%,#3c5836 100%)}
.hero-bg::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='240' viewBox='0 0 120 240'%3E%3Cg fill='none' stroke='%23B8964E' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M10 0 Q20 60 10 120 Q0 180 10 240'/%3E%3Cpath d='M40 0 Q50 60 40 120 Q30 180 40 240'/%3E%3Cpath d='M70 0 Q80 60 70 120 Q60 180 70 240'/%3E%3Cpath d='M100 0 Q110 60 100 120 Q90 180 100 240'/%3E%3C/g%3E%3C/svg%3E");opacity:.9}
/* ---- optional hero INTRO video (Theme Options → Hero) ----
   The intro is a full-cover layer that sits ON TOP of the hero and plays the
   video once. When the video ends, JS (in footer.php) adds ".done", which fades
   the whole layer out and then it's removed — revealing the complete hero that
   was underneath the whole time. */
.hero-intro{position:absolute;inset:0;z-index:5;background:#22351f;overflow:hidden;transition:opacity .7s ease;}
.hero-intro.done{opacity:0;pointer-events:none;}
.hero-intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:50px;align-items:center;padding-top:56px;padding-bottom:56px}
.hero-copy{color:var(--cream)}.hero-copy .eyebrow{color:var(--sand)}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1.06;margin:18px 0 20px;color:#fff}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero p.lede{font-size:1.06rem;font-weight:300;max-width:46ch;color:rgba(243,234,217,.9);margin-bottom:14px}
.hero p.sub{font-size:.96rem;max-width:48ch;color:rgba(243,234,217,.72);margin-bottom:22px}
.hero .tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.hero .tags span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(184,150,78,.5);color:var(--sand);padding:6px 13px;border-radius:2px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-actions .btn-ghost{color:var(--cream);border-color:rgba(243,234,217,.5)}
.hero-actions .btn-ghost:hover{background:var(--cream);color:var(--green)}
.hero-visual{position:relative}
.hero-card{background:var(--cream-soft);border:1px solid var(--gold);padding:8px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.hero-card .imgbox{aspect-ratio:4/5;position:relative;overflow:hidden}
.hero-card .imgbox svg{position:absolute;inset:0;width:100%;height:100%}
.hero-card .imgbox .tz-slot-img{position:absolute;inset:0}
.hero-badge{position:absolute;left:-26px;bottom:34px;background:var(--gold);color:#fff;padding:16px 20px;text-align:center;box-shadow:0 14px 30px rgba(0,0,0,.25)}
.hero-badge .num{font-family:var(--display);font-size:2rem;line-height:1;font-weight:600}
.hero-badge .lbl{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;margin-top:4px}
/* sections */
section.block{padding:90px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 54px}
.sec-head h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,3.6vw,2.9rem);color:var(--green);line-height:1.1;margin:14px 0 16px}
.sec-head p{color:#5a5a52;font-size:1.02rem}
/* strip */
.strip{background:var(--green);color:var(--cream)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:38px 28px;text-align:center}
.strip .item .ic{font-family:var(--display);font-size:1.8rem;color:var(--gold)}
.strip .item h4{font-weight:500;font-size:.95rem;margin:8px 0 5px}
.strip .item p{font-size:.8rem;color:rgba(243,234,217,.72);font-weight:300}
/* why choose */
.why{background:var(--cream)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:10px}
.why-card{background:var(--cream-soft);border:1px solid var(--line);padding:32px 26px;transition:transform .3s,box-shadow .3s}
.why-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(48,73,43,.12)}
.why-card .num{font-family:var(--display);font-size:2.6rem;color:var(--gold);font-weight:500;line-height:1}
.why-card h3{font-family:var(--display);font-size:1.4rem;color:var(--green);font-weight:600;margin:12px 0 10px}
.why-card p{font-size:.9rem;color:#62625a}
/* collections */
.collections{background:var(--cream-soft)}
.col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.col-card{background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .3s,box-shadow .3s}
.col-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(48,73,43,.14)}
.col-card .ph{aspect-ratio:5/4;position:relative;overflow:hidden}
.col-card .ph svg{width:100%;height:100%}
/* ============================================================================
   DASHBOARD-UPLOADED SECTION IMAGES
   ----------------------------------------------------------------------------
   .tz-slot-img is added by tisaz_image_or_placeholder() to every uploaded
   section photo (collection cards, gallery tiles, hero, fabrics). Their slot
   containers already have a fixed shape + overflow:hidden, so object-fit:cover
   makes any photo — portrait, landscape, square — fill the slot neatly without
   distortion. .bt-logo is for uploaded brand logos (contained, not cropped).
   ============================================================================ */
.tz-slot-img{width:100%;height:100%;object-fit:cover;display:block}
.brand-tile .bt-logo{max-width:75%;max-height:60%;width:auto;height:auto;object-fit:contain;display:block}
.col-card .body{padding:22px 26px 26px}
.col-card h3{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--green)}
.col-card p{font-size:.88rem;color:#62625a;margin:8px 0 14px}
.col-card .more{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.col-card .more::after{content:"\2192";transition:transform .25s}
.col-card:hover .more::after{transform:translateX(5px)}
/* repairs & alterations */
.repairs{background:var(--cream-soft)}
.repairs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.repairs-card{background:#fff;border:1px solid var(--line);padding:28px 26px;transition:transform .3s,box-shadow .3s,border-color .3s}
.repairs-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(48,73,43,.12);border-color:var(--gold)}
.repairs-card .ric{width:46px;height:46px;margin-bottom:16px}
.repairs-card h3{font-family:var(--display);font-size:1.5rem;color:var(--green);font-weight:600;margin-bottom:8px}
.repairs-card p{font-size:.9rem;color:#62625a}
.repairs-cta{margin-top:46px;background:linear-gradient(135deg,var(--green),var(--green-deep));padding:42px 40px;text-align:center}
.repairs-cta h3{font-family:var(--display);font-size:1.9rem;color:#fff;font-weight:600;margin-bottom:10px}
.repairs-cta p{color:rgba(243,234,217,.85);max-width:46ch;margin:0 auto 24px;font-size:.98rem}
.repairs-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.repairs-btn{display:inline-flex;align-items:center;gap:9px;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;padding:14px 26px;border-radius:2px;transition:all .25s;border:1px solid transparent;cursor:pointer}
.repairs-btn svg{width:18px;height:18px}
.repairs-wa{background:#25D366;color:#fff}
.repairs-wa:hover{background:#1eb958}
.repairs-em{background:transparent;color:var(--cream);border-color:rgba(243,234,217,.5)}
.repairs-em:hover{background:var(--cream);color:var(--green)}
.repairs-note{text-align:center;font-size:.78rem;color:rgba(243,234,217,.65);margin-top:18px}
@media(max-width:920px){.repairs-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.repairs-grid{grid-template-columns:1fr}}
/* process */
.process{background:var(--green-deep);color:var(--cream);overflow:hidden}
.process .sec-head h2{color:#fff}.process .sec-head .eyebrow{color:var(--sand)}.process .sec-head p{color:rgba(243,234,217,.78)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.step{padding:0 20px;position:relative}
.step:not(:last-child)::after{content:"";position:absolute;right:0;top:34px;width:1px;height:calc(100% - 34px);background:rgba(184,150,78,.3)}
.step .n{font-family:var(--display);font-size:2.9rem;font-weight:500;color:var(--gold);line-height:1}
.step h4{font-family:var(--display);font-size:1.3rem;font-weight:600;color:#fff;margin:8px 0 8px}
.step p{font-size:.85rem;color:rgba(243,234,217,.74);font-weight:300}
/* fabrics feature */
.fabrics .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.fabrics-visual{aspect-ratio:1/1;border:1px solid var(--gold);padding:8px;background:#fff}
.fabrics-visual .inner{width:100%;height:100%;position:relative;overflow:hidden}
.fabrics-visual svg{position:absolute;inset:0;width:100%;height:100%}
.fabrics h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,3.4vw,2.8rem);color:var(--green);line-height:1.12;margin:14px 0 16px}
.fabrics p{color:#5a5a52;margin-bottom:18px}
.fabric-chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.fabric-chips span{font-size:.82rem;background:var(--cream);border:1px solid var(--line);color:var(--green);padding:8px 15px;border-radius:2px}
.brands{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.brands .lab{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:500}
.brand-row{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.brand-row b{font-family:var(--display);font-size:1.4rem;color:var(--green);font-weight:600;letter-spacing:.02em}
/* brands we stock */
.brands-sec{background:var(--cream-soft)}
.brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.brand-tile{background:#fff;border:1px solid var(--line);aspect-ratio:3/2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;transition:transform .3s,box-shadow .3s,border-color .3s}
.brand-tile:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(48,73,43,.12);border-color:var(--gold)}
.brand-tile .bt-mark{font-family:var(--display);font-size:1.7rem;font-weight:600;color:var(--green);letter-spacing:.01em;line-height:1.05}
.brand-tile .bt-name{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:9px;font-weight:500}
.brand-foot{text-align:center;font-size:.74rem;color:#9a9a90;margin-top:26px;font-style:italic}
/* floating whatsapp button */
/* z-index raised a lot (was 80) so nothing on the page — or the mobile menu — can ever sit on top of it and hide it */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:9999;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.28);transition:transform .25s,box-shadow .25s}
.wa-float:hover{transform:scale(1.08);box-shadow:0 12px 28px rgba(0,0,0,.34)}
@media(max-width:560px){.wa-float{width:52px;height:52px;right:16px;bottom:16px}}

/* ============================================================================
   WHATSAPP ATTENTION BUBBLE
   ----------------------------------------------------------------------------
   The small speech-bubble that appears next to the WhatsApp button every
   so often (timing/loop is controlled by the script in footer.php — this
   is just what it looks like). Hidden by default (opacity/visibility 0);
   the ".show" class (added/removed by that script) fades it in and out.
   "pointer-events:none" while hidden stops it from blocking clicks on
   whatever's underneath it on the page.
   ============================================================================ */
.wa-bubble{
    position:fixed;
    right:90px; /* sits just to the left of the 58px wa-float button */
    bottom:30px;
    max-width:230px;
    background:#fff;
    color:var(--ink);
    font-family:var(--body);
    font-size:.85rem;
    line-height:1.45;
    padding:12px 30px 12px 16px;
    border-radius:12px;
    box-shadow:0 10px 26px rgba(0,0,0,.2);
    z-index:9998; /* just below the wa-float/back-to-top buttons (9999), still above normal page content */
    opacity:0;
    visibility:hidden;
    transform:translateX(8px);
    transition:opacity .35s ease, transform .35s ease, visibility .35s ease;
    pointer-events:none;
}
.wa-bubble.show{ opacity:1; visibility:visible; transform:translateX(0); pointer-events:auto; }
.wa-bubble-text{ color:var(--ink); display:block; }
.wa-bubble-text:hover{ color:var(--green); }
/* little triangle "speech bubble" pointer aiming at the WhatsApp button */
.wa-bubble::after{
    content:"";
    position:absolute;
    right:-7px;
    top:50%;
    transform:translateY(-50%);
    width:0; height:0;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-left:7px solid #fff;
}
.wa-bubble-close{
    position:absolute;
    top:2px; right:6px;
    background:none;
    border:none;
    font-size:1.1rem;
    line-height:1;
    color:#9a9a90;
    cursor:pointer;
    padding:6px;
}
.wa-bubble-close:hover{ color:#555; }
@media(max-width:560px){
    .wa-bubble{ right:74px; bottom:22px; max-width:175px; font-size:.78rem; padding:10px 26px 10px 14px; }
}
/* measuring & headings guide */
.guide{background:var(--cream)}
.measure-row{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-bottom:64px}
.measure-anim{background:var(--green-deep);padding:24px;border:1px solid var(--gold)}
.measure-svg{width:100%;height:auto;display:block}
.measure-svg .tape-w{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.6s ease forwards}
.measure-svg .tape-d{stroke-dasharray:220;stroke-dashoffset:220;animation:draw 1.6s ease .5s forwards}
.measure-svg .tape-lbl{opacity:0;animation:fadein .6s ease 1.4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
.measure-copy h3{font-family:var(--display);font-size:1.8rem;color:var(--green);font-weight:600;margin-bottom:12px}
.measure-copy p{color:#5a5a52;margin-bottom:14px}
.measure-list{list-style:none;margin:16px 0}
.measure-list li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem;color:#4a4a44}
.measure-list .mk{display:inline-block;min-width:74px;font-weight:600;color:var(--gold);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.measure-note{font-style:italic;color:var(--green);font-size:.92rem}
.headings-title{font-family:var(--display);font-size:1.9rem;color:var(--green);font-weight:600;text-align:center;margin-bottom:32px}
.head-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.head-card{background:var(--cream-soft);border:1px solid var(--line);padding:22px;transition:transform .3s,box-shadow .3s,border-color .3s}
.head-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(48,73,43,.12);border-color:var(--gold)}
.head-anim{background:#fff;border:1px solid var(--line);aspect-ratio:5/3;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:16px}
.head-anim svg{width:90%;height:90%}
.head-card h4{font-family:var(--display);font-size:1.35rem;color:var(--green);font-weight:600;margin-bottom:7px}
.head-card p{font-size:.86rem;color:#62625a}
.head-anim.vid{background:#22351F;cursor:pointer}
.video-slot{border-style:dashed;border-color:var(--gold)}
/* curtain lengths */
.length-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.length-card{text-align:center}
.length-anim{background:#fff;border:1px solid var(--line);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:14px;transition:border-color .3s}
.length-card:hover .length-anim{border-color:var(--gold)}
.length-anim svg{width:78%;height:78%}
.length-card h4{font-family:var(--display);font-size:1.3rem;color:var(--green);font-weight:600;margin-bottom:6px}
.length-card p{font-size:.84rem;color:#62625a;padding:0 4px}
/* design note */
.design-note{margin-top:60px;background:var(--green);border-left:4px solid var(--gold)}
.design-note .dn-inner{padding:38px 40px;max-width:780px}
.design-note .eyebrow{color:var(--sand)}
.design-note h3{font-family:var(--display);font-size:1.8rem;color:#fff;font-weight:600;margin:10px 0 12px}
.design-note p{color:rgba(243,234,217,.88);font-size:.98rem}
.design-note p em{color:var(--gold);font-style:italic}
/* pencil: rise into place */
.pleat-pencil path{stroke-dasharray:90;stroke-dashoffset:90;animation:draw 1.1s ease forwards}
.pleat-pencil path:nth-child(odd){animation-delay:.1s}
.pleat-pencil path:nth-child(even){animation-delay:.3s}
.head-card:hover .pleat-pencil path{animation:sway 1.4s ease-in-out infinite}
@keyframes sway{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
/* pinch: gather pulse */
.pleat-pinch{transform-origin:center;animation:gather 2.6s ease-in-out infinite}
@keyframes gather{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.96)}}
/* eyelet: gentle wave */
.pleat-eyelet path{animation:eyeletwave 3s ease-in-out infinite}
@keyframes eyeletwave{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
/* wave: ripple */
.pleat-wave path{animation:ripple 2.8s ease-in-out infinite}
.pleat-wave path:nth-child(even){animation-delay:.4s}
@keyframes ripple{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
/* tab-top: subtle drop */
.pleat-tab path{stroke-dasharray:120;stroke-dashoffset:120;animation:draw 1.3s ease forwards}
@media(prefers-reduced-motion:reduce){.measure-svg *,.head-anim *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}
/* gallery */
.gallery{background:var(--cream)}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.gal-item{overflow:hidden;position:relative;border:1px solid var(--line)}
.gal-item svg{width:100%;height:100%}
.gal-item .tz-slot-img{position:absolute;inset:0}
.gal-item.tall{grid-row:span 2}
.gal-item.wide{grid-column:span 2}
.gal-cap{position:absolute;left:0;bottom:0;right:0;padding:14px 16px;background:linear-gradient(transparent,rgba(34,53,31,.82));color:var(--cream);font-size:.82rem;letter-spacing:.04em}
/* visit */
.visit{background:linear-gradient(135deg,var(--green) 0%,var(--green-deep) 100%);color:var(--cream)}
.visit .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.visit h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,3.6vw,2.9rem);color:#fff;line-height:1.1;margin:14px 0 16px}
.visit .eyebrow{color:var(--sand)}
.visit p.intro{color:rgba(243,234,217,.86);margin-bottom:22px;max-width:46ch}
.visit .contact-line{display:flex;gap:12px;margin:11px 0;font-size:.95rem}
.visit .contact-line .k{color:var(--gold);width:78px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0;padding-top:2px}
.visit-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.visit-actions .btn-ghost{color:var(--cream);border-color:rgba(243,234,217,.5)}
.visit-actions .btn-ghost:hover{background:var(--cream);color:var(--green)}
.form-card{background:var(--cream-soft);padding:36px 34px;color:var(--ink)}
.form-card h3{font-family:var(--display);font-size:1.7rem;color:var(--green);font-weight:600;margin-bottom:6px}
.form-card .sub{font-size:.86rem;color:#6a6a60;margin-bottom:22px}
.field{margin-bottom:15px}
.field label{display:block;font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:6px;font-weight:500}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border:1px solid var(--line);background:#fff;font-family:var(--body);font-size:.94rem;color:var(--ink);border-radius:2px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold)}
.form-card .btn{width:100%;text-align:center;margin-top:6px}
.form-note{font-size:.72rem;color:#8a8a80;margin-top:12px;text-align:center}
/* faq */
.faq{background:var(--cream-soft)}
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:22px 4px;font-family:var(--display);font-size:1.25rem;color:var(--green);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;font-weight:500}
.faq-q .pm{font-family:var(--body);font-size:1.4rem;color:var(--gold);transition:transform .25s;flex-shrink:0}
.faq-item.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 4px 22px;color:#5a5a52;font-size:.96rem}
/* ============================================================================
   SEARCH RESULTS PAGE (search.php)
   ============================================================================ */
.search-results{background:var(--cream-soft)}
.search-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.search-item{padding:26px 4px;border-bottom:1px solid var(--line)}
.search-item:first-child{border-top:1px solid var(--line)}
.search-item-title{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--green);line-height:1.2;margin-bottom:4px}
.search-item-title a:hover{color:var(--gold)}
.search-item-type{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:10px}
.search-item-excerpt{font-size:.94rem;color:#5a5a52;margin-bottom:12px}
.search-item-more{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:500}
.search-item-more:hover{color:var(--gold)}
.search-empty{max-width:600px;margin:0 auto;text-align:center}
.search-empty p{color:#5a5a52;font-size:1rem;margin-bottom:22px}
.search-form-inline{display:flex;gap:12px;justify-content:center;max-width:480px;margin:0 auto}
.search-form-inline .search-field{flex:1;min-width:0;padding:13px 15px;border:1px solid var(--line);background:#fff;font-family:var(--body);font-size:.96rem;color:var(--ink);border-radius:2px}
.search-form-inline .search-field:focus{outline:none;border-color:var(--gold)}
.search-pagination{max-width:820px;margin:40px auto 0;text-align:center}
.search-pagination .page-numbers{display:inline-block;padding:8px 14px;margin:0 3px;border:1px solid var(--line);color:var(--green);font-size:.9rem;border-radius:2px;transition:all .2s}
.search-pagination .page-numbers:hover{border-color:var(--gold);color:var(--gold)}
.search-pagination .page-numbers.current{background:var(--green);color:var(--cream);border-color:var(--green)}
.search-pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:560px){
    .search-form-inline{flex-direction:column}
    .search-item-title{font-size:1.3rem}
}
/* ============================================================================
   DEFAULT PAGE TEMPLATE (page.php)
   Any page using "Default template" — including shortcode pages like
   Fabric Finder — renders through page.php. These styles ensure the page
   title is properly styled and the content (including shortcodes) has
   clean top spacing.
   ============================================================================ */
.tisaz-default-page{ background:var(--cream-soft); min-height:60vh; }
/* Shortcode-only pages (e.g. Fabric Finder) remove the block's
   90px top/bottom padding so the shortcode controls the layout directly */
.tisaz-shortcode-page{ padding-top:0 !important; padding-bottom:0 !important; }
/* Hide the page h1 when the page is a shortcode page (fabric finder etc.)
   — those provide their own headings. Add class "no-page-title" to the
   page body via WordPress body_class to suppress it, or just let it show. */
.tisaz-page-title{
    font-family:var(--display);
    font-weight:500;
    font-size:clamp(2rem,4vw,3rem);
    color:var(--green);
    margin-bottom:32px;
    line-height:1.1;
}
/* Suppress the page title on pages that contain only a shortcode,
   so it doesn't double-up with the shortcode's own heading */
.tisaz-page-title:empty{ display:none; }
.tisaz-page-content{ max-width:100%; }
/* Prose pages: comfortable line length and readable body size */
.tisaz-page-content > p,.tisaz-page-content > h2,.tisaz-page-content > ul,.tisaz-page-content > ol{
    max-width:72ch;
    font-size:1rem;
    line-height:1.75;
    color:var(--ink);
}
/* footer */
footer{background:var(--green-deep);color:var(--cream);padding:62px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:42px;border-bottom:1px solid rgba(184,150,78,.25)}
footer .brand .name{color:#fff}
footer .brand p{font-size:.88rem;color:rgba(243,234,217,.7);margin-top:16px;max-width:30ch;font-weight:300}
footer h5{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:500}
footer ul{list-style:none}footer ul li{margin-bottom:11px}
footer ul a{font-size:.9rem;color:rgba(243,234,217,.78);transition:color .2s}footer ul a:hover{color:#fff}
/* Contact list with icons */
.foot-contact-list{list-style:none;display:flex;flex-direction:column;gap:13px}
.foot-contact-list li{display:flex;align-items:flex-start;gap:10px}
.foot-icon{width:15px;height:15px;flex-shrink:0;color:var(--gold);opacity:.85;margin-top:3px}
.foot-contact-list a{font-size:.88rem;color:rgba(243,234,217,.80);line-height:1.5;transition:color .2s;text-decoration:none}
.foot-contact-list a:hover{color:#fff}
.foot-social{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
/* Filled colored circle buttons — image-2 style */
.foot-social-btn{
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    transition:transform .2s,opacity .2s;
    text-decoration:none;
}
.foot-social-btn:hover{transform:scale(1.1);opacity:.92}
.foot-social-btn svg{width:18px;height:18px;flex-shrink:0}
/* Platform brand colours */
.foot-social-wa{background:#25D366}
.foot-social-ig{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)}
.foot-social-fb{background:#1877F2}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:.78rem;color:rgba(243,234,217,.55);flex-wrap:wrap;gap:10px}
@media(max-width:980px){
    .why-grid{grid-template-columns:1fr 1fr}
    .steps{grid-template-columns:1fr 1fr 1fr;gap:36px 0}
    .step:nth-child(3)::after{display:none}
}
@media(max-width:920px){
    nav.main{display:none}.menu-toggle{display:block}
    /* The big gold "Book Consultation" button is hidden on mobile to stop it
       crowding/overlapping the logo — it still lives inside the hamburger menu
       (the gold button at the bottom of the mobile dropdown), so it's never lost. */
    header .wrap > .btn-gold{display:none}
    header .wrap{gap:14px}
    .tisaz-logo-img{max-height:52px} /* keep an uploaded logo from eating the row height on mobile */
    .hero .wrap{grid-template-columns:1fr;gap:40px}
    .hero-visual{max-width:420px;margin:0 auto}
    .strip .wrap{grid-template-columns:1fr 1fr;gap:28px}
    .col-grid{grid-template-columns:1fr 1fr}
    .head-grid{grid-template-columns:1fr 1fr}
    .length-grid{grid-template-columns:1fr 1fr}
    .measure-row{grid-template-columns:1fr;gap:32px}
    .brand-grid{grid-template-columns:1fr 1fr 1fr}
    .fabrics .wrap,.visit .wrap{grid-template-columns:1fr;gap:40px}
    .gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
    .gal-item.wide{grid-column:span 1}
    .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:560px){
    .strip .wrap,.col-grid,.why-grid,.steps,.foot-grid,.gal-grid,.head-grid,.length-grid{grid-template-columns:1fr}
    .brand-grid{grid-template-columns:1fr 1fr}
    .step::after{display:none}
    .gal-item.tall{grid-row:span 1}
    .hero h1{font-size:2.5rem}
    .brand .name{font-size:1.5rem} /* smaller text logo so the header row fits comfortably */
    .brand .tag{font-size:.55rem;letter-spacing:.28em}
    .tisaz-logo-img{max-height:46px}
    header .wrap{min-height:64px}
    .wrap{padding:0 18px} /* a little less side padding on small phones = more usable width */
    /* Tuck the "1,000+" badge INSIDE the hero card's bottom-left corner on phones.
       On desktop it hangs slightly outside (left:-26px) for style, but on a narrow
       stacked layout that negative offset made it overlap the buttons/text above —
       positive offsets keep it neatly inside the card. */
    .hero-badge{left:12px;bottom:12px;padding:12px 16px}
    .hero-badge .num{font-size:1.6rem}
}

/* ============================================================================
   MOBILE DROPDOWN MENU
   ----------------------------------------------------------------------------
   On phones/tablets (920px and below) the normal top nav is hidden and the
   hamburger button (.menu-toggle) is shown instead. Clicking it toggles the
   ".open" class on #mobileNav (see the script at the bottom of footer.php).
   The "always hidden by default" rule lives just above (with .menu-toggle) —
   this block only adds the look/position, and the rule that reveals it again
   once .open is added.
   ============================================================================ */
@media(max-width:920px){
    .mobile-nav{
        position:absolute;
        top:100%; left:0; right:0;
        background:var(--cream-soft);
        border-bottom:1px solid var(--line);
        box-shadow:0 16px 28px rgba(0,0,0,.14);
        padding:10px 28px 22px;
        flex-direction:column;
        max-height:80vh;
        overflow-y:auto;
        z-index:60; /* sits above page content, below the wa-float/back-to-top buttons */
    }
    .mobile-nav.open{ display:flex; } /* JS adds the "open" class on click */
    .mobile-nav a{
        padding:13px 4px;
        font-size:1rem;
        color:var(--green);
        border-bottom:1px solid var(--line);
    }
    .mobile-nav a:last-of-type{ border-bottom:none; }
    .mobile-nav .mobile-nav-cta{
        text-align:center;
        margin-top:12px;
        border-bottom:none;
    }
}

/* ============================================================================
   BACK-TO-TOP BUTTON
   ----------------------------------------------------------------------------
   Small round arrow button, bottom-right, sitting just above the WhatsApp
   button. It's invisible until the visitor scrolls down a bit (JS in
   footer.php adds the "show" class once they pass ~400px), then fades in.
   Clicking it smooth-scrolls back to the top of the page.
   ============================================================================ */
.back-to-top{
    position:fixed;
    right:22px;
    bottom:92px; /* sits directly above the 58px WhatsApp button + a small gap */
    z-index:9999;
    width:46px;
    height:46px;
    border-radius:50%;
    border:none;
    background:var(--green);
    color:var(--cream);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--green-deep); }
@media(max-width:560px){
    .back-to-top{ width:42px; height:42px; right:16px; bottom:76px; }
}

/* ============================================================================
   DASHBOARD LOGO IMAGES (Theme Options → Header & Topbar)
   ----------------------------------------------------------------------------
   - "Logo Image"        → shown in the header at full colour, up to 64px tall.
   - "Footer Logo Image" → shown in the footer AS-IS (no colour filter), capped
                            at 40px tall AND 170px wide. BOTH limits matter: a
                            wide logo would otherwise stretch too far if only the
                            height were limited. Upload a white/light version of
                            your logo here (one made to sit on the dark green
                            footer). If you leave this empty, the footer shows the
                            crisp white TEXT logo instead — which always looks
                            sharp. We no longer force-white a detailed logo with a
                            CSS filter, because that made fine script lettering
                            look faint and ghostly.
   ============================================================================ */
.tisaz-logo-img{display:block;max-height:64px;width:auto}
.tisaz-logo-img.footer-logo-plain{max-height:40px;max-width:170px;width:auto;height:auto;}
/* When the "Make footer logo white" toggle is on, recolour the uploaded logo to
   solid white so it's visible on the dark green footer. brightness(0) forces
   every pixel black, then invert(1) flips black to white — works on any logo. */
.tisaz-logo-img.footer-logo-white{filter:brightness(0) invert(1);}