/* =============================================================================
   SHOPIMAL — GLOBAL COMPONENTS
   Build Brief §6. Announcement bar, header, mobile menu, footer, breadcrumbs,
   pagination, tabs, accordion, toast, modal, Messenger button.

   Mobile-first. Every value comes from tokens.css.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. ANNOUNCEMENT BAR — §6.1
   -------------------------------------------------------------------------- */

.sh-announce{
  background:var(--blue-900); color:#fff;
  font-family:var(--font-body); font-size:13px; font-weight:500; line-height:1.4;
  padding:10px var(--gutter); text-align:center; position:relative;
}
.sh-announce[hidden]{ display:none; }
.sh-announce__text{ display:block; padding-right:28px; }
.sh-announce__close{
  position:absolute; top:50%; right:calc(var(--gutter) - 10px); transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; color:#fff; cursor:pointer; border-radius:var(--radius-pill);
  opacity:.75; transition:opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.sh-announce__close:hover{ opacity:1; background:rgba(255,255,255,.12); }
.sh-announce__close:focus-visible{ outline:2px solid #fff; outline-offset:2px; opacity:1; }

/* -----------------------------------------------------------------------------
   2. HEADER — §6.2
   -------------------------------------------------------------------------- */

.sh-header{
  background:var(--slate-0);
  border-bottom:1px solid var(--slate-100);
  position:sticky; top:0; z-index:600;
  transition:box-shadow var(--dur) var(--ease);
}
.sh-header.is-stuck{ box-shadow:var(--shadow); }

.sh-header__inner{
  max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
  height:60px; display:flex; align-items:center; gap:var(--sp-3);
}
@media (min-width:1024px){ .sh-header__inner{ height:72px; gap:var(--sp-6); } }

/* Mobile: hamburger left, logo centred, cart right. */
.sh-header__burger{
  width:44px; height:44px; margin-left:-10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--slate-700); cursor:pointer;
  border-radius:var(--radius-pill);
}
.sh-header__brand{ display:flex; align-items:center; }
@media (max-width:1023px){
  .sh-header__brand{ position:absolute; left:50%; transform:translateX(-50%); }
}
@media (min-width:1024px){ .sh-header__burger{ display:none; } }

.sh-nav{ display:none; }
@media (min-width:1024px){
  .sh-nav{ display:flex; align-items:center; gap:var(--sp-5); }
  .sh-nav a{
    font-family:var(--font-display); font-weight:600; font-size:15px;
    color:var(--slate-700); text-decoration:none; white-space:nowrap;
    padding:6px 0; transition:color var(--dur) var(--ease);
  }
  .sh-nav a:hover,
  .sh-nav li.current-menu-item > a,
  .sh-nav li.current-menu-parent > a{ color:var(--blue-600); }
  .sh-nav ul{ display:flex; align-items:center; gap:var(--sp-5); list-style:none; margin:0; padding:0; }
}

.sh-header__actions{
  margin-left:auto; display:flex; align-items:center; gap:var(--sp-1);
}
.sh-iconbtn{
  width:44px; height:44px; position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--slate-600); cursor:pointer;
  border-radius:var(--radius-pill); text-decoration:none;
  transition:color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.sh-iconbtn:hover{ color:var(--blue-600); background:var(--blue-50); }
.sh-iconbtn--account{ display:none; }
@media (min-width:768px){ .sh-iconbtn--account{ display:inline-flex; } }

.sh-cart-count{
  position:absolute; top:4px; right:2px;
  min-width:18px; height:18px; padding:0 4px;
  background:var(--pink-600); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:11px; line-height:18px;
  text-align:center; border-radius:var(--radius-pill);
  font-variant-numeric:tabular-nums;
}
.sh-cart-count[hidden]{ display:none; }

/* Search: a full-width row below the header on tap. */
.sh-search{
  display:none; border-top:1px solid var(--slate-100); background:var(--slate-0);
}
.sh-search.is-open{ display:block; }
.sh-search__inner{
  max-width:var(--container); margin-inline:auto;
  padding:var(--sp-3) var(--gutter); display:flex; gap:var(--sp-2);
}
.sh-search__inner input[type="search"]{ flex:1; }

/* -----------------------------------------------------------------------------
   3. MOBILE MENU — §6.2. Slides in from the left, full height.
   -------------------------------------------------------------------------- */

.sh-drawer-backdrop{
  position:fixed; inset:0; z-index:900;
  background:rgba(7,26,85,.5);
  opacity:0; visibility:hidden;
  /* visibility flips instantly on open and is delayed on close, so the panel is
     focusable the moment it opens. Transitioning visibility itself would leave
     it computed as hidden for the whole duration, and a hidden element cannot
     take focus - which breaks the focus trap. */
  transition:opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.sh-drawer-backdrop.is-open{
  opacity:1; visibility:visible;
  transition:opacity var(--dur) var(--ease), visibility 0s linear 0s;
}

.sh-menu{
  position:fixed; top:0; left:0; bottom:0; z-index:1000;
  width:min(88vw, 340px); background:var(--slate-0);
  display:flex; flex-direction:column;
  transform:translateX(-100%);
  transition:transform var(--dur) var(--ease);
  overflow-y:auto; overscroll-behavior:contain;
}
.sh-menu.is-open{ transform:translateX(0); }

.sh-menu__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-3) var(--sp-5); border-bottom:1px solid var(--slate-100);
  min-height:60px; flex:0 0 auto;
}
.sh-menu__list{ list-style:none; margin:0; padding:var(--sp-2) 0; flex:1 1 auto; }
.sh-menu__list a{
  display:flex; align-items:center; min-height:56px;
  padding:0 var(--sp-5);
  font-family:var(--font-display); font-weight:600; font-size:18px;
  color:var(--blue-900); text-decoration:none;
}
.sh-menu__list a:hover,
.sh-menu__list a:focus-visible{ background:var(--blue-50); color:var(--blue-700); }
.sh-menu__foot{
  flex:0 0 auto; border-top:1px solid var(--slate-100);
  padding:var(--sp-4) var(--sp-5) var(--sp-6);
}
.sh-menu__foot a{
  display:flex; align-items:center; gap:var(--sp-3); min-height:44px;
  font-size:15px; color:var(--slate-600); text-decoration:none;
}
.sh-menu__foot a:hover{ color:var(--blue-600); }

body.sh-no-scroll{ overflow:hidden; }

/* -----------------------------------------------------------------------------
   4. FOOTER — §6.3
   -------------------------------------------------------------------------- */

.sh-footer{ background:var(--blue-900); color:var(--slate-200); }
.sh-footer__inner{
  max-width:var(--container); margin-inline:auto;
  padding:var(--sp-9) var(--gutter) var(--sp-6);
}
.sh-footer__cols{ display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:768px){
  .sh-footer__cols{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-7); }
}

.sh-footer__brand{ padding-bottom:var(--sp-6); }
.sh-footer__brand .sh-logo{ height:34px; width:auto; display:block; }
.sh-footer__tagline{
  margin-top:var(--sp-3); font-size:14px; line-height:1.6;
  color:var(--blue-200); max-width:32ch;
}
.sh-footer__social{ display:flex; gap:var(--sp-2); margin-top:var(--sp-4); }
.sh-footer__social a{
  width:40px; height:40px; border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue-800); color:#fff; text-decoration:none;
  transition:background-color var(--dur) var(--ease);
}
.sh-footer__social a:hover{ background:var(--pink-700); color:#fff; }

.sh-footer__col{ border-top:1px solid var(--blue-800); }
@media (min-width:768px){ .sh-footer__col{ border-top:0; } }

.sh-footer__title{
  font-family:var(--font-display); font-weight:600; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:#fff;
  margin:0; padding:0;
}
/* Mobile: the column heading is the accordion trigger. */
.sh-footer__toggle{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) 0; color:#fff; text-align:left;
}
.sh-footer__toggle svg{ transition:transform var(--dur) var(--ease); flex:0 0 auto; }
.sh-footer__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.sh-footer__links{ list-style:none; margin:0; padding:0 0 var(--sp-4); }
.sh-footer__links a{
  display:block; padding:7px 0; font-size:14.5px;
  color:var(--slate-200); text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.sh-footer__links a:hover,
.sh-footer__links a:focus-visible{ color:var(--pink-300); }

@media (max-width:767px){
  .sh-footer__links[hidden]{ display:none; }
}
@media (min-width:768px){
  .sh-footer__toggle{ padding:0 0 var(--sp-3); pointer-events:none; }
  .sh-footer__toggle svg{ display:none; }
  .sh-footer__links{ display:block !important; padding-bottom:0; }
  .sh-footer__links[hidden]{ display:block; }
}

.sh-footer__bottom{
  border-top:1px solid var(--blue-800); margin-top:var(--sp-6); padding-top:var(--sp-4);
  display:flex; flex-wrap:wrap; gap:var(--sp-3);
  justify-content:space-between; align-items:center;
  font-size:12.5px; color:var(--blue-300);
}
.sh-footer__pay{ display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.sh-footer__pay span{
  font-family:var(--font-display); font-weight:600; font-size:11px;
  letter-spacing:.04em; color:var(--blue-200);
  background:var(--blue-800); border-radius:var(--radius-sm);
  padding:5px 10px;
}
/* Phase 7 drops trade licence and business details in here. */
.sh-footer__regulatory:empty{ display:none; }
.sh-footer__regulatory{
  margin-top:var(--sp-3); font-size:12px; color:var(--blue-300); line-height:1.6;
}

/* Checkout keeps only Privacy and Terms. §7.5 */
.sh-footer--checkout .sh-footer__inner{ padding-block:var(--sp-6); }

/* -----------------------------------------------------------------------------
   5. BREADCRUMBS — §6.8
   -------------------------------------------------------------------------- */

.sh-breadcrumbs{
  max-width:var(--container); margin-inline:auto;
  padding:var(--sp-4) var(--gutter) 0;
  font-size:13px; color:var(--slate-500);
}
.sh-breadcrumbs ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
}
.sh-breadcrumbs a{ color:var(--blue-600); text-decoration:none; }
.sh-breadcrumbs a:hover{ text-decoration:underline; }
.sh-breadcrumbs [aria-current="page"]{ color:var(--slate-700); }
.sh-breadcrumbs__sep{ color:var(--slate-300); }

/* -----------------------------------------------------------------------------
   6. PAGINATION — §7.2
   -------------------------------------------------------------------------- */

.sh-pagination{ display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.sh-pagination a,
.sh-pagination span{
  min-width:40px; height:40px; padding:0 var(--sp-3);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:14px;
  color:var(--slate-600); text-decoration:none;
  background:var(--slate-0); border:1px solid var(--slate-200);
  border-radius:var(--radius-pill);
  transition:all var(--dur) var(--ease);
}
.sh-pagination a:hover{ border-color:var(--blue-600); color:var(--blue-600); }
.sh-pagination .current{
  background:var(--pink-600); border-color:var(--pink-600); color:#fff;
}

/* -----------------------------------------------------------------------------
   7. TABS — §6.8. Accordion below 768px.
   -------------------------------------------------------------------------- */

.sh-tabs__list{
  display:flex; gap:0; list-style:none; margin:0; padding:0;
  border-bottom:2px solid var(--slate-200);
  overflow-x:auto; scrollbar-width:none;
}
.sh-tabs__list::-webkit-scrollbar{ display:none; }
.sh-tabs__tab{
  padding:13px 22px; background:none; border:0; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  color:var(--slate-500); white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sh-tabs__tab[aria-selected="true"]{ color:var(--blue-900); border-bottom-color:var(--pink-600); }
.sh-tabs__panel{ padding-top:var(--sp-6); }
.sh-tabs__panel[hidden]{ display:none; }

/* -----------------------------------------------------------------------------
   8. ACCORDION — §6.8
   -------------------------------------------------------------------------- */

.sh-accordion{
  border:1px solid var(--slate-200); border-radius:var(--radius);
  overflow:hidden; background:var(--slate-0);
}
.sh-accordion__item + .sh-accordion__item{ border-top:1px solid var(--slate-100); }
.sh-accordion__trigger{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--blue-900);
}
.sh-accordion__trigger svg{ flex:0 0 auto; transition:transform var(--dur) var(--ease); color:var(--slate-400); }
.sh-accordion__trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }
.sh-accordion__panel{ padding:0 20px 18px; font-size:14.5px; color:var(--slate-600); max-width:70ch; }
.sh-accordion__panel[hidden]{ display:none; }

/* -----------------------------------------------------------------------------
   9. TOASTS — §6.8. Bottom-centre mobile, bottom-right desktop.
   -------------------------------------------------------------------------- */

.sh-toasts{
  position:fixed; z-index:1100;
  left:var(--sp-4); right:var(--sp-4); bottom:var(--sp-4);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  pointer-events:none;
}
@media (min-width:768px){
  .sh-toasts{ left:auto; right:var(--sp-6); bottom:var(--sp-6); align-items:flex-end; }
}
.sh-toast{
  pointer-events:auto;
  background:var(--slate-0); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  border-left:4px solid var(--success);
  padding:14px 18px; max-width:360px; width:100%;
  display:flex; gap:var(--sp-3); align-items:flex-start;
  transform:translateY(12px); opacity:0;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.sh-toast.is-in{ transform:translateY(0); opacity:1; }
.sh-toast--error{ border-left-color:var(--error); }
.sh-toast__title{ font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--blue-900); }
.sh-toast__desc{ font-size:13px; color:var(--slate-500); margin-top:2px; }
.sh-toast__close{
  margin-left:auto; background:none; border:0; cursor:pointer;
  color:var(--slate-400); width:24px; height:24px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
}
.sh-toast__close:hover{ color:var(--slate-700); }

/* -----------------------------------------------------------------------------
   10. MODAL — §6.8. Max 520px, focus trapped, ESC closes.
   -------------------------------------------------------------------------- */

.sh-modal-backdrop{
  position:fixed; inset:0; z-index:1200;
  background:rgba(7,26,85,.5);
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4);
  opacity:0; visibility:hidden;
  /* Same reasoning as the drawer backdrop above: instant on open, delayed on
     close, so the first control inside can take focus immediately. */
  transition:opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.sh-modal-backdrop.is-open{
  opacity:1; visibility:visible;
  transition:opacity var(--dur) var(--ease), visibility 0s linear 0s;
}
.sh-modal{
  background:var(--slate-0); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:100%; max-width:520px; max-height:calc(100dvh - 48px);
  overflow-y:auto; padding:var(--sp-6);
  transform:translateY(8px) scale(.98);
  transition:transform var(--dur) var(--ease);
}
.sh-modal-backdrop.is-open .sh-modal{ transform:none; }
.sh-modal__head{ display:flex; align-items:flex-start; gap:var(--sp-4); margin-bottom:var(--sp-3); }
.sh-modal__title{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--blue-900); margin:0; }
.sh-modal__close{
  margin-left:auto; background:none; border:0; cursor:pointer; color:var(--slate-500);
  width:36px; height:36px; flex:0 0 auto; border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; justify-content:center;
}
.sh-modal__close:hover{ background:var(--slate-100); color:var(--slate-700); }

/* -----------------------------------------------------------------------------
   11. MESSENGER BUTTON — Phase 2.9
   A plain m.me link. No chat plugin, no third-party script.
   -------------------------------------------------------------------------- */

.sh-messenger{
  position:fixed; right:var(--sp-4); bottom:var(--sp-4); z-index:500;
  width:56px; height:56px; border-radius:var(--radius-pill);
  background:var(--blue-600); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); text-decoration:none;
  transition:background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sh-messenger:hover{ background:var(--blue-700); color:#fff; transform:translateY(-2px); }
@media (min-width:768px){
  .sh-messenger{ right:var(--sp-6); bottom:var(--sp-6); }
}

/* -----------------------------------------------------------------------------
   12. SKIP LINK
   -------------------------------------------------------------------------- */

.sh-skip{
  position:absolute; left:var(--sp-4); top:-100px; z-index:1300;
  background:var(--blue-900); color:#fff;
  padding:12px 20px; border-radius:var(--radius-pill);
  font-family:var(--font-display); font-weight:600; font-size:14px; text-decoration:none;
  transition:top var(--dur) var(--ease);
}
.sh-skip:focus{ top:var(--sp-4); color:#fff; }

/* -----------------------------------------------------------------------------
   13. ASTRA CHROME REMOVAL
   The child theme renders its own header and footer, so Astra's wrappers are
   flattened rather than left to fight the layout.
   -------------------------------------------------------------------------- */

.site-header,.site-footer,#masthead,#colophon{ display:none !important; }
.sh-header,.sh-footer,.sh-announce{ display:block !important; }
.sh-header{ display:block !important; }
#page .site-content{ padding-top:0; }

/* -----------------------------------------------------------------------------
   14. ASTRA OVERRIDES THAT ONLY SHOW UP ON A RENDERED PAGE
   -------------------------------------------------------------------------- */

/* Astra gives every button 15px 30px of padding, which inflated the icon
   buttons to 60px and squeezed their icons to zero width. */
.sh-header .sh-iconbtn,
.sh-header__burger,
.sh-menu .sh-iconbtn,
.sh-announce__close{
  padding:0 !important; min-width:0; flex:0 0 auto;
}
.sh-header .sh-iconbtn,
.sh-menu .sh-iconbtn{ width:44px !important; height:44px !important; }
.sh-header__burger{ width:44px !important; height:44px !important; }
.sh-iconbtn svg,
.sh-header__burger svg,
.sh-announce__close svg{ flex:0 0 auto; width:auto; height:auto; }

/* Astra 4.x renders the sale flash as .ast-onsale-card, not span.onsale.
   Sale pills are pink-600 with white text either way. Build Brief section 6.7. */
.woocommerce span.onsale,
.ast-onsale-card,
.ast-on-card-button.ast-onsale-card{
  background:var(--pink-600) !important;
  color:#fff !important;
  font-family:var(--font-display); font-weight:700; font-size:11.5px;
  letter-spacing:.05em; line-height:1.4;
  padding:5px 13px !important; border-radius:var(--radius-pill) !important;
  min-height:0; min-width:0; box-shadow:none;
}

/* -----------------------------------------------------------------------------
   15. PURCHASE BUTTONS WIN, WHATEVER MARKUP WRAPS THEM

   WooCommerce renders add-to-cart inside a Gutenberg .wp-block-button on some
   pages, and Astra styles that blue. Anything that leads to a purchase is
   pink-600 - Build Brief section 2.1 and the section 13 default. Generic block
   buttons stay Primary blue, which is what section 13 asks for.
   -------------------------------------------------------------------------- */

.wp-block-button .wp-block-button__link.add_to_cart_button,
a.add_to_cart_button,
a.product_type_simple,
button.single_add_to_cart_button,
.woocommerce a.checkout-button,
.woocommerce button.checkout-button{
  background:var(--pink-600) !important;
  color:#fff !important;
  border-radius:var(--radius-pill) !important;
  font-family:var(--font-display);
  font-weight:600;
  border:0 !important;
}
.wp-block-button .wp-block-button__link.add_to_cart_button:hover,
a.add_to_cart_button:hover,
a.product_type_simple:hover,
button.single_add_to_cart_button:hover,
.woocommerce a.checkout-button:hover{ background:var(--pink-700) !important; color:#fff !important; }

/* Generic block buttons follow the Primary variant. */
.wp-block-button .wp-block-button__link:not(.add_to_cart_button){
  border-radius:var(--radius-pill);
  font-family:var(--font-display); font-weight:600; font-size:15px;
  padding:14px 28px; min-height:48px;
}


/* -----------------------------------------------------------------------------
   NAV LABELS AT THE NARROW DESKTOP BAND
   Seven categories plus Shop need 685px of bar with their full names. There
   is 622px between the logo and the icons at 1024, and 798px from 1200 up, so
   the two longest names shorten between those points rather than dropping two
   categories out of the navigation entirely. display:none, not visually-hidden,
   so a screen reader is offered exactly one of the pair.
   -------------------------------------------------------------------------- */

.sh-nav__full{ display:none; }
.sh-nav__short{ display:inline; }

@media (min-width:1200px){
  .sh-nav__full{ display:inline; }
  .sh-nav__short{ display:none; }
}

/* -----------------------------------------------------------------------------
   COOKIE NOTICE
   The plugin writes its colours inline, so the two that carry meaning are
   overridden here: one pink CTA, one quiet decline, and the policy as a link
   rather than a third button competing with both.
   -------------------------------------------------------------------------- */

#cookie-notice{ font-family:var(--font-body); }
#cookie-notice .cookie-notice-container{
  max-width:var(--container); margin-inline:auto;
  padding:var(--sp-4) var(--gutter);
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5);
  text-align:left;
}
#cn-notice-text{ flex:1 1 320px; font-size:14px; line-height:1.55; }
#cn-notice-buttons{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }

#cookie-notice .cn-button{
  font-family:var(--font-body); font-size:14px; font-weight:600;
  border-radius:var(--radius-pill); padding:10px var(--sp-5);
  margin:0; border:1px solid transparent; text-shadow:none; box-shadow:none;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
#cn-accept-cookie{ background:var(--pink-600) !important; color:var(--slate-0); }
#cn-accept-cookie:hover{ background:var(--pink-700) !important; }

/* Declining has to look like a real option, not a disabled one. */
#cn-refuse-cookie{
  background:transparent !important; color:var(--slate-0);
  border-color:rgba(255,255,255,.45);
}
#cn-refuse-cookie:hover{ background:rgba(255,255,255,.10) !important; border-color:var(--slate-0); }

/* The policy is a link, not a third button shouting at the other two. */
#cn-more-info{
  background:transparent !important; color:var(--slate-0);
  padding:10px 0; text-decoration:underline; text-underline-offset:3px;
  border-color:transparent;
}
#cn-more-info:hover{ color:var(--blue-200); }

#cookie-notice .cn-button:focus-visible{
  outline:3px solid var(--slate-0); outline-offset:2px;
}

/* The close cross is set to accept while it is labelled decline. It is removed
   rather than restyled: with an explicit Accept and Decline present, a third
   ambiguous dismissal is what makes consent banners untrustworthy. */
#cn-close-notice{ display:none !important; }

@media (max-width:600px){
  #cookie-notice .cookie-notice-container{ align-items:flex-start; }
  #cn-notice-buttons{ width:100%; }
  #cn-accept-cookie, #cn-refuse-cookie{ flex:1 1 auto; }
}