/* ============================================================
   CURCUMELLI — layout.css (M1: global chrome)
   Announcement bar, header, primary nav + mega panel, search overlay + .search-form, drawer, footer.
   Ported from the prototype (assets/style.css); breakpoints 1180 / 1080 / 900 / 560 / 400 / 350.
   ============================================================ */

/* ---------- announcement bar ---------- */
.annbar {
  background: var(--footer); color: var(--footer-ink); text-align: center;
  font-size: 11px; line-height: 1.5; letter-spacing: .22em; text-transform: uppercase; padding: 9px 16px;
}
.annbar a { display: inline-block; max-width: 100%; }
.annbar a:hover { color: var(--gold); }
.annbar-text { display: block; overflow-wrap: anywhere; text-wrap: balance; }
.annbar b, .annbar strong { color: var(--gold); font-weight: 600; }

/* ---------- header ---------- */
header.site { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 300; }
.admin-bar header.site { top: 32px; }
.head-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px;
}
.brand { display: flex; align-items: center; gap: 14px; line-height: 1; flex: 0 1 auto; min-width: 0; }
.brand .crest { height: 54px; width: auto; flex: none; }
.brand .wordmark { display: flex; flex-direction: column; min-width: 0; }
.brand .name { font-family: var(--serif); font-size: 20px; letter-spacing: .14em; white-space: nowrap; overflow: hidden; }
.brand .tagline { font-family: var(--script); font-size: 17px; color: var(--bronze); margin-top: 3px; white-space: nowrap; }

/* ---------- primary nav ---------- */
nav.main { flex: none; }
nav.main .menu { display: flex; gap: 34px; align-items: center; }
nav.main .menu > li > a {
  display: inline-block; padding: 33px 0; font-size: 11.5px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid transparent; transition: color .2s;
}
nav.main .menu > li > a:hover,
nav.main .menu > li.is-current > a,
nav.main .menu > li.is-open > a,
nav.main .menu > li > a[aria-expanded="true"] { color: var(--bronze); }
nav.main .menu > li.is-current > a { border-bottom-color: var(--bronze); }

/* popups: mega panel (shop item) and simple dropdowns (items with children) */
.navdrop { position: relative; }
.mega, nav.main .sub-menu {
  position: absolute; top: 100%; z-index: 310; display: none;
  background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--bronze);
  box-shadow: 0 24px 60px rgba(28, 26, 23, .12);
}
.mega { left: 50%; transform: translateX(-38%); padding: 34px 40px; width: min(920px, 92vw); }
nav.main .sub-menu { left: -24px; min-width: 240px; padding: 16px 24px; }
nav.main .sub-menu a { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.9; }
nav.main .sub-menu a:hover, nav.main .sub-menu a[aria-current] { color: var(--bronze); }
@media (hover: hover) {
  .navdrop:hover > .mega, .navdrop:hover > .sub-menu { display: block; }
}
.navdrop:focus-within > .mega, .navdrop:focus-within > .sub-menu,
.navdrop.is-open > .mega, .navdrop.is-open > .sub-menu { display: block; }
.navdrop.is-dismissed > .mega, .navdrop.is-dismissed > .sub-menu { display: none !important; }

.mega-cats { columns: 3; column-gap: 48px; }
.mega ul, .drawer-cats ul { list-style: none; }
.mega .cat { break-inside: avoid; margin-bottom: 22px; }
.mega .cat > a {
  display: block; font-family: var(--serif); font-size: 16px; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 7px; padding-bottom: 5px; border-bottom: 1px solid var(--line);
}
.mega .cat > a:hover { color: var(--bronze); }
.mega .cat li a { font-size: 12.5px; color: var(--ink-soft); line-height: 1.9; }
.mega .cat li a:hover { color: var(--bronze); }
.mega .cat .cat-all a { color: var(--bronze); font-weight: 500; }
.mega-links { display: flex; flex-wrap: wrap; gap: 10px 28px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; }
.mega-links a { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze); }
.mega-links a:hover { color: var(--bronze-dark); }

/* ---------- header icons ---------- */
.head-icons { display: flex; gap: 20px; align-items: center; flex: none; }
.head-icons > a, .head-icons > button { position: relative; display: inline-flex; color: var(--ink); }
/* ≥ 39 × 39 px targets around the 19 px icons (WCAG 2.5.8, comfortable for touch); the layout does not move. */
.head-icons > a, .head-icons > button { padding: 10px; margin: -10px; }
.head-icons > a:hover, .head-icons > button:hover, .head-icons > button[aria-expanded="true"] { color: var(--bronze); }
.head-icons .icon { width: 19px; height: 19px; stroke-width: 1.4; }
.search-toggle .icon-close { display: none; }
.search-toggle[aria-expanded="true"] .icon-search { display: none; }
.search-toggle[aria-expanded="true"] .icon-close { display: block; }
/* «ΕΛ · EN» (inc/languages.php): server-rendered, fixed metrics — nothing shifts when the page loads */
.lang { display: flex; align-items: center; flex: none; font-size: 11px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.lang li { display: flex; align-items: center; }
.lang li + li::before { content: "·"; margin: 0 3px; color: var(--ink-mute); }
.lang a { display: inline-block; padding: 7px 4px; } /* ≥ 24 × 24 px target (WCAG 2.5.8) */
.lang a:hover { color: var(--bronze); }
.lang .current-lang a { color: var(--ink); font-weight: 600; }
.cart-count {
  position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--bronze); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
.cart-count.is-empty { display: none; }

/* ---------- search form (site-wide; header overlay + content pages) ---------- */
.search-form { display: flex; width: 100%; max-width: 720px; }
.search-form .search-field {
  flex: 1; min-width: 0; padding: 14px 16px; border: 1px solid var(--ink); border-right: 0; border-radius: 0;
  background: var(--paper); font-family: var(--sans); font-size: 15px; color: var(--ink); outline: none;
  -webkit-appearance: none; appearance: none;
}
.search-form .search-field::placeholder { color: var(--ink-mute); }
.search-form .search-field:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }
.search-form .search-field::-webkit-search-cancel-button { cursor: pointer; }
.search-form .search-submit {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 26px; flex: none;
  background: var(--ink); color: var(--ivory); border: 1px solid var(--ink); border-radius: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; cursor: pointer;
  transition: background .25s, border-color .25s;
}
.search-form .search-submit:hover { background: var(--bronze); border-color: var(--bronze); }
.search-form .search-submit .icon { width: 16px; height: 16px; }
.search-overlay { border-top: 1px solid var(--line); background: var(--paper); padding: 22px 0; }
.search-overlay .search-form { margin: 0 auto; }

/* ---------- burger + drawer ---------- */
.burger { display: none; color: var(--ink); padding: 4px; margin: -4px; flex: none; }
.burger .icon { width: 24px; height: 24px; }
.drawer {
  position: fixed; inset: 0 auto 0 0; width: min(360px, 86vw); background: var(--paper); z-index: 950;
  transform: translateX(-102%); visibility: hidden;
  transition: transform .35s cubic-bezier(.3, .7, .3, 1), visibility 0s linear .35s;
  padding: 22px 28px 40px; overflow-y: auto; overscroll-behavior: contain; box-shadow: 24px 0 60px rgba(0, 0, 0, .18);
}
.drawer.open { transform: none; visibility: visible; transition-delay: 0s; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer-brand .crest { height: 44px; width: auto; }
.drawer .close { display: inline-flex; padding: 8px; margin-right: -8px; color: var(--ink); }
.drawer .close:hover { color: var(--bronze); }
.drawer .close .icon { width: 22px; height: 22px; }
.drawer a.top {
  display: block; font-family: var(--serif); font-size: 19px; letter-spacing: .1em;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.drawer a.top:hover, .drawer a.top[aria-current] { color: var(--bronze); }
.drawer-menu .sub-menu { padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
.drawer a.sub {
  display: block; font-size: 13px; color: var(--ink-soft); padding: 8px 0 8px 12px; border-left: 1px solid var(--line);
}
.drawer a.sub:hover, .drawer a.sub[aria-current] { color: var(--bronze); border-left-color: var(--bronze); }
.drawer-cats { margin-top: 26px; }
.drawer-cats .lab {
  font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px;
}
.drawer-account { margin-top: 26px; display: flex; flex-direction: column; gap: 4px; }
.drawer-account a { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.drawer-account a:hover { color: var(--bronze); }
.drawer-lang { margin: 22px 0 0 -8px; font-size: 12px; }
.drawer-lang a { padding: 9px 8px; }
.drawer-back { position: fixed; inset: 0; background: rgba(18, 16, 16, .45); z-index: 940; }
html.curc-scroll-lock, body.drawer-open { overflow: hidden; }

/* ---------- footer ---------- */
footer.site { background: var(--footer); color: var(--footer-ink); border-top: 1px solid var(--dark-line); }
.foot-grid {
  max-width: var(--maxw); margin: 0 auto; padding: 70px var(--gutter) 50px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px;
}
.brand-f .crest-f { height: 74px; width: auto; margin-bottom: 18px; }
.brand-f .name { font-family: var(--serif); font-size: 21px; letter-spacing: .13em; color: #f7f3e8; line-height: 1.3; }
.brand-f .tagline-f { font-family: var(--script); font-size: 19px; color: var(--gold); margin-top: 5px; line-height: 1.3; }
.brand-f .blurb { font-size: 13px; color: var(--dark-soft); margin-top: 20px; max-width: 34ch; }
.brand-f .social { display: flex; gap: 6px; margin: 18px 0 0 -8px; }
.brand-f .social a { display: inline-flex; padding: 8px; color: var(--footer-ink); }
.brand-f .social a:hover { color: var(--gold); }
.brand-f .social .icon { width: 20px; height: 20px; }
.foot-h { font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-weight: 600; line-height: 1.4; }
.foot-menu li { margin-bottom: 2px; }
.foot-menu a { display: inline-block; padding: 4px 0; font-size: 13px; color: var(--dark-soft); } /* 24 px targets */
.foot-menu a:hover, .foot-menu .current-menu-item > a { color: #f4efe4; }
.foot-bottom { border-top: 1px solid var(--dark-line); }
.foot-bottom .in {
  max-width: var(--maxw); margin: 0 auto; padding: 20px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .12em; color: #9a927f; /* 6.1:1 on the footer (WCAG AA for 11px text) */
}
.foot-bottom a { display: inline-block; padding-block: 4px; }
.foot-bottom a:hover { color: #f4efe4; }
.foot-legal { margin-right: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.foot-bottom .legal-menu { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.foot-cookies {
  padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.foot-cookies:hover { color: #f4efe4; }
.foot-company { flex-basis: 100%; order: 5; letter-spacing: .06em; line-height: 1.7; overflow-wrap: anywhere; }
.foot-company .sep { color: #57503e; }

/* ---------- back to top (header.js): a dark seal whose gold ring fills as the page scrolls ---------- */
.to-top {
  position: fixed; right: 28px; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 350;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: var(--ivory); box-shadow: 0 12px 30px rgba(18, 16, 16, .28);
  opacity: 0; visibility: hidden; transform: translate3d(0, 14px, 0);
  transition: opacity .45s var(--ease-out), transform .55s var(--ease-out), visibility 0s linear .55s, background .25s, bottom .45s var(--ease-out);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--bronze); }
.to-top .icon { width: 18px; height: 18px; transition: transform .45s var(--ease-out); }
.to-top:hover .icon { transform: translate3d(0, -3px, 0); }
.to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.to-top-ring circle { fill: none; stroke-width: 1.5; }
.to-top-ring .track { stroke: rgba(247, 245, 240, .16); }
.to-top-ring .fill { stroke: var(--gold); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
/* Out of the way: while a dialog locks the page (drawer, cart panel, photo viewer) and while the cookie banner asks. */
html.curc-scroll-lock .to-top, body:has(.cmplz-cookiebanner.cmplz-show) .to-top { opacity: 0; visibility: hidden; }
/* Above Complianz's «manage consent» tab (bottom right, computers only) and the phone buy bar of a piece's page. */
@media (min-width: 769px) {
  body:has(#cmplz-manage-consent .cmplz-manage-consent.cmplz-show) .to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 900px) {
  body:has(.pdp-sticky.is-on) .to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
#site-header:focus { outline: none; } /* the keyboard's landing spot after «back to top» (tabindex -1, never tabbed to) */

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .head-inner { gap: 20px; }
  .brand .name { font-size: 18px; }
  .brand .tagline { font-size: 16px; }
  nav.main .menu { gap: 22px; }
  nav.main .menu > li > a { letter-spacing: .18em; }
  .head-icons { gap: 18px; }
}
@media (max-width: 1080px) {
  .head-inner { gap: 16px; }
  .brand { gap: 11px; }
  .brand .crest { height: 44px; }
  .brand .name { font-size: 16px; letter-spacing: .1em; }
  .brand .tagline { font-size: 15px; }
  nav.main .menu { gap: 16px; }
  nav.main .menu > li > a { font-size: 11px; letter-spacing: .12em; }
  .head-icons { gap: 14px; }
  .mega { padding: 28px 30px; }
  .mega-cats { column-gap: 34px; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  /* The wordmark keeps its full width next to the menu: the header offers only the other language («EN» / «ΕΛ») */
  .head-icons .lang .current-lang { display: none; }
  .head-icons .lang li::before { content: none; }
  .head-inner { gap: 12px; }
  nav.main .menu { gap: 13px; }
}
@media (max-width: 900px) {
  nav.main { display: none; }
  .burger { display: inline-flex; }
  .brand .crest { height: 50px; }
  .brand .name { font-size: 18px; letter-spacing: .12em; }
  .brand .tagline { font-size: 16px; }
  .head-icons { gap: 18px; }
  .foot-grid { grid-template-columns: 1fr 1fr; } /* prototype: 2×2 from 900px down, brand block in the first cell */
  .search-form .search-field { font-size: 16px; } /* no iOS focus zoom (the overlay focuses the field) */
}
@media (max-width: 782px) { .admin-bar header.site { top: 0; } }
@media (max-width: 560px) {
  .to-top { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; }
  :root { --header-h: 72px; }
  .annbar { font-size: 10px; letter-spacing: .14em; padding: 8px 14px; }
  .annbar-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .head-inner { gap: 10px; }
  .head-icons { gap: 10px; }
  .head-icons > a, .head-icons > button { padding: 5px; margin: -5px; } /* 29 px targets that meet, never overlap */
  .cart-count { top: 2px; right: 0; }
  .head-icons .lang { display: none; }
  .brand { gap: 9px; }
  .brand .crest { height: 40px; }
  .brand .name { font-size: 14.5px; letter-spacing: .1em; }
  .brand .tagline { font-size: 14px; margin-top: 2px; }
  .search-overlay { padding: 14px 0; }
  .search-form .search-submit { padding: 0 16px; }
  .search-form .search-submit .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .search-form .search-submit .icon { width: 19px; height: 19px; }
  .foot-bottom .in { flex-direction: column; align-items: flex-start; }
  .foot-legal { margin-right: 0; order: 3; }
  .foot-copy { order: 1; }
  .foot-company { order: 2; }
  .foot-credit { order: 4; }
}
@media (max-width: 380px) {
  .foot-grid { column-gap: 28px; } /* 2×2 footer still fits below the prototype's 390px */
}
@media (max-width: 400px) {
  .head-inner { gap: 8px; }
  .brand { gap: 8px; }
  .brand .crest { height: 36px; }
  .brand .name { font-size: clamp(12px, 3.6vw, 14.5px); letter-spacing: .08em; }
  .brand .tagline { font-size: 13px; }
}
@media (max-width: 350px) {
  .head-inner, .head-icons { gap: 6px; }
  .brand .crest { height: 32px; }
  .brand .name { font-size: 11px; letter-spacing: .06em; }
  .foot-grid { column-gap: 20px; }
  .brand-f .name { font-size: 18px; letter-spacing: .1em; }
}