@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --primary: #D4A14C;
  --primary-light: #E8C97A;
  --primary-dark: #8B6914;
  --primary-container: #FDF3E0;
  --on-primary: #1a1a1a;
  --secondary: #2D5F5D;
  --accent: #C44536;
  --surface: #FEFDF9;
  --surface-alt: #F8F4EC;
  --background: #FEFDF9;
  --outline: #E0D8C8;
  --outline-variant: #DED6C3;
  --text-strong: #1C1914;
  --text-soft: #5C5548;
  --text-disabled: #A09888;
  --error: #BA1A1A;
  --success: #2E7D32;
  --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 20px; --space-lg: 32px; --space-xl: 52px; --space-xxl: 84px;
  --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px; --shape-xl: 24px; --shape-full: 9999px;
  --font: 'Inter', system-ui, sans-serif;
  --fs-hero: clamp(2.5rem, 5vw, 4rem);
  --fs-display: 2.25rem;
  --fs-headline: 1.75rem;
  --fs-title: 1.25rem;
  --fs-body: 1rem;
  --fs-label: 0.875rem;
  --fs-small: 0.75rem;
  --fw-black: 900; --fw-bold: 700; --fw-semibold: 600; --fw-medium: 500;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
  --container: 1100px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);font-size:var(--fs-body);line-height:1.6;color:var(--text-strong);background:var(--background);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}

/* ─── NAV ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(254,253,249,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--outline);transition:var(--transition)}
.nav.scrolled{box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-lg);max-width:var(--container);margin:0 auto}
.nav-brand{font-size:var(--fs-title);font-weight:var(--fw-bold);color:var(--text-strong);text-decoration:none;display:flex;align-items:center;gap:var(--space-sm)}
.nav-brand img{width:80px;height:80px;border-radius:var(--shape-sm);object-fit:cover;box-shadow:var(--shadow-sm)}
.nav-links{display:flex;gap:var(--space-xxs);align-items:center}
.nav-link{padding:var(--space-xs) var(--space-md);border-radius:var(--shape-full);text-decoration:none;color:var(--text-soft);font-size:var(--fs-label);font-weight:var(--fw-medium);border:none;background:none;cursor:pointer;transition:all var(--transition)}
.nav-link:hover,.nav-link.active{background:var(--primary-container);color:var(--primary-dark)}
.nav-cart{position:relative}

/* Mobile nav toggle — checkbox-based, no JS needed */
#nav-toggle-checkbox{display:none}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;color:var(--text-strong)}
.nav-toggle span{display:block;width:22px;height:2px;background:currentColor;margin:5px 0;border-radius:2px;transition:all .2s}
#nav-toggle-checkbox:checked ~ .nav-toggle span:nth-child(1){transform:rotate(45deg)translate(5px,5px)}
#nav-toggle-checkbox:checked ~ .nav-toggle span:nth-child(2){opacity:0}
#nav-toggle-checkbox:checked ~ .nav-toggle span:nth-child(3){transform:rotate(-45deg)translate(5px,-5px)}
#nav-toggle-checkbox:checked ~ .nav-links{display:flex!important}

.cart-badge{position:absolute;top:-2px;right:-2px;background:var(--accent);color:#fff;font-size:11px;padding:1px 6px;border-radius:var(--shape-full);min-width:18px;text-align:center;font-weight:var(--fw-bold)}
.cart-badge.hidden{display:none}

/* ─── HERO ─── */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(135deg, var(--primary-dark) 0%, #5C4A1E 50%, #3D2E0A 100%);color:#fff;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%, rgba(212,161,76,.15) 0%, transparent 50%),radial-gradient(ellipse at 80% 20%, rgba(232,201,122,.1) 0%, transparent 50%);pointer-events:none}
.hero::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 25 L55 30 L35 35 L30 55 L25 35 L5 30 L25 25 Z' fill='rgba(255,255,255,.03)'/%3E%3C/svg%3E");opacity:.5;pointer-events:none}
.hero .container{position:relative;z-index:1;max-width:800px}
.hero-logo{width:200px;height:200px;border-radius:var(--shape-lg);object-fit:cover;margin:0 auto var(--space-lg);box-shadow:0 8px 40px rgba(0,0,0,.3);border:3px solid rgba(255,255,255,.15)}
.hero-title{font-size:var(--fs-hero);font-weight:var(--fw-black);line-height:1.1;margin-bottom:var(--space-sm);letter-spacing:-0.02em}
.hero-subtitle{font-size:var(--fs-title);opacity:.85;margin-bottom:var(--space-xl);font-weight:var(--fw-medium);max-width:500px;margin-left:auto;margin-right:auto;line-height:1.5}
.hero-actions{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap}
.hero .btn-primary{background:var(--primary-light);color:var(--on-primary);font-size:var(--fs-body);padding:var(--space-md) var(--space-xl);border-radius:var(--shape-full);font-weight:var(--fw-bold);transition:all var(--transition)}
.hero .btn-primary:hover{background:var(--primary);transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,161,76,.4)}
.hero .btn-outline{border:2px solid rgba(255,255,255,.4);color:#fff;background:transparent}
.hero .btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff}
.scroll-indicator{position:absolute;bottom:var(--space-lg);left:50%;transform:translateX(-50%);animation:bounce 2s infinite}
.scroll-indicator svg{opacity:.5}
@keyframes bounce{0%,100%{transform:translateX(-50%)translateY(0)}50%{transform:translateX(-50%)translateY(8px)}}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);border-radius:var(--shape-full);font-family:var(--font);font-size:var(--fs-label);font-weight:var(--fw-semibold);cursor:pointer;border:none;text-decoration:none;transition:all var(--transition)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary-container);transform:translateY(-1px)}
.btn-lg{font-size:var(--fs-body);padding:var(--space-md) var(--space-xl)}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.5;cursor:default;transform:none!important}
.btn-icon{background:none;border:none;cursor:pointer;font-size:1.25rem;color:var(--text-soft);padding:4px;border-radius:50%;transition:background var(--transition)}
.btn-icon:hover{background:rgba(0,0,0,.06)}

/* ─── SECTIONS ─── */
.section{padding:var(--space-xxl) 0}
.section-alt{background:var(--surface-alt)}
.section-header{text-align:center;margin-bottom:var(--space-xl)}
.section-label{display:inline-block;font-size:var(--fs-label);font-weight:var(--fw-semibold);color:var(--primary-dark);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--space-xs)}
.section-title{font-size:var(--fs-display);font-weight:var(--fw-black);margin-bottom:var(--space-sm);letter-spacing:-0.01em}
.section-sub{font-size:var(--fs-body);color:var(--text-soft);max-width:600px;margin:0 auto}

/* ─── CONTAINER ─── */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-lg)}

/* ─── PRODUCT GRID ─── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-lg)}
.product-card{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--shape-lg);border:1px solid var(--outline);overflow:hidden;transition:all var(--transition);cursor:default}
.product-card:hover{border-color:var(--primary-light);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.product-card.in-cart{background:var(--primary-container);border-color:var(--primary)}
.product-card-img{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--surface-alt)}
.product-card img{width:100%;height:100%;object-fit:cover;display:block}
.product-icon{width:100%;aspect-ratio:4/3;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;font-size:3rem}
.product-info{flex:1;padding:var(--space-md);display:flex;flex-direction:column;gap:4px}
.product-name{font-weight:var(--fw-bold);font-size:var(--fs-body);margin:0;line-height:1.3}
.product-desc{font-size:var(--fs-small);color:var(--text-soft);line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-price{margin-top:auto;padding-top:var(--space-sm);display:flex;align-items:baseline;gap:var(--space-sm);flex-wrap:wrap}
.current-price{font-size:var(--fs-title);font-weight:var(--fw-bold);color:var(--primary-dark)}
.old-price{font-size:var(--fs-small);color:var(--text-disabled);text-decoration:line-through}
.product-actions{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-top:1px solid var(--outline)}
.qty-btn{width:36px;height:36px;border-radius:50%;border:2px solid var(--primary);background:none;color:var(--primary);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.qty-btn:hover{background:var(--primary);color:#fff}

/* Badges */
.badge{position:absolute;top:8px;left:8px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:0.5px;z-index:2}
.badge-new{background:#4CAF50;color:#fff}
.badge-promo{background:#FF6F00;color:#fff}
.badge-best{background:#FFD700;color:#1A1A1A}
.badge-soldout{background:#9E9E9E;color:#fff}

/* Responsive */
@media(max-width:600px){
  .product-grid{grid-template-columns:1fr!important;gap:var(--space-sm)}
  .product-card{flex-direction:column!important}
  .product-card-img{width:100%!important;height:auto!important;aspect-ratio:16/9!important}
  .product-card-img img{width:100%!important;height:100%!important}
  .product-info{flex:auto!important;min-width:auto!important;padding:var(--space-sm)!important}
  .product-name{font-size:1rem!important}
  .product-price{font-size:1.1rem!important}
  .product-actions{border-top:1px solid var(--outline)!important;padding:var(--space-sm)!important;width:100%!important}
  .hero-title{font-size:1.8rem!important}
  .hero-subtitle{font-size:1rem!important}
  .bistro-layout{flex-direction:column!important}
  .cat-list{width:100%!important;position:static!important;display:flex;overflow-x:auto}
  .cat-item{white-space:nowrap;flex-shrink:0}
  .nav-sidebar{position:static!important;width:100%!important;height:auto!important}
  .nav-sidebar ~ main{margin-left:0!important}
  .nav-centered .nav-inner{flex-direction:column!important}
  section{padding:var(--space-lg) 0!important}
}
.qty-btn:hover{background:var(--primary);color:#fff}
.qty-value{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--primary-dark);min-width:24px;text-align:center}

/* ─── GALLERY CAROUSEL ─── */
.gallery-carousel{position:relative;overflow:hidden;border-radius:var(--shape-lg);margin:var(--space-xl) 0}
.gallery-carousel .carousel-track{display:flex;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1)}
.gallery-carousel .carousel-slide{flex-shrink:0;width:100%;position:relative}
.gallery-carousel .carousel-slide img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.gallery-carousel .carousel-caption{position:absolute;bottom:0;left:0;right:0;padding:24px 32px;background:linear-gradient(transparent,rgba(0,0,0,0.75));color:#fff;font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.4}
.gallery-carousel .carousel-prev,
.gallery-carousel .carousel-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.9);border:none;cursor:pointer;font-size:1.5rem;color:var(--text-strong);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);z-index:10;transition:all var(--transition)}
.gallery-carousel .carousel-prev:hover,
.gallery-carousel .carousel-next:hover{background:#fff;box-shadow:var(--shadow-lg)}
.gallery-carousel .carousel-prev{left:16px}
.gallery-carousel .carousel-next{right:16px}
.gallery-carousel .carousel-dots{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.gallery-carousel .carousel-dots .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;transition:all var(--transition)}
.gallery-carousel .carousel-dots .dot.active{background:#fff;transform:scale(1.25)}

/* ─── CONTACT CARDS ─── */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-md)}
.contact-card{background:var(--surface);border-radius:var(--shape-lg);padding:var(--space-lg);text-align:center;border:1px solid var(--outline);transition:all var(--transition)}
.contact-card:hover{border-color:var(--primary-light);box-shadow:var(--shadow-md)}
.contact-card .contact-icon{font-size:2rem;margin-bottom:var(--space-sm)}
.contact-card h3{font-size:var(--fs-body);font-weight:var(--fw-semibold);margin-bottom:var(--space-xxs)}
.contact-card p{font-size:var(--fs-label);color:var(--text-soft)}

/* ─── CART DRAWER ─── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;backdrop-filter:blur(4px);animation:fade-in .2s ease}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;right:0;top:0;bottom:0;width:400px;max-width:100vw;background:var(--surface);z-index:201;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:slide-in .25s cubic-bezier(0.4,0,0.2,1)}
@keyframes slide-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);border-bottom:1px solid var(--outline)}
.drawer-header h2{font-size:var(--fs-title);font-weight:var(--fw-bold)}
.drawer-body{flex:1;overflow-y:auto;padding:var(--space-md)}
.drawer-footer{padding:var(--space-lg);border-top:1px solid var(--outline)}
.cart-total{display:flex;justify-content:space-between;font-weight:var(--fw-bold);margin-bottom:var(--space-md);font-size:var(--fs-title)}
.cart-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm)0;border-bottom:1px solid var(--outline)}
.cart-item-remove{font-size:1.25rem;color:var(--error);cursor:pointer;background:none;border:none;padding:4px;border-radius:50%;transition:background var(--transition)}
.cart-item-remove:hover{background:rgba(186,26,26,.1)}

/* ─── PAGES ─── */
.page-subnav{display:flex;gap:0;overflow-x:auto;border-bottom:2px solid var(--outline);margin-bottom:var(--space-xl)}
.page-tab{padding:var(--space-sm) var(--space-lg);font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-soft);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-2px;white-space:nowrap;transition:all var(--transition)}
.page-tab:hover{color:var(--primary-dark)}
.page-tab.active{color:var(--primary-dark);border-bottom-color:var(--primary)}
.html-content{max-width:780px}
.html-content h2{font-size:var(--fs-display);font-weight:var(--fw-black);margin:var(--space-xl)0 var(--space-md)}
.html-content h3{font-size:var(--fs-headline);font-weight:var(--fw-bold);margin:var(--space-lg)0 var(--space-sm)}
.html-content p{margin-bottom:var(--space-md);font-size:var(--fs-body);line-height:1.7;color:var(--text-soft)}
.html-content img{border-radius:var(--shape-lg);margin:var(--space-lg)0;max-width:100%;box-shadow:var(--shadow-md)}
.html-content ul,ol{padding-left:var(--space-lg);margin-bottom:var(--space-md)}
.html-content li{margin-bottom:var(--space-xxs)}

/* ─── FAQ ─── */
.faq-item{background:var(--surface);border-radius:var(--shape-md);padding:var(--space-lg);margin-bottom:var(--space-sm);border-left:4px solid var(--primary);transition:all var(--transition)}
.faq-item:hover{box-shadow:var(--shadow-sm)}
.faq-q{font-weight:var(--fw-semibold);margin-bottom:var(--space-xs);font-size:var(--fs-body)}
.faq-a{font-size:var(--fs-label);color:var(--text-soft);line-height:1.6}

/* ─── HOURS TABLE ─── */
.hours-table{width:100%;border-collapse:collapse;margin-top:var(--space-lg)}
.hours-table td{padding:var(--space-sm);border-bottom:1px solid var(--outline)}
.hours-table td:first-child{font-weight:var(--fw-semibold)}
.hours-table td:last-child{text-align:right;color:var(--text-soft)}

/* ─── FOOTER ─── */
.footer{background:var(--text-strong);color:rgba(255,255,255,.7);padding:var(--space-xxl)var(--space-lg)var(--space-lg)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-xl);max-width:var(--container);margin:0 auto var(--space-xl)}
.footer-col h4{color:#fff;font-size:var(--fs-body);font-weight:var(--fw-bold);margin-bottom:var(--space-sm)}
.footer-col p,.footer-col div{font-size:var(--fs-label);line-height:1.8}
.footer a{color:var(--primary-light);text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer-copy{text-align:center;font-size:var(--fs-small);color:rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.1);padding-top:var(--space-lg);max-width:var(--container);margin:0 auto}

/* ─── TOAST ─── */
.toast{position:fixed;bottom:var(--space-lg);left:50%;transform:translateX(-50%);background:var(--text-strong);color:#fff;padding:var(--space-sm)var(--space-lg);border-radius:var(--shape-full);font-size:var(--fs-label);z-index:300;box-shadow:var(--shadow-lg);animation:toast-in .3s ease}
.toast.success{background:var(--success)}
.toast.error{background:var(--error)}
.toast.hidden{display:none}
@keyframes toast-in{from{opacity:0;transform:translateX(-50%)translateY(12px)}to{opacity:1;transform:translateX(-50%)translateY(0)}}

/* ─── ANIMATIONS ─── */
.animate-in{animation:reveal .6s cubic-bezier(0.4,0,0.2,1)both}
@keyframes reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ─── UTILS ─── */
.hidden{display:none!important}
.text-center{text-align:center}
.loading{text-align:center;padding:var(--space-xxl);color:var(--text-disabled)}
.empty-state{text-align:center;padding:var(--space-xxl);color:var(--text-disabled)}
.empty-icon{font-size:3rem;margin-bottom:var(--space-md);opacity:.4}

/* ─── CAROUSEL ─── */
.testimonial-card{background:var(--surface);border-radius:var(--shape-lg);padding:var(--space-xl);border:1px solid var(--outline);text-align:center}
.testimonial-card .quote{font-size:var(--fs-body);font-style:italic;color:var(--text-soft);margin-bottom:var(--space-md);line-height:1.7}
.testimonial-card .author{font-weight:var(--fw-bold)}

/* ─── MOBILE ─── */
@media(max-width:700px){
  :root{--fs-hero:2rem;--fs-display:1.75rem;--fs-headline:1.5rem;--fs-title:1.15rem;--fs-body:0.95rem}
  .nav-inner{padding:var(--space-xs)var(--space-md);flex-wrap:wrap}
  .nav-toggle{display:block}
  .nav-links{display:none!important;flex-direction:column;width:100%;padding:var(--space-sm)0;border-top:1px solid var(--outline)}
  .nav-open .nav-links{display:flex!important}
  .nav-links .nav-link{display:block;width:100%;text-align:left;padding:var(--space-md);border-radius:var(--shape-sm);font-size:var(--fs-body)}
  .nav-links .nav-cart{display:none}
  .nav-brand{flex:1}
  .nav-brand img{width:64px;height:64px}
  .hero-logo{width:160px;height:160px}
  .product-grid{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr}
  .section{padding:var(--space-xl)0}
  .container{padding:0 var(--space-md)}
  .drawer{width:100vw}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-lg)}
  .gallery-carousel .carousel-caption{position:static;background:rgba(0,0,0,.6);padding:12px 16px}
  .gallery-carousel .carousel-dots{bottom:8px}
}

/* ─── NAV LAYOUTS ─── */
.nav-centered .nav-inner{justify-content:center;flex-direction:column;gap:var(--space-sm)}
.nav-centered .nav-brand{text-align:center}
.nav-centered .nav-links{justify-content:center}
.nav-sidebar{position:fixed;left:0;top:0;width:240px;height:100vh;overflow-y:auto;z-index:100}
.nav-sidebar .nav-inner{flex-direction:column;align-items:flex-start;gap:var(--space-md)}
.nav-sidebar .nav-links{flex-direction:column;width:100%}
.nav-sidebar .nav-link{display:block;width:100%;text-align:left}
.nav-sidebar ~ main{margin-left:240px}

/* ─── HERO VARIANTS ─── */
.hero-half{min-height:50vh}
.hero-banner{min-height:auto;padding:60px 0}

/* ─── BANNER PROMO ─── */
.banner-promo a{color:#fff;font-weight:700}

/* ─── BISTRO LAYOUT ─── */
.bistro-layout{display:flex;gap:var(--space-lg);align-items:flex-start}
.cat-list{width:240px;flex-shrink:0;background:var(--surface);border-radius:12px;padding:var(--space-md);border:1px solid var(--outline);position:sticky;top:80px}
.cat-item{padding:var(--space-sm);cursor:pointer;border-radius:8px;font-size:var(--fs-label);transition:all var(--transition)}
.cat-item:hover{background:var(--primary-container)}
.product-list{flex:1;display:flex;flex-direction:column;gap:var(--space-md)}

@media(max-width:768px){
  .bistro-layout{flex-direction:column}
  .cat-list{width:100%;position:static;display:flex;overflow-x:auto;gap:var(--space-xs);padding:var(--space-sm)}
  .cat-item{white-space:nowrap;flex-shrink:0}
  .nav-sidebar{position:static;width:100%;height:auto}
  .nav-sidebar ~ main{margin-left:0}
}

/* ─── GALLERY ─── */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-md)}

/* ─── CONTACT FORM ─── */
.contact-form input,.contact-form textarea{font-family:var(--font);font-size:var(--fs-body)}

/* ─── SOCIAL ─── */
.social-icon{display:inline-block;padding:8px 16px;background:var(--surface);border-radius:24px;color:var(--primary-dark);text-decoration:none;font-weight:var(--fw-semibold);transition:all var(--transition)}
.social-icon:hover{background:var(--primary);color:#fff}

/* ─── FAQ ─── */
.faq-item{margin-bottom:var(--space-sm)}
.faq-q{font-weight:var(--fw-bold);font-size:var(--fs-body);padding:var(--space-sm)0}
.faq-a{font-size:var(--fs-small);color:var(--text-soft);padding-bottom:var(--space-sm)}

/* ─── HOURS ─── */
.hours-text{line-height:2}
.hours-day{font-weight:var(--fw-bold);min-width:120px;display:inline-block}

/* ─── PRODUCT LIST ─── */
.product-list .product-card{flex-direction:row;align-items:center}
.product-list .product-card-img{width:120px;aspect-ratio:auto;height:90px;flex-shrink:0}
.product-list .product-card-img img{width:100%;height:100%;object-fit:cover;border-radius:var(--shape-md)}
.product-list .product-actions{margin-left:auto;border-top:none;padding:0 var(--space-md)}
@media(max-width:600px){
  .product-list .product-card{flex-wrap:wrap}
  .product-list .product-card-img{width:100%;height:auto;aspect-ratio:2/1}
  .product-list .product-actions{width:100%;border-top:1px solid var(--outline);justify-content:center;padding:var(--space-sm)}
}

/* ─── CAROUSEL LAYOUT ─── */
.product-carousel{display:flex;overflow-x:auto;gap:var(--space-md);scroll-snap-type:x mandatory;padding:var(--space-sm)0}
.product-carousel .product-card{min-width:280px;scroll-snap-align:start}

/* ─── TAB LAYOUT ─── */
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--outline);margin-bottom:var(--space-lg)}
.tab-btn{padding:var(--space-sm) var(--space-lg);border:none;background:none;cursor:pointer;font-family:var(--font);font-size:var(--fs-body);color:var(--text-soft);border-bottom:2px solid transparent;margin-bottom:-2px}
.tab-btn.active{color:var(--primary-dark);border-bottom-color:var(--primary);font-weight:var(--fw-bold)}

/* ─── GALLERY FOOD ─── */
.gallery-food{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-sm)}
.gallery-plat{position:relative;overflow:hidden;border-radius:var(--shape-lg);aspect-ratio:4/3;cursor:pointer}
.gallery-plat img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery-plat:hover img{transform:scale(1.05)}
.gallery-plat-info{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:var(--space-lg) var(--space-md) var(--space-md);color:#fff;display:flex;justify-content:space-between;align-items:flex-end}
.gallery-plat-nom{font-size:var(--fs-title);font-weight:var(--fw-bold)}
.gallery-plat-prix{font-size:var(--fs-body);background:var(--primary);padding:4px 12px;border-radius:20px;color:var(--on-primary)}

/* ─── PAGE SECTIONS (paragraphe + photo) ─── */
.page-intro{max-width:780px;margin:0 auto var(--space-xl);text-align:center;font-size:var(--fs-body);line-height:1.8;color:var(--text-soft)}
.section-row{display:flex;gap:var(--space-xl);align-items:center;margin:var(--space-xl) 0}
.section-row img{width:45%;border-radius:var(--shape-lg);object-fit:cover;aspect-ratio:4/3}
.section-row div{flex:1}
.section-row p{font-size:var(--fs-body);line-height:1.8;color:var(--text-soft)}
.section-img-left{flex-direction:row}
.section-img-right{flex-direction:row-reverse}
.section-fond{position:relative;margin:var(--space-xl) 0;border-radius:var(--shape-lg);overflow:hidden;aspect-ratio:21/9}
.section-fond img{width:100%;height:100%;object-fit:cover}
.section-fond-text{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:var(--space-xl)}
.section-fond-text p{color:#fff;font-size:var(--fs-title);text-align:center;max-width:600px}
.section-text{margin:var(--space-lg) 0}
.section-text p{font-size:var(--fs-body);line-height:1.8;color:var(--text-soft)}

/* ─── CATEGORY SLIDESHOW ─── */
.cat-slideshow{margin-bottom:var(--space-xl)}
.cat-slideshow-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-sm);padding:0 var(--space-xs)}
.cat-slideshow-header h3{font-size:var(--fs-title);font-weight:var(--fw-bold)}
.cat-slideshow-link{font-size:var(--fs-small);color:var(--primary);text-decoration:none}
.cat-slideshow-track{display:flex;overflow-x:auto;gap:var(--space-sm);scroll-snap-type:x mandatory;padding:var(--space-sm)0;-webkit-overflow-scrolling:touch}
.cat-slideshow-track::-webkit-scrollbar{height:4px}
.cat-slideshow-track::-webkit-scrollbar-thumb{background:var(--outline);border-radius:4px}
.cat-slide-card{flex:0 0 180px;scroll-snap-align:start;border-radius:var(--shape-lg);overflow:hidden;background:var(--surface);border:1px solid var(--outline);display:flex;flex-direction:column}
.cat-slide-card img{width:100%;height:130px;object-fit:cover}
.cat-slide-name{font-size:var(--fs-small);font-weight:var(--fw-semibold);padding:var(--space-xs) var(--space-sm) 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-slide-price{font-size:var(--fs-small);color:var(--primary-dark);font-weight:var(--fw-bold);padding:2px var(--space-sm) var(--space-xs)}
@media(min-width:768px){
  .cat-slide-card{flex:0 0 220px}
  .cat-slide-card img{height:160px}
}

@media(max-width:600px){
  .section-row,.section-img-left,.section-img-right{flex-direction:column!important}
  .section-row img{width:100%}
  .section-fond{aspect-ratio:3/2}
}
@media(max-width:600px){
  .gallery-food{grid-template-columns:1fr;gap:var(--space-sm)}
  .gallery-plat{aspect-ratio:3/2}
  .gallery-plat-nom{font-size:1rem}
}

/* ─── MODE TOGGLE (light/dark/sharp) ─── */
.mode-toggle{position:fixed;bottom:20px;left:20px;z-index:9999;width:44px;height:44px;border-radius:50%;border:none;background:var(--primary);color:var(--on-primary);font-size:20px;cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition)}
.mode-toggle:hover{transform:scale(1.1)}

/* Dark mode */
.theme-dark{--primary:#212121;--surface:#2A2A2A;--background:#1A1A1A;--text-strong:#F0F0F0;--text-soft:#AAA;--outline:#444;--surface-alt:#222;filter:invert(.9) hue-rotate(180deg)}
.theme-dark img,.theme-dark video{filter:invert(1) hue-rotate(180deg)}

/* Sharp mode */
.theme-sharp *{--shape-sm:0;--shape-md:0;--shape-lg:0;--shape-xl:0;--shape-full:0;border-radius:0!important;box-shadow:none!important;transition:none!important}

/* ─── WHATSAPP FLOAT ─── */
.whatsapp-float{position:fixed;bottom:80px;right:20px;z-index:9998;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 4px 12px rgba(37,211,102,.4);transition:all .2s;animation:pulse 2s infinite}
.whatsapp-float:hover{transform:scale(1.1);box-shadow:0 8px 24px rgba(37,211,102,.5)}
@keyframes pulse{0%,100%{box-shadow:0 4px 12px rgba(37,211,102,.4)}50%{box-shadow:0 4px 24px rgba(37,211,102,.7)}}
}