/* 04-chrome.css: Shoptimizer's header styled from tokens; the Woopify footer; the announcement bar.
 * Design system, Header: surface with a 1px border underline, logo left, one line of navigation at desktop
 * in sentence case (the four doors, then Our promise and Help), a panel of collections under each door,
 * search and cart icons; drawer on phone; not sticky on phone. Footer: ground, 1px border above, columns
 * at desktop, stacked at phone, policy links in one line, copyright line.
 * Shoptimizer 2.9.8 class names; checked on the rendered page at every stage. */

/* Announcement bar: one line, ground with ink text (design system), no dismiss. Overrides 03-base's accent bar. */
body.woopify .woopify-announcement { background: var(--color-bg); color: var(--color-ink); border-bottom: 1px solid var(--color-border); font-size: var(--fs-label); line-height: var(--lh-label); padding: var(--space-sm) 0; text-align: center; }
body.woopify .woopify-announcement p { margin: 0; }
body.woopify .top-bar { background: var(--color-bg); color: var(--color-ink); border: 0; }

/* Header */
body.woopify .site-header,
body.woopify .main-header,
body.woopify .header-4-container,
body.woopify .col-full-nav { background: var(--color-surface); }
body.woopify .site-header { border-bottom: 1px solid var(--color-border); box-shadow: none; }
body.woopify .site-branding img,
body.woopify .custom-logo-link img { height: 44px; max-height: 44px; width: auto; }
body.woopify .custom-logo-link img.woopify-logo-mark { display: none; }
body.woopify .main-navigation ul.menu > li > a,
body.woopify .shoptimizer-primary-navigation ul.menu > li > a {
  font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-ink);
}
body.woopify .main-navigation ul.menu > li > a:hover,
body.woopify .main-navigation ul.menu > li.current-menu-item > a,
body.woopify .main-navigation ul.menu > li.current-menu-ancestor > a { color: var(--color-accent); }
body.woopify .main-navigation ul.menu > li > a:focus-visible,
body.woopify a:focus-visible,
body.woopify button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* The door panel: collections listed beneath a door. */
body.woopify .main-navigation ul.menu .sub-menu-wrapper,
body.woopify .main-navigation ul.menu ul.sub-menu { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); }
body.woopify .main-navigation ul.menu ul.sub-menu li a { font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 400; color: var(--color-ink); text-transform: none; }
body.woopify .main-navigation ul.menu ul.sub-menu li a:hover { color: var(--color-accent); }
/* Header icons: ink, accent on hover. */
body.woopify .cart-contents,
body.woopify .cart-contents .amount,
body.woopify .site-header .site-search,
body.woopify .shoptimizer-myaccount a { color: var(--color-ink); }
body.woopify .shoptimizer-cart a.cart-contents .count, body.woopify a.cart-contents .count { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
body.woopify .shoptimizer-cart a.cart-contents .count::after, body.woopify a.cart-contents .count::after { border-color: var(--color-accent); }
/* Shoptimizer's customizer fonts and colours (Inter, #444, #dc9814) never reach the header: body font, ink. */
body.woopify :is(.site-header, .shoptimizer-cart) :is(.cart-contents, .cart-contents *, .site-search, .site-search button, .search-field) { font-family: var(--font-body); }
body.woopify .site-search button, body.woopify .search-submit { color: var(--color-ink); font-family: var(--font-body); }
body.woopify .menu-toggle .bar-text { color: var(--color-ink); font-family: var(--font-body); }
body.woopify .menu-toggle .bar { background-color: var(--color-ink); }
/* Shoptimizer's own mini-cart panel (FunnelKit's drawer is the one that opens): tokens if it ever shows. */
body.woopify .shoptimizer-mini-cart-wrap { background: var(--color-surface); color: var(--color-ink); }
body.woopify .shoptimizer-mini-cart-wrap :is(.cart-drawer-heading, .woocommerce-mini-cart__empty-message) { color: var(--color-ink); font-family: var(--font-body); }
/* Breadcrumb: muted ink, separator at full opacity (contrast); none on the home page. */
body.woopify .woocommerce-breadcrumb .breadcrumb-separator { color: var(--color-ink-muted); opacity: 1; }
body.woopify.page-template-woopify-home .woocommerce-breadcrumb { display: none; }
/* Shoptimizer's own search field in the header. */
body.woopify .site-search input[type=search] { background: var(--color-surface); border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); font-family: var(--font-body); color: var(--color-ink); }

@media (max-width: 992px) {
  /* Not sticky on phone (height budget) and never covering the content (MCS: header covers the content). */
  body.woopify .site-header, body.woopify .main-header { position: relative !important; top: auto !important; height: auto !important; }
  body.woopify.sticky-m .site-header { position: relative !important; }
  body.woopify .menu-toggle, body.woopify .mobile-menu { color: var(--color-ink); }
  body.woopify .col-full-nav { background: var(--color-surface); }
  body.woopify .main-navigation ul.menu > li > a { font-size: var(--fs-body-md); }
  /* Phone drawer: collections nested plainly under each door (no desktop panel box). */
  body.woopify .main-navigation ul.menu .sub-menu-wrapper, body.woopify .main-navigation ul.menu ul.sub-menu { border: 0; border-radius: 0; box-shadow: none; }
  /* The closed drawer sits off-canvas; hidden so it is never read or tabbed into while closed. */
  body.woopify:not(.mobile-toggled) .col-full-nav { visibility: hidden; }
  body.woopify .site-header .custom-logo-link img { height: 36px; max-height: 36px; }
}
@media (max-width: 767px) {
  body.woopify .custom-logo-link img:not(.woopify-logo-mark) { display: none; }
  body.woopify .custom-logo-link img.woopify-logo-mark { display: block; height: 36px; max-height: 36px; width: auto; }
}

/* Footer (template-parts/footer-chrome.php) */
body.woopify .site-footer { background: var(--color-bg); padding: 0; border: 0; }
body.woopify .woopify-footer { background: var(--color-bg); color: var(--color-ink); border-top: 1px solid var(--color-border); padding: var(--space-xl) 0 var(--space-lg); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
body.woopify .woopify-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: var(--space-lg); }
body.woopify .woopify-footer__menu, body.woopify .woopify-footer__menu ul { list-style: none; margin: 0; padding: 0; }
body.woopify .woopify-footer__shop .woopify-footer__menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }
/* The Shop column lists the doors and collections; Our promise and Help sit in the links column. */
body.woopify .woopify-footer__shop .woopify-footer__menu > li.menu-item-object-page { display: none; }
body.woopify .woopify-footer__shop .woopify-footer__menu > li > a { font-weight: 600; color: var(--color-ink); text-decoration: none; }
body.woopify .woopify-footer__menu .sub-menu { margin-top: var(--space-xs); }
body.woopify .woopify-footer__menu li { margin: 0 0 var(--space-xs); }
body.woopify .woopify-footer a:not(.button) { color: var(--color-ink); text-decoration: none; }
body.woopify .woopify-footer a:not(.button):hover { color: var(--color-accent); text-decoration: underline; }
body.woopify .woopify-footer__nav .woopify-footer__menu > li > a { font-weight: 600; }
body.woopify .woopify-footer__support p { margin: 0 0 var(--space-sm); }
body.woopify .woopify-footer__policy { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
body.woopify .woopify-footer__policy-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
body.woopify .woopify-footer__legal { margin: var(--space-md) 0 0; color: var(--color-ink-muted); font-size: var(--fs-label); }
@media (max-width: 767px) {
  body.woopify .woopify-footer__cols { grid-template-columns: 1fr; gap: var(--space-lg); }
  body.woopify .woopify-footer__shop .woopify-footer__menu { grid-template-columns: 1fr; }
}