/* ==========================================================================
   DRYSHOD — ADAPTER: WooCommerce core markup
   Woo's own stylesheets are disabled (DECISIONS §12 ruling #15); this file
   covers the Woo elements the theme renders that components.css does not
   already style. Phase 2 scope: notices, screen-reader text, the header
   search form, the loop wrapper. Cart/checkout tables come with their phase.
   ========================================================================== */

/* ---- Fix 6: the comps were viewed under a harness reset that hides [hidden]
   with !important; components.css has no such rule and its own display
   values (e.g. .field { display:flex }) would otherwise beat the UA's. ---- */
[hidden] { display: none !important; }


/* ---- accessibility text (Woo uses .screen-reader-text; DS has .sr-only) - */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ---- notices (Woo prints ul.woocommerce-error / -message / -info) -------- */
/* .woocommerce-error is styled in components.css §26 (page-level, red). */
.woocommerce-notices-wrapper { margin-bottom: var(--ds-s-6); }
.woocommerce-notices-wrapper:empty { display: none; margin: 0; }
.woocommerce-message, .woocommerce-info {
  list-style: none; margin: 0 0 var(--ds-s-4); padding: var(--ds-s-4) var(--ds-s-5);
  border-left: var(--ds-border-struct) solid var(--ds-ink-4); background: var(--ds-paper-sunk);
  font-size: var(--ds-t-body-sm); line-height: 1.5; color: var(--ds-ink-2);
}
.woocommerce-message { border-left-color: var(--ds-ok); background: var(--ds-ok-tint); color: #1e4a2b; }
.woocommerce-message .button, .woocommerce-info .button { margin-right: var(--ds-s-3); font-weight: 700; text-decoration: underline; }

/* ---- header search ------------------------------------------------------ */
/* Ruling #8: FiboSearch's bar ([fibosearch]) sits in the search tool slot;
   Woo's product search form is the fallback. Both are given the tool's
   footprint; FiboSearch keeps its own suggestion layer untouched. */
.tool--search { gap: var(--ds-s-2); }
.tool--search .woocommerce-product-search { display: flex; align-items: center; gap: var(--ds-s-2); margin: 0; }
.tool--search .search-field {
  width: 180px; height: 36px; padding: 0 var(--ds-s-2);
  border: 0; border-bottom: var(--ds-border) solid var(--ds-rule); background: transparent;
  font-family: var(--ds-font-body); font-size: 15px; color: var(--ds-ink);
}
.tool--search .search-field:focus { outline: 0; border-bottom-color: var(--ds-ink); box-shadow: none; }
.tool--search .search-field::placeholder { color: var(--ds-ink-5); }
.tool--search .woocommerce-product-search button[type="submit"] {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Woo fallback (Fix 2 B1): the mockup's icon link and the form both ship;
   the form shows above 900, the icon-only link at ≤900 (the design's mobile
   search — global.html 390 device, components.css `.tool--search span`). */
.tool--search .tool__go { display: none; align-items: center; color: inherit; }
.tool--search .tool__go svg { width: 17px; height: 17px; }
/* FiboSearch classic range only (>900): the plugin's own min-width is 230px;
   below 900 `layout="icon-flexible"` collapses the bar itself (Fix 2 A2). */
.tool--search .dgwt-wcas-search-wrapp { width: 260px; margin: 0; }
@media (max-width: 1100px) {
  .tool--search .search-field { width: 120px; }
}
@media (max-width: 900px) {
  .tool--search .woocommerce-product-search { display: none; }
  .tool--search .tool__go { display: flex; }
}
/* The mockup's 390 header omits the "Cart" label — icon + count only
   (Fix 2 B2). The row has 350px: logo 127 + search 44 + cart 79 + burger 44
   + gaps 36 = 330 without the label, 378 with it. */
@media (max-width: 640px) {
  .tool--cart > span:not(.cart__count) { display: none; }
}

/* ---- loop wrapper ------------------------------------------------------- */
/* Woo adds columns-N to ul.products; the grid is the component's (3-up,
   2-up ≤760) and no inline or column class may drive it (DESIGN-SYSTEM §16). */
ul.products[class*="columns-"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  ul.products[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- archive without a sidebar (search results, DESIGN-SYSTEM §15) ------ */
/* The comp used an inline grid-template-columns on .archive; a class keeps
   layout out of the markup. */
.archive--single { grid-template-columns: minmax(0, 1fr); }

/* components.css hides `.tool--search span` ≤1100 (the tool's text label).
   FiboSearch's bar is built from spans; keep those visible. */
@media (max-width: 1100px) {
  .tool--search .dgwt-wcas-search-wrapp span { display: unset; }
}

/* ---- footer signup row (Fix 3) ------------------------------------------ */
/* components.css gives every other inline input row flex: 1; min-width: 0
   (:1480 coupon row, :1545 coupon reveal, :2072 search row) but not the
   footer form (:781); the mockup hid the overflow at 390 by shortening the
   button to "Go" in its device markup. With the input free to shrink,
   "Sign up" fits the 350px band. The Klaviyo embed will need these two
   rules re-targeted at its own markup (content task). */
.footer__form .input { flex: 1 1 auto; min-width: 0; }
.footer__form .btn { flex: none; }
/* Fix 3 addendum (Fix 8): components.css:782 keeps flex: 1 (basis 0) on the
   col at <=900, so it never wraps and only gets the width left beside the
   heading/copy div. The comp's 390 markup is a bare width:100% div (auto
   basis) that wraps to its own line; this reproduces that. */
@media (max-width: 900px) {
  .footer__signup-col { flex: 0 0 100%; }
}

/* ---- burger hardening (Fix 3) ------------------------------------------- */
/* The design's burger is transparent on the header paper (components.css :46
   resets button backgrounds; .burger adds none). Something outside the
   readable stylesheets paints it white at ≤900; this keeps it transparent
   whatever the source. */
.burger { background: transparent; }

/* ==========================================================================
   PHASE 3 — PDP + cart
   ========================================================================== */

/* ---- reserved regions: the dashed label box is the review look; live, BV
   fills the container (DESIGN-SYSTEM §13). Keep the budget, drop the frame. */
.reserved { border: 0; background: transparent; padding: 0; display: block; text-align: left; }
.reserved--rating { min-height: 32px; }
.reserved--reviews { min-height: 900px; }

/* ---- Woo's variation form inside the buy box ----------------------------- */
/* The real control (selects, reset link, Woo's variation price box, qty) stays
   in the DOM for wc-add-to-cart-variation; the design's buttons are the UI. */
.buybox form.cart { display: flex; flex-direction: column; gap: var(--ds-s-5); margin: 0; }
.buybox .variations.dryshod-variations,
.buybox .reset_variations,
.buybox .single_variation,
.buybox .woocommerce-variation-add-to-cart .quantity,
.buybox .pdp-qty {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; border: 0;
}
.buybox .single_variation_wrap { display: block; }
.buybox .woocommerce-variation-add-to-cart { display: block; }
.buybox .single_add_to_cart_button { width: 100%; }
.buybox .single_add_to_cart_button.disabled,
.buybox .single_add_to_cart_button[disabled] { opacity: 0.45; pointer-events: none; }
/* Simple products: Woo's simple.php form, same button treatment. */
.buybox form.cart:not(.variations_form) .single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: var(--ds-control-h); padding: 0 var(--ds-s-8);
  font-family: var(--ds-font-ui); font-size: 17px; font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase;
  background: var(--ds-orange-action); border: var(--ds-border-strong) solid var(--ds-orange-action); color: #fff; cursor: pointer;
}
.buybox .stock.out-of-stock { font-family: var(--ds-font-ui); font-size: var(--ds-t-label); text-transform: uppercase; letter-spacing: var(--ds-track-label); color: var(--ds-ink-4); margin: 0; }

/* ---- price: Woo's markup → the design's sale state (product.html) -------- */
.buybox__price .price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-s-3); }
.buybox__price .price del { text-decoration: line-through; color: var(--ds-ink-4); font-weight: 500; }
.buybox__price .price ins { text-decoration: none; }
.buybox__price .price .woocommerce-Price-amount { font: inherit; }

/* ---- tab list as <ul> (BV's <li><a> Reviews tab, DECISIONS §7a ruling (a)) */
ul.tabs--list { list-style: none; margin: 0; padding: 0; }
ul.tabs--list > li { display: flex; margin: 0; padding: 0; }
ul.tabs--list > li:first-child .tab { padding-left: 0; }
ul.tabs--list .tab { text-decoration: none; }
/* BV's Reviews panel keeps Woo's classes, not .tabpanel — same spacing. */
.pdptabs .woocommerce-Tabs-panel--reviews { padding-top: var(--ds-s-5); }
.pdptabs .woocommerce-Tabs-panel--reviews[hidden] { display: none; }
/* Description: WordPress paragraphs/lists inside .prose */
.prose p { margin: 0 0 var(--ds-s-4); }
.prose ul { margin: 0 0 var(--ds-s-4); padding-left: 1.2em; }
.prose > :last-child { margin-bottom: 0; }

/* ---- cart: Woo markup on the design's table ------------------------------ */
.carttable .quantity { display: contents; }
.carttable .product-remove > a.remove { display: inline-flex; }
.carttable .variation { margin: 4px 0 0; font-size: var(--ds-t-meta); color: var(--ds-ink-4); display: flex; flex-wrap: wrap; gap: 2px 6px; }
.carttable .variation dt, .carttable .variation dd { margin: 0; display: inline; }
.carttable .variation dd p { display: inline; margin: 0; }
.cart_totals { display: contents; }
.wc-proceed-to-checkout { display: block; }
.cartaside .checkout-button + .securenote { margin-top: var(--ds-s-3); }
.couponrow .woocommerce-remove-coupon { text-decoration: underline; }
.sumrow--discount .sumrow__value { color: var(--ds-ok); }
/* Woo's "Shipping costs updated." notice after a state change on the cart —
   the free line already says it; keep the notice but quiet. */
.woocommerce-cart .woocommerce-info { display: none; }
/* Each tab is now the first child of its <li>, so components.css
   `.tab:first-child { padding-left: 0 }` would strip every tab's left padding;
   restore the design's padding on all but the first list item. */
ul.tabs--list > li:not(:first-child) .tab { padding-left: var(--ds-s-8); }
@media (max-width: 980px) {
  .pdptabs ul.tabs--list > li:not(:first-child) .tab { padding-left: var(--ds-s-5); }
}
@media (max-width: 640px) {
  ul.tabs--list > li:not(:first-child) .tab { padding-left: var(--ds-s-5); }
}

/* ---- Fix 4: PDP gallery zoom/lightbox + tab gap --------------------------- */
/* Stage is clickable (PhotoSwipe) and hover-zoomed (jquery.zoom). */
.gallery__stage img { cursor: zoom-in; }
/* jquery.zoom injects img.zoomImg (absolutely positioned, sized inline); the
   design's contain/padding rules must not touch it. */
.gallery__stage img.zoomImg { padding: 0; object-fit: initial; max-width: none; cursor: zoom-in; }
/* The 900px Reviews budget lives only in the Reviews panel; nothing injected
   into it (BazaarVoice sets inline display) may reveal the panel while
   another tab is active. */
#tab-reviews[hidden] { display: none !important; }
/* Small floor so switching between short panels does not jump the tab bar;
   panel height is otherwise content height. */
.pdptabs .tabpanel { min-height: 160px; }

/* ---- Fix 5 #6: white image boxes (operator ruling 2026-10) ------------------- */
/* Stage, thumbs, tile stages (not the labelled placeholder slot) and the
   PhotoSwipe image sit on white. Grey baked into a JPG is a content issue. */
.gallery__stage,
.thumb,
.tile__stage:not(.tile__stage--placeholder),
.pswp__img { background: #fff; }

/* ---- Fix 5 #1: PDP tabs → Related gap trimmed to 40 + 40 (operator ruling)
   The comp has 80 (.section--pdp bottom) + 80 (related .section top).
   DECISIONS §12 deviation, PDP only; components.css untouched. */
.section--pdp { padding-bottom: var(--ds-s-10); }
.section--pdp + .section { padding-top: var(--ds-s-10); }

/* ---- Fix 5 #6b: video thumb play glyph on the white thumb ------------------
   components.css:1146-1149 sets the glyph paper-white for an ink thumb; the
   white-box ruling (#6) also whitened .thumb--video, losing the glyph. The
   button orange (design's primary action token), existing drop-shadow kept. */
.thumb--video .thumb__play { color: var(--ds-orange-action); }

/* ==========================================================================
   PHASE 4 — checkout · thank-you · inside pages · 404 · news
   ========================================================================== */

/* ---- checkout: Fix 6 — layout + Google error state ---------------------------- */
/* Woo's contract puts the design's .checkout class on the form itself
   (form.checkout.woocommerce-checkout); components.css:1532 would grid it. */
form.checkout.woocommerce-checkout { display: block; }
/* Ruling: checkout top padding trimmed to 40px (mirrors the PDP trim, Fix 5). */
.section--checkout { padding-block-start: 40px; }
/* Google Places error mode paints one warning icon; .input's background
   shorthand would tile it. Cosmetic only — Google also disables the field. */
.input.gm-err-autocomplete { background-repeat: no-repeat; background-position: right 12px center; }

/* ---- checkout: Woo coupon on the design's disclosure ------------------------ */
.woocommerce-form-coupon-toggle .woocommerce-info { display: block; margin: 0; padding: 0; border: 0; background: none; }
.coupondisclose a.showcoupon { font-weight: 600; color: var(--ds-orange-action); text-decoration: none; border-bottom: var(--ds-border) solid currentColor; }
/* Woo's slideToggle ends on inline display:block; the design row is flex. */
form.checkout_coupon.couponreveal[style*="block"] { display: flex !important; }
.sumrow--discount .woocommerce-remove-coupon { margin-left: 6px; font-size: var(--ds-t-meta); }

/* ---- checkout: Woo validation classes on the design's fields --------------- */
.field.woocommerce-invalid .input, .field.woocommerce-invalid .select,
.field.woocommerce-invalid-required-field .input, .field.woocommerce-invalid-required-field .select { border-color: var(--ds-error); border-width: var(--ds-border-strong); }
.field.woocommerce-validated .input { border-color: var(--ds-rule); }
.field .field__error:empty { display: none; }
/* Woo prepends its notice groups to the form; keep them the page-level error look. */
.woocommerce-checkout .woocommerce-NoticeGroup { margin-bottom: var(--ds-s-6); }
.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error li a { text-decoration: underline; }

/* ---- checkout: summary fragment root ---------------------------------------- */
.checkout__aside .woocommerce-checkout-review-order-table { display: block; }
.summaryacc__body .summary--sticky { position: static; }
.summaryacc__body .woocommerce-checkout-review-order-table { border: 0; padding-top: var(--ds-s-4); }
.sumline--blocked .blockednote { margin-top: 4px; }

/* ---- checkout: payment block ------------------------------------------------- */
#payment .form-row.place-order { display: flex; flex-direction: column; gap: var(--ds-s-4); margin: var(--ds-s-5) 0 0; }
#payment .privacytext p { margin: 0; }
#payment noscript { font-size: var(--ds-t-meta); color: var(--ds-ink-4); }
.wc_payment_method .cardmarks { margin-left: auto; }
/* The design's slot is a labelled box in the comp; live, the plugin's widget
   renders inside it (position "Before Submit Button"). Keep the budget. */
.turnstile-slot { border: 0; background: none; padding: 0; min-height: 65px; width: auto; max-width: none; display: block; text-align: left; }
.turnstile-slot:empty { min-height: 0; }
.turnstile-slot .cf-turnstile { margin: 0; }
/* Gateway markup inside .payment-panel: element selectors (DESIGN-SYSTEM §16).
   PayTrace uses Woo's .form-row + input; those get the design's field row. */
.payment-panel p, .payment-panel .form-row { margin: 0 0 var(--ds-s-3); }
.payment-panel .form-row:last-child { margin-bottom: 0; }
.payment-panel label { display: block; }
.payment-panel input[type="text"], .payment-panel input[type="tel"], .payment-panel input[type="number"], .payment-panel select {
  width: 100%; height: var(--ds-control-h); padding: 0 var(--ds-s-4); background: var(--ds-paper-raised);
  border: var(--ds-border) solid var(--ds-rule); border-radius: 0; font-family: var(--ds-font-body); font-size: var(--ds-t-body); color: var(--ds-ink);
}
/* Braintree (Payment Plugins) hosted fields — Fix 6. The SDK iframe carries an
   inline height:100%, so the plugin's container divs (#wc-braintree-*) decide
   the height; the plugin's own container rules are scoped to its form-design
   wrapper and were not landing. The id selectors outrank the plugin's
   three-class rules without !important and work for every form design.
   The card-type <img> (credit-cards.js) is only ever sized by
   braintree.css as 100% of an unsized span — give the span the 40x24 mark. */
.payment-panel #wc-braintree-card-number, .payment-panel #wc-braintree-expiration-date,
.payment-panel #wc-braintree-cvv, .payment-panel #wc-braintree-postal-code {
  position: relative; display: flex; align-items: center; height: var(--ds-control-h);
  min-height: 0; max-height: none; padding: 0 var(--ds-s-4); width: 100%; margin: 0;
  background: var(--ds-paper); border: var(--ds-border) solid var(--ds-ink-4); border-radius: 0; box-shadow: none;
}
.payment-panel .wc-braintree-payment-gateway iframe { height: 100%; width: 100%; padding: 0; border: 0; background: transparent; }
.payment-panel .wc-braintree-card-type { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 24px; }
.payment-panel .wc-braintree-card-type img { width: 100%; height: 100%; object-fit: contain; margin: 0; }
.payment-panel .wc-braintree-payment-gateway .row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--ds-s-4); margin: 0; }
.payment-panel .wc-braintree-payment-gateway .row::before, .payment-panel .wc-braintree-payment-gateway .row::after { display: none; }
.payment-panel .wc-braintree-payment-gateway .form-group { padding: 0; float: none; width: auto; margin: 0 0 var(--ds-s-3); }
.payment-panel .wc-braintree-payment-gateway .form-group label { display: block; margin-bottom: var(--ds-s-2); }
.payment-panel .wc-braintree-card-icon, .payment-panel .paytrace-icon { display: none; }
.payment-panel fieldset { border: 0; margin: 0; padding: 0; }
.payment-panel .wc-braintree-error, .payment-panel .wc-paytrace-error { margin-top: var(--ds-s-3); color: var(--ds-error); font-size: var(--ds-t-body-sm); }
.payment-panel .woocommerce-SavedPaymentMethods, .payment-panel .wc-braintree-save-label { display: none; }

/* Place Order: disabled while a line is blocked (fragment-refreshed) */
#place_order[disabled], #place_order.is-blocked { opacity: 0.45; pointer-events: none; }

/* ---- 404: Woo's search form as the design's .searchrow ------------------------ */
.notfound .woocommerce-product-search { display: flex; gap: var(--ds-s-2); width: 100%; }
.notfound .woocommerce-product-search .search-field { flex: 1; min-width: 0; height: var(--ds-control-h); padding: 0 var(--ds-s-4); font-family: var(--ds-font-body); font-size: var(--ds-t-body); color: var(--ds-ink); background: var(--ds-paper-raised); border: var(--ds-border) solid var(--ds-rule); border-radius: 0; }
.notfound .woocommerce-product-search button {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--ds-control-h); padding: 0 var(--ds-s-8);
  font-family: var(--ds-font-ui); font-size: 17px; font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase;
  background: var(--ds-orange-action); border: var(--ds-border-strong) solid var(--ds-orange-action); border-radius: 0; color: #fff; cursor: pointer;
}
.notfound .dgwt-wcas-search-wrapp { max-width: none; }
@media (max-width: 640px) {
  .notfound .woocommerce-product-search { flex-direction: column; }
}

/* ---- inside pages: WordPress block output inside .page-body ---------------------- */
/* Fix 8: content <hr> immediately before an <h2> doubled the design's h2 top
   rule (components.css:1806) with the hr rule (:1822) and 40px between.
   The hr survives as the separator; the h2 drops its own rule. */
.page-body hr + h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.page-body hr:has(+ h2) { margin-bottom: var(--ds-s-4); }
/* Everything in .page-body is styled by element (DESIGN-SYSTEM §17); these
   map core block wrappers onto that vocabulary. */
.page-body .wp-block-image, .page-body figure.wp-block-image { margin: var(--ds-s-8) 0; }
.page-body .wp-block-image img { height: auto; }
.page-body .wp-block-embed { position: relative; aspect-ratio: 16 / 9; background: var(--ds-ink); max-width: 900px; margin: var(--ds-s-8) 0; }
.page-body .wp-block-embed .wp-block-embed__wrapper, .page-body .wp-block-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.page-body .wp-block-quote, .page-body blockquote { border-left: var(--ds-border-struct) solid var(--ds-orange); padding: 4px 0 4px 20px; margin: 32px 0; font-size: 19px; line-height: 1.5; color: var(--ds-ink); }
.page-body .wp-block-quote p:last-child { margin-bottom: 0; }
.page-body .wp-block-separator { border: 0; border-top: var(--ds-border) solid var(--ds-rule); margin: var(--ds-s-8) 0; max-width: 720px; }
.page-body .wp-block-columns { gap: var(--ds-s-6); }
.page-body ul.products { max-width: none; margin: var(--ds-s-6) 0 var(--ds-s-10); }
/* Fix 9: jump-strip pills — components.css:1918 sets text-overflow: ellipsis
   on an inline-flex pill, where it cannot apply (the label is an anonymous
   flex item); a block pill lets the existing ellipsis rule work. The strip
   scrolls but hid its scrollbar (:1905-1911); show a thin one and keep the
   last pill off the edge. */
.jumpstrip a { display: block; line-height: 30px; }
.jumpstrip { scrollbar-width: thin; scrollbar-color: var(--ds-ink-4) transparent; padding-inline-end: var(--ds-s-8); }
.jumpstrip::-webkit-scrollbar { display: block; height: 4px; }
.jumpstrip::-webkit-scrollbar-thumb { background: var(--ds-ink-4); }
.jumpstrip::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 640px) {
  .jumpstrip a { display: block; line-height: var(--ds-tap-min); min-height: 0; }
}
/* Fix 9: content images at natural size — components.css:1830 stretches every
   figure image to the figure width (meant for the 900px layer diagrams); core
   wraps all content images in figure.wp-block-image, so small PNGs upscaled. */
.page-body figure img, .page-body img { width: auto; max-width: 100%; height: auto; }
/* Outsoles sole grid (condense pass 2): 4-up / 2-up cards sized like the 02
   tile stage; each card is a jump link to its sole's section. Markup from
   dryshod-core/tools/condense-pages.php. */
.page-body .solegrid { max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-s-4); margin: var(--ds-s-6) 0 var(--ds-s-10); }
.page-body .solegrid figure { margin: 0; max-width: none; border: var(--ds-border) solid var(--ds-rule); background: var(--ds-paper-raised); display: flex; flex-direction: column; }
.page-body .solegrid a { border: 0; display: block; background: #fff; }
.page-body .solegrid img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; padding: var(--ds-s-3); border: 0; background: #fff; }
.page-body .solegrid figcaption { padding: var(--ds-s-3) var(--ds-s-4); border-top: var(--ds-border) solid var(--ds-rule); font-family: var(--ds-font-ui); font-size: var(--ds-t-label-sm); font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink); text-align: center; }
.page-body .solegrid figure:hover { border-color: var(--ds-ink-4); }
@media (max-width: 760px) {
  .page-body .solegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s-3); }
}
.page-body .sizechart__scroll + p.meta { margin-top: 12px; }
/* Size-chart patterns (wp_block, core/html) land as a bare table: give it the scroll region. */
.page-body table.sizechart { margin-bottom: var(--ds-s-3); }

/* ---- stores: locator.js writes <ul> inside the design's list container ---- */
#menu-dryshod-online-shops > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

/* ---- news: WP pagination + post body ----------------------------------------- */
.navigation.pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.postcard > a { color: inherit; }

/* ==========================================================================
   Fix 9 — back to top (ruling; no comp). Paper on ink: the utility bar's
   palette, so it reads as chrome and never competes with the orange primary
   action. Sits under the header/drawer/modal layers (z 40–70) and far below
   FiboSearch's overlay and PhotoSwipe, so those cover it when open.
   ========================================================================== */
.totop {
  position: fixed; right: var(--ds-s-5); bottom: var(--ds-s-5); z-index: 30;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-ink); color: var(--ds-paper); border: var(--ds-border) solid var(--ds-ink);
  border-radius: 0; box-shadow: var(--ds-shadow-menu); cursor: pointer; padding: 0;
}
.totop svg { width: 18px; height: 18px; }
.totop:hover { background: var(--ds-ink-2, var(--ds-ink)); }
.totop:focus-visible { outline: 0; box-shadow: var(--ds-focus-ring); }
@media (max-width: 640px) {
  .totop { right: var(--ds-s-4); bottom: var(--ds-s-4); }
}

/* Fix 9 ruling: primary-nav active indicator. Links carry aria-current="page"
   (components.css:482 styles it); the Info <button> cannot, so the same
   treatment rides on .is-active. */
.nav .nav__link.is-active { color: var(--ds-orange-action); border-bottom-color: var(--ds-orange); }


/* ==========================================================================
   Fix 10 — sticky header (option a) + sticky jump strip
   Theme-owned constants (tokens.css / components.css untouched). Heights are
   the design's min-heights plus borders: header 76+3 / 62+3 (≤640); strip =
   pill (30+2 / 44+2) + padding 24 + borders 2 + the Fix 9 4px scrollbar.
   The WordPress admin bar (--wp-admin--admin-bar--height, set on :root only
   when the bar shows) is added wherever the header's top matters.
   ========================================================================== */
:root {
  --dryshod-header-h: 79px;
  --dryshod-strip-h: 62px;
  --dryshod-stack-h: 141px;
  --dryshod-header-top: var(--wp-admin--admin-bar--height, 0px);
}
@media (max-width: 640px) {
  :root {
    --dryshod-header-h: 65px;
    --dryshod-strip-h: 76px;
    --dryshod-stack-h: 141px;
  }
}

/* Only header.header sticks; the utility bar scrolls away. Ancestor chain
   (html > body > .page) has no overflow/transform/contain. The mega menu is
   absolutely positioned inside .header, so it rides with the pinned nav.
   z-index 50 stays from components.css:452. */
.header { position: sticky; top: var(--dryshod-header-top); }

/* Jump strip: sticks under the pinned header. Paper so content never shows
   through; above the page (z 20), below back-to-top (30) and the header (50).
   Fix 9's thin scrollbar and end padding are on the same element and are
   unaffected. */
.jumpstrip {
  position: sticky;
  top: calc(var(--dryshod-header-h) + var(--dryshod-header-top));
  background: var(--ds-paper);
  z-index: 20;
}

/* Anchors: every hash jump and 301 landing clears the pinned header
   site-wide; on pages with a strip the target also clears the strip, with
   16px slack (scroll-margin and scroll-padding add). Outranks the design's
   24px scroll-margin-top on .page-body h2/h3 (components.css:1808/1815).
   The .solegrid cards point at the same section ids. */
html { scroll-padding-top: calc(var(--dryshod-header-h) + var(--dryshod-header-top)); }
.jumpstrip ~ .page-body [id] { scroll-margin-top: calc(var(--dryshod-strip-h) + 16px); }

/* Stores: the online-stores box stuck at 20px (components.css:2053) would
   tuck under the pinned header. */
.onlinestores--sticky { top: calc(var(--dryshod-header-h) + var(--dryshod-header-top) + var(--ds-s-5)); }

/* Fix 10 addendum — inside pages: a legacy [caption] figure carries WordPress's
   inline style="width: NNNpx" (e.g. #attachment_1854 at 730px on Features),
   which widened the layout viewport at 440 and mis-pinned every fixed/sticky
   element. Fix 9 capped the figure's img, not the figure. !important beats
   the inline style; the img inside still follows Fix 9 (width:auto,
   max-width:100%) and the caption text wraps under it. */
.page-body .wp-caption { width: auto !important; max-width: 100%; }

/* ==========================================================================
   Fix 11 — homepage merch section reordered (ruling; deliberate departure
   from home.html). Inside each panel: tile grid, then the "Shop by the work
   you do" / "All footwear" row (h3 in a .sectionhead, rule under it), then
   the chips + "Shop all <gender>". components.css untouched.
   ========================================================================== */
.merch__chips { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s-6); flex-wrap: wrap; margin: var(--ds-s-6) 0 0; }
.sectionhead.merch__foot { margin-top: var(--ds-s-10); margin-bottom: 0; }

/* ==========================================================================
   Fix 12 — homepage technology band, design delta 01 ("Dryshod goes beyond
   waterproof", docs/design-handoff/deltas/01-beyond-waterproof/). New tech__
   family; the section's old .featlist / .pillars / .h2 / .lede hooks are no
   longer in the markup, so those components.css rules go dead here and stay
   untouched for their other users. Shell (.section--lg.section--dark.on-dark),
   .wrap, .eyebrow--accent and .btn--outline are the site's. Tokens where the
   values match (bg, ink, chip text, orange-on-dark, rules); #A4A9AD and the
   2.5% row lift have no token and live as section-scoped custom properties.
   Oswald = display (headline, pillar titles); Barlow Condensed = eyebrow,
   numbers, tags, CTA; Barlow = body. Sizes and tracking per the README.
   ========================================================================== */
.tech {
  --tech-muted: #a4a9ad;
  --tech-row-hover: rgba(255, 255, 255, 0.025);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px 88px; align-items: start;
}
/* left column */
.tech__lede { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.tech__text { display: flex; flex-direction: column; gap: 22px; }
.on-dark .tech__eyebrow { font-size: 13px; letter-spacing: 0.28em; }
.tech__title {
  margin: 0; font-family: var(--ds-font-display); font-weight: 700;
  font-size: clamp(38px, 4vw, 58px); line-height: 0.98; letter-spacing: 0.005em;
  text-transform: uppercase; color: var(--ds-dark-text); text-wrap: balance;
}
.tech__intro { margin: 0; max-width: 30em; font-family: var(--ds-font-body); font-size: 17px; line-height: 1.62; color: var(--tech-muted); text-wrap: pretty; }
.tech__compass { position: relative; width: 100%; max-width: 560px; aspect-ratio: 2000 / 1924; margin: 4px 0 8px; }
.tech__compass img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.tech__cta { align-self: flex-start; }
/* right column: the four pillars */
.tech__pillars { display: flex; flex-direction: column; min-width: 0; border-top: var(--ds-border) solid var(--ds-dark-rule); }
.tech__pillar {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 18px; padding: 26px 8px 28px;
  border-bottom: var(--ds-border) solid var(--ds-dark-rule); transition: background 180ms ease;
}
.tech__pillar:hover { background: var(--tech-row-hover); }
.tech__num { font-family: var(--ds-font-ui); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; padding-top: 5px; color: var(--ds-dark-text-4); transition: color 200ms ease; }
.tech__body { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.tech__pillar-title {
  margin: 0; font-family: var(--ds-font-display); font-weight: 700; font-size: 28px; line-height: 1;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ds-dark-text); transition: color 200ms ease;
}
.tech__copy { margin: 0; font-family: var(--ds-font-body); font-size: 15.5px; line-height: 1.58; color: var(--tech-muted); text-wrap: pretty; }
.tech__tags { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.tech__tag {
  font-family: var(--ds-font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ds-dark-text-2); border: var(--ds-border) solid var(--ds-dark-rule-2); border-radius: 0; padding: 6px 11px 5px;
}
/* accent: row 01 rests active; :hover moves it; while any row is hovered the
   resting row releases (CSS-only variant approved in the README). */
.tech__pillar.is-active .tech__num,
.tech__pillar:hover .tech__num,
.tech__pillar.is-active .tech__pillar-title,
.tech__pillar:hover .tech__pillar-title { color: var(--ds-orange-on-dark); }
.tech__pillars:hover .tech__pillar.is-active:not(:hover) .tech__num { color: var(--ds-dark-text-4); }
.tech__pillars:hover .tech__pillar.is-active:not(:hover) .tech__pillar-title { color: var(--ds-dark-text); }
@media (prefers-reduced-motion: reduce) {
  .tech__pillar, .tech__num, .tech__pillar-title { transition: none; }
}
@media (max-width: 900px) {
  .tech { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 640px) {
  .tech__pillar { grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; }
}

/* ==========================================================================
   Fix 15 — homepage hero (operator rulings; no comp). No photo slot and no
   eyebrow any more; one CTA; the lockup + stat tile are vertically centred in
   the hero's height and constrained to the site's .wrap measure so wide
   screens keep the same margins as every other section — the striped field
   (components.css:589) still runs full-bleed on the section behind it.
   ========================================================================== */
/* Slide: content centred in the 620px / 480px viewport instead of pinned to
   the bottom (components.css:595-602 align-items: flex-end). */
.hero__slide { align-items: center; }
/* Overlay: the photo scrim (bottom-heavy gradient) had a photo to serve;
   without one the field shows evenly. Symmetric vertical padding; the
   .wrap measure and the same horizontal padding as .wrap. */
.hero__overlay {
  background: none;
  padding-block: var(--ds-s-20);
  max-width: var(--ds-max); margin-inline: auto;
  align-items: center;
}
/* Headline +10% at every breakpoint: tokens.css --ds-t-display-1 is
   clamp(40px, 5.4vw, 72px); ×1.10 = clamp(44px, 5.94vw, 79.2px). */
.hero .display-1 { font-size: clamp(44px, 5.94vw, 79.2px); }
@media (max-width: 900px) {
  /* components.css:2157 sets a taller top padding for the photo era. */
  .hero__overlay { padding-block: var(--ds-s-16); }
}

/* Fix 16 — checkout, PayTrace: the saved-methods wrapper takes the plugin's
   token type as a class ("card"), which is also the design's .card box
   (components.css:742), so guests saw an empty bordered box between the note
   and the card fields around a display:none <ul data-count="0">. Hide the
   wrapper when its list is empty. Braintree prints its saved-methods block
   (div.wc-braintree-payment-methods-container, no "card" class) only when
   methods exist, so it needs nothing. */
.woocommerce-paytrace-SavedPaymentMethods-wrapper:has(> ul[data-count="0"]) { display: none; }