/* === LOCAL FONTS === */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/font/LibreCaslonText-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/font/HankenGrotesk-300.ttf') format('truetype');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/font/HankenGrotesk-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/font/HankenGrotesk-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/font/HankenGrotesk-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/font/HankenGrotesk-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/font/HankenGrotesk-Italic400.ttf') format('truetype');
}

/* ============================================================
   site.css — Shared frontend styles
   Header, nav bar, lang switcher, cart link.
   Page-specific styles stay in each template's <style> block
   until the next refactor pass.
   ============================================================ */

/* === FONT VARIABLES === */
:root {
  --font-heading: 'Libre Caslon Text', Georgia, serif;
  --font-body:    'Hanken Grotesk', 'Segoe UI', Helvetica, Arial, sans-serif;
}
body {
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: capitalize;
}

/* === SITE HEADER (logo + search + icons) === */
.sticky-header-wrap { position:sticky; top:0; z-index:1070; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.07); }
.site-header { background:#fff; border-bottom:1px solid #bebebe; padding:12px 0; }
.logo-link { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#222; }
.logo-link img { max-height:48px; width:auto; }
.logo-text { display:none; font-size:18px; font-weight:400; text-transform:uppercase; letter-spacing:.12em; color:#111; white-space:nowrap; }
.search-bar { display:flex; border:1px solid #ccc; border-radius:2px; overflow:hidden; }
.search-bar input { flex:1; border:none; padding:8px 12px; font-size:.88rem; outline:none; color:#333; }
.search-bar input::placeholder { color:#aaa; }
.search-bar button { background:#f5f5f5; border:none; border-left:1px solid #ccc; padding:0 13px; cursor:pointer; color:#555; }
.search-bar button:hover { background:#eee; }
.header-right { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.header-signin { font-size:.78rem; font-weight:700; text-decoration:none; color:#333; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.header-signin:hover { color:#000; }
.cart-link { position:relative; color:#333; display:inline-flex; }
.cart-link svg { width:28px; height:28px; }
.cart-link:hover { color:#000; }

/* === LANGUAGE SWITCHER === */
.lang-flags { display:flex; align-items:center; gap:0; }
.lang-flag-link { font-size:.68rem; font-weight:500; letter-spacing:.1em; color:#6b6b6b; text-decoration:none; padding:0 9px; line-height:1; transition:color .15s; }
.lang-flag-link:first-child { padding-left:0; }
.lang-flag-link + .lang-flag-link { border-left:1px solid #ddd; }
.lang-flag-link:hover { color:#555; }
.lang-flag-link.active { color:#111; font-weight:600; }

/* === MOBILE HEADER CONTROLS === */
.mobile-header-left { display:flex; align-items:center; gap:6px; }
.mobile-menu-btn { background:none; border:none; cursor:pointer; padding:4px 2px; color:#333; display:inline-flex; align-items:center; line-height:1; }
.mobile-menu-btn:hover { color:#000; }
.mobile-search-toggle { background:none; border:none; padding:2px 12px; cursor:pointer; color:#333; display:inline-flex; align-items:center; }
.mobile-search-toggle:hover { color:#000; }
/* Logo centering + hamburger toggle on mobile */
@media(max-width:991px) {
  .site-header { padding:10px 0; }
  .logo-col .logo-link { justify-content:center; }
  .logo-link img { display:none; }
  .logo-text { display:block; }
  .header-right { gap:10px; }
  .cart-link svg { width:24px; height:24px; }
  .header-right .lang-flags { display:none; }
}
/* Drawer language section */
.drawer-lang-section {
  padding:20px 24px;
  border-top:1px solid #ebebeb;
  margin-top:auto;
}
.drawer-lang-section .lang-flags { gap:0; }
.drawer-lang-section .lang-flag-link {
  font-size:.75rem; font-weight:500; letter-spacing:.08em;
  color:#888; padding:4px 10px; line-height:1;
}
.drawer-lang-section .lang-flag-link:first-child { padding-left:0; }
.drawer-lang-section .lang-flag-link.active { color:#111; font-weight:700; }
/* Mobile lang dropdown */
.lang-dropdown { position:relative; }
.lang-dropdown-btn { background:none; border:none; padding:2px 4px; cursor:pointer; font-size:.68rem; font-weight:700; letter-spacing:.06em; color:#333; text-transform:uppercase; display:inline-flex; align-items:center; gap:3px; line-height:1; }
.lang-dropdown-btn:hover { color:#000; }
.lang-dropdown-panel { display:none; position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid #ddd; z-index:1080; min-width:54px; box-shadow:0 4px 16px rgba(0,0,0,.1); }
.lang-dropdown-panel.open { display:block; }
.lang-dropdown-panel .lang-flag-link { display:block; padding:9px 14px; border-left:none; font-size:.68rem; }
.lang-dropdown-panel .lang-flag-link + .lang-flag-link { border-top:1px solid #f0f0f0; border-left:none; }
.lang-dropdown-panel .lang-flag-link:first-child { padding-left:14px; }
.mobile-menu-btn .icon-x { display:none; }
body.drawer-open .mobile-menu-btn .icon-ham { display:none; }
body.drawer-open .mobile-menu-btn .icon-x { display:inline-flex; }
/* Mobile search dropdown */
.mobile-search-row { display:none; padding:0 0 8px; }
.mobile-search-row.open { display:block; }
.mobile-search-row .search-bar { width:100%; }

/* === MOBILE DRAWER === */
.mobile-drawer {
  position:fixed; top:38px; left:0; height:calc(100vh - 38px); width:min(360px,88vw);
  background:#fff; z-index:1060;
  transform:translateX(-100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:4px 0 32px rgba(0,0,0,.18);
}
.mobile-drawer.open { transform:translateX(0); }
.mobile-drawer-overlay {
  position:fixed; top:38px; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.42); z-index:1059; display:none;
}
.mobile-drawer-overlay.open { display:block; }
.drawer-nav {
  flex:1 1 auto; min-height:0;
  overflow-y:scroll; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain;
}
.drawer-nav ul { list-style:none; padding:0; margin:0; }
.drawer-nav ul li { border-bottom:1px solid #f0f0f0; }
.drawer-nav ul li a {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; color:#222;
  text-decoration:none; transition:background .12s;
}
.drawer-nav ul li a:hover { background:#fafafa; }
.drawer-nav ul li a::after { content:'›'; font-size:1.4rem; color:#c8c8c8; font-weight:300; flex-shrink:0; }

/* === CATEGORIES DROPDOWN (desktop hover + mobile accordion) === */
.nav-cat-item { position:relative; }
.nav-cat-toggle { display:inline-flex !important; align-items:center; gap:4px; cursor:pointer; }
/* Desktop: CSS hover */
@media (min-width:992px) {
  .nav-cat-item > .nav-cat-dropdown {
    display:none; position:absolute; top:100%; left:0;
    background:#fff; border:1px solid #e0e0e0;
    box-shadow:0 6px 24px rgba(0,0,0,.1); z-index:1080;
    min-width:210px; max-height:72vh; overflow-y:auto;
    list-style:none; padding:8px 0; margin:0;
  }
  .nav-cat-item:hover > .nav-cat-dropdown { display:block; }
  .nav-cat-item > .nav-cat-dropdown li a {
    display:block; padding:9px 18px; font-size:.8rem; font-weight:500;
    text-decoration:none; color:#333; white-space:nowrap;
    text-transform:none; letter-spacing:0;
  }
  .nav-cat-item > .nav-cat-dropdown li a:hover { background:#f5f5f5; color:#000; }
}
/* Mobile drawer: accordion */
@media (max-width:991px) {
  .drawer-nav .nav-cat-item > .nav-cat-dropdown {
    display:none; list-style:none; padding:0; margin:0; background:#f8f8f8;
  }
  .drawer-nav .nav-cat-item.open > .nav-cat-dropdown { display:block; }
  .drawer-nav .nav-cat-item > .nav-cat-dropdown li { border-bottom:1px solid #efefef; }
  .drawer-nav .nav-cat-item > .nav-cat-dropdown li a {
    padding:13px 36px; font-size:.7rem; font-weight:500;
    letter-spacing:.5px; color:#555; text-transform:uppercase;
  }
  .drawer-nav .nav-cat-item > .nav-cat-dropdown li a::after { display:none; }
  .drawer-nav .nav-cat-item > .nav-cat-toggle svg { transition:transform .2s; }
  .drawer-nav .nav-cat-item.open > .nav-cat-toggle svg { transform:rotate(180deg); }
  .drawer-nav .nav-cat-item > .nav-cat-toggle::after { display:none; }
}
/* === SITE NAV (menu bar) === */
.site-nav { background:#fff; border-bottom:1px solid #bebebe; }
.site-nav .nav-inner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.site-nav ul { display:flex; list-style:none; margin:0; padding:0; justify-content:center; flex-wrap:wrap; }
.site-nav ul li a { display:block; padding:13px 13px; font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.6px; color:#333; text-decoration:none; white-space:nowrap; }
.site-nav ul li a:hover { background:#f5f5f5; color:#000; }
.site-nav .hamburger { display:none; }
@media(max-width:991px) { .site-nav { display:none; } }

/* === SHARED LAYOUT === */
.container-xl { max-width:1520px; }
.breadcont { padding:14px 0 4px; font-size:.82rem; color:#888; display:flex; align-items:center; flex-wrap:nowrap; overflow:hidden; white-space:nowrap; gap:4px; }
.breadcont a { flex-shrink:0; color:#888; text-decoration:none; }
.breadcont a:hover { color:#111; }
.breadcont span { color:#111; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

/* === PRODUCT CARD (shared) === */
.product-card { display:block; text-decoration:none; color:inherit; border-radius:3px; overflow:hidden; transition:box-shadow .2s, transform .2s; }
.product-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.1); transform:translateY(-2px); }
.product-card-img { position:relative; overflow:hidden; background:#f5f5f5; }
.product-card-img img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .3s; }
.product-card:hover .product-card-img img { transform:scale(1.04); }
.product-card-body { padding:18px 3px 16px; }
.product-card-body h3 { font-family:'Libre Caslon Text',serif; font-size:.9rem; font-weight:400; margin:0 0 4px; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; }
.product-card-price { font-size:.82rem; color:#888; }
.product-card-price span { font-size:.95rem; color:#222; font-weight:600; }
.pc-price-row { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.pc-stars { display:flex; align-items:center; font-size:1rem; color:#f5a623; white-space:nowrap; flex-shrink:0; }
.pc-stars-count { color:#3a3a3a; font-size:.8rem; margin-left:2px; }

/* === PROMO BANNER === */
.banner-bar { font-size:12px; letter-spacing:.6px; }
@media(max-width:575px) { .banner-bar { font-size:9px; letter-spacing:.3px; padding:0 5px; } }

/* === FEATURES SECTION === */
@media(max-width:575px) { .feat-img-no-mobile { display:none !important; } }

/* === MOBILE TYPOGRAPHY === */
@media(max-width:767px) {
  h1 { font-size: 0.9rem !important; }
  h2 { font-size: 0.8rem !important; }
  .price-current { font-size:1rem !important; }
  .cat-header h1 { font-size:1rem !important; }
}