/* ===========================================================
   CASA FLORA — PAGE LAYOUTS
   =========================================================== */

/* ===========================================================
   CASA FLORA — SECTION MEDIA
   Full-bleed cinematic background (video or still) for any
   section, so no stretch of the site sits on flat colour alone.
   =========================================================== */
.section-media{position:relative;overflow:hidden;isolation:isolate;}
.section-media-bg{position:absolute;inset:0;z-index:0;}
.section-media-bg video,.section-media-bg img{width:100%;height:100%;object-fit:cover;filter:var(--video-filter) brightness(.5) saturate(1.05);}
.section-media-scrim{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(11,16,13,.42) 14%, rgba(11,16,13,.7) 86%, var(--ink) 100%);
}
.section-media-scrim.scrim-tight{background:linear-gradient(180deg, var(--ink) 0%, rgba(11,16,13,.55) 22%, rgba(11,16,13,.78) 78%, var(--ink) 100%);}
.section-media > .wrap,.section-media > .wrap-narrow{position:relative;z-index:1;}
.section-media.dim-strong .section-media-bg{filter:brightness(.4);}

/* card-level texture (used on text-only panels so nothing reads flat) */
.panel-bg{opacity:.24;filter:saturate(.85) brightness(.9);}
.panel:hover .panel-bg{opacity:.32;}

/* ============ HERO (video/kenburns) ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;}
.hero-bg{position:absolute;inset:0;z-index:var(--z-bg);}
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover;filter:var(--video-filter);}
.hero-scrim{position:absolute;inset:0;z-index:var(--z-scrim);
  background:
    linear-gradient(180deg, rgba(9,13,10,.5) 0%, rgba(9,13,10,.18) 30%, rgba(9,13,10,.6) 68%, var(--ink) 100%),
    linear-gradient(90deg, rgba(9,13,10,.6) 0%, rgba(9,13,10,.02) 48%);
}
.hero-inner{width:100%;padding-bottom:clamp(2.5rem,6vw,4.5rem);padding-top:9rem;position:relative;z-index:1;}
.hero-eyebrow{margin-bottom:1.3rem;}
.hero h1{font-size:clamp(2.5rem,6.2vw,5.2rem);line-height:1.04;max-width:15ch;}
.hero-sub{margin-top:1.6rem;max-width:38em;font-size:1.04rem;color:var(--ivory-dim);}
.hero-actions{margin-top:2.3rem;display:flex;flex-wrap:wrap;gap:1rem;}
.hero-meta{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sage);}
.hero-meta li{display:flex;align-items:center;gap:.5rem;}
.hero-meta li::before{content:"";width:4px;height:4px;background:var(--sage);border-radius:50%;}
.scroll-cue{position:absolute;right:var(--gutter);bottom:2.2rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim);writing-mode:vertical-rl;z-index:2;}
.scroll-cue .line{width:1px;height:50px;background:linear-gradient(var(--gold-soft),transparent);writing-mode:horizontal-tb;}
.hero-sound-toggle{position:absolute;left:var(--gutter);bottom:2.2rem;z-index:2;}

/* short page-title hero (interior pages) */
.page-hero{position:relative;min-height:58vh;display:flex;align-items:flex-end;overflow:hidden;padding-top:8rem;}
.page-hero .hero-bg{opacity:.9;}
.page-hero-inner{position:relative;z-index:1;padding-bottom:3.5rem;width:100%;}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.8rem);max-width:20ch;}
.breadcrumb{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-faint);margin-bottom:1rem;display:flex;gap:.5rem;align-items:center;}
.breadcrumb a:hover{color:var(--ivory);}

/* ============ ABOUT / STORY SPLIT ============ */
.about-grid{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;}
.about-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow);}
.about-media img,.about-media video{width:100%;height:100%;object-fit:cover;}
.about-media .tag{position:absolute;left:1.2rem;bottom:1.2rem;background:var(--scrim-strong);backdrop-filter:blur(6px);padding:.6rem 1rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);color:var(--ivory);}
.about-copy h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-top:.6rem;max-width:15ch;}
.about-copy p{margin-top:1.3rem;color:var(--ivory-dim);max-width:46em;font-size:1rem;}
.about-pills{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem;}
.about-pills li{border:1px solid var(--line);padding:.55rem 1rem;font-size:.8rem;color:var(--ivory-dim);border-radius:2px;}

/* ============ PROCESS STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;counter-reset:step;}
.step{position:relative;padding:1.8rem 1.5rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);}
.step .num{font-family:var(--font-display);font-style:italic;font-size:2.4rem;color:var(--gold-dim);opacity:.7;}
.step h3{margin-top:.6rem;font-size:1.1rem;}
.step p{margin-top:.6rem;font-size:.86rem;color:var(--ivory-dim);}
.step-line{position:absolute;top:2.3rem;left:100%;width:1.6rem;height:1px;background:var(--line-strong);}
.step:last-child .step-line{display:none;}

/* ============ FILTER / SEARCH BAR (collections) ============ */
.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line);}
.filter-chips{display:flex;flex-wrap:wrap;gap:.55rem;}
.chip{border:1px solid var(--line-strong);padding:.5rem 1.05rem;font-size:.82rem;border-radius:30px;color:var(--ivory-dim);transition:all .3s;}
.chip:hover{border-color:var(--gold-soft);color:var(--ivory);}
.chip.is-active{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--ink);font-weight:600;}
.sort-select{position:relative;}
.sort-select select{appearance:none;background:var(--surface);border:1px solid var(--line-strong);color:var(--ivory);padding:.6rem 2.2rem .6rem 1rem;border-radius:30px;font-size:.82rem;}
.sort-select::after{content:"↓";position:absolute;right:.9rem;top:50%;transform:translateY(-50%);pointer-events:none;font-size:.7rem;color:var(--ivory-faint);}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;}
.results-count{font-family:var(--font-mono);font-size:.72rem;color:var(--ivory-faint);text-transform:uppercase;letter-spacing:.06em;}

/* price range slider */
.range-field{display:flex;flex-direction:column;gap:.6rem;min-width:220px;}
.range-field .row{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.72rem;color:var(--ivory-faint);}
.range-field input[type=range]{width:100%;accent-color:var(--gold-soft);}

/* ============ SCENT RADAR (SVG mini-chart) ============ */
.scent-radar{width:100%;height:auto;}
.scent-radar polygon{fill:var(--gold-soft);fill-opacity:.22;stroke:var(--gold-soft);stroke-width:1.4;}
.scent-radar .grid{fill:none;stroke:var(--line);stroke-width:1;}
.scent-radar text{font-family:var(--font-mono);font-size:6.5px;fill:var(--ivory-faint);text-transform:uppercase;letter-spacing:.05em;}

/* ============ 3D SEASONAL WHEEL ============ */
.wheel-stage{perspective:1400px;display:flex;align-items:center;justify-content:center;min-height:420px;position:relative;}
.wheel{position:relative;width:230px;height:230px;transform-style:preserve-3d;transform:rotateX(-8deg);animation:wheelSpin 34s linear infinite;}
.wheel:hover{animation-play-state:paused;}
.wheel-card{position:absolute;inset:0;margin:auto;width:180px;height:120px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;backface-visibility:hidden;box-shadow:var(--shadow);}
.wheel-card .flower-name{font-family:var(--font-display);font-style:italic;font-size:1.05rem;}
.wheel-card .season{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);}
@keyframes wheelSpin{from{transform:rotateX(-8deg) rotateY(0deg);}to{transform:rotateX(-8deg) rotateY(360deg);}}
@media (prefers-reduced-motion:reduce){.wheel{animation:none;}}
.wheel-hint{position:absolute;bottom:-2.2rem;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:.66rem;color:var(--ivory-faint);text-transform:uppercase;letter-spacing:.08em;}

/* ============ BESPOKE FORM ============ */
.bespoke-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:flex-start;}
.bespoke-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.4rem);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.form-grid .span-2{grid-column:1/-1;}
.budget-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;}
.budget-opt{border:1px solid var(--line-strong);padding:.8rem .5rem;text-align:center;border-radius:6px;font-size:.82rem;transition:all .25s;cursor:pointer;}
.budget-opt:hover{border-color:var(--gold-soft);}
.budget-opt.is-active{border-color:var(--gold-soft);background:rgba(201,161,94,.1);color:var(--gold-soft);}
.form-progress{display:flex;gap:.4rem;margin-bottom:1.6rem;}
.form-progress span{height:3px;flex:1;background:var(--line);border-radius:3px;overflow:hidden;position:relative;}
.form-progress span.done::after,.form-progress span.active::after{content:"";position:absolute;inset:0;background:var(--gold-soft);}
.form-progress span.active::after{animation:none;}

/* ============ DASHBOARD ============ */
.dash-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh;padding-top:0;}
.dash-side{background:var(--ink-1);border-right:1px solid var(--line);padding:1.6rem 1.3rem;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2rem;}
.dash-side .brand{padding:0 .3rem;}
.dash-nav{display:flex;flex-direction:column;gap:.2rem;}
.dash-nav a{display:flex;align-items:center;gap:.8rem;padding:.75rem .8rem;border-radius:6px;font-size:.9rem;color:var(--ivory-dim);transition:background .25s,color .25s;}
.dash-nav a svg{width:17px;height:17px;flex:none;}
.dash-nav a:hover{background:rgba(255,255,255,.04);color:var(--ivory);}
.dash-nav a.is-active{background:rgba(201,161,94,.12);color:var(--gold-soft);}
.dash-side-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:1.2rem;}
.dash-user{display:flex;align-items:center;gap:.7rem;}
.dash-user img{width:38px;height:38px;border-radius:50%;object-fit:cover;}
.dash-user .name{font-size:.86rem;color:var(--ivory);}
.dash-user .tier{font-size:.72rem;color:var(--gold-soft);font-family:var(--font-mono);}

.dash-main{padding:0 0 5rem;}
.dash-banner{position:relative;overflow:hidden;padding:2.6rem clamp(1.3rem,3vw,3rem) 2.2rem;margin-bottom:2rem;border-bottom:1px solid var(--line);}
.dash-banner .section-media-bg img,.dash-banner .section-media-bg video{filter:var(--video-filter) brightness(.4) saturate(1.05);}
.dash-banner-inner{position:relative;z-index:1;}
.dash-body{padding:0 clamp(1.3rem,3vw,3rem);}
.dash-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.2rem;flex-wrap:wrap;gap:1rem;}
.dash-topbar h1{font-size:1.7rem;}
.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.6rem;}
.dash-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem;}
.dash-card h3{font-size:1.05rem;margin-bottom:1rem;}
.dash-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem;}
.dash-card-head a{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-soft);}

/* loyalty bar */
.loyalty-bar{height:8px;background:var(--ink-3);border-radius:8px;overflow:hidden;margin:.9rem 0;}
.loyalty-fill{height:100%;background:linear-gradient(90deg, var(--sage), var(--gold-soft));border-radius:8px;transition:width 1.4s var(--ease-soft);width:0%;}
.loyalty-tiers{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;color:var(--ivory-faint);}

/* order timeline */
.order-timeline{display:flex;justify-content:space-between;position:relative;margin:1.6rem 0 .6rem;}
.order-timeline::before{content:"";position:absolute;top:15px;left:5%;right:5%;height:2px;background:var(--line);}
.order-timeline .tl-fill{content:"";position:absolute;top:15px;left:5%;height:2px;background:var(--gold-soft);width:0%;transition:width 1.6s var(--ease-soft);}
.tl-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.6rem;flex:1;}
.tl-step .node{width:32px;height:32px;border-radius:50%;background:var(--ink-3);border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center;transition:all .4s;}
.tl-step.done .node{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--ink);}
.tl-step.current .node{border-color:var(--gold-soft);animation:pulseNode 1.8s ease infinite;}
@keyframes pulseNode{0%,100%{box-shadow:0 0 0 0 rgba(201,161,94,.4);}50%{box-shadow:0 0 0 8px rgba(201,161,94,0);}}
.tl-step .lbl{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ivory-faint);text-align:center;max-width:8ch;}
.tl-step.done .lbl,.tl-step.current .lbl{color:var(--ivory);}

/* mood boards */
.moodboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;}
.moodboard{aspect-ratio:1;border-radius:8px;overflow:hidden;position:relative;}
.moodboard img{width:100%;height:100%;object-fit:cover;}
.moodboard .lbl{position:absolute;left:.6rem;bottom:.6rem;font-size:.72rem;color:#fff;background:rgba(0,0,0,.4);padding:.2rem .55rem;border-radius:10px;}

/* subscription card */
.sub-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem;display:flex;justify-content:space-between;align-items:center;background:var(--ink-2);}
.sub-card .plan{font-family:var(--font-display);font-style:italic;font-size:1.15rem;}
.sub-card .freq{font-size:.78rem;color:var(--ivory-faint);}
.sub-status{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;color:var(--sage);}
.sub-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage);}

/* AI concierge teaser */
.ai-teaser{border:1px dashed var(--line-strong);border-radius:var(--radius-lg);padding:1.4rem;display:flex;gap:1rem;align-items:flex-start;background:linear-gradient(135deg, rgba(201,161,94,.06), transparent);}
.ai-teaser .icon{width:42px;height:42px;border-radius:50%;background:var(--ink-3);display:flex;align-items:center;justify-content:center;flex:none;}
.ai-teaser h4{font-size:.98rem;}
.ai-teaser p{font-size:.82rem;color:var(--ivory-dim);margin-top:.4rem;}
.ai-teaser .soon{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft);border:1px solid var(--gold-dim);padding:.2rem .5rem;border-radius:20px;margin-left:.6rem;}

/* reorder shelf */
.reorder-row{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.4rem;}
.reorder-item{flex:none;width:150px;}
.reorder-item .media{aspect-ratio:4/5;border-radius:8px;overflow:hidden;}
.reorder-item .media img{width:100%;height:100%;object-fit:cover;}
.reorder-item .name{font-size:.84rem;margin-top:.5rem;}
.reorder-item .price{font-family:var(--font-mono);font-size:.74rem;color:var(--gold-soft);}

/* KPI mini cards */
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.6rem;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.2rem 1.3rem;}
.kpi .lbl{font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;color:var(--ivory-faint);letter-spacing:.06em;}
.kpi .val{font-family:var(--font-display);font-size:1.7rem;margin-top:.35rem;}
.kpi .delta{font-size:.74rem;color:var(--sage);margin-top:.2rem;}

.dash-mobile-bar{display:none;}

@media (max-width:1080px){
  .dash-grid{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .dash-shell{grid-template-columns:1fr;}
  .dash-side{display:none;}
  .dash-mobile-bar{display:flex;position:sticky;top:0;z-index:20;background:var(--scrim-strong);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:1rem var(--gutter);justify-content:space-between;align-items:center;}
  .dash-main{padding-top:1.6rem;}
}

/* ============ CONTACT / VISIT ============ */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);}
.map-box{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3.4;border:1px solid var(--line);background:var(--ink-2);}
.map-box svg{width:100%;height:100%;}
.map-pin{position:absolute;left:50%;top:44%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;}
.map-pin .dot{width:16px;height:16px;border-radius:50%;background:var(--wine-light);border:3px solid var(--ivory);box-shadow:0 0 0 6px rgba(162,79,91,.22);animation:pinPulse 2.2s ease infinite;}
@keyframes pinPulse{0%,100%{box-shadow:0 0 0 6px rgba(162,79,91,.22);}50%{box-shadow:0 0 0 12px rgba(162,79,91,.06);}}
.map-card{position:absolute;left:1rem;bottom:1rem;right:1rem;background:var(--scrim-strong);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:8px;padding:1rem 1.1rem;}

.hours-table{width:100%;border-collapse:collapse;margin-top:1rem;}
.hours-table td{padding:.6rem 0;border-bottom:1px dashed var(--line);font-size:.9rem;}
.hours-table td:first-child{color:var(--ivory-faint);font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;}
.hours-table td:last-child{text-align:right;}

.placeholder-note{display:flex;gap:.6rem;align-items:flex-start;background:rgba(201,161,94,.08);border:1px solid var(--gold-dim);border-radius:8px;padding:.9rem 1rem;font-size:.82rem;color:var(--ivory-dim);margin-top:1rem;}
.placeholder-note svg{flex:none;width:16px;height:16px;color:var(--gold-soft);margin-top:.15rem;}

@media (max-width:900px){
  .about-grid,.bespoke-layout,.contact-grid,.panels{grid-template-columns:1fr;}
  .products-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr 1fr;}
  .step-line{display:none;}
  .form-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .products-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .kpi-row{grid-template-columns:1fr;}
  .budget-options{grid-template-columns:1fr 1fr;}
}