/*!
 * qo-family-tabs-theme.css 1.0.0 / design v2 (ec-home-redesign-20261022, SPEC D07)
 * Quick Order family tab strip: big franchise LETTERING, no chips.
 * Owner 2026-10-22: "個々の部分、もっとデカくするよ。そして、背景を変えるんじゃなくて、文字をこだわる。"
 *  -> tabs much bigger (22px >=1600px, 20px 1440-1599px, 19px 750-1439px, 17px phone), the bar background stays the paper,
 *     all the craft goes into the letters: colour + typography only
 *     (no logos, wordmarks, mascots, images, chips or tinted backgrounds).
 *
 * Scope
 *  - Targets attributes, never label text (labels are translated with $sst_t()):
 *      native tabs : [data-qo-family-tabs] > [data-qo-family-tab="<key>"]  (functions.php L18342-L18380)
 *      COUPONS     : [data-qo-family-tabs] > [data-sst-qct-tab]   (mu-plugins/sst-qo-coupon-tab/tab.js)
 *      WATCHLIST   : [data-qo-family-tabs] > [data-sst-qof-tab]   (mu-plugins/sst-qo-favorites/favorites.js,
 *                    shown only while items are saved; styled like TOP)
 *  - Untouched: the subgroup row (.sst-qo__tabs--subgroup) and hidden / retired tabs
 *    (ALL, SALE, CARTONS, psabo, [data-qo-unavailable="1"]): nothing here sets display.
 *  - No positioned layers: the tab boxes simply grow (font-size / padding / min-height),
 *    so the rail's scrollWidth, the edge fade masks (.sst-fade-l/.sst-fade-r) and the
 *    scroll-into-view maths keep working on real boxes.
 *  - CJK / Korean labels (zh 航海王 盒損 優惠券, ko 원피스 손상 박스 쿠폰) are not in the
 *    subset fonts: they fall back to the site font stack and still get colour/stroke/shadow.
 *  - Dark mode follows html[data-sst-theme="dark"] (site ignores prefers-color-scheme, DESIGN D6).
 *
 * Fonts: self-hosted, subset woff2 in fonts/tabs/ (OFL 1.1, see fonts/tabs/OFL.txt):
 *   SST Tab Archivo Black (TOP, COUPONS, PSA10, WATCHLIST)   archivo-black-tabs.woff2
 *   SST Tab Rounded (Lilita One, renamed: Reserved Font Name) sst-tab-rounded.woff2
 *   SST Tab Anton (ONE PIECE)                                anton-tabs.woff2
 *   SST Tab Cinzel 800 (YU-GI-OH, static instance)           cinzel-800-tabs.woff2
 *   SST Tab Black Ops One (DAMAGED BOX)                      black-ops-one-tabs.woff2
 *
 * Overridden rules (live 2026-10-22) and why some declarations are !important
 *  [C1-C3] quick-order-critical.min.css .sst-qo__tab colour/border, and its @media(max-width:749px)
 *          .sst-qo__tab {padding:8px 10px!important; font-size:11px!important} -> padding,
 *          font-size are !important here.
 *  [Q1] coupon-tab tab.css .sst-qo button.sst-qct-tab {min-height:44px!important; border-bottom:2px
 *       solid transparent!important; background:transparent!important; color:#656565!important}
 *  [F1] favorites.css .sst-qo button.sst-qof-tab {same pattern, transition:none!important (kept)}
 *  [P1] sst-qo-polish polish.css .sst-qct-tab:has(> .sst-qcw-notification[hidden]) {padding-right:18px!important}
 *  These print in the footer after this file, so the themed properties are !important;
 *  this file wins on specificity (0,3,0 vs 0,2,1). Q3/F-open rules
 *  (.sst-qct--open / .sst-qof--open [data-qo-family-tab] {border-bottom-color:transparent!important})
 *  are left intact and still hide the native underline while those panels are open.
 *
 * Rollback: remove the wp_enqueue_style('samurai-sword-qo-family-tabs-theme', ...) line, purge home.
 */

/* ------------------------------------------------------------------ */
/* 0. Fonts (subset: U+0020-007E; Archivo Black + U+00A0-00FF;        */
/*    Black Ops One + ÄäÑñÎîÉé for de/es/fr DAMAGED BOX)              */
/* ------------------------------------------------------------------ */
@font-face { font-family: "SST Tab Archivo Black"; src: url(fonts/tabs/archivo-black-tabs.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "SST Tab Rounded"; src: url(fonts/tabs/sst-tab-rounded.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "SST Tab Anton"; src: url(fonts/tabs/anton-tabs.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "SST Tab Cinzel"; src: url(fonts/tabs/cinzel-800-tabs.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "SST Tab Black Ops One"; src: url(fonts/tabs/black-ops-one-tabs.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------------ */
/* 1. Tokens (light). Default = TOP / WATCHLIST / any unkeyed family.  */
/*    --tt-fill    inactive (subdued) solid fill                        */
/*    --tt-fill-on hover / active fill                                  */
/*    --tt-img / --tt-img-on  optional gradient fill (background-clip)  */
/*    --tt-tfill / --tt-tfill-on  text-fill-color (transparent = img)   */
/*    Contrast numbers: impl/theme/results-w4.json (contrast_v2)        */
/* ------------------------------------------------------------------ */
.sst-qo [data-qo-family-tabs] > :is([data-qo-family-tab], [data-sst-qct-tab], [data-sst-qof-tab]) {
  --tt-font: "SST Tab Archivo Black", "Archivo Black", "Arial Black", var(--sst-font, sans-serif);
  --tt-ls: .1em;
  --tt-style: normal;
  --tt-fill: #595855;    --tt-fill-on: #1a1a1a;
  --tt-tfill: var(--tt-fill); --tt-tfill-on: var(--tt-fill-on);
  --tt-img: none;        --tt-img-on: none;
  --tt-stroke-w: 0;      --tt-stroke: transparent; --tt-stroke-on: var(--tt-stroke);
  --tt-shadow: none;     --tt-shadow-on: none;
  --tt-deco: none;
  --tt-bar: #9e2c5f;
}
/* WATCHLIST: like TOP, a little less tracking (longer word) */
.sst-qo [data-qo-family-tabs] > [data-sst-qof-tab] { --tt-ls: .06em; }
/* COUPONS: heavy slanted red with an amber offset shadow */
.sst-qo [data-qo-family-tabs] > [data-sst-qct-tab] {
  --tt-ls: .04em; --tt-style: italic;   /* synthesized slant: Archivo Black has no italic */
  --tt-fill: #c2261b; --tt-fill-on: #c2261b;
  --tt-shadow: 2px 2px 0 rgba(245, 158, 11, .45); --tt-shadow-on: 2px 2px 0 #f59e0b;
  --tt-bar: #c2261b;
}
/* POKEMON: rounded heavy face, yellow fill, blue outline, soft blue shadow */
.sst-qo [data-qo-family-tabs] > [data-qo-family-tab="pokemon"] {
  --tt-font: "SST Tab Rounded", "Lilita One", "Arial Rounded MT Bold", var(--sst-font, sans-serif);
  --tt-ls: .03em;
  --tt-fill: #f9d346; --tt-fill-on: #ffcb05;
  --tt-stroke-w: 3.5px; --tt-stroke: #1f5f9e;      /* paint-order stroke fill: ~1.75px visible */
  --tt-shadow: 0 2px 4px rgba(42, 117, 187, .25); --tt-shadow-on: 0 3px 6px rgba(42, 117, 187, .45);
  --tt-bar: #1f5f9e;
}
/* ONE PIECE: condensed heavy face, red fill + black outline; white fill on hover/active; gold hairline */
.sst-qo [data-qo-family-tabs] > [data-qo-family-tab="onepiece"] {
  --tt-font: "SST Tab Anton", "Bebas Neue", Impact, "Arial Narrow", var(--sst-font, sans-serif);
  --tt-ls: .04em;
  --tt-fill: #d1465a; --tt-fill-on: #ffffff;
  --tt-stroke-w: 3px; --tt-stroke: #111111;
  --tt-deco: underline 1.5px #f2c230;
  --tt-bar: #c8102e;
}
/* YU-GI-OH: engraved serif capitals, purple -> gold gradient fill, dark hairline outline */
.sst-qo [data-qo-family-tabs] > [data-qo-family-tab="yugioh"] {
  --tt-font: "SST Tab Cinzel", "Cinzel", "Trajan Pro", Georgia, serif;
  --tt-ls: .04em;
  --tt-fill: #7b5b93; --tt-fill-on: #4b1f73;
  --tt-tfill: transparent; --tt-tfill-on: transparent;
  --tt-img: linear-gradient(90deg, #7b5b93 0%, #d4b75e 100%);
  --tt-img-on: linear-gradient(90deg, #4b1f73 0%, #7a3fa0 45%, #c9a227 100%);
  --tt-stroke-w: 1.2px; --tt-stroke: #2a1240;
  --tt-bar: #4b1f73;
}
/* DAMAGED BOX: stencil-cut face, amber fill + black outline, letter-spaced */
.sst-qo [data-qo-family-tabs] > [data-qo-family-tab="discounted"] {
  --tt-font: "SST Tab Black Ops One", "Stardos Stencil", Impact, var(--sst-font, sans-serif);
  --tt-ls: .07em;
  --tt-fill: #f2b842; --tt-fill-on: #f5a400;
  --tt-stroke-w: 3px; --tt-stroke: #111111;
  --tt-bar: #8a5a00;
}
/* PSA10: geometric heavy, navy; the red label colour runs in at the right end on hover/active */
.sst-qo [data-qo-family-tabs] > [data-qo-family-tab="psa10"] {
  --tt-ls: .04em;
  --tt-fill: #54678d; --tt-fill-on: #13306b;
  --tt-tfill-on: transparent;
  --tt-img-on: linear-gradient(90deg, #13306b 0%, #13306b 58%, #c8102e 100%);
  --tt-bar: #13306b;
}

/* ------------------------------------------------------------------ */
/* 2. Tokens (dark): bar background #0f0f10                            */
/* ------------------------------------------------------------------ */
html[data-sst-theme="dark"] .sst-qo [data-qo-family-tabs] > :is([data-qo-family-tab], [data-sst-qct-tab], [data-sst-qof-tab]) {
  --tt-fill: #a7a7a7; --tt-fill-on: #e8e8e8;
  --tt-bar: var(--sst-accent, #bd3d76);
}
html[data-sst-theme="dark"] .sst-qo [data-qo-family-tabs] > [data-sst-qct-tab] {
  --tt-fill: #cf5847; --tt-fill-on: #ff6a55;
  --tt-shadow: 2px 2px 0 rgba(245, 158, 11, .4); --tt-shadow-on: 2px 2px 0 #f59e0b;
  --tt-bar: #ff6a55;
}
html[data-sst-theme="dark"] .sst-qo [data-qo-family-tabs] > [data-qo-family-tab="pokemon"] {
  --tt-fill: #b79308; --tt-fill-on: #ffcb05;
  --tt-stroke: #2a75bb;
  --tt-shadow: 0 2px 5px rgba(42, 117, 187, .35); --tt-shadow-on: 0 3px 8px rgba(42, 117, 187, .6);
  --tt-bar: #ffcb05;
}
html[data-sst-theme="dark"] .sst-qo [data-qo-family-tabs] > [data-qo-family-tab="onepiece"] {
  --tt-fill: #e74554; --tt-fill-on: #ffffff;
  --tt-stroke: #0f0f10; --tt-stroke-on: #c8102e;   /* dark stroke blends; red outline on the white hover/active letters */
  --tt-bar: #ff4b5c;
}
html[data-sst-theme="dark"] .sst-qo [data-qo-family-tabs] > [data-qo-family-tab="yugioh"] {
  --tt-fill: #9071bd; --tt-fill-on: #b08ae8;
  --tt-img: linear-gradient(90deg, #9071bd 0%, #b69c4b 100%);
  --tt-img-on: linear-gradient(90deg, #b08ae8 0%, #c9a0f0 40%, #e0bf5a 100%);
  --tt-stroke-w: 0;     /* a dark outline on a clipped gradient eats the thin serifs on #0f0f10 */
  --tt-bar: #b08ae8;
}
html[data-sst-theme="dark"] .sst-qo [data-qo-family-tabs] > [data-qo-family-tab="discounted"] {
  --tt-fill: #b07705; --tt-fill-on: #f5a400;
  --tt-stroke: #0f0f10;
  --tt-bar: #f5a400;
}
html[data-sst-theme="dark"] .sst-qo [data-qo-family-tabs] > [data-qo-family-tab="psa10"] {
  --tt-fill: #8294c3; --tt-fill-on: #a9c0ff;
  --tt-img-on: linear-gradient(90deg, #a9c0ff 0%, #a9c0ff 58%, #ff6b7d 100%);
  --tt-bar: #7fa2ff;
}

/* ------------------------------------------------------------------ */
/* 3. Size + lettering                                                 */
/* ------------------------------------------------------------------ */
.sst-qo [data-qo-family-tabs] > :is([data-qo-family-tab], [data-sst-qct-tab], [data-sst-qof-tab]) {
  min-height: 62px !important;
  padding: 14px 16px !important;
  font-family: var(--tt-font) !important;
  font-size: 22px !important;
  font-weight: 400 !important;          /* display faces are single-weight; @font-face range 100-900 = no faux bold */
  font-style: var(--tt-style);
  font-synthesis-weight: none;
  line-height: 1.1 !important;
  letter-spacing: var(--tt-ls) !important;
  text-transform: uppercase;
  color: var(--tt-fill) !important;
  -webkit-text-fill-color: var(--tt-tfill);
  background: var(--tt-img) content-box !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-stroke: var(--tt-stroke-w) var(--tt-stroke);
  paint-order: stroke fill;
  text-shadow: var(--tt-shadow);
  text-decoration: var(--tt-deco);
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
  border-bottom-width: 3px !important;
  border-bottom-style: solid !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
.sst-qo [data-qo-family-tabs] > :is([data-qo-family-tab], [data-sst-qct-tab], [data-sst-qof-tab]):is(:hover, [aria-pressed="true"]) {
  color: var(--tt-fill-on) !important;
  -webkit-text-fill-color: var(--tt-tfill-on);
  background: var(--tt-img-on) content-box !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-stroke-color: var(--tt-stroke-on);
  text-shadow: var(--tt-shadow-on);
}
.sst-qo [data-qo-family-tabs] > :is([data-qo-family-tab], [data-sst-qct-tab], [data-sst-qof-tab])[aria-pressed="true"] {
  border-bottom-color: var(--tt-bar) !important;
}
/* COUPONS reserves room for its count badge (wallet.css L223 padding-right:42px is beaten by
   the padding above; badge = absolute, right:10px, 24px wide). Also fixes the phone overlap. */
.sst-qo [data-qo-family-tabs] > button[data-sst-qct-tab]:has(> .sst-qcw-notification:not([hidden])) {
  padding-right: 44px !important;
}
/* Children keep their own look: COUPONS badge, WATCHLIST star + count */
.sst-qo [data-qo-family-tabs] > [data-sst-qct-tab] .sst-qcw-notification,
.sst-qo [data-qo-family-tabs] > [data-sst-qof-tab] :is(.sst-qof-tab-star, .sst-qof-count) {
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  text-shadow: none;
  font-family: var(--sst-font, sans-serif);
  font-style: normal;
  letter-spacing: 0;
  text-decoration: none;
}
/* sst-site-font sets font-family on every .sst-qo descendant; the WATCHLIST label is a span */
.sst-qo [data-qo-family-tabs] > [data-sst-qof-tab] .sst-qof-tab-label {
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}
.sst-qo [data-qo-family-tabs] > [data-sst-qof-tab] .sst-qof-tab-star {
  font-size: 20px;
}
.sst-qo [data-qo-family-tabs] > [data-sst-qof-tab] .sst-qof-count {
  font-size: 11px;
  font-weight: 800;
}

/* Desktop fit steps so the 7 standard tabs fit the QO main column:
   1440-1599px: 20px (column 1052px at 1440 -> 986px of tabs);
   750-1439px: 19px + 14px side padding (column ~934px at 1280 -> fits).
   22px stays from 1600px up. Phone (<=749px) is separate below. */
@media (min-width: 750px) and (max-width: 1599px) {
  .sst-qo [data-qo-family-tabs] > :is([data-qo-family-tab], [data-sst-qct-tab], [data-sst-qof-tab]) {
    font-size: 20px !important;
  }
  .sst-qo [data-qo-family-tabs] > [data-sst-qof-tab] .sst-qof-tab-star { font-size: 18px; }
}
@media (min-width: 750px) and (max-width: 1439px) {
  .sst-qo [data-qo-family-tabs] > :is([data-qo-family-tab], [data-sst-qct-tab], [data-sst-qof-tab]) {
    font-size: 19px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .sst-qo [data-qo-family-tabs] > button[data-sst-qct-tab]:has(> .sst-qcw-notification:not([hidden])) {
    padding-right: 42px !important;
  }
}
@media (max-width: 749px) {
  .sst-qo [data-qo-family-tabs] > :is([data-qo-family-tab], [data-sst-qct-tab], [data-sst-qof-tab]) {
    min-height: 50px !important;
    padding: 10px 12px !important;
    font-size: 17px !important;
    text-underline-offset: 4px;
  }
  /* phone keeps the original tracking (the 750px+ tightening is for the desktop fit) */
  .sst-qo [data-qo-family-tabs] > [data-qo-family-tab="top"] { --tt-ls: .14em; }
  .sst-qo [data-qo-family-tabs] > [data-sst-qof-tab] { --tt-ls: .08em; }
  .sst-qo [data-qo-family-tabs] > :is([data-qo-family-tab="onepiece"], [data-qo-family-tab="yugioh"]) { --tt-ls: .06em; }
  .sst-qo [data-qo-family-tabs] > [data-qo-family-tab="discounted"] { --tt-ls: .1em; }
  .sst-qo [data-qo-family-tabs] > [data-qo-family-tab="pokemon"] { --tt-stroke-w: 3px; }
  .sst-qo [data-qo-family-tabs] > :is([data-qo-family-tab="onepiece"], [data-qo-family-tab="discounted"]) { --tt-stroke-w: 2.5px; }
  html:not([data-sst-theme="dark"]) .sst-qo [data-qo-family-tabs] > [data-qo-family-tab="yugioh"] { --tt-stroke-w: 1px; }
  .sst-qo [data-qo-family-tabs] > button[data-sst-qct-tab]:has(> .sst-qcw-notification:not([hidden])) {
    padding-right: 44px !important;
  }
  .sst-qo [data-qo-family-tabs] > [data-sst-qof-tab] .sst-qof-tab-star { font-size: 16px; }
}

/* Keyboard focus, drawn inside (the strip has overflow-y:hidden). */
.sst-qo [data-qo-family-tabs] > :is([data-qo-family-tab], [data-sst-qct-tab], [data-sst-qof-tab]):focus-visible {
  outline: 2px solid var(--sst-focus, #1f6feb) !important;
  outline-offset: -3px !important;
}

/* ------------------------------------------------------------------ */
/* 4. Motion (colour only). Q3 / F1 transition:none!important win.     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .sst-qo [data-qo-family-tabs] > :is([data-qo-family-tab], [data-sst-qct-tab], [data-sst-qof-tab]) {
    transition: color .15s ease, border-color .15s ease, text-shadow .15s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sst-qo [data-qo-family-tabs] > :is([data-qo-family-tab], [data-sst-qct-tab], [data-sst-qof-tab]) {
    transition: none !important;
  }
}