/* ==========================================================================
   HUPDUCON INTERIORS — Design System
   Palette pulled from the mark: deep teal monogram + terracotta vine flourish.
   Display: Fraunces (echoes the serif weight of the wordmark)
   Body:    Inter
   Script:  Petit Formal Script — used once, sparingly, like the logo's own script
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Petit+Formal+Script&display=swap');

   :root{
     /* --- color --- */
     --teal-950:#0A3E35;
     --teal-800:#0D5548;
     --teal-700:#0F6B5C;
     --teal-600:#16816F;
     --teal-100:#E3EFEC;
     --terracotta-600:#C4703B;
     --terracotta-500:#DD8A52;
     --terracotta-100:#FBEADC;
     --terracotta-bright: #ff6300;
     --cream-50:#FBF7F1;
     --sand-200:#E9E0D2;
     --sand-300:#DCD0BC;
     --ink-900:#1B211E;
     --ink-600:#4B564F;
     --white:#FFFFFF;
   
     /* --- type --- */
     --font-display: 'Fraunces', Georgia, serif;
     --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     --font-script: 'Petit Formal Script', cursive;
   
     /* --- layout --- */
     --radius-sm: 3px;
     --radius-md: 6px;
     --max-width: 1240px;
     --space-1: .5rem;
     --space-2: 1rem;
     --space-3: 1.5rem;
     --space-4: 2.5rem;
     --space-5: 4rem;
     --space-6: 6rem;
   }
   
   *,*::before,*::after{ box-sizing:border-box; }
   html{ scroll-behavior:smooth; }
   body{
     margin:0;
     font-family:var(--font-body);
     color:var(--ink-900);
     background:var(--cream-50);
     line-height:1.55;
     -webkit-font-smoothing:antialiased;
   }
   img{ max-width:100%; display:block; }
   a{ color:inherit; text-decoration:none; }
   ul{ margin:0; padding:0; list-style:none; }
   button{ font-family:inherit; cursor:pointer; }
   input,select,textarea{ font-family:inherit; font-size:1rem; }
   
   h1,h2,h3,h4{
     font-family:var(--font-display);
     font-weight:600;
     line-height:1.12;
     margin:0 0 .5em;
     color:var(--teal-950);
     letter-spacing:-0.01em;
   }
   h1{ font-size:clamp(2.2rem, 4vw, 3.4rem); font-weight:500; }
   h2{ font-size:clamp(1.6rem, 2.6vw, 2.2rem); }
   h3{ font-size:1.25rem; }
   p{margin:0 0 1em;color: #fff;}
   
   .container{ max-width:var(--max-width); margin:0 auto; padding:0 var(--space-3); }
   .section{ padding:var(--space-6) 0; }
   .section-tight{ padding:var(--space-4) 0; }
   
   /* eyebrow label used above section headings — small caps + wide tracking, not a numbered marker */
   .eyebrow{
     display:inline-block;
     font-size:.72rem;
     font-weight:600;
     letter-spacing:.14em;
     text-transform:uppercase;
     color: #000;
     margin-bottom:.6em;
   }
   .script-accent{
     font-family:var(--font-script);
     font-size:1.5em;
     color: var(--terracotta-bright);
     font-weight: 700;
   }
   
   /* --- signature element: the vine rule, echoing the logo's flourish --- */
   .vine-rule{ display:block; width:100%; height:28px; margin:var(--space-2) 0; overflow:visible; }
   .vine-rule path{
     fill:none; stroke:var(--terracotta-500); stroke-width:2; stroke-linecap:round;
     stroke-dasharray:600; stroke-dashoffset:600;
     animation:draw-vine 1.4s ease forwards;
   }
   @keyframes draw-vine{ to{ stroke-dashoffset:0; } }
   @media (prefers-reduced-motion: reduce){
     .vine-rule path{ animation:none; stroke-dashoffset:0; }
   }
   
   /* --- buttons --- */
   .btn{
     display:inline-flex; align-items:center; justify-content:center; gap:.5em;
     padding:.85em 1.6em;
     font-size:.92rem; font-weight:600;
     border-radius:var(--radius-sm);
     border:1px solid transparent;
     transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
   }
   .btn:active{ transform:translateY(1px); }
   .btn-primary{ background:var(--teal-800); color:var(--white); }
   .btn-primary:hover{ background:var(--teal-950); }
   .btn-accent{ background:var(--terracotta-500); color:var(--white); }
   .btn-accent:hover{ background:var(--terracotta-600); }
   .btn-ghost{background:transparent;border-color:var(--sand-300);color: #fff;}
   .btn-ghost:hover{ border-color:var(--teal-700); }
   .btn-danger{ background:#FBE3E0; color:#A8402F; }
   .btn-danger:hover{ background:#F6CFC9; }
   .btn-sm{ padding:.4rem .75rem; font-size:.8rem; }
   .btn-block{ width:100%; }
   .btn:disabled{ opacity:.45; cursor:not-allowed; }
   
   /* --- nav --- */
   .site-header{
     position:sticky; top:0; z-index:50;
     background:rgba(251,247,241,.92); backdrop-filter:blur(8px);
     border-bottom:1px solid var(--sand-200);
   }
   .nav-row{ display:flex; align-items:center; justify-content:space-between; padding:1rem var(--space-3); max-width:var(--max-width); margin:0 auto; }
   .brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:1.35rem; color:var(--teal-950); font-weight:600; }
   .brand small{ display:block; font-family:var(--font-script); font-size:.85rem; color:var(--terracotta-500); font-weight:400; margin-top:-2px; }
   .nav-links{ display:flex; gap:1.8rem; align-items:center; }
   .nav-links a{
     font-size:.92rem; font-weight:500; color:var(--ink-900); position:relative; padding:.3rem 0;
   }
   .nav-links a.active, .nav-links a:hover{ color:var(--teal-700); }
   .nav-links a.active::after{
     content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--terracotta-500); border-radius:2px;
   }
   .nav-cart{ position:relative; display:flex; align-items:center; gap:.4rem; }
   .cart-badge{
     background:var(--terracotta-500); color:#fff; font-size:.68rem; font-weight:700;
     border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center;
   }
   .mobile-toggle{ display:none; }
   
   @media (max-width: 860px){
     .nav-links{ position:fixed; inset:64px 0 0 0; background:var(--cream-50); flex-direction:column; padding:2rem; gap:1.4rem; transform:translateX(100%); transition:transform .25s ease; }
     .nav-links.open{ transform:translateX(0); }
     .mobile-toggle{ display:block; background:none; border:0; font-size:1.4rem; }
   }
   
   /* --- hero --- */
   .hero {
     position: relative;
     /*background: url(../img/hero-bg-image.jpg) !important;*/
     padding:var(--space-1) 0 var(--space-1);
   }
   .hero::before { 
     position: absolute !important;
     content: "";
     top: 0 !important; 
     left: 0 !important; 
     width: 100% !important; 
     height: 100% !important;
     background: url(../img/hero-bg-image.jpg) !important;
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
     /*background: linear-gradient(180deg, var(--teal-100) 0%, var(--cream-50) 78%) !important; */
     z-index: 1 !important;
     /*filter: blur(1px) brightness(121%) grayscale(50%);*/
   }
   
   .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-5); align-items:center; position: relative; z-index: 1;
     padding: 2rem;}
   .hero-grid::before {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     background: linear-gradient(180deg, var(--teal-100) 0%, var(--cream-50) 78%);
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0.5;
     border-radius: 28px;
     filter: blur(35px) brightness(0%) grayscale(50%);
   }
   @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
   .hero h1{ margin-bottom:.4em; }
   .hero .lede{ font-size:1.1rem; max-width:46ch; }
   .pillars{ display:flex; gap:1rem; margin-top:var(--space-3); flex-wrap:wrap; }
   .pillar-chip{
     display:flex; align-items:center; gap:.5rem;
     background:var(--white); border:1px solid var(--sand-200);
     padding:.65rem 1rem; border-radius:var(--radius-md); font-size:.88rem; font-weight:600; color:var(--teal-800);
   }
   
   /* --- verticals hub cards --- */
   .hub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
   @media (max-width:860px){ .hub-grid{ grid-template-columns:1fr; } }
   .hub-card{
     background:var(--white); border:1px solid var(--sand-200); border-radius:var(--radius-md);
     padding:var(--space-3); display:flex; flex-direction:column; gap:.7rem; transition:border-color .15s ease, transform .15s ease;
   }
   .hub-card:hover{ border-color:var(--teal-700); transform:translateY(-3px); }
   .hub-card .tag{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--terracotta-600); }
   .hub-card .go{ margin-top:auto; font-weight:600; color:var(--teal-700); font-size:.9rem; }
   
   /* --- generic card / grid --- */
   .card{ background:var(--white); border:1px solid var(--sand-200); border-radius:var(--radius-md); overflow:hidden; }
   .grid{ display:grid; gap:var(--space-3); }
   .grid-2{ grid-template-columns:repeat(2,1fr); }
   .grid-3{ grid-template-columns:repeat(3,1fr); }
   .grid-4{ grid-template-columns:repeat(4,1fr); }
   @media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
   @media (max-width:560px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }
   
   /* --- product card (fashion) --- */
   .product-card .thumb{ aspect-ratio:4/5; background:var(--teal-100); overflow:hidden; }
   .product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
   .product-card:hover .thumb img{ transform:scale(1.04); }
   .product-card .body{ padding:1rem 1.1rem 1.2rem; }
   .price{ font-weight:700; color:var(--teal-800); }
   .price-was{ text-decoration:line-through; color:var(--ink-600); font-weight:400; font-size:.85em; margin-left:.4em; }
   
   /* --- swatches / size selectors --- */
   .opt-group{ margin:.7rem 0; }
   .opt-label{ font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-600); margin-bottom:.4rem; display:block; }
   .swatches{ display:flex; gap:.5rem; flex-wrap:wrap; }
   .swatch{
     border:1px solid var(--sand-300); background:var(--white); padding:.5rem .9rem; border-radius:var(--radius-sm);
     font-size:.85rem; font-weight:600;
   }
   .swatch.selected, .swatch:hover{ border-color:var(--teal-700); color:var(--teal-800); background:var(--teal-100); }
   .swatch:disabled{ opacity:.35; text-decoration:line-through; cursor:not-allowed; }
   
   /* --- lookbook zoom --- */
   .zoom-stage{ position:relative; border-radius:var(--radius-md); overflow:hidden; background:var(--teal-100); cursor:zoom-in; aspect-ratio:4/5; }
   .zoom-stage img{ width:100%; height:100%; object-fit:cover; transition:transform .12s ease-out; transform-origin:center; }
   .zoom-stage.zoomed{ cursor:zoom-out; }
   .zoom-stage.zoomed img{ transform:scale(1.9); }
   .thumb-row{ display:flex; gap:.6rem; margin-top:.7rem; }
   .thumb-row img{ width:64px; height:76px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--sand-200); cursor:pointer; }
   .thumb-row img.active{ border-color:var(--teal-700); }
   
   /* --- service / booking --- */
   .service-card .price-tag{ font-family:var(--font-display); font-size:1.3rem; color:var(--teal-800); }
   .staff-picker{ display:flex; gap:.8rem; flex-wrap:wrap; }
   .staff-option{
     border:1px solid var(--sand-300); border-radius:var(--radius-md); padding:.8rem 1rem; text-align:left;
     background:var(--white); min-width:160px;
   }
   .staff-option.selected{ border-color:var(--teal-700); background:var(--teal-100); }
   .staff-option .name{ font-weight:700; font-size:.92rem; }
   .staff-option .role{ font-size:.78rem; color:var(--ink-600); }
   
   .calendar{ border:1px solid var(--sand-200); border-radius:var(--radius-md); overflow:hidden; }
   .calendar-head{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; background:var(--teal-950); color:#fff; }
   .calendar-head button{ background:none; border:0; color:#fff; font-size:1rem; }
   .calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); }
   .calendar-grid .dow{ text-align:center; font-size:.7rem; font-weight:700; color:var(--ink-600); padding:.5rem 0; text-transform:uppercase; }
   .calendar-grid .day{
     aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.88rem;
     border-top:1px solid var(--sand-200); background:var(--white);
   }
   .calendar-grid .day.disabled{ color:#c9c2b3; }
   .calendar-grid .day.selectable{ cursor:pointer; }
   .calendar-grid .day.selectable:hover{ background:var(--teal-100); }
   .calendar-grid .day.selected{ background:var(--teal-700); color:#fff; font-weight:700; }
   .slot-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:.8rem; }
   @media(max-width:560px){ .slot-grid{ grid-template-columns:repeat(2,1fr); } }
   .slot-btn{ border:1px solid var(--sand-300); background:#fff; padding:.6rem; border-radius:var(--radius-sm); font-size:.85rem; font-weight:600; }
   .slot-btn.selected{ background:var(--teal-800); color:#fff; border-color:var(--teal-800); }
   .slot-btn:disabled{ opacity:.3; text-decoration:line-through; }
   .addon-row{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--sand-200); }
   .addon-row:last-child{ border-bottom:0; }
   
   /* --- restaurant --- */
   .menu-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:var(--space-3); }
   .menu-tab{ padding:.55rem 1.1rem; border:1px solid var(--sand-300); border-radius:999px; font-size:.85rem; font-weight:600; background:#fff; }
   .menu-tab.active{ background:var(--teal-800); color:#fff; border-color:var(--teal-800); }
   .menu-item{ display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--sand-200); align-items:center; }
   .menu-item img{ width:84px; height:84px; object-fit:cover; border-radius:var(--radius-sm); background:var(--teal-100); }
   .menu-item .info{ flex:1; }
   .qty-stepper{ display:flex; align-items:center; border:1px solid var(--sand-300); border-radius:var(--radius-sm); }
   .qty-stepper button{ background:none; border:0; width:32px; height:32px; font-size:1rem; }
   .qty-stepper input{ width:34px; text-align:center; border:0; background:none; }
   .status-track{ display:flex; justify-content:space-between; margin:var(--space-3) 0; }
   .status-step{ flex:1; text-align:center; position:relative; font-size:.78rem; font-weight:600; color:var(--ink-600); }
   .status-step::before{ content:''; display:block; width:14px; height:14px; border-radius:50%; background:var(--sand-300); margin:0 auto .5rem; }
   .status-step.done::before{ background:var(--teal-700); }
   .status-step.current::before{ background:var(--terracotta-500); box-shadow:0 0 0 4px var(--terracotta-100); }
   
   /* --- cart / checkout --- */
   .cart-line{ display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--sand-200); align-items:center; }
   .cart-line .meta{ font-size:.8rem; color:var(--ink-600); }
   .type-pill{ font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.2rem .5rem; border-radius:999px; }
   .type-pill.fashion{ background:var(--terracotta-100); color:var(--terracotta-600); }
   .type-pill.service{ background:var(--teal-100); color:var(--teal-800); }
   .type-pill.food{ background:#F1E9D8; color:#8A6A2A; }
   .summary-row{ display:flex; justify-content:space-between; padding:.4rem 0; font-size:.92rem; }
   .summary-row.total{ font-weight:700; font-size:1.1rem; border-top:1px solid var(--sand-300); padding-top:.8rem; margin-top:.4rem; color:var(--teal-950); }
   
   /* --- forms --- */
   .field{ margin-bottom:1rem; }
   .field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.35rem; color:var(--ink-900); }
   .field input, .field select, .field textarea{
     width:100%; padding:.7rem .85rem; border:1px solid var(--sand-300); border-radius:var(--radius-sm); background:#fff; color:var(--ink-900);
   }
   .field input:focus, .field select:focus, .field textarea:focus, a:focus-visible, button:focus-visible{
     outline:2px solid var(--teal-700); outline-offset:2px;
   }
   
   /* --- footer --- */
   .site-footer{ background:var(--teal-950); color:#DCEAE6; padding:var(--space-5) 0 var(--space-3); margin-top:var(--space-6); }
   .site-footer a{ color:#DCEAE6; }
   .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-3); }
   @media(max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
   .site-footer h4{ color:#fff; font-size:.9rem; margin-bottom:.8rem; }
   .site-footer li{ margin-bottom:.5rem; font-size:.88rem; opacity:.85; }
   .foot-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:var(--space-4); padding-top:1.2rem; font-size:.8rem; opacity:.7; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
   
   /* --- toast --- */
   #toast{
     position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
     background:var(--teal-950); color:#fff; padding:.8rem 1.3rem; border-radius:var(--radius-md);
     font-size:.88rem; font-weight:600; opacity:0; pointer-events:none; transition:all .25s ease; z-index:200;
   }
   #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
   
   /* --- admin backoffice --- */
   .admin-shell{ display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
   .admin-sidebar{ background:var(--teal-950); color:#DCEAE6; padding:1.4rem 1rem; }
   .admin-sidebar .brand{ color:#fff; margin-bottom:1.6rem; padding:0 .5rem; }
   .admin-sidebar a{ display:block; padding:.55rem .8rem; border-radius:var(--radius-sm); font-size:.87rem; font-weight:500; margin-bottom:.1rem; }
   .nav-section-label{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(220,234,230,.5); padding:.9rem .8rem .3rem; }
   .nav-section-label:first-of-type{ padding-top:.2rem; }
   .admin-sidebar a:hover, .admin-sidebar a.active{ background:rgba(255,255,255,.08); }
   .admin-main{ padding:var(--space-4); background:var(--cream-50); }
   .stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:var(--space-4); }
   @media(max-width:900px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
   .stat-card{ background:#fff; border:1px solid var(--sand-200); border-radius:var(--radius-md); padding:1.2rem; }
   .stat-card .n{ font-family:var(--font-display); font-size:1.9rem; color:var(--teal-950); }
   .stat-card .l{ font-size:.78rem; color:var(--ink-600); text-transform:uppercase; letter-spacing:.05em; }
   table.data-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--sand-200); border-radius:var(--radius-md); overflow:hidden; }
   table.data-table th, table.data-table td{ padding:.75rem 1rem; text-align:left; border-bottom:1px solid var(--sand-200); font-size:.88rem; }
   table.data-table th{ background:var(--teal-100); font-weight:700; color:var(--teal-950); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }
   table.data-table tr:last-child td{ border-bottom:0; }
   .badge{ font-size:.7rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; text-transform:capitalize; }
   .badge.pending, .badge.processing, .badge.placed{ background:#FDEFD9; color:#8A5A00; }
   .badge.confirmed, .badge.paid, .badge.preparing, .badge.published{ background:var(--teal-100); color:var(--teal-800); }
   .badge.completed, .badge.ready{ background:#E3F2E1; color:#2E6B2A; }
   .badge.cancelled, .badge.failed{ background:#FBE3E0; color:#A8402F; }
   .inline-form{ display:flex; gap:.4rem; align-items:center; }
   .inline-form input, .inline-form select{ padding:.4rem .55rem; font-size:.85rem; }
   .table-actions{ display:flex; gap:.4rem; }
   .w-70{ width:70px; } .w-100{ width:100px; } .w-140{ width:140px; }
   .subtle-note{ color:var(--ink-600); font-size:.8rem; }
   .panel-toolbar{ display:flex; justify-content:space-between; align-items:center; margin:2rem 0 .8rem; }
   .tab-strip{ display:flex; gap:.4rem; margin-bottom:1.4rem; border-bottom:1px solid var(--sand-200); }
   .tab-strip a{ padding:.6rem 1rem; font-size:.85rem; font-weight:600; color:var(--ink-600); border-bottom:2px solid transparent; }
   .tab-strip a.active{ color:var(--teal-800); border-color:var(--teal-700); }
   .login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--teal-950); }
   .login-card{ background:#fff; padding:var(--space-4); border-radius:var(--radius-md); width:100%; max-width:380px; }