/* SST Site Polish · fixes for pages outside Quick Order (2026-10-13 site audit, group A "looks broken").
   Printed in wp_footer at priority 10, after theme and plugin CSS. */

/* A1) 404 "Back to home" button: label was magenta on magenta (theme link colour wins over .sst-button). */
.error404 a.sst-button,
.error404 a.sst-button:visited { color: #fff !important; }
.error404 a.sst-button:hover,
.error404 a.sst-button:focus-visible { color: #fff !important; }

/* A2) Blog "Browse the Back order tab →" CTA: .sst-article-content a{color:accent} beat .sst-bo-cta__btn{color:#fff}. */
.sst-article-content a.sst-bo-cta__btn,
.sst-article-content a.sst-bo-cta__btn:visited,
.sst-article-content a.sst-bo-cta__btn:hover,
.sst-article-content a.sst-bo-cta__btn:focus-visible { color: #fff; text-decoration: none; }

/* A3) Add-to-cart buttons that cannot be used (sold-out variation selected / nothing selected) looked fully active. */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button.wc-variation-is-unavailable,
.single_add_to_cart_button.wc-variation-selection-needed,
.sst-sticky-cart__btn[disabled] {
  background: #d9d3d6 !important;
  border-color: #d9d3d6 !important;
  color: #6b6268 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}
html[data-sst-theme="dark"] .single_add_to_cart_button.disabled,
html[data-sst-theme="dark"] .single_add_to_cart_button.wc-variation-is-unavailable,
html[data-sst-theme="dark"] .single_add_to_cart_button.wc-variation-selection-needed,
html[data-sst-theme="dark"] .sst-sticky-cart__btn[disabled] {
  background: #2e2e32 !important;
  border-color: #3a3a40 !important;
  color: #8a8a90 !important;
}

/* A4) Weekly ranking: wpautop left a <p> holding an empty <a class="rank-card"> before every real card, and <br>
       between router links. Each took a grid cell, so the grids looked like a checkerboard. Hide only those leftovers. */
.rank-grid > p:not(:has(a.rank-card > *)):not(:has(img)) { display: none !important; }
.rank-grid > br,
.sst-commerce-router__grid > br { display: none !important; }
a.rank-card:empty { display: none !important; }

/* A5) Closed cart drawer sat exactly at the right edge and its shadow bled ~20px into every page as a grey band. */
#sst-cart-drawer[aria-hidden="true"] { box-shadow: none !important; }

/* A6) pagination moved under the grid by site.js: give it room from the last card row and the SEO block below */
.sst-sitepl-pagination { margin: 24px 0 40px !important; }

/* ===== B1 batch (2026-10-14): overflow + colour fixes, each block names its audit finding id ===== */
/* home-shell-03 (+S404-08): phone set-list / character-chip strips lost their 16px left gutter.
   The lists have padding 0 16px at <=720px (the band's own breakpoint), but scroll-snap-type:x mandatory
   with scroll-padding:auto snaps scrollLeft to 16 on load, hiding the padding. scroll-padding-inline keeps the gutter.
   Breakpoint must match the bands' @media (max-width:720px); above that the lists are a padding:0 grid. */
@media (max-width:720px){
  .sst-home-sets__list,
  .sst-home-chars__list{
    padding-inline:16px;
    scroll-padding-inline:16px;
  }
}

/* home-shell-08: footer logo white tile -> deliberate rounded badge; PC bottom row aligned left with the link rows */
footer.sst-footer .sst-footer__bottom-inner .sst-footer__mark{border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.28),0 1px 3px rgba(0,0,0,.35);}
@media (min-width:750px){footer.sst-footer .sst-footer__bottom-inner{justify-content:flex-start;}}

/* cart-03: phone cart row - .product-remove spanned the whole first row (theme grid-column:1/-1),
   pushing the thumbnail (grid-row:span 4) into an extra row. Put each cell back in its named area. */
@media (max-width:749px){
  body.woocommerce-cart.sst-co-ab table.shop_table tbody tr.cart_item.sst-cart-item .product-remove{
    grid-area:remove;justify-self:end;align-self:start;width:auto;padding:0;
  }
  body.woocommerce-cart.sst-co-ab table.shop_table tbody tr.cart_item.sst-cart-item .product-thumbnail{
    grid-area:thumb;align-self:start;
  }
}

/* acct-1: logged-out My Account - login/register cards used min-height:100% but start below the h2,
   so they overflowed their column by the heading height (48px) and the Login card border ran through
   the "Register" heading on phone. Let each column be a flex column and the card fill the rest. */
body.woocommerce-account:not(.logged-in) .woocommerce .u-columns > .u-column1,
body.woocommerce-account:not(.logged-in) .woocommerce .u-columns > .u-column2 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
body.woocommerce-account:not(.logged-in) .woocommerce .u-columns > .u-column1 > form.login,
body.woocommerce-account:not(.logged-in) .woocommerce .u-columns > .u-column2 > form.register {
  min-height: 0;
  flex: 1 1 auto;
}

/* blog-11: blog filter sidebar post counts were #a5a5a5 on white (2.46:1). Light theme only; dark already 7:1. */
html:not([data-sst-theme="dark"]) .sst-fp__opt:not(.is-on) .sst-fp__n{color:#6b6b6b}

/* info-01: /pages/members rank table - fit all 4 columns (incl. Shipping) inside the phone width instead of a hidden sideways scroll */
@media (max-width:749px){
  .sst-wlc__table{min-width:0;font-size:.85rem}
  .sst-wlc__table th,.sst-wlc__table td{padding:.6rem .5rem}
  .sst-wlc__table thead th{letter-spacing:.03em;font-size:.68rem;line-height:1.3;hyphens:auto;overflow-wrap:break-word;vertical-align:bottom}
  .sst-wlc__table td:nth-child(3){white-space:nowrap}
}

/* info-07: FAQ category chips (/pages/faq, /pages/contact) were cut mid-word in a hidden sideways scroll on phone (theme @media max-width:600px sets nowrap+overflow-x:auto). Wrap the 6 short chips onto lines so every filter is visible. */
@media (max-width:749px){
  body .sst-faq__chips{
    flex-wrap:wrap;
    overflow-x:visible;
    overflow-y:visible;
    padding-bottom:0;
  }
  body .sst-faq__chips > .sst-faq__chip{
    flex:0 0 auto;
    min-height:40px;
  }
}

/* POL-02: customs page "Last updated" subtitle + estimates-only note too faint in light theme (#999/#aaa on white, 2.85:1 / 2.32:1). Light only; dark already overridden to rgb(163,163,168). */
html:not([data-sst-theme="dark"]) .sst-page-content p.subtitle,
html:not([data-sst-theme="dark"]) .sst-page-content p.note{color:#5f5f5f}

/* POL-07: customs page region headers. The stray <br> inside the flex row becomes a block flex item, which adds an empty line on every header and squeezes the US title and badge on phone. The red US highlight is deliberate and kept. */
.region .region-title br{display:none}
@media (max-width:749px){
  .region.us .region-title{flex-wrap:wrap;row-gap:6px}
  .region.us .region-title .us-badge{flex:0 1 auto;margin-left:0;white-space:nowrap;max-width:100%}
}
@media (max-width:359px){
  .region.us .region-title .us-badge{white-space:normal}
}

/* F8: /pages/card-list phone - rankings chip row (scroll cue + gutter + tap size), Card Game filter in one row, hero CTA tap height */
@media (max-width:749px){
  .sst-card-search-hub > nav.sst-charnav{
    margin-left:-16px;margin-right:-16px;
    padding:4px 40px 4px 16px;
    scroll-padding-inline:16px;
    gap:8px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
  }
  .sst-card-search-hub > nav.sst-charnav a{
    display:inline-flex;align-items:center;
    min-height:40px;padding:0 8px;
    flex:0 0 auto;
  }
  .sst-card-search-hub > nav.sst-charnav .sst-charnav-label{margin-right:4px}
  .sst-card-search-hub__filters{flex-wrap:wrap;column-gap:4px;row-gap:0}
  .sst-card-search-hub__filters .sst-card-search-hub__filter{
    width:auto;flex:0 0 auto;min-height:40px;
  }
  .sst-arc-links a.sst-arc-cta{
    display:inline-flex;align-items:flex-end;
    min-height:40px;box-sizing:border-box;
    margin-top:-16px;
  }
}
@media (max-width:520px){
  .sst-card-search-hub > nav.sst-charnav{margin-left:-12px;margin-right:-12px}
}

/* S404-08: even out set card heights (44px vs 52px when a name wraps). */
.sst-home-sets__list > li{
  display:flex;
}
.sst-home-sets__list > li > .sst-home-sets__link{
  flex:1 1 auto;
}

/* S404-09: phone header language label ("Deutsch", "Français", "Español", 中文) was cut with an
   ellipsis by 2-5px (13px at <=360). Give the label room by trimming the pill's inner padding and
   caret gap instead of widening it. At <=360 the header was also already over-full (the 69px logo
   spilled under the language pill), so there the logo, icon slots and grid gap are tightened too. */
@media (max-width:749px){
  .sst-header__language .sst-language-switcher__summary{
    padding:0 3px !important;
    gap:3px;
  }
}
@media (max-width:360px){
  .sst-header__main{ gap:4px !important; }
  .sst-actions{ gap:1px !important; }
  .sst-brand img{ height:24px !important; }
  .sst-actions .sst-icon-link{ width:32px !important; }
  .sst-header__language .sst-language-switcher__summary{
    padding:0 2px 0 3px !important;
    gap:2px;
    font-size:12px;
  }
}

/* S404-10: phone home hero slider - full-width slides (no 8px dark gap / next-slide peek),
   arrows kept (10/8 decision) but moved to the bottom corners and shrunk visually so they
   no longer sit on the banner's baked-in "Learn More" CTA. Tap target stays 36x36. */
@media (max-width:749px){
  .sst-home-slider .sst-home-slider__track{gap:0;}
  .sst-home-slider .sst-home-slide{flex:0 0 100%;min-width:100%;}
  .sst-home-slider .sst-home-slider__track::after{content:none;}
  .sst-home-slider .sst-home-slider__arrow{
    top:auto;bottom:4px;transform:none;
    width:36px;height:36px;padding:5px;
    background-clip:content-box;box-shadow:none;opacity:.8;
  }
  .sst-home-slider .sst-home-slider__arrow svg{width:13px;height:13px;}
  .sst-home-slider .sst-home-slider__arrow--prev{left:2px;}
  .sst-home-slider .sst-home-slider__arrow--next{right:2px;}
}

/* DM-02: FAQ category chips stayed white in dark mode (/pages/faq) */
html[data-sst-theme="dark"] .sst-faq__chip:not(.is-active){
  background:#1a1a1c;
  color:#e8e8e8;
  border-color:#3a3a40;
}
html[data-sst-theme="dark"] .sst-faq__chip:not(.is-active):hover{
  background:#232327;
  color:#f4a3c4;
  border-color:#e0739f;
}
html[data-sst-theme="dark"] .sst-faq__chip:focus-visible{
  outline:2px solid #f4a3c4;
  outline-offset:2px;
}

/* DM-03: FAQ group headings + question count readable in dark mode (light mode untouched) */
html[data-sst-theme="dark"] .sst-faq > h3.sst-faq__group{color:#e58bb5}
html[data-sst-theme="dark"] .sst-faq__tools > p.sst-faq__count{color:#a3abb8}

/* DM-04: Start Here / Members (dark): accent-pink text (#bd3d76) fails AA on #0f0f10 / #232326.
   Use the site's dark accent-text token (#e58bb5) for pink TEXT only. Solid pink buttons keep the #bd3d76 fill with white text.
   !important is needed because the theme sets color with !important on ghost/link/review-product. */
html[data-sst-theme="dark"] .sst-wlc .sst-wlc__kicker,
html[data-sst-theme="dark"] .sst-wlc .sst-wlc__campaign[data-status="upcoming"] .sst-wlc__badge{
  color:var(--sst-accent-text,#e58bb5);
}
html[data-sst-theme="dark"] .sst-wlc .sst-wlc__btn--ghost,
html[data-sst-theme="dark"] .sst-wlc .sst-wlc__link,
html[data-sst-theme="dark"] .sst-wlc .sst-wlc__review-product{
  color:var(--sst-accent-text,#e58bb5) !important;
}
html[data-sst-theme="dark"] .sst-wlc .sst-wlc__btn--ghost{
  border-color:var(--sst-accent-text,#e58bb5);
}

/* DM-05: dark PDP - neutralize warm brown "paper" fills (rgb(46,42,36)) on review summary, QUICK ORDER band and VIEW ALL PRODUCTS; keep Quick Order as the dominant filled CTA (View All outlined), mirroring light mode */
html[data-sst-theme="dark"] .sst-pi-reviews__summary{background:#1a1a1c;border-color:#2e2e32}
html[data-sst-theme="dark"] .sst-pi-reviews__summary .sst-pi-reviews__bar{background:#2e2e32}
html[data-sst-theme="dark"] .sst-pi-qocta--band{background:#222226;border-top-color:#2e2e32;border-bottom-color:#2e2e32}
html[data-sst-theme="dark"] .sst-pi-qocta__btn{border-color:#3a3a40}
html[data-sst-theme="dark"] .sst-pi-qocta__btn--all,
html[data-sst-theme="dark"] .woocommerce div.product .sst-pi-qocta__btn--all{background:transparent;color:#ededed;border-color:#5a5a62}
html[data-sst-theme="dark"] .sst-pi-qocta__btn--all:hover,
html[data-sst-theme="dark"] .woocommerce div.product .sst-pi-qocta__btn--all:hover{background:#2e2e32;color:#f7f5f1}

/* DM-08: dark-mode Related Articles titles were #8ab4f8 link blue (dark-mode.css uses var(--sst-info-text)). Match the neutral ink that light mode uses. */
html[data-sst-theme="dark"] .sst-related-card a,
html[data-sst-theme="dark"] .sst-related-card a:hover,
html[data-sst-theme="dark"] .sst-related-card__title{color:#e8e8e8}

/* DM-10: Start Here / Members hero trust card. The `.sst-wlc ul{padding:0}` reset (0,1,1)
   overrides `.sst-wlc__trust{padding:1rem 1.1rem}` (0,1,0), so the check marks sit on the
   card border and the first one is clipped by the 14px corner. Restore the intended inner
   padding with higher specificity. All viewports, both themes (same bug in light and dark). */
.sst-wlc ul.sst-wlc__trust{padding:1rem 1.1rem}