/* 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}

/* ===== B2 batch (2026-10-14): remaining detail fixes, each block names its audit finding id ===== */
/* home-shell-02: phone footer reserved the purchase-dock space twice (maroon .sst-footer__bottom padding + Order help margin).
   Keep only the Order help spacer (it stays in flow); drop the footer's copy while that launcher is present and closed. */
@media (max-width:749px){
  body:not(.sst-app):has(> .sst-order-help-chat:not([data-open="1"])) footer.sst-footer .sst-footer__bottom{padding-bottom:16px;}
}

/* home-shell-05: PC "New set card lists" - 8 cards in the theme's auto-fill(180px) grid made 7 + 1 orphan
   at 1440 (and 5 + 3 around 1000). When the list holds exactly 8 (or 10) sets, use an even 4 (or 5) column
   grid so rows fill. Wider cards also let long names ("The World's Strongest Warriors") show in full; a
   3-line clamp keeps the ellipsis only as a last resort at narrow tablet widths. Phone strip (<=720) untouched. */
@media (min-width:721px){
  .sst-home-sets__list:has(> li:nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,1fr));}
  .sst-home-sets__list .sst-home-sets__link .name{-webkit-line-clamp:3;}
}
@media (min-width:1000px){
  .sst-home-sets__list:has(> li:nth-child(10):last-child){grid-template-columns:repeat(5,minmax(0,1fr));}
}

/* home-shell-06: home hero slider position dots. PC: were 22x4 translucent-white bars (invisible
   over white banners, 4px click target). Now each bar sits on a dark pill (contrast on any banner)
   and every dot button is 36px tall (bar drawn by ::after, so the theme's 999px button radius
   cannot clip it into wedges). The bar + pill hug the bottom edge of the target so they stay clear
   of the banners' baked-in CTAs; PC keeps the theme's bottom-right anchor (centring collided with
   the Refer-a-Friend / Pay-by-Card "LEARN MORE").
   Touch devices (html.sst-native = native scroll rail): the theme hides the dots and wires no
   handlers to them, so they are shown only after the home-shell-06 JS syncs them to the rail
   (.sst-home-slider--dots-sync); without that JS touch keeps today's hidden dots.
   Arrows / swipe / autoplay untouched. */
.sst-home-slider .sst-home-slider__dots{align-items:center;gap:0;bottom:0;padding:0 6px;isolation:isolate;}
.sst-home-slider.sst-home-slider--dots-sync .sst-home-slider__dots{display:flex;}
.sst-home-slider .sst-home-slider__dots::before{
  content:"";position:absolute;left:0;right:0;top:22px;bottom:2px;z-index:-1;
  border-radius:999px;background:rgba(0,0,0,.45);
}
.sst-home-slider .sst-home-slider__dots button{
  position:relative;box-sizing:border-box;width:32px;height:36px;padding:0;border-radius:6px;background:transparent;
}
.sst-home-slider .sst-home-slider__dots button::after{
  content:"";position:absolute;left:5px;right:5px;bottom:6px;height:4px;border-radius:2px;background:rgba(255,255,255,.5);
}
.sst-home-slider .sst-home-slider__dots button.is-active{background:transparent;}
.sst-home-slider .sst-home-slider__dots button.is-active::after{background:#fff;}
.sst-home-slider .sst-home-slider__dots button:focus-visible{outline:2px solid #fff;outline-offset:-4px;}
@media (max-width:749px){
  /* phone: centred between the S404-10 bottom-corner arrows */
  .sst-home-slider .sst-home-slider__dots{left:50%;right:auto;transform:translateX(-50%);padding:0 4px;}
  .sst-home-slider .sst-home-slider__dots::before{top:24px;}
  .sst-home-slider .sst-home-slider__dots button{width:18px;}
  .sst-home-slider .sst-home-slider__dots button::after{left:4px;right:4px;bottom:5px;}
}

/* home-shell-09: phone footer policy links + copyright link were 14px-tall inline tap targets -> 36px-tall boxes; row gap and edge margins absorb the padding so text sits where it did */
@media (max-width:749px){
footer.sst-footer .sst-footer__legal{row-gap:0;column-gap:6px;margin:-8px -6px;}
footer.sst-footer .sst-footer__legal > li > a{display:inline-flex;align-items:center;min-height:36px;padding:0 6px;box-sizing:border-box;}
footer.sst-footer .sst-footer__bottom-inner small > a{display:inline-flex;align-items:center;min-height:36px;}
}

/* PB-05: product gallery thumbnails on phone — one swipeable row instead of a 4-column grid
   (20 thumbs on the 9-type set were a 450px block pushing title/price ~1.4 screens down). */
@media (max-width:749px){
  .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs{
    display:flex;flex-wrap:nowrap;gap:8px;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;overscroll-behavior-x:contain;
    scrollbar-width:none;padding-bottom:2px;
  }
  .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar{display:none}
  .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li{
    flex:0 0 64px;width:64px;scroll-snap-align:start;
  }
  /* fade the right edge only when there are more thumbs than fit (6+) */
  .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs:has(> li:nth-child(6)){
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  }
}

/* PB-06: PDP review grid - stop cards stretching to the tallest card in their row (a portrait review video left ~560px of blank card beside it) and cap review video height; min-width keeps the player controls readable (letterboxed on black) */
.commentlist{align-items:start}
.commentlist .sst-review-media__video video{max-height:420px;width:auto;min-width:min(280px,100%);max-width:100%;background:#000}

/* PB-08: hide sold-out tiles in Frequently Bought Together. Each card has WooCommerce's .outofstock class and no add-to-cart button.
   The selector is specific enough to beat the theme rule ".woocommerce div.product .related.products ul.products li.product{display:flex}" without !important. */
.woocommerce div.product .related.products.sst-fbt ul.sst-fbt__list li.sst-fbt__card.outofstock{display:none}
/* PB-08: if every FBT tile is sold out, hide the whole section so no empty heading is left */
.woocommerce div.product .related.products.sst-fbt:not(:has(li.sst-fbt__card:not(.outofstock))){display:none}

/* PB-09: product description spec table (e.g. PRODUCT: Condition / Release Date / Status) - labels were centered, giving a ragged left edge and a near-zero gap after long labels. Left-align them and give a steady gap before the value. */
#tab-description table th{text-align:left;padding-right:24px;vertical-align:top}
@media (min-width:750px){#tab-description table th{white-space:nowrap}}
@media (max-width:749px){#tab-description table th{padding-right:4px}}

/* psa-02: stock-1 PSA pages render the qty input as type=hidden; the empty .quantity flex/grid item left a 12px (PC) / 96px (phone) hole before ADD TO CART. Remove it and let the button take the full row. */
.single-product form.cart .quantity:has(input[type="hidden"]):not(:has(input[type="number"])){display:none}
.single-product form.cart:has(.quantity input[type="hidden"]):not(:has(.quantity input[type="number"])) .single_add_to_cart_button{grid-column:1/-1}

/* psa-06: PDP "More from <set>" (section.sst-fbt.sst-sameset) with exactly ONE card left 3/4 of the row empty and ~60px+ of dead space under the price
   (the link's min-height:100% pushed .sst-product-card__actions below the li, where overflow:hidden clipped the Add to cart button).
   A lone card becomes a compact horizontal card (image left, text + Add to cart right, max 560px). 2+ cards are untouched. */
.woocommerce div.product .related.products.sst-fbt.sst-sameset ul.products > li.product.sst-fbt__card:only-child{
  grid-column:1/-1;width:100%;max-width:560px;flex:0 0 100%;min-height:0;flex-direction:row;align-items:stretch}
.woocommerce div.product .related.products.sst-sameset ul.products > li.sst-fbt__card:only-child .sst-product-card__link{
  flex:1 1 auto;min-height:0;flex-direction:row;align-items:stretch}
.woocommerce div.product .related.products.sst-sameset ul.products > li.sst-fbt__card:only-child .sst-product-card__media{
  flex:0 0 200px;width:200px;height:auto;align-self:flex-start}
.woocommerce div.product .related.products.sst-sameset ul.products > li.sst-fbt__card:only-child .sst-product-card__body{
  flex:1 1 auto;min-width:0;align-content:start;padding-right:44px;padding-bottom:64px}
.woocommerce div.product .related.products.sst-sameset ul.products > li.sst-fbt__card:only-child .sst-product-card__actions{
  position:absolute;left:224px;right:0;bottom:0}
.woocommerce div.product .related.products.sst-sameset ul.products > li.sst-fbt__card:only-child .sst-product-card__actions .button.add_to_cart_button{
  opacity:1;transform:none;width:calc(100% - 28px);box-sizing:border-box}
@media (max-width:749px){
  .woocommerce div.product .related.products.sst-sameset ul.products > li.sst-fbt__card:only-child{max-width:100%}
  .woocommerce div.product .related.products.sst-sameset ul.products > li.sst-fbt__card:only-child .sst-product-card__media{flex-basis:128px;width:128px}
  .woocommerce div.product .related.products.sst-sameset ul.products > li.sst-fbt__card:only-child .sst-product-card__actions{left:142px}
  .woocommerce div.product .related.products.sst-sameset ul.products > li.sst-fbt__card:only-child .sst-product-card__body{padding-right:36px}
}

/* COL-05: product-card link had min-height:100% of the card, pushing .sst-product-card__actions below the
   card's overflow:hidden edge (blank band, Add to cart never visible). Let the link fill only the leftover
   space so the actions row sits inside the card, and show the button on PC instead of hover-only. */
ul.products li.sst-product-card > .sst-product-card__link{min-height:0;flex:1 1 auto}
ul.products li.sst-product-card > .sst-product-card__actions{flex:0 0 auto}
@media (hover:hover) and (min-width:901px){
  .woocommerce ul.products li.sst-product-card.product .button.add_to_cart_button{opacity:1;transform:none}
}

/* COL-07: Top 5 rank digits declared Fraunces (never loaded) -> fell back to Georgia old-style figures (3/4/5 drop below baseline). Use the UI sans stack, bold, lining tabular figures. Parent class added so it beats the theme's inline .sst-col-top5__no rule regardless of source order. */
.sst-col-top5__link .sst-col-top5__no{font-family:inherit;font-weight:700;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* COL-08: collection Top 5 — drop the last row's hairline so it doesn't double up with the hero's bottom rule */
.sst-collection-hero .sst-col-top5__row:last-child .sst-col-top5__link{border-bottom:0}

/* COL-12: phone "Browse by character" chips on character/PSA collection pages (/collections/psa10, /collections/pikachu-cards ...)
   were 28px-tall tap targets stacked 8px apart. Lift them to 40px with the label centred; widths, wrap and gap unchanged. */
@media (max-width:749px){
  .sst-col-siblings .sst-col-siblings__list .sst-col-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    min-height:40px;
    padding-top:0;
    padding-bottom:0;
  }
}

/* cart-02: PDP "added to your cart" notice had no padding/border/background; the only frame was the
   browser focus ring (role=alert tabindex=-1 gets focused on load), text touched the ring and the
   inline "View cart" button overflowed it. Card it, put the button at the end, drop the ring.
   Scoped to the product page wrapper (cart page already styles its own notices). */
.sst-product-main .woocommerce-notices-wrapper > .woocommerce-message,
.sst-product-main .woocommerce-notices-wrapper > .woocommerce-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 20px;
  padding: 12px 16px;
  background: #f8f2f5;
  border: 1px solid #e8d7df;
  border-left: 4px solid var(--sst-accent, #9e2c5f);
  border-radius: 10px;
  color: #2a2326;
  font-size: 15px;
  line-height: 1.5;
  outline: none;
}
.sst-product-main .woocommerce-notices-wrapper > .woocommerce-message .button,
.sst-product-main .woocommerce-notices-wrapper > .woocommerce-info .button {
  order: 2;
  flex: none;
  margin: 0 0 0 auto;
  float: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 6px;
  background: var(--sst-accent, #9e2c5f);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
html[data-sst-theme="dark"] .sst-product-main .woocommerce-notices-wrapper > .woocommerce-message,
html[data-sst-theme="dark"] .sst-product-main .woocommerce-notices-wrapper > .woocommerce-info {
  background: var(--sst-surface, #232326);
  border-color: rgba(255, 255, 255, .12);
  border-left-color: #d36a98;
  color: #ececee;
}
@media (max-width: 749px) {
  .sst-product-main .woocommerce-notices-wrapper > .woocommerce-message,
  .sst-product-main .woocommerce-notices-wrapper > .woocommerce-info {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
  }
  .sst-product-main .woocommerce-notices-wrapper > .woocommerce-message .button,
  .sst-product-main .woocommerce-notices-wrapper > .woocommerce-info .button {
    margin: 0;
    min-height: 44px;
  }
}

/* cart-07: desktop empty cart - the cart's 2-column grid (696px | 520px) put the empty card and "Return to shop" in the left column only, leaving the right half blank. Span both columns and centre a 640px block on the content area. Only rendered when the cart is empty. */
body.woocommerce-cart .woocommerce > .wc-empty-cart-message,
body.woocommerce-cart .woocommerce > p.return-to-shop{
  grid-column:1 / -1;
  width:100%;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  text-align:center;
}

/* cart-08: short cart page left a bare body-colour band under the magenta footer
   (PC: viewport area below the footer; phone/tablet: variant-b's 150px sticky-bar padding-bottom
   plus the ~24px Google merchant-widget wrapper margin). Paint the canvas with the footer gradient,
   clip the body background to its content box (selector beats variant-b.css
   "body.sst-co-ab.sst-co-v-b{background:...}", which resets the clip), and bridge the widget-wrapper
   gap with a footer-coloured strip. Layout, scroll height and the sticky-bar padding are unchanged. */
html:has(> body.woocommerce-cart),
html[data-sst-theme="dark"]:has(> body.woocommerce-cart){background:linear-gradient(90deg,#9e2c5f,#0a0a0a);}
html body.woocommerce-cart.woocommerce-page.page{background-clip:content-box;}
@media (max-width:1023px){
  html body.woocommerce-cart.sst-co-ab.sst-co-v-b > footer.sst-footer{position:relative;}
  html body.woocommerce-cart.sst-co-ab.sst-co-v-b > footer.sst-footer::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:32px;background:inherit;pointer-events:none;
  }
}

/* cart-10: phone cart totals - "Calculate shipping" toggle was a 15px-tall inline text link
   (checkout-ab variant-b forces display:inline); give it a 44px tap row without changing its look */
@media (max-width:749px){
  body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .woocommerce-shipping-calculator > a.shipping-calculator-button{
    display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;vertical-align:middle;
  }
}

/* cart-11: header Cart / Coupons count badges (theme: top:1px;left:18px, 16px+ wide) ended exactly where the
   "Cart"/"Coupons" text label starts (0px gap) and a 2-digit count covered the first letter. Anchor the badge
   by its RIGHT edge 4px before the label (link padding 4 + icon 24 + 2) and lift it onto the icon corner, so
   wider counts grow left over the icon instead of into the text. Only where the label is shown (>=901px);
   the icon-only header below that is untouched. */
@media (min-width:901px){
  .sst-icon-link.sst-cart-toggle > .sst-cart-count,
  .sst-icon-link.sst-icon-link--coupons > .sst-coupon-count{
    left:auto;
    right:calc(100% - 30px);
    top:-3px;
  }
}

/* acct-2: /my-account?register=1 (logged out) - the JS below adds body.sst-register-first; on phone
   show the Register card before the Login card so the "Create a free account" link lands on sign-up. */
@media (max-width:749px){
  body.woocommerce-account.sst-register-first:not(.logged-in) .woocommerce .u-columns > .u-column2{order:-1}
}

/* acct-4: /orders/ guest header card had 0 side padding (text flush on border); match lower cards */
.sst-guest-orders__head{padding:20px 20px 22px;box-sizing:border-box}
.sst-guest-orders__head h1{margin-top:6px;margin-bottom:10px}
.sst-guest-orders__head > :first-child{margin-top:0}
.sst-guest-orders__head > :last-child{margin-bottom:0}

/* acct-7: My Account (login/register) and guest /orders/ buttons fell back to the UA default font (Arial)
   while labels/headings use Figtree. The Google button's inner .nsl-button also had an explicit Arial rule
   (.sst-google-button .nsl-button). Inherit the page font; size/weight/height unchanged. */
.woocommerce-account .woocommerce button,
.woocommerce-account .woocommerce .button,
.woocommerce-account .sst-google-button,
.woocommerce-account .sst-google-button .nsl-button,
.sst-guest-orders button,
.sst-guest-orders .button { font-family: inherit; }

/* acct-9: Register card privacy notice was 15px #111, louder than the 13px labels / 14px promo copy */
.woocommerce-form-register .woocommerce-privacy-policy-text p{font-size:13px;line-height:1.5}
html:not([data-sst-theme="dark"]) .woocommerce-form-register .woocommerce-privacy-policy-text p{color:#5b6168}
html[data-sst-theme="dark"] .woocommerce-form-register .woocommerce-privacy-policy-text p{color:#a9b0b8}
.woocommerce-form-register .woocommerce-privacy-policy-text a{text-decoration-thickness:1px;text-underline-offset:2px}

/* blog-02: /blogs/news index cards printed a white title + dark gradient over the
thumbnail, colliding with headlines baked into most featured images. Put the image
on top (same 40:21 box) and the title/date in a plain body under it, like the
Popular Articles strip. Scoped to .sst-grid-articles. */
.sst-grid-articles .sst-grid-card{display:flex;flex-direction:column;aspect-ratio:auto;background:#fff;border:1px solid #e6e6e6;color:#121212}
.sst-grid-articles .sst-grid-card__image{position:relative;inset:auto;height:auto;aspect-ratio:40/21;overflow:hidden;background:#111;flex:none}
.sst-grid-articles .sst-grid-card__overlay{position:static;flex:1 1 auto;padding:12px 14px 14px;background:none;color:inherit}
.sst-grid-articles .sst-grid-card__title{color:#121212}
.sst-grid-articles .sst-grid-card__date{color:#5f5f5f}
html[data-sst-theme="dark"] .sst-grid-articles .sst-grid-card{background:#1a1a1a;border-color:#333;color:#f2f2f2}
html[data-sst-theme="dark"] .sst-grid-articles .sst-grid-card__title{color:#f2f2f2}
html[data-sst-theme="dark"] .sst-grid-articles .sst-grid-card__date{color:#a9a9a9}

/* blog-04: in-content featured image that repeats the article hero (same attachment) - JS adds .sst-dup-hero */
.sst-article-content .blog-image--featured.sst-dup-hero{display:none}

/* blog-10: /blogs/news 3-column grid - page 1 renders 10 posts, so the last row held one lone card with ~700px
   of empty space beside it. When the last visible card starts a new row on its own, let it span the full row
   as a wide card: thumbnail at the exact width of one column (same size as the cards above), title/date on the
   card's own dark panel to its right. Matches only a lone last card, so 9/12/48-card pages and filtered
   (client-rendered) results that fill their last row are untouched. Phone grid is 1 column, so >=750px only. */
@media (min-width:750px){
  .sst-grid-articles > .sst-article:nth-child(3n+1 of .sst-article:not(.sst-hidden)):nth-last-child(1 of .sst-article:not(.sst-hidden)){
    grid-column:1 / -1;
  }
  .sst-grid-articles > .sst-article:nth-child(3n+1 of .sst-article:not(.sst-hidden)):nth-last-child(1 of .sst-article:not(.sst-hidden)) > .sst-grid-card{
    display:grid;
    grid-template-columns:calc((100% - 40px) / 3) minmax(0,1fr);
    align-items:center;
    aspect-ratio:auto;
  }
  .sst-grid-articles > .sst-article:nth-child(3n+1 of .sst-article:not(.sst-hidden)):nth-last-child(1 of .sst-article:not(.sst-hidden)) .sst-grid-card__image{
    position:relative;
    inset:auto;
    height:auto;
    aspect-ratio:40 / 21;
    overflow:hidden;
  }
  .sst-grid-articles > .sst-article:nth-child(3n+1 of .sst-article:not(.sst-hidden)):nth-last-child(1 of .sst-article:not(.sst-hidden)) .sst-grid-card__overlay{
    position:static;
    padding:20px 28px;
    background:none;
  }
  .sst-grid-articles > .sst-article:nth-child(3n+1 of .sst-article:not(.sst-hidden)):nth-last-child(1 of .sst-article:not(.sst-hidden)) .sst-grid-card__title{
    font-size:clamp(15px,1.5vw,20px);
    line-height:1.3;
    margin-bottom:10px;
    -webkit-line-clamp:3;
  }
  .sst-grid-articles > .sst-article:nth-child(3n+1 of .sst-article:not(.sst-hidden)):nth-last-child(1 of .sst-article:not(.sst-hidden)) .sst-grid-card__date{
    font-size:13px;
  }
}
/* blog-10 dark: the #111 panel melts into the dark page; give the wide card the theme's raised surface + hairline. */
@media (min-width:750px){
  html[data-sst-theme="dark"] .sst-grid-articles > .sst-article:nth-child(3n+1 of .sst-article:not(.sst-hidden)):nth-last-child(1 of .sst-article:not(.sst-hidden)) > .sst-grid-card{
    background:var(--sst-surface,#1b1b1b);
    box-shadow:inset 0 0 0 1px var(--sst-line,#2c2c2c);
  }
}

/* info-03: FAQ (/pages/faq) and Contact (/pages/contact) blocks were set in Inter and inset 24px (PC) / 16px (phone) from the page H1, with a second H1-sized title (46/31px) stacked under it - read like an embedded widget. Use the site font (Figtree, inherited), align plain sections with the H1 (tinted --soft panels keep their inner padding), and drop the inner H2 to section-heading size so the page H1 leads. */
.sst-faq-page,
.sst-contact-v3{font-family:inherit}
.sst-faq-page__section,
.sst-contact-v3__section:not(.sst-contact-v3__section--soft){padding-left:0;padding-right:0}
.sst-faq-page__title,
.sst-contact-v3__title{font-size:30px;line-height:1.15}
@media (max-width:749px){
  .sst-faq-page__title,
  .sst-contact-v3__title{font-size:24px;line-height:1.2}
}

/* info-04: Start Here / Members phone sticky "Create a free account" bar. It duplicated the hero CTA
   on the first screen and covered the 4th trust tick. The bar now stays off-screen while the hero
   .sst-wlc__actions is in view. Hidden only once JS has armed it (data-sst-sticky-armed), so if the
   script never runs the bar stays visible as before (fail open). */
@media (max-width:749px){
  .sst-wlc__sticky[data-sst-sticky-armed]{transition:transform .25s ease,visibility 0s linear 0s}
  .sst-wlc__sticky[data-sst-sticky-armed]:not(.is-visible){transform:translateY(110%);visibility:hidden;pointer-events:none;transition:transform .25s ease,visibility 0s linear .25s}
}
@media (max-width:749px) and (prefers-reduced-motion:reduce){
  .sst-wlc__sticky[data-sst-sticky-armed],
  .sst-wlc__sticky[data-sst-sticky-armed]:not(.is-visible){transition:none}
}

/* info-06: /pages/members + /pages/start-here welcome-points stat - `.sst-wlc__card p` (0,1,1) was shrinking p.sst-wlc__big to 15px grey with a ~5px "pt"; restore the big figure (kept on one line in the narrow 4-up Start Here card) and a readable unit */
.sst-wlc .sst-wlc__card p.sst-wlc__big{font-size:clamp(2.5rem,3.4vw,3rem);line-height:1;color:var(--wlc-ink);white-space:nowrap;margin-bottom:.5rem}
.sst-wlc .sst-wlc__card p.sst-wlc__big small{font-size:.42em;color:var(--wlc-muted);margin-left:.1em}

/* info-08: /pages/contact — (1) PC: the 3 route cards (.sst-contact-v3__route has height:100% in a stretch grid) were all 644px tall, leaving 350-395px of blank white under Payment/Order. Size each card to its content. (2) The 3-cell policy strip items are grids with default align-content, so the 1-line titles were stretched to 16-54px and the bodies started at uneven y (739/729/701). Pack title+body to the top so every body starts at the same line. */
.sst-contact-v3 .sst-contact-v3__policy-item{align-content:start}
@media (min-width:750px){
  .sst-contact-v3 .sst-contact-v3__routes{align-items:start}
  .sst-contact-v3 .sst-contact-v3__routes > .sst-contact-v3__route{height:auto}
}

/* info-10: Start Here - space CTA rows and step cards off the block above (was 0px) */
.sst-wlc .sst-wlc__section > .sst-wlc__more{margin-top:24px}
.sst-wlc .sst-wlc__section > .sst-wlc__h2 + .sst-wlc__steps{margin-top:24px}

/* info-11: Start Here step cards. In the 4-column step grid (>=880px, matching page.css) the 34px
   badge column squeezes the H3/P to ~120px and the body wraps 5-9 lines; stack the badge above the
   text so copy uses the full card width. The 2-column range (560-879px) keeps the row layout, which
   already fits in 2-3 lines. Also balance section headings to drop the "from / us" orphan. */
@media (min-width:880px){
  .sst-wlc ol.sst-wlc__steps > li{flex-direction:column;gap:.75rem}
  .sst-wlc ol.sst-wlc__steps > li > div{min-width:0;width:100%}
}
.sst-wlc .sst-wlc__h2{text-wrap:balance}

/* F4: /pages/card-list (PC) - .sst-page-content is capped at 900px with margin 0 inside the centered 1080px
   article.sst-page, so the search hub, set grid, rankings router and commerce routers hug the left
   (L180/R1080 on 1440, 360px empty gutter right) under a centered full-bleed hero. Center that column.
   Scoped with :has() to the card-list hub page only. Phone is unaffected (column already full width there). */
.sst-page > .sst-page-content:has(> .sst-card-search-hub){
  margin-left:auto;
  margin-right:auto;
}

/* F5: /pages/op16-card-list PC - card grid column (900px) and Journal (20px inset) now share the 1080px article edges with "Other One Piece card lists" */
@media (min-width:750px){
article.sst-page > .sst-page-content:has(> .sst-op16-list){max-width:none}
article.sst-page:has(> .sst-op16-list, > .sst-page-content > .sst-op16-list) > #sst-cl-journal{padding-left:0;padding-right:0}
}

/* F7 card-list hub: 3-up game cards - give spare height to the body row so all eyebrows line up */
.sst-card-search-hub__games .sst-card-search-game{grid-template-rows:auto 1fr;align-content:start}
/* F7 card-list hub: set tiles - spare height goes below the text, and NEW / LATEST SET badges sit in the image corner, so code+game rows align */
.sst-card-search-hub__sets .sst-card-search-set{position:relative;grid-template-rows:auto 1fr;align-content:start}
.sst-card-search-hub__sets .sst-card-search-set__latest-tag,
.sst-card-search-hub__sets .sst-card-search-set__new{position:absolute;top:8px;left:8px;z-index:2;margin:0;line-height:1.4;pointer-events:none}
.sst-card-search-hub__sets .sst-card-search-set__top{min-height:15px}
/* F7 card-list hub: LATEST (double-width) tile image matches the square tiles' height (grid gap 26px, 16px at <=900px) */
.sst-card-search-hub .sst-card-search-hub__sets .sst-card-search-set--latest{container-type:inline-size}
.sst-card-search-hub .sst-card-search-hub__sets .sst-card-search-set--latest .sst-card-search-set__media{aspect-ratio:auto;height:calc((100cqw - 26px) / 2)}
@media (max-width:900px){.sst-card-search-hub .sst-card-search-hub__sets .sst-card-search-set--latest .sst-card-search-set__media{height:calc((100cqw - 16px) / 2)}}

/* F11: /pages/weekly-ranking section headers ("Pokémon Top 20" etc.) — the design is an underline
   (padding 0 0 10px + border-bottom), but a global html :where([style^="border-color"]) rule sets
   border-style:solid on all sides, so the inline border-color draws a 3px box that the title and
   "View All Sets" touch. Keep only the bottom rule. */
.rank-section > .rank-section-header{border-top-style:none;border-right-style:none;border-left-style:none}
/* F11: the auto-inserted <p> around "View All Sets" adds paragraph margins, leaving a ~40px gap above the underline. */
.rank-section > .rank-section-header > p{margin:0}

/* S404-11: core search/archive pagination ("Previous 1 2 3 … 5 Next") was unstyled inline text
   (digits 7-9x19px). Turn it into a wrapped row of 40px tap chips; current page filled, dots plain. */
.sst-main nav.navigation.pagination{margin:28px 0 8px;}
.sst-main nav.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;}
.sst-main nav.navigation.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:40px;min-height:40px;padding:0 12px;border:1px solid rgba(18,18,18,.18);border-radius:8px;font-size:15px;line-height:1;text-decoration:none;color:inherit;background:transparent;}
.sst-main nav.navigation.pagination a.page-numbers:hover,.sst-main nav.navigation.pagination a.page-numbers:focus-visible{border-color:currentColor;}
.sst-main nav.navigation.pagination .page-numbers.current{background:#121212;border-color:#121212;color:#fff;font-weight:700;}
.sst-main nav.navigation.pagination .page-numbers.dots{border-color:transparent;min-width:20px;padding:0 2px;}
html[data-sst-theme="dark"] .sst-main nav.navigation.pagination .page-numbers{border-color:rgba(255,255,255,.24);}
html[data-sst-theme="dark"] .sst-main nav.navigation.pagination .page-numbers.current{background:#f2f2f2;border-color:#f2f2f2;color:#121212;}
html[data-sst-theme="dark"] .sst-main nav.navigation.pagination .page-numbers.dots{border-color:transparent;}
@media (max-width:749px){.sst-main nav.navigation.pagination .nav-links{gap:6px;}}

/* DM-07: Start Here "Members get more" — `.sst-wlc__card p` (0,1,1) beat `.sst-wlc__big` (0,1,0), so the 2,000pt figure rendered at 15px muted; restore the intended big number.
   Also the theme's p margin reset zeroed `.sst-wlc__more` margin-top, so the CTA sat flush on the card row; restore the 1.5rem gap. */
.sst-wlc .sst-wlc__card p.sst-wlc__big{font-size:clamp(2.5rem,6vw,3.5rem);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;margin:0 0 .5rem;color:inherit}
.sst-wlc .sst-wlc__card p.sst-wlc__big small{font-size:.35em;font-weight:700;letter-spacing:0}
.sst-wlc .sst-wlc__section--members p.sst-wlc__more,.sst-wlc__section--members p.sst-wlc__more{margin-top:1.5rem}