/* Generated by scripts/build-assets.py; edit the listed sources. */

/* Source: styles/tokens.css */
/**
 * Codela Storefront design system — single semantic source for theme controls.
 *
 * Component names are sf-ui-* to avoid styling the independent Codela plugin.
 * Theme style/theme.json own site palette; Codela plugin keeps its own modules.
 */
:root {
  /* Page canvas follows the WordPress palette; cards keep their own surface. */
  --sf-ui-page:var(--wp--preset--color--base,#f8f7f4);
  --sf-ui-ink:var(--sf-ink,#22231f);
  --sf-ui-surface:#ffffff;
  --sf-ui-surface-muted:#f3f3f3;
  --sf-ui-nav-selection:rgba(118,118,128,.16);
  /* One legible floating material for header, dock, purchase bar and soft controls. */
  --sf-ui-glass-surface:rgba(247,247,249,.96);
  --sf-ui-glass-panel-surface:rgba(247,247,249,.78);
  --sf-ui-glass-opaque:#f7f7f9;
  --sf-ui-glass-border:transparent;
  /* One diffuse outer shadow separates the single surface on light backdrops. */
  --sf-ui-glass-shadow:0 3px 12px rgba(0,0,0,.10);
  --sf-ui-glass-ink:#1c1c1e;
  --sf-ui-control-soft:var(--sf-ui-glass-surface);
  --sf-ui-header-surface:var(--sf-ui-glass-surface);
  --sf-ui-header-border:var(--sf-ui-glass-border);
  --sf-ui-header-shadow:var(--sf-ui-glass-shadow);
  --sf-ui-control-ink:#202020;
  --sf-ui-control-clear:#d8d8d8;
  --sf-ui-accent:var(--sf-accent,#656e52);
  --sf-ui-danger:#b44d48;
  --sf-ui-danger-surface:#fcf4f3;
  --sf-ui-success:#668168;
  --sf-ui-success-surface:#f3f7f2;
  --sf-ui-border:var(--sf-line,#deded5);
  --sf-ui-hit:44px;
  --sf-ui-icon:22px;
  --sf-ui-nav-label-size:11px;
  --sf-ui-nav-label-weight:600;
  --sf-ui-icon-close:22px;
  --sf-ui-icon-clear:12px;
  --sf-ui-action-height:54px;
  /* One mobile bottom-bar geometry for navigation and product purchase. */
  --sf-ui-bottom-bar-height:58px;
  --sf-ui-bottom-bar-control-height:48px;
  --sf-ui-bottom-bar-padding:4px;
  --sf-ui-bottom-bar-max-width:430px;
  --sf-ui-bottom-bar-inset:16px;
  --sf-ui-bottom-bar-gap:4px;
  --sf-ui-product-panel-gap:12px;
  --sf-ui-product-button-padding-x:16px;
  --sf-ui-product-photo-inset:116px;
  /* Showcase and its destination skeleton share one 25%-shorter frame. */
  --sf-ui-showcase-height:clamp(510px,64.5svh,675px);
  --sf-ui-product-photo-urgency-inset:140px;
  --sf-ui-product-heading-height:max(28px,calc(clamp(16px,4.5vw,20px) * 2.5));
  --sf-ui-control-radius:var(--cdl-ct-radius,12px);
  --sf-ui-pill:999px;
  /* Shared control material: tint preserves contrast over changing content. */
  --sf-ui-glass-blur:10px;
  --sf-ui-glass-saturation:115%;
  /* Keep the real backdrop contrast; an opaque tint hides overlapping text. */
  --sf-ui-glass-contrast:1;
  --sf-ui-glass-brightness:1;
  --sf-ui-glass-highlight:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,0) 48%,rgba(255,255,255,.02));
  --sf-ui-glass-highlight-pressed:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.01) 48%,rgba(255,255,255,.04));
  --sf-ui-action-highlight:linear-gradient(160deg,rgba(255,255,255,.10),transparent 52%,rgba(255,255,255,.025));
  --sf-ui-action-highlight-pressed:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.015) 52%,rgba(255,255,255,.06));
  --sf-ui-action-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.10),0 3px 9px rgba(0,0,0,.06);
  --sf-ui-motion-press:140ms;
  --sf-ui-motion-engage:110ms;
  --sf-ui-motion-release:360ms;
  --sf-ui-scale-action:1.025;
  --sf-ui-scale-icon:1.08;
  --sf-ui-scale-dock:1.018;
  --sf-ui-ease-release:cubic-bezier(.22,1.35,.36,1);
  --sf-ui-motion-selection:220ms;
  --sf-ui-motion-panel:160ms;
  --sf-ui-motion-panel-enter:240ms;
  --sf-ui-motion-panel-exit:180ms;
  --sf-ui-motion-media:160ms;
  --sf-ui-motion-dock:480ms;
  --sf-ui-ease-press:cubic-bezier(.2,.8,.2,1);
  --sf-ui-ease-dock:cubic-bezier(.32,0,.24,1);
}
@media (prefers-reduced-motion:reduce){
  :root{
    --sf-ui-motion-press:0ms;
    --sf-ui-motion-engage:0ms;
    --sf-ui-motion-release:0ms;
    --sf-ui-scale-action:1;
    --sf-ui-scale-icon:1;
    --sf-ui-scale-dock:1;
    --sf-ui-motion-selection:0ms;
    --sf-ui-motion-panel:0ms;
    --sf-ui-motion-panel-enter:0ms;
    --sf-ui-motion-panel-exit:0ms;
    --sf-ui-motion-media:0ms;
    --sf-ui-motion-dock:0ms;
  }
}



/* Static navigation silhouettes remain distinct on the light page surface. */
:root{--sf-ui-skeleton:#dfe1e5}

:root{--sf-ui-skeleton-duration:1.4s}

@media(max-width:700px){:root{--sf-ui-showcase-height:max(420px,calc(75svh - 51px))}}

/* A shorter showcase is usually above the fixed dock. Reserve only actual
   viewport overlap, capped at one dock; native page scrolling handles taller
   minimum-height frames. Shared by the real hero and its loading silhouette. */
:root{--sf-ui-showcase-bottom-reserve:0px}
@media(max-width:700px){
 body:has(.sf-shell.has-mobile-dock){
  --sf-ui-showcase-bottom-reserve:clamp(0px,calc(var(--sf-ui-showcase-height) + var(--sf-header-offset,0px) + var(--sf-ui-bottom-bar-height,58px) + var(--sf-ui-bottom-bar-gap,4px) + env(safe-area-inset-bottom,0px) - 100dvh),calc(var(--sf-ui-bottom-bar-height,58px) + var(--sf-ui-bottom-bar-gap,4px) + env(safe-area-inset-bottom,0px)));
 }
}

/* Source: storefront.css */
:root{--sf-bg:var(--sf-ui-page);--sf-ink:#22231f;--sf-muted:#77776d;--sf-line:#deded5;--sf-ease:cubic-bezier(.22,.8,.25,1);--sf-motion:160ms}
body{background:var(--sf-ui-page);margin:0;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
.sf-shell{margin:0!important}
.sf-shell button,.sf-shell input{font:inherit}
.sf-shell button,.sf-shell input,.sf-icon-button{border-radius:var(--cdl-ct-radius,12px)}
.sf-shell button{border:0;background:none;color:inherit;cursor:pointer}
.sf-shell a,.sf-shell button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sf-shell :focus-visible{outline:2px solid var(--sf-accent,#656e52);outline-offset:4px}
.sf-header{height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:var(--sf-bg);border-bottom:1px solid var(--sf-line);gap:16px}
.sf-brand{font-size:29px;letter-spacing:-1.5px;line-height:1.1;min-width:0}
.sf-brand a{display:block}
.sf-brand .custom-logo{max-height:42px;width:auto;max-width:180px;object-fit:contain}
.sf-actions{display:flex;gap:6px;flex-shrink:0}
/* Icon control base and pressed feedback are defined in styles/components.css. */
.sf-icon{width:22px;height:22px;display:block}
.sf-skip{position:fixed;top:-100px;left:20px;padding:12px;background:white;z-index:100}
.sf-skip:focus{top:10px}
.sf-panel{position:fixed;inset:var(--sf-admin-offset,0px) 0 0;margin:0;width:100%;height:calc(100dvh - var(--sf-admin-offset,0px));max-width:none;max-height:none;border:0;border-radius:0;padding:0;background:var(--sf-bg);color:var(--sf-ink);transform:none;transition:none;overflow:hidden}
.sf-panel[open]{display:flex;flex-direction:column}
.sf-panel::backdrop{background:transparent}
.sf-panel-top{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:76px;padding:env(safe-area-inset-top,0px) max(5vw,24px) 0}
.sf-panel-top h2{font-size:20px;margin:0;font-weight:400}
.sf-panel-body{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:26px max(5vw,24px) 36px}
.sf-panel [hidden]{display:none!important}
/* Center the native menu on desktop; long menus remain scrollable. */
#sf-menu{display:flex;flex-direction:column;gap:20px;text-align:center}
#sf-menu > nav{width:100%;max-width:900px;margin:auto;flex:none;padding-block:16px}
.sf-menu-list,.sf-menu-list ul{list-style:none;margin:0;padding:0;width:100%}
.sf-menu-list li{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;position:relative;align-items:center}
.sf-menu-list>li>a,.sf-menu-list .sub-menu>li>a{grid-column:2;font-size:clamp(26px,4vw,43px);letter-spacing:-1px;line-height:1.25;min-height:64px;padding:14px 0;display:block;overflow-wrap:anywhere}
.sf-submenu-toggle{grid-column:3;grid-row:1;width:44px;height:44px;font-size:27px!important;justify-self:end}
.sf-menu-list .sub-menu{grid-column:1/-1;width:100%}
.sf-menu-secondary{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;color:var(--sf-muted);font-size:13px;flex:none}
.sf-menu-secondary:empty{display:none}
#sf-menu > .sf-menu-tools{display:flex;justify-content:center;gap:12px;margin:0 auto;padding:0}
.sf-menu-secondary a{display:inline-flex;align-items:center;min-height:44px}
.sf-back{display:flex;align-items:center;gap:10px;min-height:44px;align-self:center;flex:none}
.sf-search-form{max-width:950px;margin:0 auto 30px;display:flex;gap:12px;align-items:center;border:1px solid var(--sf-line);border-radius:var(--cdl-ct-box-radius,12px);padding:0 16px}
#sf-query{flex:1;min-width:0;font-size:clamp(24px,4vw,36px);background:transparent;color:inherit;border:0;padding:16px 0;border-radius:var(--cdl-ct-radius,12px)}
#sf-results{max-width:950px;margin:auto;min-height:160px}
.sf-result{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--sf-line)}
.sf-result img{width:80px;height:100px;object-fit:cover}
.sf-result h3{font-size:20px;font-weight:400;margin:0 0 8px}
.sf-result p{font-size:14px;margin:0;color:var(--sf-muted)}
.sf-result small{display:block;color:var(--sf-muted);font-size:11px;margin-top:5px}
/* Cart layout only: UI Kit owns buttons, icons and pressed feedback. */
.sf-cart-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;padding:24px 0;border-bottom:1px solid var(--sf-ui-border);max-width:780px;margin:auto}
.sf-cart-row:first-child{padding-top:0}
.sf-cart-row>a{display:block;position:relative;align-self:stretch;min-height:120px}
.sf-cart-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:var(--sf-ui-surface-muted);border-radius:var(--sf-ui-control-radius)}
.sf-cart-detail{display:flex;flex-direction:column;min-width:0;min-height:120px}
.sf-cart-row h3{font-size:17px;line-height:1.35;font-weight:500;margin:0 0 8px;overflow-wrap:anywhere}
.sf-cart-row h3 a{text-decoration:none;color:inherit}
.sf-cart-row .sf-cart-variation{font-size:13px;line-height:1.45;color:var(--sf-muted);margin:0 0 8px;overflow-wrap:anywhere}
.sf-cart-row .sf-cart-price{font-size:15px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums;margin:0;overflow-wrap:anywhere}
.sf-quantity{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;padding-top:12px;margin-top:auto;flex-wrap:wrap}
.sf-stepper{display:inline-flex;align-items:center;flex-shrink:0;min-height:44px;border:1px solid var(--sf-ui-border);border-radius:var(--sf-ui-control-radius);overflow:hidden}
.sf-stepper button{width:44px;height:44px;font-size:18px}
.sf-stepper span{min-width:28px;padding:0 2px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
.sf-remove{min-width:44px;min-height:44px;font-size:13px!important;text-decoration:underline;text-underline-offset:3px;padding:10px 0}
.sf-shell button:disabled{opacity:.4;cursor:default}
.sf-cart-bottom{padding:18px max(5vw,24px) max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--sf-ui-border);flex-shrink:0}
.sf-cart-bottom>*{max-width:780px;margin:0 auto}
.sf-subtotal{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:17px;line-height:1.4}
.sf-subtotal strong{font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0;text-align:end}
.sf-cart-bottom p{font-size:12px;line-height:1.5;color:var(--sf-muted);margin:10px auto 15px}
.sf-cart-bottom .sf-ui-button{width:100%;margin-inline:auto;--sf-ui-button-height:52px;--sf-ui-button-font-size:15px}
.sf-cart-bottom .sf-ui-button .sf-icon{width:20px;height:20px}
/* Primary action styling is shared by all .sf-ui-button--primary instances. */
.sf-status{font-size:13px;margin:0;padding:0 max(5vw,24px);color:var(--sf-muted);flex-shrink:0}
.sf-status:not(:empty){padding-top:12px;padding-bottom:12px}
.sf-empty{padding:50px 0;text-align:center}
.sf-content{padding:32px max(5vw,20px);margin-top:0!important;min-height:55vh}
.home .sf-content{padding:0}
.sf-content>.sf-hero,.sf-content>.sf-selection,.sf-content>.woocommerce{max-width:1200px!important}
.sf-hero{display:grid;grid-template-columns:1.15fr 1fr;min-height:560px}
.sf-hero-art{background:#eeede8}
.sf-hero-art img{display:block;width:100%;height:100%;max-height:690px;object-fit:cover}
.sf-hero-info{padding:60px;display:flex;flex-direction:column;justify-content:center}
.sf-hero h1{font-family:Georgia,serif;font-size:clamp(32px,5vw,64px);font-weight:400;letter-spacing:-2px;line-height:1.1;margin:20px 0}
.sf-kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase}
.sf-description{font-size:14px;color:var(--sf-muted);line-height:1.8}
.sf-price{margin:18px 0}
.sf-hero .sf-primary{margin-top:15px}
.sf-selection{padding:45px 25px}
.sf-selection>h2{font:400 32px Georgia,serif}
.sf-footer{margin-top:38px;padding:18px max(5vw,24px);background:var(--sf-ui-page);border-top:1px solid #e8e8e8;color:#292929}

.woocommerce div.product .product_title{font-weight:400;letter-spacing:-1px}
.sf-cart-row a:focus-visible{outline-offset:2px}
@media(max-width:700px){.sf-header{height:68px;padding:0 20px}
#sf-menu > nav:not(.sf-menu-tools){margin:0 auto}
.sf-footer.sf-footer--mobile-hidden{display:none}
.sf-brand{font-size:27px}
.sf-actions{gap:0}
.sf-panel-top{min-height:66px;padding-left:24px;padding-right:16px}
.sf-panel-body{padding-top:20px}
.sf-hero{display:block}
.sf-hero-art img{height:440px;max-height:65vh}
.sf-hero-info{padding:28px 25px 40px}
.sf-hero h1{font-family:Arial,sans-serif;letter-spacing:-1px;margin:8px 0}
.sf-hero .sf-kicker{display:none}
.sf-cart-row{grid-template-columns:80px minmax(0,1fr);gap:16px;padding:20px 0}
.sf-cart-detail{min-height:100px}
.sf-cart-row>a{min-height:100px}
.sf-cart-row h3{font-size:16px}
.sf-cart-bottom{padding-left:20px;padding-right:20px;padding-top:16px}
.sf-brand .custom-logo{max-width:145px}
}
@media(prefers-reduced-motion:reduce){:root{--sf-motion:0ms}
.sf-shell *{transition:none!important;animation:none!important}
}


.sf-content>.wp-block-woocommerce-legacy-template{max-width:1200px!important}

/* 0.1.14: single-row, small, usable store footer. */
.sf-footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  max-width:1200px;
  min-width:0;
  margin:0 auto;
  font-size:12px;
  line-height:1.4;
}
.sf-footer-copy{
  display:flex;
  align-items:center;
  gap:5px;
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
}
.sf-footer-copyright{color:#777;flex:none}
.sf-footer-brand{
  display:block;
  min-width:0;
  flex:0 1 auto;
  color:#292929;
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sf-footer-note{
  min-width:0;
  flex:1 1 auto;
  margin:0;
  color:#878787;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sf-footer-note::before{content:'·';margin:0 9px 0 4px;color:#aaa}
.sf-footer-links{display:flex;align-items:center;flex:none;gap:20px;white-space:nowrap}
.sf-footer-links a{
  color:#606060;
  font-size:12px;
  text-decoration:none;
  text-underline-offset:3px;
}
.sf-footer-links a:hover{text-decoration:underline;color:#242424}
.sf-footer a:focus-visible{outline:2px solid var(--sf-accent,#656e52);outline-offset:3px}
@media(max-width:700px){
  .sf-footer{padding:16px 20px;margin-top:26px}
  .sf-footer-inner{gap:12px;font-size:11px;flex-wrap:nowrap}
  .sf-footer-brand{font-size:11px}
  .sf-footer-note{display:none}
  .sf-footer-links{gap:11px}
  .sf-footer-links a{font-size:11px}
}

/* Overlay input and dialog rules live in styles/overlay.css. */
/* Desktop header: balanced columns keep the brand centered. */
.sf-shell .sf-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);
  align-items:center;
  column-gap:8px;
}
.sf-header-menu{display:flex;align-items:center;justify-self:start}
.sf-header .sf-brand{
  justify-self:center;
  max-width:min(220px,38vw);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}
.sf-header .sf-brand a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-header .sf-actions{justify-self:end;display:flex;align-items:center;gap:4px}

/* Shared dialog, search and results: styles/overlay.css. */
/* Mobile navigation: one stationary hit surface, one sliding selection capsule.
   Only opacity/transform animate; background/shadow do not repaint each frame. */
/* Responsive header and dock styles: assets/styles/navigation.css */
/* Focus restoration rules: styles/overlay.css. */
/* All icon-button tap feedback is now shared by styles/components.css. */
@media(prefers-reduced-motion:reduce){
  .sf-shell *, .sf-shell *::before, .sf-shell *::after{transition:none!important;animation:none!important}
}

/* Guest account and fallback account styles: assets/styles/account.css */

/* Source: styles/overlay.css */
/** Theme-owned fullscreen dialog, search and cart overlay presentation. */
/* Remove native button appearance only. Shared UI Kit owns the complete
   X and search-clear surfaces; panel CSS must not override their variants. */
#sf-panel button.sf-close,
#sf-search .sf-search-form button.sf-icon-button {
  -webkit-appearance:none;
  appearance:none;
}
#sf-search #sf-query {
  -webkit-appearance:none;
  appearance:none;
  border:0!important;
  box-shadow:none!important;
  outline:none!important;
}
#sf-search .sf-search-form:focus-within {
  outline:none;
  box-shadow:none!important;
}
#sf-panel .sf-initial-focus:focus-visible {
  /* Suppress only the programmatic focus outline; retain the soft surface. */
  outline:none!important;
}

/* Search keeps an accessible dialog title without repeating it visually. Keep a 1px flex item so Close stays at right. */
#sf-panel.is-search-panel #sf-panel-title{flex:0 0 1px;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Shared panel surface and toolbar geometry.
   Identical toolbar dimensions and close-control geometry on all panels. */
#sf-panel{
  --sf-overlay-gutter:clamp(16px,5vw,32px);
  --sf-overlay-toolbar-height:68px;
  --sf-overlay-control-size:44px;
  background:var(--sf-ui-page);
  color:#22231f;
  color-scheme:light;
}
#sf-panel .sf-panel-top{
  min-height:var(--sf-overlay-toolbar-height);
  padding:10px var(--sf-overlay-gutter);
  border-bottom:1px solid #eeeeee;
  box-sizing:border-box;
}
#sf-panel .sf-panel-top h2{
  font-size:20px;
  font-weight:400;
}
/* The same soft IconButton renders the menu/cart X and the search X.
   Only toolbar flex sizing belongs here. */
#sf-panel button.sf-close,
#sf-search .sf-search-cancel{
  flex:0 0 var(--sf-overlay-control-size);
}
#sf-panel.is-search-panel .sf-panel-top{display:none!important}
#sf-search.sf-search-body{
  padding:0;
  overflow-y:auto;
}
#sf-search .sf-search-toolbar{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:var(--sf-overlay-toolbar-height);
  padding:10px var(--sf-overlay-gutter);
  margin:0;
  border-bottom:1px solid #eeeeee;
  background:var(--sf-ui-page);
  box-sizing:border-box;
}
#sf-search .sf-search-form{
  display:flex;
  align-items:center;
  flex:1;
  min-width:0;
  width:auto;
  max-width:none;
  height:46px;
  min-height:46px;
  margin:0;
  padding:0 13px;
  gap:10px;
  border:0;
  border-radius:15px;
  background:#f3f3f3;
  box-shadow:none;
}
#sf-search .sf-search-leading{
  display:grid;
  place-items:center;
  flex:none;
  width:20px;
  height:20px;
}
#sf-search .sf-search-leading .sf-icon{
  display:block;
  width:20px;
  height:20px;
  filter:brightness(0);
  opacity:.72;
}
#sf-search #sf-query{
  flex:1;
  min-width:0;
  width:100%;
  height:44px;
  min-height:0;
  padding:0;
  margin:0;
  border:0!important;
  outline:0!important;
  border-radius:0;
  background:transparent;
  color:#22231f;
  caret-color:#22231f;
  box-shadow:none!important;
  font-size:16px;
  line-height:1.35;
  -webkit-appearance:none;
  appearance:none;
}
#sf-search #sf-query::placeholder{color:#929292;opacity:1}
#sf-search #sf-query::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
  display:none;
}
#sf-search .sf-search-clear{margin-right:-10px}
#sf-search .sf-search-cancel:focus-visible,
#sf-search .sf-search-clear:focus-visible{
  outline:2px solid var(--sf-accent,#656e52)!important;
  outline-offset:3px;
}
#sf-search .sf-search-content{
  width:100%;
  min-height:60vh;
  padding:14px var(--sf-overlay-gutter) 40px;
  border:0;
  background:var(--sf-ui-page);
}
#sf-search #sf-results{
  max-width:950px;
  margin-left:auto;
  margin-right:auto;
}
#sf-search .sf-result{
  gap:14px;
  padding:14px 0;
  color:#22231f;
  border-bottom:1px solid #ebebeb;
}
#sf-search .sf-result img{
  width:58px;
  height:72px;
  border-radius:10px;
  background:#f1f1f1;
}
#sf-search .sf-result h3{font-size:17px;margin-bottom:6px}
#sf-search .sf-result p ins{text-decoration:none}
#sf-search .sf-result p,
#sf-search .sf-result small,
#sf-search #sf-results>p{color:#808080}
#sf-search .sf-search-skeleton{padding-top:6px}
#sf-search .sf-skeleton-row{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:78px;
}
#sf-search .sf-skeleton-row>i{
  display:block;
  flex:none;
  width:48px;
  height:48px;
  background:#eeeeee;
  border-radius:50%;
}
#sf-search .sf-skeleton-row>span{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:10px;
}
#sf-search .sf-skeleton-row b{
  display:block;
  width:min(60%,250px);
  height:12px;
  border-radius:6px;
  background:#eeeeee;
}
#sf-search .sf-skeleton-row b:last-child{
  width:min(45%,175px);
  height:10px;
}
/* Preserve 44px close targets on mobile screens while scaling the visual X down. */
@media(max-width:700px){
  #sf-panel{
    --sf-overlay-gutter:20px;
    --sf-overlay-toolbar-height:68px;
  }
  #sf-search .sf-search-toolbar{
    gap:10px;
    padding:10px var(--sf-overlay-gutter);
  }
  #sf-search .sf-search-form{
    height:46px;
    min-height:46px;
    padding:0 12px;
    border-radius:15px;
  }
  #sf-search #sf-query{height:44px;font-size:16px}
  #sf-search .sf-search-content{padding:14px var(--sf-overlay-gutter) 36px}
}


/* Reset initial pointer focus after the search control rule; Tab removes this class. */
#sf-panel .sf-close.sf-initial-focus:focus-visible{outline:none!important}

/* Cart uses the toolbar gutter for its list, feedback and summary.
   Keep the scrollable list independent of the checkout/dock area. */
#sf-panel.is-cart-panel #sf-cart{
  padding:24px var(--sf-overlay-gutter) 28px;
  scrollbar-width:thin;
}
#sf-panel.is-cart-panel .sf-cart-bottom{
  padding-inline:var(--sf-overlay-gutter);
  padding-top:20px;
}
#sf-panel.is-cart-panel .sf-cart-bottom .sf-ui-button{display:flex}
#sf-panel.is-cart-panel .sf-status{padding-inline:var(--sf-overlay-gutter)}
#sf-panel.is-cart-panel #sf-cart-items{max-width:780px;margin-inline:auto}
/* Empty cart is a composed state, not a second cart or button component. */
#sf-panel.is-cart-panel .sf-cart-empty{min-height:min(50vh,360px);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:32px 20px;text-align:center}
#sf-panel.is-cart-panel .sf-cart-empty-mark{display:block;width:64px;height:64px;flex:none;margin-bottom:20px;border-radius:var(--sf-ui-pill);background:var(--sf-ui-surface-muted) url('../icons/shopping-bag.svg') center/27px 27px no-repeat}
#sf-panel.is-cart-panel .sf-cart-empty h3{margin:0;color:var(--sf-ui-ink);font:inherit;font-size:clamp(19px,3vw,23px);font-weight:600;letter-spacing:-.025em;line-height:1.25}
#sf-panel.is-cart-panel .sf-cart-empty p{max-width:320px;margin:10px 0 0;color:var(--sf-muted,#73746d);font-size:13px;line-height:1.6}
@media(max-width:360px){
  #sf-panel.is-cart-panel .sf-cart-row{grid-template-columns:64px minmax(0,1fr);gap:12px}
}

#sf-panel.is-cart-panel .sf-cart-row:not(:has(.sf-cart-photo)){grid-template-columns:minmax(0,1fr)}
#sf-panel.is-cart-panel .sf-cart-row>a:empty{display:none}

/* Desktop search occupies the existing header menu slot; results stay anchored
   to that form and never lock the document. Mobile uses the same section. */
.sf-header-search[hidden]{display:none!important}
@media(min-width:901px){
  .sf-shell .sf-header.is-search-expanded{grid-template-columns:minmax(0,180px) minmax(0,1fr) auto;column-gap:20px}
  .sf-header.is-search-expanded>.sf-desktop-navigation,
  .sf-header.is-search-expanded:not(.has-desktop-menu)>.sf-brand{visibility:hidden}
  .sf-header.is-search-expanded>.sf-brand,
  .sf-header.is-search-expanded>.sf-header-menu{grid-row:1;grid-column:1}
  .sf-header.is-search-expanded>.sf-desktop-navigation,
  .sf-header.is-search-expanded>.sf-header-search,
  .sf-header.is-search-expanded:not(.has-desktop-menu)>.sf-brand{grid-row:1;grid-column:2}
  .sf-header.is-search-expanded>.sf-actions{grid-row:1;grid-column:3}
  .sf-header-search{position:relative;min-width:0;--sf-overlay-control-size:44px;--sf-overlay-toolbar-height:44px;--sf-overlay-gutter:20px}
  .sf-header-search #sf-search{overflow:visible}
  .sf-header-search #sf-search .sf-search-toolbar{position:relative;padding:0 4px;border:0;border-radius:var(--sf-ui-pill);background:transparent;gap:4px}
  .sf-header-search #sf-search .sf-search-form{background:transparent;height:44px;min-height:44px;padding-inline:12px 0}
  .sf-header-search #sf-search .sf-search-content{position:absolute;top:calc(100% + 12px);left:0;right:0;width:100%;min-height:0;max-height:calc(100dvh - 120px - var(--sf-header-offset,0px));overflow-y:auto;padding:8px 20px 16px;border-radius:var(--sf-ui-control-radius)}
  .sf-header-search #sf-search .sf-search-content:has(#sf-results:empty){display:none}
  .sf-header-search #sf-results{min-height:0}
  .sf-header-search [hidden]{display:none!important}
  #sf-panel.is-cart-panel{left:auto;right:0;width:min(460px,100%);box-shadow:-12px 0 48px rgb(0 0 0 / .12)}
  #sf-panel.is-cart-panel::backdrop{background:rgb(0 0 0 / .22);animation:sf-cart-backdrop-in var(--sf-ui-motion-panel-enter) var(--sf-ui-ease-press) both}
  #sf-panel.is-cart-panel.is-closing::backdrop{animation:sf-cart-backdrop-out var(--sf-ui-motion-panel-exit) var(--sf-ui-ease-press) both}
  #sf-panel.is-cart-panel .sf-cart-row{grid-template-columns:80px minmax(0,1fr);gap:16px}
}
@keyframes sf-cart-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes sf-cart-backdrop-out{from{opacity:1}to{opacity:0}}
/* Woo price descriptions remain available to assistive technology even when
   a page omits the optional WordPress block stylesheet. */
#sf-results .screen-reader-text,#sf-cart-items>.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){#sf-panel.is-cart-panel::backdrop{animation:none!important}}

@media(min-width:901px) and (max-width:1099px){
  .sf-shell .sf-header.is-search-expanded{grid-template-columns:44px minmax(0,1fr) auto}
  .sf-header.is-search-expanded>.sf-brand{visibility:hidden}
}

/* Product cart is the same native dialog and cart controller, in a compact
   header-adjacent sheet; no second cart, cloned rows or fixed bottom dock. */
@media(max-width:900px){
  #sf-panel.is-cart-panel.is-product-cart{
    inset:calc(var(--sf-admin-offset,0px) + 76px) 12px auto;
    width:calc(100% - 24px);max-width:440px;height:auto;
    max-height:calc(100dvh - var(--sf-admin-offset,0px) - 100px - env(safe-area-inset-bottom,0px));
    margin-left:auto;border-radius:var(--sf-ui-control-radius);
  }
  #sf-panel.is-product-cart::backdrop{background:rgb(0 0 0 / .16)}
  #sf-panel.is-product-cart .sf-panel-top{min-height:56px;padding:6px 16px}
  #sf-panel.is-product-cart .sf-panel-top h2{font-size:17px}
  #sf-panel.is-product-cart #sf-cart{padding:12px 16px;min-height:0;overflow-y:auto}
  #sf-panel.is-product-cart .sf-cart-row{grid-template-columns:60px minmax(0,1fr);gap:12px;padding-block:12px}
  #sf-panel.is-product-cart .sf-cart-row>a,#sf-panel.is-product-cart .sf-cart-detail{min-height:60px}
  #sf-panel.is-product-cart .sf-cart-row h3{font-size:14px}
  #sf-panel.is-product-cart .sf-cart-row img{width:60px;height:60px}
  #sf-panel.is-cart-panel.is-product-cart:has(.sf-mobile-dock) .sf-cart-bottom:not([hidden]),
  #sf-panel.is-product-cart .sf-cart-bottom{padding:12px 16px 16px}
  #sf-panel.is-product-cart .sf-mobile-dock{display:none!important}
}

/* First-read placeholders reserve rows without adding entrance animation. */
.sf-cart-skeleton-row{display:grid;grid-template-columns:80px minmax(0,1fr);gap:16px;padding-block:20px}
.sf-cart-skeleton-row:first-child{padding-top:0}
.sf-cart-skeleton-row>i{display:block;min-height:100px}
.sf-cart-skeleton-row>span{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.sf-cart-skeleton-row b{display:block;width:75%;height:14px}
.sf-cart-skeleton-row b:nth-child(2){width:40%}
.sf-cart-skeleton-row b:last-child{width:100px;height:32px;margin-top:auto}
.sf-cart-busy[hidden]{display:none}
.sf-cart-row .sf-stepper{position:relative}
.sf-cart-busy{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.sf-cart-busy>.sf-ui-spinner{min-width:0;padding:0;box-sizing:border-box}
.sf-cart-row[aria-busy="true"] .sf-cart-quantity-current{visibility:hidden}

/* Source: styles/navigation.css */
/** Shared mobile header, floating dock and touch feedback. Theme-owned. */
.sf-desktop-navigation{display:none}
/* Native primary links share one horizontal slot; browser popovers keep
   every nested destination outside its scroll clip, including touch/keyboard. */
@media(min-width:1100px){
  /* Equal side tracks center the content-sized capsule on the viewport.
     Reserve the brand/tools footprint; long menus retain native scrolling. */
  .sf-shell .sf-header.has-desktop-menu:not(.is-search-expanded){
    grid-template-columns:minmax(180px,1fr) minmax(0,max-content) minmax(180px,1fr);column-gap:20px;
  }
  .sf-shell .sf-header.has-desktop-menu .sf-header-menu{display:none}
  .sf-shell .sf-header.has-desktop-menu .sf-brand{justify-self:start;max-width:100%}
  .sf-shell .sf-header .sf-desktop-navigation{display:flex;align-items:stretch;justify-self:center;width:max-content;max-width:100%;height:var(--sf-ui-hit);min-width:0;overflow-x:auto;scrollbar-width:thin;padding:0 8px;border:0;box-sizing:border-box}
  .sf-desktop-menu{display:flex;align-items:stretch;gap:4px;list-style:none;margin:0;padding:0;width:max-content}
  .sf-desktop-menu li{display:flex;align-items:center;min-width:0}
  .sf-desktop-menu a{display:flex;align-items:center;min-height:var(--sf-ui-hit);padding:8px 12px;color:var(--sf-ui-glass-ink);font-size:14px;line-height:1.3;text-decoration:none;white-space:nowrap}
  .sf-desktop-menu li{border-radius:var(--sf-ui-pill)}
  .sf-desktop-menu > li > a{align-self:stretch;padding-block:0}
  .sf-desktop-menu li.menu-item-has-children>a{padding-right:0}
  .sf-desktop-menu a{border-radius:var(--sf-ui-pill)}
  .sf-desktop-submenu-toggle .sf-icon{width:14px;height:14px;filter:brightness(0)}
  .sf-desktop-submenu-toggle{margin-left:-4px}
  .sf-desktop-submenu .sf-desktop-submenu-toggle .sf-icon{transform:rotate(-90deg)}
  .sf-desktop-submenu{position:fixed;inset:auto;top:var(--sf-submenu-top,88px);left:var(--sf-submenu-left,16px);width:280px;max-width:calc(100vw - 32px);max-height:calc(100dvh - var(--sf-submenu-top,88px) - 16px);overflow:auto;margin:0;padding:8px;list-style:none;}
  .sf-shell .sf-desktop-submenu.sf-ui-surface{border-radius:var(--sf-ui-control-radius)}
  .sf-desktop-submenu::backdrop{background:transparent}
  .sf-desktop-submenu li>a{flex:1;white-space:normal;overflow-wrap:anywhere}
}
.sf-mobile-dock{display:none}
@media(max-width:700px){
  .sf-mobile-dock{
    --sf-dock-bottom:calc(var(--sf-ui-bottom-bar-gap) + env(safe-area-inset-bottom,0px));
    --sf-dock-travel:0px;
    --sf-dock-scale:1;
    --sf-dock-index:0;
    display:block;
    position:fixed;
    z-index:1000;
    left:var(--sf-ui-bottom-bar-inset);
    right:var(--sf-ui-bottom-bar-inset);
    bottom:var(--sf-dock-bottom);
    max-width:var(--sf-ui-bottom-bar-max-width);
    margin:0 auto;
    min-height:var(--sf-ui-bottom-bar-height);
    border-radius:999px;
    color:var(--sf-ui-glass-ink);
    isolation:isolate;
    touch-action:pan-y;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
  .sf-dock-surface{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    position:relative;
    isolation:isolate;
    min-height:var(--sf-ui-bottom-bar-height);
    padding:var(--sf-ui-bottom-bar-padding);
    border:1px solid transparent;
    border-radius:999px;
    transform-origin:50% 100%;
    transform:translate3d(0,var(--sf-dock-travel),0) scale(var(--sf-dock-scale));
    opacity:1;
    /* Independent scale keeps scroll-collapse transform and stable hit slots intact. */
    scale:1;
    transition:transform var(--sf-ui-motion-dock) var(--sf-ui-ease-dock),
      scale var(--sf-ui-motion-release) var(--sf-ui-ease-release),opacity 100ms ease;
  }
  .sf-dock-surface::before{
    content:'';
    position:absolute;
    left:4px;
    top:4px;
    bottom:4px;
    width:calc((100% - 8px)/4);
    border-radius:999px;
    background:var(--sf-ui-nav-selection);
    opacity:0;
    z-index:-1;
    transform:translate3d(calc(var(--sf-dock-position,var(--sf-dock-index))*100%),0,0) scale(var(--sf-dock-press-scale,1));
    transition:transform var(--sf-ui-motion-selection) var(--sf-ui-ease-press),opacity 140ms ease;
    pointer-events:none;
  }
  .sf-mobile-dock.has-selection .sf-dock-surface::before{opacity:1}
  .sf-mobile-dock.is-pressing{--sf-dock-press-scale:1.06}
  .sf-mobile-dock:not(.is-collapsed):is(.is-pressing,:has(.sf-dock-item:active)) .sf-dock-surface{
    scale:var(--sf-ui-scale-dock);
    transition:transform var(--sf-ui-motion-dock) var(--sf-ui-ease-dock),
      scale var(--sf-ui-motion-engage) var(--sf-ui-ease-press),opacity 100ms ease;
  }
  /* Finger tracking is continuous; release/taps use the normal slide above. */
  .sf-mobile-dock.is-scrubbing .sf-dock-surface::before{transition:opacity 140ms ease}
  .sf-mobile-dock .sf-dock-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-width:0;
    min-height:var(--sf-ui-bottom-bar-control-height);
    border-radius:999px;
    color:var(--sf-ui-glass-ink);
    background:transparent;
    text-decoration:none!important;
    position:relative;
    padding:3px 2px;
    touch-action:pan-y;
    -webkit-tap-highlight-color:transparent;
  }
  .sf-mobile-dock .sf-dock-item .sf-icon{
    display:block;
    width:22px;
    height:22px;
    filter:brightness(0);
    transition:transform var(--sf-ui-motion-press) var(--sf-ui-ease-press);
  }
  .sf-mobile-dock .sf-dock-item.is-pressed .sf-icon,
  .sf-mobile-dock .sf-dock-item:active .sf-icon{transform:scale(1.06)}
  .sf-mobile-dock.is-scrubbing .sf-dock-item.is-preview .sf-icon{transform:translateY(-1px) scale(1.08)}
  .sf-mobile-dock .sf-dock-item>span:last-child{
    font-size:var(--sf-ui-nav-label-size);
    font-weight:var(--sf-ui-nav-label-weight);
    line-height:1.25;
    text-align:center;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .sf-mobile-dock .sf-dock-item:focus-visible{outline:2px solid #55565c;outline-offset:-3px}
  .sf-mobile-dock[hidden]{display:none!important}
  .sf-mobile-dock.is-collapsed{
    --sf-dock-travel:calc(100% + var(--sf-dock-bottom) + 8px);
    --sf-dock-scale:.48;
    pointer-events:none;
  }
  .sf-mobile-dock.is-collapsed .sf-dock-surface{
    opacity:0;
    transition:transform var(--sf-ui-motion-dock) var(--sf-ui-ease-dock),opacity 100ms ease 380ms;
  }
  .sf-mobile-dock .sf-dock-handle{
    display:grid;
    place-items:center;
    position:absolute;
    left:50%;
    bottom:-8px;
    transform:translateX(-50%);
    width:70px;
    height:44px;
    padding:0;
    border:0;
    background:transparent;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 160ms ease,visibility 160ms;
    -webkit-tap-highlight-color:transparent;
  }
  .sf-mobile-dock .sf-dock-handle::after{
    content:'';
    width:42px;
    height:4px;
    transform:translateY(12px);
    background:#a4a5ab;
    border-radius:999px;
  }
  .sf-mobile-dock.is-collapsed .sf-dock-handle{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:320ms;
  }
  .sf-mobile-dock .sf-dock-handle:focus-visible{outline:2px solid #55565c;outline-offset:1px}
  body:has(.sf-mobile-dock){padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  #sf-panel .sf-mobile-dock{z-index:10}
  body:not(.single-product) #sf-panel.is-search-panel:has(.sf-mobile-dock) .sf-search-content{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
  body:not(.single-product) #sf-panel.is-cart-panel:has(.sf-mobile-dock) .sf-cart-bottom:not([hidden]){padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  #sf-panel.is-cart-panel #sf-cart{padding-bottom:28px}
}
/* Floating material is shared with Header/IconButton in components.css. */
@media(prefers-reduced-motion:reduce){.sf-mobile-dock.is-pressing{--sf-dock-press-scale:1}}
@media(min-width:701px){.sf-mobile-dock{display:none!important}}
@media(min-width:701px){#sf-menu .sf-menu-tools--product-mobile{display:none!important}}


/* Header composition only. Surface paint and press feedback are shared UI Kit. */
.sf-shell{padding-top:76px}
.home .sf-shell{padding-top:0}
.sf-shell .sf-header{
  position:fixed;top:var(--sf-header-offset,0px);left:0;right:0;z-index:1000;
  background:transparent;border-bottom:0;isolation:isolate;pointer-events:none;
}
.sf-shell .sf-header>*{pointer-events:auto}
body.admin-bar{--sf-header-offset:32px}
@media(max-width:782px){body.admin-bar{--sf-header-offset:46px}}
@media(max-width:700px){.sf-shell{padding-top:68px}.home .sf-shell{padding-top:0}}
/* The home hero begins behind the fixed header; text pages keep clearance. */
.home .sf-content>.sf-hero{margin-top:0}
@media(min-width:701px){.home .sf-hero-info{padding-top:100px}}
.sf-shell .sf-header .sf-brand{
  display:flex;align-items:center;justify-content:center;
  min-height:var(--sf-ui-hit);height:var(--sf-ui-hit);box-sizing:border-box;padding:0 8px;
}
.sf-shell .sf-header .sf-brand a{display:flex;align-items:center;justify-content:center;line-height:1;color:var(--sf-ui-glass-ink);text-decoration:none}
.sf-shell .sf-header .sf-brand .custom-logo{
  display:block;max-height:34px;filter:none;
}
.sf-shell .sf-header .sf-actions{
  gap:0;min-height:var(--sf-ui-hit);height:var(--sf-ui-hit);box-sizing:border-box;padding:0 3px;
}
.sf-shell .sf-header .sf-actions .sf-ui-icon-button{border-radius:var(--sf-ui-pill);color:var(--sf-ui-glass-ink)}
.sf-shell .sf-header .sf-actions .sf-ui-icon-button .sf-icon{filter:brightness(0)}
@media(max-width:700px){
  /* Logo and Menu keep their slots across catalog, product and checkout. */
  .sf-shell .sf-header{
    height:68px;grid-template-columns:minmax(0,1fr) auto var(--sf-ui-hit);
    column-gap:8px;padding-left:20px;padding-right:20px;
  }
  .sf-shell .sf-header .sf-brand{
    grid-column:1;grid-row:1;justify-self:start;max-width:100%;
    text-align:left;padding:0 8px;font-size:clamp(15px,4.6vw,23px);
  }
  .sf-shell .sf-header .sf-brand .custom-logo{max-width:100%;height:auto}
  .sf-shell .sf-header .sf-header-menu{
    grid-column:3;grid-row:1;justify-self:end;width:var(--sf-ui-hit);height:var(--sf-ui-hit);
  }
  .sf-shell .sf-header .sf-actions{grid-column:2;grid-row:1;gap:0}
  .sf-shell:is(.has-mobile-dock,.has-checkout-header) .sf-header .sf-actions{display:none}
  .sf-shell.has-product-header .sf-header .sf-actions{display:flex}
  .has-product-header .sf-actions > :not(.sf-cart-trigger){display:none}
}


/* Single menu control morphs in place while reparented to modal top layer. */
.sf-shell .sf-menu-trigger.is-in-panel{position:fixed;left:var(--sf-menu-control-x);top:var(--sf-menu-control-y);z-index:30}
.sf-shell .sf-menu-trigger .sf-menu-mark{display:block;position:relative;width:20px;height:20px;flex:none}
.sf-shell .sf-menu-trigger .sf-menu-mark>span{position:absolute;top:9px;left:0;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform 280ms cubic-bezier(.22,.8,.25,1);transform-origin:center}
.sf-shell .sf-menu-trigger .sf-menu-mark>span:first-child{transform:translateY(-4px)}
.sf-shell .sf-menu-trigger .sf-menu-mark>span:last-child{transform:translateY(4px)}
.sf-shell .sf-menu-trigger[aria-expanded="true"] .sf-menu-mark>span:first-child{transform:rotate(45deg)}
.sf-shell .sf-menu-trigger[aria-expanded="true"] .sf-menu-mark>span:last-child{transform:rotate(-45deg)}
#sf-panel.is-menu-panel .sf-panel-top{border-bottom:0}
#sf-panel.is-menu-panel .sf-panel-top .sf-close{display:none!important}
@media(prefers-reduced-motion:reduce){.sf-shell .sf-menu-trigger .sf-menu-mark>span{transition:none!important}}

/* Catalog filter occupies the existing tools slot before Menu. */
@media(max-width:700px){
  .sf-shell.has-catalog-header.has-mobile-dock .sf-header .sf-actions{display:flex}
  .has-catalog-header.has-mobile-dock .sf-actions > :not(.sf-filter-trigger){display:none}
  .sf-shell.has-catalog-header.has-header-tools .sf-header{padding-inline:12px;column-gap:4px}
  .sf-shell.has-catalog-header.has-header-tools .sf-header .sf-brand{font-size:14px;padding-inline:4px}
}

/* Contextual pages keep the existing brand capsule and shared surface paint. */
.sf-shell .sf-header .sf-context-brand{font:inherit;font-size:16px;font-weight:400;letter-spacing:0;padding-inline:16px;max-width:100%;min-width:0}
.sf-shell .sf-header .sf-context-brand a{gap:10px;min-height:var(--sf-ui-hit);max-width:100%;min-width:0}
.sf-context-brand :is(.sf-context-label,a > span){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;line-height:1.4}
.sf-context-brand .sf-icon{flex:none;width:20px;height:20px}

.sf-shell .sf-header .sf-context-brand:has([data-sf-context-back],[data-sf-account-back]){padding-inline:0;width:var(--sf-ui-hit);min-width:var(--sf-ui-hit)}
.sf-shell .sf-header .sf-context-brand :is([data-sf-context-back],[data-sf-account-back]){width:var(--sf-ui-hit)}

.sf-context-brand [hidden]{display:none!important}
.sf-shell .sf-header .sf-context-brand:has([data-sf-context-back]:not([hidden])){padding-inline:0;width:var(--sf-ui-hit);min-width:var(--sf-ui-hit)}
.sf-shell .sf-header .sf-context-brand:has([data-sf-context-back][hidden]){width:auto;min-width:0;padding-inline:16px}

/* Source: styles/components.css */
/* Native Woo Button adapters apply only to theme content; Codela account paint stays plugin-owned. */
/* Woo guest submit controls consume this same Button primitive without template overrides.
   Native Woo POST, nonce, validation and registered third-party hooks remain intact. */
/**
 * Theme UI Kit primitives. Variants share hit targets, pointer responses,
 * disabled states and keyboard focus. Page layout belongs elsewhere.
 */
.woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__trigger,
:is(.sf-shell,.sf-product-plugin-footer) .sf-ui-icon-button,
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-icon-button,.codela-maa-icon-btn),
/* Woo's more-specific native product a.button selector sets display:inline-block.
   Include native actions in the SAME shared IconButton declaration so flex
   centering wins without a second paint or control geometry. */
body:not(.codela-my-account-layout) .sf-content ul.products > li.product a.sf-ui-icon-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  position:relative;
  width:var(--sf-ui-hit);
  height:var(--sf-ui-hit);
  min-width:var(--sf-ui-hit);
  min-height:var(--sf-ui-hit);
  padding:0;
  margin:0;
  border:0;
  border-radius:var(--sf-ui-control-radius);
  background:transparent;
  color:var(--sf-ui-control-ink);
  text-decoration:none!important;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--sf-ui-motion-release) var(--sf-ui-ease-release);
}
.woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__trigger .sf-icon,
:is(.sf-shell,.sf-product-plugin-footer) .sf-ui-icon-button .sf-icon,
body:not(.codela-my-account-layout) .sf-content .sf-ui-icon-button .sf-icon{
  width:var(--sf-ui-icon);
  height:var(--sf-ui-icon);
  /* Woo's product-loop a img rule applies a 1em bottom margin to every img,
     including our native button glyph. Reset it in the shared primitive. */
  display:block;
  flex:none;
  margin:0;
}
/* Move the complete control, never counter-scale its glyph or badge. */
.woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__trigger:is(:active,.is-pressed):not(:disabled,[aria-disabled="true"],[aria-busy="true"]),
:is(.sf-shell,.sf-product-plugin-footer) .sf-ui-icon-button:is(:active,.is-pressed):not(:disabled,[aria-disabled="true"],[aria-busy="true"]),
body:not(.codela-my-account-layout) .sf-content .sf-ui-icon-button:is(:active,.is-pressed):not(:disabled,[aria-disabled="true"],[aria-busy="true"]){
  transform:scale(var(--sf-ui-scale-icon));
  transition-duration:var(--sf-ui-motion-engage);
  transition-timing-function:var(--sf-ui-ease-press);
}
.woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__trigger:is(:active,.is-pressed):not(:disabled,[aria-disabled="true"],[aria-busy="true"]),
:is(.sf-shell,.sf-product-plugin-footer) .sf-ui-icon-button--soft:is(:active,.is-pressed):not(:disabled,[aria-disabled="true"],[aria-busy="true"]),
body:not(.codela-my-account-layout) .sf-content .sf-ui-icon-button--soft:is(:active,.is-pressed):not(:disabled,[aria-disabled="true"],[aria-busy="true"]){
  background-image:var(--sf-ui-glass-highlight-pressed)!important;
}
/* Shared icon badge geometry for Header and Dock. */
.sf-shell .sf-ui-icon-badged{
  display:inline-flex;position:relative;align-items:center;justify-content:center;
  width:var(--sf-ui-icon);height:var(--sf-ui-icon);flex:none;overflow:visible;
}
.sf-shell .sf-ui-icon-badged :is(.sf-badge,.sf-filter-count){
  position:absolute;top:-6px;right:-9px;display:grid;place-items:center;
  min-width:16px;height:16px;padding:0 3px;border-radius:var(--sf-ui-pill);
  background:var(--sf-ui-ink);color:#fff;font-size:10px;font-weight:600;
  line-height:1;font-variant-numeric:tabular-nums;pointer-events:none;
}
.sf-shell .sf-ui-icon-badged .sf-badge:empty{display:none}
/* The same surface primitive styles all floating header islands and the X.
   Placement belongs to navigation/overlay; touch and appearance live here. */
body.single-product div.product .sf-product-overview > .onsale,
html.sf-product-sheet-pending body.single-product:not(.sf-product-sheet-ready) div.product .sf-product-overview > .summary .quantity,
body.single-product.sf-product-sheet-ready div.product .sf-product-quantity.sf-ui-surface,
.sf-product-purchase,
.sf-ui-gallery-nav,
.woocommerce div.product div.sf-ui-gallery .flex-control-thumbs,
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button,.codela-maa-btn).sf-ui-surface,
.sf-shell .sf-ui-surface,
.sf-shell .sf-dock-surface,
#sf-panel .sf-dock-surface,
.woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__trigger,
:is(.sf-shell,.sf-product-plugin-footer) .sf-ui-icon-button--soft,
#sf-panel button.sf-ui-icon-button--soft,
body:not(.codela-my-account-layout) .sf-content .sf-ui-icon-button--soft,
/* Same native Woo specificity for soft material so the base reset cannot
   override the single shared transparent border / pill radius. */
body:not(.codela-my-account-layout) .sf-content ul.products > li.product a.sf-ui-icon-button--soft{
  border:1px solid var(--sf-ui-glass-border);
  border-radius:var(--sf-ui-pill);
  /* A single tinted layer, never a stacked white overlay/gradient. */
  background:var(--sf-ui-glass-surface)!important;
  color:var(--sf-ui-glass-ink);
  box-shadow:var(--sf-ui-glass-shadow)!important;
  -webkit-backdrop-filter:blur(var(--sf-ui-glass-blur)) saturate(var(--sf-ui-glass-saturation)) contrast(var(--sf-ui-glass-contrast)) brightness(var(--sf-ui-glass-brightness));
  backdrop-filter:blur(var(--sf-ui-glass-blur)) saturate(var(--sf-ui-glass-saturation)) contrast(var(--sf-ui-glass-contrast)) brightness(var(--sf-ui-glass-brightness));
}
/* One product-panel surface. The real Woo summary at first paint and the
   progressively enhanced sheet use the exact same material and corner shape.
   Unlike pills and icon controls, both are panels, not generic soft buttons. */
.sf-navigation-purchase,
.sf-product-sheet,
html.sf-product-sheet-pending body.single-product:not(.sf-product-sheet-ready) div.product .sf-product-overview > .summary{
  /* No invisible 1px borders: they inflate intrinsic first-paint height
     but were omitted by the final sheet's content-based measurement. */
  border:0 solid var(--sf-ui-glass-border);
  border-radius:calc(var(--sf-ui-control-radius) + 16px);
  background:var(--sf-ui-glass-panel-surface)!important;
  color:var(--sf-ui-glass-ink);
  box-shadow:var(--sf-ui-glass-shadow)!important;
  -webkit-backdrop-filter:blur(var(--sf-ui-glass-blur)) saturate(var(--sf-ui-glass-saturation)) contrast(var(--sf-ui-glass-contrast)) brightness(var(--sf-ui-glass-brightness));
  backdrop-filter:blur(var(--sf-ui-glass-blur)) saturate(var(--sf-ui-glass-saturation)) contrast(var(--sf-ui-glass-contrast)) brightness(var(--sf-ui-glass-brightness));
}
/* The named panel variant continues to be available to shared UI Kit users. */
.sf-ui-surface--glass-panel{background:var(--sf-ui-glass-panel-surface)!important}
/* The pending summary aliases a mobile panel only. Above that breakpoint it
   must already look like the final inline summary, even on a slow script load. */
@media(min-width:701px){
  html.sf-product-sheet-pending body.single-product:not(.sf-product-sheet-ready) div.product .sf-product-overview > .summary{
    border:0;border-radius:0;background:transparent!important;color:inherit;
    box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  body.single-product div.product .sf-product-purchase,
  html.sf-product-sheet-pending body.single-product:not(.sf-product-sheet-ready) div.product .sf-product-overview > .summary .quantity{
    background:transparent!important;box-shadow:none!important;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  body.single-product div.product .sf-product-purchase{border:0}
}
@media(min-width:701px) and (max-width:900px){
  html.sf-product-sheet-pending body.single-product:not(.sf-product-sheet-ready) div.product .sf-product-overview > .summary .quantity{border:0;border-radius:0}
}
.woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__trigger .sf-icon,
:is(.sf-shell,.sf-product-plugin-footer) .sf-ui-icon-button--soft .sf-icon,
#sf-panel button.sf-ui-icon-button--soft .sf-icon,
body:not(.codela-my-account-layout) .sf-content .sf-ui-icon-button--soft .sf-icon{
  width:var(--sf-ui-icon);
  height:var(--sf-ui-icon);
  filter:brightness(0);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__trigger,
  body.single-product div.product .sf-product-overview > .onsale,
.sf-navigation-purchase,
.sf-product-sheet,
html.sf-product-sheet-pending body.single-product:not(.sf-product-sheet-ready) div.product .sf-product-overview > .summary .quantity,
body.single-product.sf-product-sheet-ready div.product .sf-product-quantity.sf-ui-surface,
.sf-product-purchase,
.sf-ui-gallery-nav,.woocommerce div.product div.sf-ui-gallery .flex-control-thumbs,
  body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button,.codela-maa-btn).sf-ui-surface,
.sf-shell .sf-ui-surface,.sf-shell .sf-dock-surface,#sf-panel .sf-dock-surface,:is(.sf-shell,.sf-product-plugin-footer) .sf-ui-icon-button--soft,
  #sf-panel button.sf-ui-icon-button--soft,
body:not(.codela-my-account-layout) .sf-content .sf-ui-icon-button--soft{background:var(--sf-ui-glass-opaque)!important}
}
:is(.sf-shell,.sf-product-plugin-footer) .sf-ui-icon-button--clear,
#sf-panel button.sf-ui-icon-button--clear,
body:not(.codela-my-account-layout) .sf-content .sf-ui-icon-button--clear{
  border-radius:var(--sf-ui-pill);
  background:radial-gradient(circle,var(--sf-ui-control-clear) 11px,transparent 11.5px)!important;
  box-shadow:none!important;
}
#sf-panel button.sf-ui-icon-button--clear .sf-icon{
  width:var(--sf-ui-icon-clear);
  height:var(--sf-ui-icon-clear);
  filter:brightness(0);
  opacity:.8;
}
.woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__trigger[hidden],
:is(.sf-shell,.sf-product-plugin-footer) .sf-ui-icon-button[hidden],
body:not(.codela-my-account-layout) .sf-content .sf-ui-icon-button[hidden]{display:none!important}
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button,.codela-maa-btn):focus-visible,
.sf-shell :is(.sf-ui-icon-button,.sf-ui-button,.sf-ui-pressable):focus-visible,
body:not(.codela-my-account-layout) .sf-content :is(.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce-MyAccount-content :is(a,button,input):is(.woocommerce-Button,.woocommerce-button,.wp-element-button,.wc-forward)):not(.sf-ui-button--secondary,.sf-ui-button--quiet,.sf-ui-icon-button):focus-visible,
body.single-product div.product form.cart button.single_add_to_cart_button:focus-visible,
body.woocommerce-checkout :is(.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button, #place_order):focus-visible,
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-icon-button,.sf-ui-button,.sf-ui-pressable):focus-visible{
  outline:2px solid var(--sf-ui-accent);
  outline-offset:3px;
}
.sf-shell :is(.sf-ui-icon-button,.sf-ui-button,.sf-ui-pressable):disabled,
.sf-shell :is(.sf-ui-icon-button,.sf-ui-button,.sf-ui-pressable)[aria-disabled="true"],
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-icon-button,.sf-ui-button,.sf-ui-pressable):disabled,
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-icon-button,.sf-ui-button,.sf-ui-pressable)[aria-disabled="true"]{
  opacity:.4;
  cursor:default;
}
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button,.codela-maa-btn),
.sf-navigation-preview .sf-ui-button,
.sf-shell .sf-ui-button,
body:not(.codela-my-account-layout) .sf-content :is(.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce-MyAccount-content :is(a,button,input):is(.woocommerce-Button,.woocommerce-button,.wp-element-button,.wc-forward)):not(.sf-ui-button--secondary,.sf-ui-button--quiet,.sf-ui-icon-button),
body.single-product div.product form.cart button.single_add_to_cart_button,
body.woocommerce-checkout :is(.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button, #place_order),
body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword) button[type=submit],
#sf-panel.is-account-panel .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register) button[type=submit]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  /* Size controls are shared by every UI Kit Button and native Woo submit.
     Page compositions only change these tokens, never draw another button. */
  min-height:var(--sf-ui-button-height,var(--sf-ui-action-height));
  padding:var(--sf-ui-button-padding-y,17px) var(--sf-ui-button-padding-x,24px);
  border:0;
  border-radius:var(--sf-ui-control-radius);
  font:inherit;
  font-size:var(--sf-ui-button-font-size,inherit);
  font-weight:inherit;
  text-decoration:none!important;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform var(--sf-ui-motion-release) var(--sf-ui-ease-release);
}
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button--primary,.codela-maa-btn--primary),
.sf-navigation-preview .sf-ui-button--primary,
.sf-shell .sf-ui-button--primary,
body:not(.codela-my-account-layout) .sf-content :is(.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce-MyAccount-content :is(a,button,input):is(.woocommerce-Button,.woocommerce-button,.wp-element-button,.wc-forward)):not(.sf-ui-button--secondary,.sf-ui-button--quiet,.sf-ui-icon-button),
body.single-product div.product form.cart button.single_add_to_cart_button,
body.woocommerce-checkout :is(.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button, #place_order),
body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword) button[type=submit],
#sf-panel.is-account-panel .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register) button[type=submit]{
  --sf-ui-button-fill:color-mix(in srgb,var(--sf-ui-ink) 90%,transparent);
  background:var(--sf-ui-ink);
  background:var(--sf-ui-button-fill);
  background-image:var(--sf-ui-action-highlight);
  color:#fff;
  box-shadow:var(--sf-ui-action-shadow);
  -webkit-backdrop-filter:blur(var(--sf-ui-glass-blur)) saturate(var(--sf-ui-glass-saturation));
  backdrop-filter:blur(var(--sf-ui-glass-blur)) saturate(var(--sf-ui-glass-saturation));
}
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button--primary,.codela-maa-btn--primary) .sf-icon,
.sf-shell .sf-ui-button--primary .sf-icon{filter:invert(1)}
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button--secondary,.codela-maa-btn--ghost),
.sf-shell .sf-ui-button--secondary,
.woocommerce .sf-shell .sf-ui-button--secondary{
  background:var(--sf-ui-surface);
  background:color-mix(in srgb,var(--sf-ui-surface) 78%,transparent);
  background-image:var(--sf-ui-glass-highlight);
  color:var(--sf-ui-control-ink);
  border:1px solid var(--sf-ui-border);
  box-shadow:var(--sf-ui-action-shadow);
  -webkit-backdrop-filter:blur(var(--sf-ui-glass-blur)) saturate(var(--sf-ui-glass-saturation));
  backdrop-filter:blur(var(--sf-ui-glass-blur)) saturate(var(--sf-ui-glass-saturation));
}
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button--quiet,.codela-maa-btn--danger),
.sf-shell .sf-ui-button--quiet{
  background:transparent;
  color:var(--sf-ui-control-ink);
}
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button,.codela-maa-btn) .sf-ui-button-label,
.sf-shell .sf-ui-button .sf-ui-button-label{display:inline-flex;align-items:center}
/* Google is the standard secondary UI Kit Button. Only internal alignment
   belongs here: its text is mathematically centered in the entire button,
   while the mark sits alongside it rather than shifting the text off center. */
body:not(.codela-my-account-layout) .sf-content .sf-auth-google.sf-ui-button,
.sf-shell .sf-auth-google.sf-ui-button{
  display:grid;
  grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);
  align-items:center;
  column-gap:10px;
  text-align:center;
}
body:not(.codela-my-account-layout) .sf-content .sf-auth-google.sf-ui-button .sf-google-glyph,
.sf-shell .sf-auth-google.sf-ui-button .sf-google-glyph{
  grid-column:1;
  justify-self:end;
  align-self:center;
  line-height:1;
  width:22px;
  height:22px;
}
body:not(.codela-my-account-layout) .sf-content .sf-auth-google.sf-ui-button .sf-ui-button-label,
.sf-shell .sf-auth-google.sf-ui-button .sf-ui-button-label{
  grid-column:2;
  justify-self:center;
  white-space:nowrap;
  text-align:center;
}

body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button,.codela-maa-btn):is(:disabled,[aria-disabled="true"],[aria-busy="true"]),
.sf-shell .sf-ui-button:is(:disabled,[aria-disabled="true"],[aria-busy="true"]),
body:not(.codela-my-account-layout) .sf-content :is(.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce-MyAccount-content :is(a,button,input):is(.woocommerce-Button,.woocommerce-button,.wp-element-button,.wc-forward)):not(.sf-ui-button--secondary,.sf-ui-button--quiet,.sf-ui-icon-button):is(:disabled,[aria-disabled="true"],[aria-busy="true"]),
body.single-product div.product form.cart button.single_add_to_cart_button:is(:disabled,[aria-disabled="true"],[aria-busy="true"]),
body.woocommerce-checkout :is(.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button, #place_order):is(:disabled,[aria-disabled="true"],[aria-busy="true"]),
body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword) button[type=submit]:is(:disabled,[aria-disabled="true"],[aria-busy="true"]),
#sf-panel.is-account-panel .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register) button[type=submit]:is(:disabled,[aria-disabled="true"],[aria-busy="true"]){
  opacity:.44;
  cursor:default;
  pointer-events:none;
}
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button,.codela-maa-btn):is(:disabled,[aria-disabled="true"],[aria-busy="true"]):active,
.sf-shell .sf-ui-button:is(:disabled,[aria-disabled="true"],[aria-busy="true"]):active,
body:not(.codela-my-account-layout) .sf-content :is(.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce-MyAccount-content :is(a,button,input):is(.woocommerce-Button,.woocommerce-button,.wp-element-button,.wc-forward)):not(.sf-ui-button--secondary,.sf-ui-button--quiet,.sf-ui-icon-button):is(:disabled,[aria-disabled="true"],[aria-busy="true"]):active,
body.single-product div.product form.cart button.single_add_to_cart_button:is(:disabled,[aria-disabled="true"],[aria-busy="true"]):active,
body.woocommerce-checkout :is(.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button, #place_order):is(:disabled,[aria-disabled="true"],[aria-busy="true"]):active,
body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword) button[type=submit]:is(:disabled,[aria-disabled="true"],[aria-busy="true"]):active,
#sf-panel.is-account-panel .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register) button[type=submit]:is(:disabled,[aria-disabled="true"],[aria-busy="true"]):active{
  transform:none;
  filter:none;
}
.sf-shell .sf-ui-spinner{
  width:16px;
  height:16px;
  flex:none;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:sf-ui-spin 700ms linear infinite;
}
@keyframes sf-ui-spin{to{transform:rotate(360deg)}}

body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button,.codela-maa-btn):active,
.sf-shell .sf-ui-button:active,
body:not(.codela-my-account-layout) .sf-content :is(.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce-MyAccount-content :is(a,button,input):is(.woocommerce-Button,.woocommerce-button,.wp-element-button,.wc-forward)):not(.sf-ui-button--secondary,.sf-ui-button--quiet,.sf-ui-icon-button):active,
body.single-product div.product form.cart button.single_add_to_cart_button:active,
body.woocommerce-checkout :is(.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button, #place_order):active,
body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword) button[type=submit]:active,
#sf-panel.is-account-panel .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register) button[type=submit]:active{
  transform:scale(var(--sf-ui-scale-action));
  transition-duration:var(--sf-ui-motion-engage);
  transition-timing-function:var(--sf-ui-ease-press);
}
.sf-shell .sf-ui-pressable:not(.sf-ui-nav-tab){
  transition:transform var(--sf-ui-motion-release) var(--sf-ui-ease-release);
}
.sf-shell .sf-ui-pressable:active:not(.sf-ui-nav-tab):not(:disabled,[aria-disabled="true"],[aria-busy="true"]){
  transform:scale(var(--sf-ui-scale-action));
  transition-duration:var(--sf-ui-motion-engage);
  transition-timing-function:var(--sf-ui-ease-press);
}

/* WooCommerce variation selection and loading use CSS states in addition to
   native disabled. All product-state treatment remains in the shared primitive. */
body.single-product div.product form.cart button.single_add_to_cart_button:is(.disabled,.loading){
  opacity:.44;
  cursor:default;
  pointer-events:none;
  transform:none;
}
/* Missing selections are an invitation to reveal the original selectors.
   Loading, unavailable variations and truly disabled controls stay disabled. */
body.single-product div.product .sf-product-sheet form.variations_form button.single_add_to_cart_button.wc-variation-selection-needed:not(:disabled,.loading,[aria-disabled="true"]){
  pointer-events:auto;cursor:pointer;
}

/* The press light is a static paint change. Only transform is animated;
   blur/shadows never interpolate and native Woo spinner pseudo-elements stay free. */
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button--primary,.codela-maa-btn--primary):active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]),
.sf-shell .sf-ui-button--primary:active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]),
body:not(.codela-my-account-layout) .sf-content :is(.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce-MyAccount-content :is(a,button,input):is(.woocommerce-Button,.woocommerce-button,.wp-element-button,.wc-forward)):not(.sf-ui-button--secondary,.sf-ui-button--quiet,.sf-ui-icon-button):active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]),
body.single-product div.product form.cart button.single_add_to_cart_button:active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]),
body.woocommerce-checkout :is(.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button, #place_order):active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]),
body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword) button[type=submit]:active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]),
#sf-panel.is-account-panel .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register) button[type=submit]:active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]){
  background-image:var(--sf-ui-action-highlight-pressed);
}
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button--secondary,.codela-maa-btn--ghost):active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]),
.sf-shell .sf-ui-button--secondary:active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]){
  background-image:var(--sf-ui-glass-highlight-pressed);
}
.sf-shell :is(.sf-ui-icon-button,.sf-ui-pressable):is(:disabled,[aria-disabled="true"],[aria-busy="true"]),
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-icon-button,.sf-ui-pressable):is(:disabled,[aria-disabled="true"],[aria-busy="true"]){
  transform:none;
}
/* Tabs intentionally use the Navigation Controller's custom press/scrub
   behavior; the shared token defines response speed, not a second handler. */
.sf-shell .sf-ui-nav-tab{touch-action:pan-y}
@media(prefers-reduced-motion:reduce){
  .woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__trigger,
  :is(.sf-shell,.sf-product-plugin-footer) .sf-ui-icon-button,
  .woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__trigger .sf-icon,
  :is(.sf-shell,.sf-product-plugin-footer) .sf-ui-icon-button .sf-icon,
  body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button,.codela-maa-btn),
  .sf-shell .sf-ui-button,
  body:not(.codela-my-account-layout) .sf-content :is(.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce-MyAccount-content :is(a,button,input):is(.woocommerce-Button,.woocommerce-button,.wp-element-button,.wc-forward)):not(.sf-ui-button--secondary,.sf-ui-button--quiet,.sf-ui-icon-button),
  body.single-product div.product form.cart button.single_add_to_cart_button,
body.woocommerce-checkout :is(.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button, #place_order),
  body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword) button[type=submit], #sf-panel.is-account-panel .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register) button[type=submit],
  .sf-shell .sf-ui-pressable,
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-icon-button,.codela-maa-icon-btn),
body:not(.codela-my-account-layout) .sf-content .sf-ui-icon-button .sf-icon{transition:none!important}
  .sf-shell .sf-ui-spinner{animation:none!important}
}

/* Opaque materials keep contrast where backdrop sampling is unavailable. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button--primary,.codela-maa-btn--primary),
.sf-navigation-preview .sf-ui-button--primary,
.sf-shell .sf-ui-button--primary,
body:not(.codela-my-account-layout) .sf-content :is(.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce-MyAccount-content :is(a,button,input):is(.woocommerce-Button,.woocommerce-button,.wp-element-button,.wc-forward)):not(.sf-ui-button--secondary,.sf-ui-button--quiet,.sf-ui-icon-button),
body.single-product div.product form.cart button.single_add_to_cart_button,
body.woocommerce-checkout :is(.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button, #place_order),
body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword) button[type=submit],
#sf-panel.is-account-panel .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register) button[type=submit]{background:var(--sf-ui-ink);}
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button--secondary,.codela-maa-btn--ghost),
.sf-shell .sf-ui-button--secondary,
.woocommerce .sf-shell .sf-ui-button--secondary{background:var(--sf-ui-surface);}
}
@media(prefers-reduced-transparency:reduce){
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button--primary,.codela-maa-btn--primary),
.sf-navigation-preview .sf-ui-button--primary,
.sf-shell .sf-ui-button--primary,
body:not(.codela-my-account-layout) .sf-content :is(.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce-MyAccount-content :is(a,button,input):is(.woocommerce-Button,.woocommerce-button,.wp-element-button,.wc-forward)):not(.sf-ui-button--secondary,.sf-ui-button--quiet,.sf-ui-icon-button),
body.single-product div.product form.cart button.single_add_to_cart_button,
body.woocommerce-checkout :is(.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button, #place_order),
body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword) button[type=submit],
#sf-panel.is-account-panel .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register) button[type=submit]{background:var(--sf-ui-ink);-webkit-backdrop-filter:none;backdrop-filter:none;}
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button--secondary,.codela-maa-btn--ghost),
.sf-shell .sf-ui-button--secondary,
.woocommerce .sf-shell .sf-ui-button--secondary{background:var(--sf-ui-surface);-webkit-backdrop-filter:none;backdrop-filter:none;}
body.single-product div.product .sf-product-overview > .onsale,
.sf-navigation-purchase,
.sf-product-sheet,
html.sf-product-sheet-pending body.single-product:not(.sf-product-sheet-ready) div.product .sf-product-overview > .summary .quantity,
body.single-product.sf-product-sheet-ready div.product .sf-product-quantity.sf-ui-surface,
.sf-product-purchase,
.sf-ui-gallery-nav,
.woocommerce div.product div.sf-ui-gallery .flex-control-thumbs,
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button,.codela-maa-btn).sf-ui-surface,
.sf-shell .sf-ui-surface,
.sf-shell .sf-dock-surface,
#sf-panel .sf-dock-surface,
.woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__trigger,
:is(.sf-shell,.sf-product-plugin-footer) .sf-ui-icon-button--soft,
#sf-panel button.sf-ui-icon-button--soft,
body:not(.codela-my-account-layout) .sf-content .sf-ui-icon-button--soft{background:var(--sf-ui-glass-opaque)!important;-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media(forced-colors:active){
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button--primary,.codela-maa-btn--primary),
.sf-navigation-preview .sf-ui-button--primary,
.sf-shell .sf-ui-button--primary,
body:not(.codela-my-account-layout) .sf-content :is(.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce-MyAccount-content :is(a,button,input):is(.woocommerce-Button,.woocommerce-button,.wp-element-button,.wc-forward)):not(.sf-ui-button--secondary,.sf-ui-button--quiet,.sf-ui-icon-button),
body.single-product div.product form.cart button.single_add_to_cart_button,
body.woocommerce-checkout :is(.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button, #place_order),
body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword) button[type=submit],
#sf-panel.is-account-panel .woocommerce form:is(.woocommerce-form-login,.woocommerce-form-register) button[type=submit],
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button--secondary,.codela-maa-btn--ghost),
.sf-shell .sf-ui-button--secondary,
.woocommerce .sf-shell .sf-ui-button--secondary,
body.single-product div.product .sf-product-overview > .onsale,
.sf-navigation-purchase,
.sf-product-sheet,
html.sf-product-sheet-pending body.single-product:not(.sf-product-sheet-ready) div.product .sf-product-overview > .summary .quantity,
body.single-product.sf-product-sheet-ready div.product .sf-product-quantity.sf-ui-surface,
.sf-product-purchase,
.sf-ui-gallery-nav,
.woocommerce div.product div.sf-ui-gallery .flex-control-thumbs,
body:not(.codela-my-account-layout) .sf-content :is(.sf-ui-button,.codela-maa-btn).sf-ui-surface,
.sf-shell .sf-ui-surface,
.sf-shell .sf-dock-surface,
#sf-panel .sf-dock-surface,
.woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__trigger,
:is(.sf-shell,.sf-product-plugin-footer) .sf-ui-icon-button--soft,
#sf-panel button.sf-ui-icon-button--soft,
body:not(.codela-my-account-layout) .sf-content .sf-ui-icon-button--soft{
  background:ButtonFace!important;color:ButtonText!important;border:1px solid ButtonText;
  box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;
}
}

/* Responsive composition of existing soft IconButtons: the group owns the
   desktop surface; its one remaining mobile control owns its own surface.
   Never paint both layers or enlarge the 44px primitive with group padding. */
@media(max-width:700px){
  .sf-shell .sf-ui-icon-group--single-mobile.sf-ui-surface{
    padding:0;border:0;background:transparent!important;
    box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
@media(min-width:701px){
  .sf-shell .sf-ui-icon-group--single-mobile > .sf-ui-icon-button--soft{
    border:0;background:transparent!important;
    box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}

/* Native Woo input/layout adapter: labels occupy the existing field surface,
   using the same spacing, radius and action-height tokens as other UI controls.
   No new input markup or JS; labels keep their real for/id relationship. */
:is(body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce, #sf-panel.is-account-panel .woocommerce)
  form .form-row:has(> label[for]):has(input.input-text){position:relative}
:is(body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce, #sf-panel.is-account-panel .woocommerce)
  form .form-row:has(> label[for]):has(input.input-text) > label[for]{
    position:absolute;z-index:1;top:7px;left:16px;right:16px;
    margin:0;padding:0;pointer-events:none;
    color:#777b82;font-size:12px;font-weight:400;line-height:17px;
}
:is(body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce, #sf-panel.is-account-panel .woocommerce)
  form .form-row:has(> label[for]):has(input.input-text) input.input-text{
    min-height:var(--sf-ui-action-height);
    padding:25px 16px 6px;
}
:is(body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce, #sf-panel.is-account-panel .woocommerce)
  form .form-row:has(> label[for]):has(input.input-text) .password-input input.input-text{padding-right:54px}
:is(body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce, #sf-panel.is-account-panel .woocommerce)
  form .form-row:has(> label[for]):has(input.input-text) input::placeholder{opacity:0}

/* Native form row contains remember + submit; display:contents puts the
   existing label, forgot-password link and shared submit in one CSS grid. */
:is(body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce, #sf-panel.is-account-panel .woocommerce)
  form.woocommerce-form-login{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:8px;align-items:center;
}
:is(body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce, #sf-panel.is-account-panel .woocommerce)
  form.woocommerce-form-login > .form-row:not(:has(button[type=submit])){grid-column:1/-1}
:is(body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce, #sf-panel.is-account-panel .woocommerce)
  form.woocommerce-form-login > .form-row:has(button[type=submit]){display:contents}
:is(body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce, #sf-panel.is-account-panel .woocommerce)
  form.woocommerce-form-login .woocommerce-form-login__rememberme{
    grid-column:1;order:1;min-width:0;margin:0;
    white-space:nowrap;font-size:clamp(11px,2.7vw,13px);
}
:is(body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce, #sf-panel.is-account-panel .woocommerce)
  form.woocommerce-form-login > :is(.lost_password,.woocommerce-LostPassword){
    grid-column:2;order:2;min-width:0;margin:0;text-align:right;
    white-space:nowrap;font-size:clamp(11px,2.7vw,13px);
}
:is(body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce, #sf-panel.is-account-panel .woocommerce)
  form.woocommerce-form-login > :is(.lost_password,.woocommerce-LostPassword) a{font-size:inherit}
:is(body.woocommerce-account:not(.logged-in):not(.codela-my-account-layout) .woocommerce, #sf-panel.is-account-panel .woocommerce)
  form.woocommerce-form-login button[type=submit]{
    grid-column:1/-1;order:3;margin:10px 0 0;width:100%;
}
/* Native auto-dismissable notice above the dialog, using existing neutral
   UI Kit surfaces. Browser Popover API performs open/close without any JS. */



/* Keep the native cart glyph after AJAX success; Woo's font checkmark and
   duplicate View cart link do not replace our shared SVG control. */
body:not(.codela-my-account-layout) .sf-content a.sf-ui-icon-button.added::after{content:none!important}
body:not(.codela-my-account-layout) .sf-content a.sf-ui-icon-button.loading .sf-icon{visibility:hidden}
body:not(.codela-my-account-layout) .sf-content a.sf-ui-icon-button.loading::after{
  content:''!important;position:absolute;top:50%;left:50%;right:auto;
  width:18px;height:18px;margin:-9px 0 0 -9px;box-sizing:border-box;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:sf-cart-loading 700ms linear infinite;
}
body:not(.codela-my-account-layout) .sf-content a.sf-ui-icon-button.loading{padding:0;pointer-events:none;transform:none}
@keyframes sf-cart-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){body:not(.codela-my-account-layout) .sf-content a.sf-ui-icon-button.loading::after{animation:none}}

/* One native purchase footer, one panel material, before and after mount.
   Do not paint a second pill when the form still lives in Woo's summary. */
.sf-product-sheet .sf-product-purchase,
html.sf-product-sheet-pending body.single-product:not(.sf-product-sheet-ready) div.product .sf-product-overview > .summary .sf-product-purchase{
  background:transparent!important;box-shadow:none!important;border:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* Navigation selection is the same capsule tint/radius on header and dock.
   Parent link and native disclosure share one continuous selected surface. */
.sf-desktop-menu li{transition:background-color var(--sf-ui-motion-selection) var(--sf-ui-ease-press)}
.sf-desktop-menu li:is(.current-menu-item,.current-menu-ancestor,:hover,:focus-within){background:var(--sf-ui-nav-selection)}
.sf-desktop-menu li>a{text-decoration:none!important}

/* Content card uses the existing page palette and control corner token. */
.sf-content .sf-ui-card{background:var(--sf-ui-surface);border:1px solid var(--sf-ui-border);border-radius:calc(var(--sf-ui-control-radius) + 8px);color:var(--sf-ui-ink)}
.sf-content .sf-journal-pagination .page-numbers.current{background:var(--sf-ui-nav-selection)}
/* A text caret shows inline-search focus; do not outline the whole header. */

/* The same product primitives become inline controls on desktop: one plain
   composition around the shared CTA and circular gallery controls, no second
   floating material. Mobile retains the original common glass surface. */
@media(min-width:901px) and (forced-colors:none){
  body.single-product div.product :is(.sf-product-purchase,.sf-ui-gallery-nav,.cdl-wa-button),
  html.sf-product-sheet-pending body.single-product:not(.sf-product-sheet-ready) div.product .sf-product-overview > .summary .quantity,
  body.single-product.woocommerce div.product div.sf-ui-gallery .flex-control-thumbs,
  body.single-product div.product .summary .cdl-wa-ico{
    background:transparent!important;box-shadow:none!important;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}

/* A quiet, dimension-preserving image slot; the real image is never hidden.
   Network errors keep the native alt/fallback and the same reserved geometry. */
img[data-sf-media-state="loading"],img[data-sf-media-state="error"]{background:var(--sf-ui-surface-muted)!important}

.sf-shell .sf-header-search .sf-search-toolbar.sf-ui-surface{background:var(--sf-ui-surface);border-radius:var(--sf-ui-pill);color:var(--sf-ui-ink)}

/* Native commerce notices share one quiet surface. Woo retains message text,
   status/alert semantics, validation links and dismiss controls. */
body:not(.codela-my-account-layout) :is(.sf-content,#sf-panel) :is(.woocommerce-error,.woocommerce-message,.woocommerce-info,.wc-block-components-notice-banner,.sf-google-error){
 box-sizing:border-box;position:relative;max-width:100%;margin:0 0 20px;padding:18px 20px;
 border:var(--sf-ui-notice-border-width,1px) solid var(--sf-ui-border);border-radius:var(--sf-ui-control-radius);
 background:var(--sf-ui-notice-surface,var(--sf-ui-surface));color:var(--sf-ui-ink);box-shadow:none;
 font:inherit;font-size:14px;line-height:1.6;list-style:none;overflow-wrap:anywhere;
}
body:not(.codela-my-account-layout) :is(.sf-content,#sf-panel) :is(.woocommerce-error,.woocommerce-message,.woocommerce-info)::before{content:none}
body:not(.codela-my-account-layout) :is(.sf-content,#sf-panel) :is(.woocommerce-error,.woocommerce-message,.woocommerce-info) li{margin:0;padding:0;list-style:none}
body:not(.codela-my-account-layout) :is(.sf-content,#sf-panel) :is(.woocommerce-error,.wc-block-components-notice-banner.is-error){border-color:var(--sf-ui-danger);background:var(--sf-ui-danger-surface)}
body:not(.codela-my-account-layout) :is(.sf-content,#sf-panel) :is(.woocommerce-message,.wc-block-components-notice-banner.is-success){border-color:var(--sf-ui-success);background:var(--sf-ui-success-surface)}
body:not(.codela-my-account-layout) .sf-content :is(.woocommerce-message,.woocommerce-info) .button{float:none;margin:0 12px 8px 0;--sf-ui-button-height:44px;--sf-ui-button-padding-y:10px;--sf-ui-button-font-size:13px}
body:not(.codela-my-account-layout) :is(.sf-content,#sf-panel) .wc-block-components-notice-banner > svg{display:none}
/* A single field primitive for coupon and signed-in native account forms. */
body:not(.codela-my-account-layout) .sf-content :is(form.checkout_coupon,.woocommerce-EditAccountForm,.woocommerce-address-fields__field-wrapper) :is(input.input-text,select,textarea){
 box-sizing:border-box;width:100%;min-height:var(--sf-ui-action-height);padding:14px 16px;
 border:1px solid var(--sf-ui-border);border-radius:var(--sf-ui-control-radius);
 background:var(--sf-ui-surface);color:var(--sf-ui-control-ink);font:inherit;font-size:16px;line-height:1.4;box-shadow:none;
}
body:not(.codela-my-account-layout) .sf-content :is(form.checkout_coupon,.woocommerce-EditAccountForm,.woocommerce-address-fields__field-wrapper) :is(input.input-text,select,textarea):focus-visible{outline:2px solid var(--sf-ui-accent);outline-offset:2px}

/* Newer Woo releases attach coupon validation to the original input. */
body:not(.codela-my-account-layout) .sf-content form.checkout_coupon input[aria-invalid="true"]{border-color:var(--sf-ui-danger)}
body:not(.codela-my-account-layout) .sf-content form.checkout_coupon .coupon-error-notice{display:block;margin-top:8px;color:var(--sf-ui-danger);font-size:13px;line-height:1.6}

body.woocommerce-account:not(.codela-my-account-layout) .woocommerce-MyAccount-content .codela-maa-btn--danger{color:var(--sf-ui-danger)}

/* Woo block notices force wc-forward into a translucent text link with
   !important. Adapt that native action to the SAME Button tokens above. */
body.woocommerce-account:not(.codela-my-account-layout) .sf-content .wc-block-components-notice-banner__content .wc-forward{
 background:var(--sf-ui-ink)!important;background:var(--sf-ui-button-fill)!important;
 background-image:var(--sf-ui-action-highlight)!important;color:#fff!important;
 padding:var(--sf-ui-button-padding-y,17px) var(--sf-ui-button-padding-x,24px)!important;
 opacity:1;transition:transform var(--sf-ui-motion-release) var(--sf-ui-ease-release);
}
@media(prefers-reduced-motion:reduce){body.woocommerce-account:not(.codela-my-account-layout) .sf-content .wc-block-components-notice-banner__content .wc-forward{transition:none}}
@media(forced-colors:active){body.woocommerce-account:not(.codela-my-account-layout) .sf-content .wc-block-components-notice-banner__content .wc-forward{background:ButtonFace!important;color:ButtonText!important;border:1px solid ButtonText}}

.sf-shell .sf-cart-skeleton-row :is(i,b){background:var(--sf-ui-skeleton);border-radius:var(--sf-ui-control-radius)}