/* strangefolk — woocommerce */

/* ---- shop filters ----
   No mockup contains a filter row to port from (the shop archive itself
   isn't in either mockup) — these values are original, sized to match the
   .sf-filter-adjacent chrome already in the system: 10.5px mono uppercase
   matches .sf-cart/.sf-nav__list a, the border + hover-to-amber treatment
   matches .sf-btn. Genuinely WooCommerce-specific (the shop/collection
   archive's own chrome), so it belongs here rather than in a shared
   stylesheet — unlike .sf-grid4 and .sf-card*, which Task 3/4 already
   ported into layout.css/components.css and which this task deliberately
   does not re-port (see Task 8 controller ruling: every homepage-mockup.html
   82-94 rule already exists with matching values under those two files). */
.sf-filters { display: flex; flex-wrap: wrap; gap: 26px; border-bottom: 1px solid var(--rule); padding-bottom: 16px; margin-bottom: 32px; }
.sf-filters__group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sf-filter { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); text-decoration: none; border: 1px solid var(--rule-hi); padding: 6px 11px; }
.sf-filter:hover, .sf-filter[aria-current="page"] { color: var(--bone); border-color: var(--amber-dim); }

/* ---- single product ----
   Ported from page-layouts.html:85-135. WooCommerce is not installed this
   phase (this stylesheet is not even enqueued — see inc/assets.php's
   class_exists('WooCommerce') gate), so none of this can be rendered or
   visually verified; it is reasoned from documented, version-stable
   WooCommerce template output.

   Two mockup classes are deliberately NOT ported as literal .sf- classes:
   .pd (the two-column gallery/buy-panel grid) and .gal (the gallery). Both
   wrap markup that woocommerce/single-product.php never touches — it calls
   the unmodified wc_get_template_part('content', 'single-product')
   (overriding that template is outside this task's file list), which emits
   WooCommerce's own wrapper classes: .product, .woocommerce-product-gallery,
   .summary.entry-summary. Inventing .sf-pd/.sf-gal selectors that match no
   element in the actual DOM would be dead CSS, so those two pieces are
   styled on WooCommerce's real classes instead — same treatment the brief
   already gives .price and the add-to-cart button. Everything our own
   template tags actually print — .sf-fileref, .sf-ptype, .sf-made,
   .sf-assur, .sf-acc — is ported verbatim as named in the brief. Rules are
   scoped under body.single-product so nothing here reaches the .price
   markup WooCommerce's get_price_html() renders inside sf_product_card() on
   the shop grid, the homepage, or a specimen file. */
.single-product .product { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; margin-top: 20px; }
@media (max-width: 880px) { .single-product .product { grid-template-columns: 1fr; gap: 28px; } }

.single-product .woocommerce-product-gallery__image { aspect-ratio: 1; border: 1px solid var(--rule); background: var(--surface); position: relative; overflow: hidden; }
.single-product .woocommerce-product-gallery__image::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 80px 22px rgba(8, 10, 8, .6); }
.single-product .woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.single-product .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.single-product .flex-control-thumbs li { aspect-ratio: 1; }
.single-product .flex-control-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid var(--rule); cursor: pointer; }
.single-product .flex-control-thumbs img.flex-active { border-color: var(--amber-dim); }

.sf-fileref { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--rule-hi); padding: 8px 13px; text-decoration: none; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); transition: border-color .16s, color .16s; }
.sf-fileref:hover { border-color: var(--amber); color: var(--amber); }
.sf-fileref b { color: var(--amber); font-weight: 400; }

.single-product .summary .product_title { font-family: var(--mono); font-weight: 700; text-transform: uppercase; font-size: clamp(22px, 3.1vw, 32px); line-height: 1.06; letter-spacing: -.01em; margin: 19px 0 6px; }
.sf-ptype { font-family: var(--mono); font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: var(--lichen); }
.single-product .summary .price { font-family: var(--mono); font-size: 25px; margin: 22px 0 0; font-variant-numeric: tabular-nums; letter-spacing: .02em; display: block; }

/* The mockup's .sw/.sizes swatches map onto WooCommerce's variation <select>
   elements (spec ruling, Task 9 step 6) rather than being reimplemented as
   custom swatches. */
.single-product .variations { margin-top: 26px; width: 100%; }
.single-product .variations th.label { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--fog); text-align: left; font-weight: 400; padding: 0 0 10px; }
.single-product .variations td.value { padding: 0 0 14px; }
.single-product .variations select { width: 100%; background: var(--ground); border: 1px solid var(--rule-hi); color: var(--bone); padding: 11px 13px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.single-product .variations select:focus { outline: none; border-color: var(--amber); }

/* These declarations are unchanged from Phase 2 — .sf-btn--solid's amber,
   which is what this button was always meant to be. Only the selectors moved,
   because the old ones lost the cascade and nobody could see it without
   rendering the page.

   WooCommerce reaches this element with

     .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt

   and :where() contributes nothing to specificity — not the pseudo-class, not
   its argument — so that selector scores (0,3,1). The old
   `.single-product button.single_add_to_cart_button` scored (0,2,1) and lost
   every property WooCommerce also declares, whichever stylesheet loaded last.
   The result was the store's most important control rendering in WooCommerce
   brand purple (#7f54b3) with white text. The border stayed amber only
   because WooCommerce declares no border on that selector, which is exactly
   why it looked like a deliberate outline rather than a bug.

   Adding .button.alt — the classes WooCommerce itself matches on, and which
   add-to-cart/simple.php and variable.php always emit — lifts these to
   (0,4,1) and above with no !important anywhere.

   Do NOT tidy .button.alt back out of these selectors. It is load-bearing,
   and tests/theme/test-add-to-cart-button.php measures the specificity and
   fails if it drops below WooCommerce's again. */
.single-product button.single_add_to_cart_button.button.alt { display: block; width: 100%; margin-top: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 17px; background: var(--amber); border: 1px solid var(--amber); color: var(--ground); font-weight: 700; cursor: pointer; }
.single-product button.single_add_to_cart_button.button.alt:hover { background: var(--amber-hi); border-color: var(--amber-hi); }

/* The quantity box, which nothing styled at all — it rendered as the browser
   default: a white field with black text and a #767676 border, sitting
   directly above the buy button in a store that is otherwise Deep Field
   black. Once the button below stopped being purple this was the most
   off-palette thing left on the page.

   No new decision in here: this is the treatment .single-product .variations
   select above already establishes for a form control in this panel — ground
   fill, rule-hi border, bone text, mono face, amber on focus — applied to the
   one control in the panel that was missed. -moz-appearance/appearance
   suppress the native spinner, which cannot be themed and reintroduces the
   same white chrome on hover in Chrome. */
.single-product .quantity input.qty { width: 100%; background: var(--ground); border: 1px solid var(--rule-hi); color: var(--bone); padding: 11px 13px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product .quantity input.qty:focus { outline: none; border-color: var(--amber); }

/* The disabled state is not an edge case here. A variable product — which
   every real Printify tee and hoodie will be, because they carry sizes —
   renders this button disabled until a size is chosen, so it is the first
   thing most customers see, and it was purple too.

   WooCommerce declares its disabled purple across six selector shapes
   (.disabled, :disabled and :disabled[disabled], each with and without
   :hover), climbing from (0,4,1) to (0,6,1). Each line below mirrors one of
   those shapes and carries one class more than it, so every permutation is
   beaten by its own counterpart rather than by a blanket !important.

   --dim on --surface2 is the pair base.css already computed at 4.56:1, so the
   label stays readable at AA while the control reads as plainly inert. */
.single-product button.single_add_to_cart_button.button.alt.disabled,
.single-product button.single_add_to_cart_button.button.alt.disabled:hover,
.single-product button.single_add_to_cart_button.button.alt:disabled,
.single-product button.single_add_to_cart_button.button.alt:disabled:hover,
.single-product button.single_add_to_cart_button.button.alt:disabled[disabled],
.single-product button.single_add_to_cart_button.button.alt:disabled[disabled]:hover { background: var(--surface2); border-color: var(--rule-hi); color: var(--dim); cursor: not-allowed; }

.sf-made { border: 1px solid var(--amber-dim); background: var(--amber-alpha); padding: 15px 17px; margin-top: 16px; }
.sf-made__h { font-family: var(--mono); font-size: 10px; letter-spacing: .19em; text-transform: uppercase; color: var(--amber); margin-bottom: 7px; }
.sf-made p { margin: 0; font-size: 14.5px; color: var(--fog); line-height: 1.55; }

.sf-assur { margin-top: 18px; display: grid; gap: 8px; }
.sf-assur div { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.sf-assur div::before { content: "— "; color: var(--lichen); }

.sf-acc { margin-top: 34px; border-top: 1px solid var(--rule); }
.sf-acc details { border-bottom: 1px solid var(--rule); }
.sf-acc summary { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 16px 0; cursor: pointer; color: var(--bone); list-style: none; }
.sf-acc summary::-webkit-details-marker { display: none; }
.sf-acc summary::after { content: "+"; float: right; color: var(--amber); }
.sf-acc details[open] summary::after { content: "−"; }
.sf-acc__c { padding: 0 0 20px; font-size: 15.5px; color: var(--fog); line-height: 1.68; }
.sf-acc__c p { margin: 0 0 12px; }
.sf-acc__c ul { margin: 0; padding-left: 19px; }
.sf-acc__c li { margin-bottom: 6px; }