/* ================================================================ UPSWING MERCH STOREFRONT: SCOPED STYLES (#up-shop, .us-* prefix) ---------------------------------------------------------------- Ported from the approved prototype's `upswing-storefront` block. Consumes upswing-global.css tokens. Never redefines :root, never restyles .c-* components. Loaded only on shop archive pages and merch product pages (see inc/upswing-shop-view.php), after upswing-global. 00 Scope baseline (root size, wrapper type, cascade resets) 03 Price markup (maps to Woo get_price_html) 04 Shop archive: intro, grid, cards, card actions, pager 05 Single product: layout, gallery, buy panel, options, meta 06 Single product: notices, related / upsell rows Section 07+ (cart) is added with its view. Numbering follows the prototype. ================================================================ */ /* 00 Scope baseline --------------------------------------------- Two things stack on the live site, and the prototype was drawn with neither: 1) The parent theme sets html{font-size:10px}, after the global sheet, so every rem token (spacing included) renders at 62.5%. Restoring 100% on shop pages only fixes that without touching the rest of the site. :has() support: Chrome 105+, Safari 15.4+, Firefox 121+. 2) upswing-global.css runs the type tokens at 1.36x the v2.1 baseline (spacing tokens were never scaled). At a 100% root that makes type ~36% too large against the prototype. Same fix, same scoping as upswing-article.css: reset the type tokens to the v2.1 baseline inside #up-shop only. Values are the prototype's own, not new ones. */ html:has(body.upswing-shop){font-size:100%} #up-shop{ --text-xs:clamp(11px,10.4px + 0.15vw,12px); --text-sm:clamp(13px,12.48px + 0.15vw,14px); --text-base:clamp(15px,14.4px + 0.18vw,16px); --text-lg:clamp(17px,16px + 0.25vw,18px); --text-xl:clamp(19px,17.6px + 0.4vw,21px); --text-2xl:clamp(23px,20.8px + 0.6vw,27px); --text-3xl:clamp(28px,24px + 1vw,36px); --text-4xl:clamp(34px,28px + 1.5vw,48px); --text-5xl:clamp(42px,32px + 2.5vw,64px); --text-ui:clamp(17px,16px + 0.25vw,18px); --text-ui-sm:clamp(16px,15.2px + 0.2vw,17px); --text-ui-xs:clamp(14px,13.44px + 0.15vw,15px); } /* The parent theme styles body type and heading margins after the global sheet, so the wrapper re-asserts the system body type and zeroes the margins the prototype got from the global reset. :where() keeps the reset at wrapper specificity, so component rules below still win. */ #up-shop{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-default);background:var(--surface-primary)} #up-shop :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure){margin:0;padding:0} #up-shop :where(ul,ol){list-style:none} #up-shop picture{display:contents} #up-shop .us-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* 03 Price markup ----------------------------------------------- */ #up-shop .us-price{font-family:var(--font-mono);font-weight:var(--weight-medium);color:var(--text-strong);font-variant-numeric:tabular-nums;display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-2)} #up-shop .us-price del{color:var(--text-subtle);font-weight:var(--weight-regular);text-decoration-thickness:1px} #up-shop .us-price ins{text-decoration:none;color:var(--color-primary-600)} /* 04 Shop archive ----------------------------------------------- */ #up-shop .us-intro{padding:var(--space-12) 0 var(--space-10);border-bottom:1px solid var(--border-default);margin-bottom:var(--space-10)} #up-shop .us-intro__inner{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap} #up-shop .us-intro__title{margin-top:var(--space-3);font-family:var(--font-display);font-size:var(--text-5xl);font-weight:var(--weight-extra);letter-spacing:var(--tracking-tighter);line-height:var(--leading-tight);color:var(--text-strong)} #up-shop .us-intro__desc{font-size:var(--text-lg);color:var(--text-subtle);max-width:var(--grid-narrow);margin-top:var(--space-4)} #up-shop .us-intro__meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-subtle);text-transform:uppercase;letter-spacing:var(--tracking-wider);white-space:nowrap} #up-shop .us-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-10) var(--space-6)} @media(max-width:1023px){#up-shop .us-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:767px){#up-shop .us-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-4)}} #up-shop .us-card{position:relative;display:flex;flex-direction:column;height:100%} #up-shop .us-card__link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit;border-radius:var(--radius-xs)} #up-shop .us-card__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:var(--space-1)} #up-shop .us-card__media{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius-xs);background:var(--surface-tertiary);border:1px solid var(--border-subtle);transition:border-color var(--duration-base) var(--ease-out)} #up-shop .us-card__media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform var(--duration-slow) var(--ease-out)} #up-shop .us-card__media img.is-mockup{padding:var(--space-4)} #up-shop .us-card__link:hover .us-card__media{border-color:var(--border-strong)} #up-shop .us-card__link:hover .us-card__media img{transform:scale(1.03)} #up-shop .us-card__badges{position:absolute;top:var(--space-3);left:var(--space-3);display:flex;gap:var(--space-1);flex-wrap:wrap} #up-shop .us-card__body{display:grid;gap:var(--space-1);padding-top:var(--space-4)} #up-shop .us-card__title{font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--weight-semi);line-height:var(--leading-snug);letter-spacing:var(--tracking-normal);color:var(--text-strong)} #up-shop .us-card__link:hover .us-card__title{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} #up-shop .us-card__price{font-size:var(--text-sm)} #up-shop .us-card__cue{display:inline-flex;align-items:center;gap:var(--space-1);margin-top:var(--space-2);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-subtle);transition:color var(--duration-fast) var(--ease-out)} #up-shop .us-card__cue svg{width:var(--space-4);height:var(--space-4);transition:transform var(--duration-base) var(--ease-out)} #up-shop .us-card__link:hover .us-card__cue{color:var(--text-strong)} #up-shop .us-card__link:hover .us-card__cue svg{transform:translateX(var(--space-1))} #up-shop .us-card--soldout .us-card__media img{opacity:.55} /* Card-level add to cart (simple, in-stock products). WooCommerce appends a.added_to_cart ("View cart") after the button once the AJAX add succeeds. */ #up-shop .us-card__actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-3)} #up-shop .us-card__actions .added_to_cart{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-strong);text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;padding:0} /* Bottom row: Woo result count + pagination */ #up-shop .us-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-16);padding-top:var(--space-6);border-top:1px solid var(--border-default)} #up-shop .us-pager .woocommerce-result-count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-subtle);text-transform:uppercase;letter-spacing:var(--tracking-wider)} #up-shop .us-pager .c-pagination{flex-wrap:wrap} #up-shop .us-pager .c-pagination__item{width:44px;height:44px} /* 05 Single product --------------------------------------------- Maps the prototype's .us-pdp onto WooCommerce's own markup (core gallery, add-to-cart form, product meta), so nothing is rebuilt and plugins keep working. WooCommerce's float layout is reset here; ID specificity wins over its .woocommerce div.product ... selectors without !important. */ /* The global .c-breadcrumbs rule sizes crumbs at 0.64 x --text-sm. Inside #up-shop the type tokens are reset to the v2.1 baseline and the root is 100%, so that multiplier lands at ~9px. Use the full --text-sm here instead. */ #up-shop .us-pdp__crumbs{padding-top:var(--space-6);margin-bottom:var(--space-4);font-size:var(--text-sm)} #up-shop .us-pdp__crumbs a{min-height:44px;display:inline-flex;align-items:center} #up-shop div.product{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 var(--space-12);align-items:start} #up-shop div.product::before,#up-shop div.product::after{content:none} #up-shop div.product > *{grid-column:1 / -1} #up-shop div.product > .woocommerce-product-gallery{grid-column:1} #up-shop div.product > .summary{grid-column:2} #up-shop div.product div.images,#up-shop div.product div.summary{float:none;width:auto;margin:0;clear:none} @media(max-width:1023px){ #up-shop div.product{grid-template-columns:minmax(0,1fr);row-gap:var(--space-8)} #up-shop div.product > .woocommerce-product-gallery,#up-shop div.product > .summary{grid-column:1} } /* Gallery: core FlexSlider + zoom + PhotoSwipe. White frame (not the card tiles' multiply blend) so the hover-zoom layer matches the photo. */ #up-shop .woocommerce-product-gallery{position:relative} #up-shop .woocommerce-product-gallery .flex-viewport, #up-shop .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper{background:var(--surface-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-xs);overflow:hidden} #up-shop .woocommerce-product-gallery__wrapper{margin:0;padding:0} #up-shop .woocommerce-product-gallery__image a{display:block} #up-shop .woocommerce-product-gallery__image img{width:100%;height:auto} #up-shop .woocommerce-product-gallery__trigger{position:absolute;top:var(--space-4);right:var(--space-4);z-index:9;display:flex;align-items:center;justify-content:center;width:44px;height:44px;box-sizing:border-box;border-radius:var(--radius-full);background:var(--surface-primary);border:1px solid var(--border-default);box-shadow:var(--shadow-sm);color:var(--text-strong);font-size:0;text-indent:0;text-decoration:none;overflow:hidden;transition:border-color var(--duration-fast) var(--ease-out)} #up-shop .woocommerce-product-gallery__trigger:hover{border-color:var(--text-default)} #up-shop .woocommerce-product-gallery__trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px} #up-shop .woocommerce-product-gallery__trigger > [aria-hidden="true"],#up-shop .woocommerce-product-gallery__trigger > img{display:none} #up-shop .woocommerce-product-gallery__trigger::after{content:none} #up-shop .woocommerce-product-gallery__trigger::before{content:"";display:block;position:static;box-sizing:border-box;width:var(--space-5);height:var(--space-5);border:0;border-radius:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/contain no-repeat} #up-shop .woocommerce-product-gallery .flex-control-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3);margin:var(--space-4) 0 0;padding:0;list-style:none} #up-shop .woocommerce-product-gallery .flex-control-thumbs li{float:none;width:auto;margin:0;padding:0;list-style:none} #up-shop .woocommerce-product-gallery .flex-control-thumbs li::before{content:none} #up-shop .woocommerce-product-gallery .flex-control-thumbs img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;opacity:1;cursor:pointer;background:var(--surface-primary);border:1.5px solid var(--border-default);border-radius:var(--radius-sm);transition:border-color var(--duration-fast) var(--ease-out)} #up-shop .woocommerce-product-gallery .flex-control-thumbs img:hover{border-color:var(--border-strong)} #up-shop .woocommerce-product-gallery .flex-control-thumbs img.flex-active{border-color:var(--color-neutral-900);box-shadow:0 0 0 1px var(--color-neutral-900)} #up-shop .woocommerce-product-gallery .flex-control-thumbs img:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px} @media(max-width:479px){#up-shop .woocommerce-product-gallery .flex-control-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}} /* Buy panel */ #up-shop .us-buy__badges{display:flex;gap:var(--space-2);margin-bottom:var(--space-3)} #up-shop .summary .product_title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-extra);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--text-strong);margin:0} #up-shop .us-buy__price{font-size:var(--text-xl);margin-top:var(--space-3)} #up-shop .summary .woocommerce-product-details__short-description{margin-top:var(--space-4);color:var(--text-default)} #up-shop .summary form.cart{margin:var(--space-6) 0 0;padding-top:var(--space-6);border-top:1px solid var(--border-default)} #up-shop .summary form.cart::before,#up-shop .summary form.cart::after, #up-shop .woocommerce-variation-add-to-cart::before,#up-shop .woocommerce-variation-add-to-cart::after{content:none} /* Options: core table.variations restacked as label row + control */ #up-shop table.variations,#up-shop table.variations tbody,#up-shop table.variations tr,#up-shop table.variations th,#up-shop table.variations td{display:block;width:auto;padding:0;border:0;background:none;text-align:left;line-height:var(--leading-normal)} #up-shop table.variations{margin:0;table-layout:auto} #up-shop table.variations tr{margin-bottom:var(--space-5)} #up-shop table.variations th.label{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-1);min-height:44px;margin-bottom:var(--space-1)} #up-shop table.variations th.label label{margin:0;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-strong)} #up-shop table.variations select{display:block;width:100%;max-width:none;min-width:0;min-height:44px;margin:0;padding:var(--space-2) var(--space-3);font-family:var(--font-body);font-size:var(--text-base);color:var(--text-strong);background-color:var(--surface-primary);border:1.5px solid var(--border-default);border-radius:var(--radius-md)} #up-shop table.variations select:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px} #up-shop table.variations td.value{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)} #up-shop table.variations td.value > *{flex:0 0 100%} #up-shop table.variations td.value > .reset_variations{flex:0 0 auto} #up-shop a.reset_variations{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 var(--space-1);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);text-decoration:underline;text-underline-offset:3px} /* Option chips: built by upswing-shop.js over the core selects */ #up-shop .us-opt__value{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--text-subtle);white-space:pre} #up-shop .us-opt__link{margin-left:auto;background:none;border:none;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-strong);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px;padding:0 var(--space-1)} #up-shop .us-opt__link:hover{color:var(--color-primary-600)} #up-shop .us-opt__list{display:flex;flex-wrap:wrap;gap:var(--space-2)} #up-shop .us-opt__error{font-size:var(--text-sm);color:var(--color-error-700);font-weight:var(--weight-medium)} #up-shop table.variations tr.has-error .us-choice__box,#up-shop table.variations tr.has-error select{border-color:var(--color-error-500)} #up-shop .us-choice{position:relative;display:inline-flex} #up-shop .us-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} #up-shop .us-choice__box{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:var(--space-12);padding:var(--space-1) var(--space-4);border:1.5px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-primary);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-strong);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)} #up-shop .us-choice__box:hover{border-color:var(--text-default)} #up-shop .us-choice input:focus-visible + .us-choice__box{outline:2px solid var(--color-primary-500);outline-offset:2px} #up-shop .us-choice input:checked + .us-choice__box{border-color:var(--color-neutral-900);box-shadow:inset 0 0 0 1px var(--color-neutral-900)} #up-shop .us-choice--size input:checked + .us-choice__box{background:var(--color-neutral-900);color:var(--color-neutral-0)} #up-shop .us-choice input:disabled + .us-choice__box{cursor:not-allowed;color:var(--text-muted);background:var(--surface-secondary);border-style:dashed;text-decoration:line-through;text-decoration-thickness:1px} #up-shop .us-choice input:disabled + .us-choice__box:hover{border-color:var(--border-default)} /* Variation price / description / stock (filled in by add-to-cart-variation.js) */ #up-shop .single_variation_wrap{margin-top:var(--space-2)} #up-shop .woocommerce-variation{margin-bottom:var(--space-4)} #up-shop .woocommerce-variation:empty{display:none} #up-shop .woocommerce-variation-price .price{display:block;font-family:var(--font-mono);font-weight:var(--weight-medium);font-size:var(--text-lg);color:var(--text-strong);font-variant-numeric:tabular-nums;margin-bottom:var(--space-2)} #up-shop .woocommerce-variation-price del{color:var(--text-subtle);font-weight:var(--weight-regular)} #up-shop .woocommerce-variation-price ins{text-decoration:none;color:var(--color-primary-600)} #up-shop .woocommerce-variation-description{font-size:var(--text-sm);color:var(--text-subtle);margin-bottom:var(--space-2)} #up-shop .summary .stock{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-4);font-size:var(--text-sm);color:var(--text-default)} #up-shop .summary .stock::before{content:"";width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);background:var(--color-success-500);flex-shrink:0} #up-shop .summary .stock.out-of-stock::before{background:var(--color-error-500)} #up-shop .summary .stock.available-on-backorder::before{background:var(--color-warn-500)} /* Quantity + add to cart. Flex rows so plugin extras (Stripe express buttons, subscription options) drop to their own full-width line. */ #up-shop .woocommerce-variation-add-to-cart,#up-shop .summary form.cart:not(.variations_form){display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--space-3)} #up-shop .woocommerce-variation-add-to-cart > *,#up-shop .summary form.cart:not(.variations_form) > *{flex:1 1 100%;margin-left:0;margin-right:0} #up-shop .woocommerce-variation-add-to-cart > .quantity,#up-shop .summary form.cart:not(.variations_form) > .quantity{flex:0 0 auto;float:none;margin:0} #up-shop .woocommerce-variation-add-to-cart > .single_add_to_cart_button,#up-shop .summary form.cart:not(.variations_form) > .single_add_to_cart_button{flex:1 1 192px} /* The add-to-cart button takes the system's primary CTA treatment (same token values as .c-btn.c-btn--primary.c-btn--lg). WooCommerce renders it, so it can't carry the .c-btn classes itself. */ #up-shop .single_add_to_cart_button.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);float:none;min-height:52px;margin:0;padding:var(--space-4) var(--space-8);font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-bold);line-height:1;letter-spacing:var(--tracking-normal);text-transform:none;text-decoration:none;white-space:nowrap;color:var(--color-neutral-0);background:var(--color-accent-500);border:2px solid var(--color-accent-500);border-radius:var(--radius-lg);box-shadow:none;cursor:pointer;opacity:1;transition:all var(--duration-base) var(--ease-out)} #up-shop .single_add_to_cart_button.button:hover{color:var(--color-neutral-0);background:var(--color-accent-600);border-color:var(--color-accent-600);transform:translateY(-1px);box-shadow:var(--shadow-green-glow)} #up-shop .single_add_to_cart_button.button:active{transform:translateY(0)} #up-shop .single_add_to_cart_button.button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px} /* Nothing chosen yet: stays full strength (a click explains what's missing). Unavailable combination or not purchasable: dimmed. */ #up-shop .single_add_to_cart_button.button.disabled.wc-variation-selection-needed{opacity:1;cursor:pointer} #up-shop .single_add_to_cart_button.button.wc-variation-is-unavailable,#up-shop .single_add_to_cart_button.button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none} /* Quantity: core .quantity input, stepper buttons added by upswing-shop.js */ #up-shop .summary .quantity input.qty{width:var(--space-16);min-height:52px;margin:0;padding:0 var(--space-2);text-align:center;font-family:var(--font-mono);font-size:var(--text-base);color:var(--text-strong);background:var(--surface-primary);border:1.5px solid var(--border-default);border-radius:var(--radius-md)} #up-shop .summary .quantity.us-qty{display:inline-flex;align-items:stretch;height:52px;border:1.5px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-primary);overflow:hidden} #up-shop .summary .quantity.us-qty:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-50)} #up-shop .summary .quantity.us-qty input.qty{width:var(--space-10);min-height:0;padding:0;border:none;border-radius:0;background:transparent;-moz-appearance:textfield;appearance:textfield} #up-shop .summary .quantity.us-qty input.qty::-webkit-outer-spin-button,#up-shop .summary .quantity.us-qty input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} #up-shop .summary .quantity.us-qty input.qty:focus{outline:none} #up-shop .us-qty__btn{width:44px;display:flex;align-items:center;justify-content:center;padding:0;background:none;border:none;color:var(--text-strong);cursor:pointer;transition:background var(--duration-fast) var(--ease-out)} #up-shop .us-qty__btn:hover{background:var(--surface-secondary)} #up-shop .us-qty__btn:disabled{color:var(--text-muted);cursor:not-allowed;background:none} #up-shop .us-qty__btn svg{width:var(--space-4);height:var(--space-4)} /* Product meta: SKU + linked categories and tags (core meta.php) */ #up-shop .summary .product_meta{display:grid;gap:0 var(--space-2);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--border-default);font-size:var(--text-sm);color:var(--text-subtle)} #up-shop .summary .product_meta > span{display:block;line-height:var(--leading-normal)} #up-shop .summary .product_meta .sku{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-default);overflow-wrap:anywhere} #up-shop .summary .product_meta .sku_wrapper{padding:var(--space-2) 0} #up-shop .summary .product_meta a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-display);font-weight:var(--weight-semi);color:var(--text-strong);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} #up-shop .summary .product_meta a:hover{color:var(--color-primary-600)} /* Tabs as an accordion */ #up-shop .us-buy__accordion{margin-top:var(--space-6);border-top:1px solid var(--border-default)} #up-shop .us-buy__accordion .c-accordion__trigger{font-size:var(--text-base);min-height:44px} #up-shop .us-buy__accordion .c-accordion__content[hidden]{display:none} #up-shop .us-prose{font-size:var(--text-base);color:var(--text-default)} #up-shop .us-prose > :first-child{margin-top:0} #up-shop .us-prose p + p,#up-shop .us-prose p + ul,#up-shop .us-prose ul + p,#up-shop .us-prose p + ol,#up-shop .us-prose ol + p{margin-top:var(--space-3)} #up-shop .us-prose ul{list-style:disc;padding-left:var(--space-5)} #up-shop .us-prose ol{list-style:decimal;padding-left:var(--space-5)} #up-shop .us-prose li{margin:0 0 var(--space-1);font-size:inherit} #up-shop .us-prose li::marker{color:var(--text-muted)} #up-shop .us-prose :where(h2,h3,h4){font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semi);color:var(--text-strong);margin:var(--space-5) 0 var(--space-2)} #up-shop .us-prose a{color:var(--text-strong);text-underline-offset:3px} #up-shop .us-prose img{max-width:100%;height:auto} /* 06 Notices + related / upsell rows ---------------------------- */ #up-shop .woocommerce-notices-wrapper:empty{display:none} #up-shop :where(.woocommerce-message,.woocommerce-info,.woocommerce-error){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--space-6);padding:var(--space-4) var(--space-5);border:1px solid;border-radius:var(--radius-xs);font-size:var(--text-sm);line-height:var(--leading-normal);list-style:none} #up-shop .woocommerce-message{background:var(--color-success-50);border-color:color-mix(in srgb,var(--color-success-500) 20%,transparent);color:var(--color-success-700)} #up-shop .woocommerce-info{background:var(--color-info-50);border-color:color-mix(in srgb,var(--color-info-500) 20%,transparent);color:var(--color-info-700)} #up-shop .woocommerce-error{background:var(--color-error-50);border-color:color-mix(in srgb,var(--color-error-500) 20%,transparent);color:var(--color-error-700)} #up-shop .woocommerce-message::before,#up-shop .woocommerce-info::before,#up-shop .woocommerce-error::before{content:none} #up-shop :where(.woocommerce-message,.woocommerce-info,.woocommerce-error) .button{order:2;float:none;display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 var(--space-1);background:none;border:none;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:inherit;text-decoration:underline;text-underline-offset:3px} #up-shop .us-related,#up-shop div.product > .up-sells{margin-top:var(--space-16);padding-top:var(--space-12);border-top:1px solid var(--border-default)} #up-shop .us-related section.related{margin:0;padding:0} #up-shop div.product > .up-sells > h2{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:var(--tracking-tight);color:var(--text-strong);margin-bottom:var(--space-8)} #up-shop .us-section-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-8)} #up-shop .us-section-head h2{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:var(--tracking-tight);color:var(--text-strong)} /* Extra specificity so no theme/Woo heading colour can turn "You may also like" blue. */ #up-shop .us-related .us-section-head h2{color:var(--text-strong)} #up-shop .us-section-head a{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-strong);text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center} #up-shop .us-section-head a:hover{color:var(--color-primary-600)} #up-shop .us-grid > li{float:none;width:auto;margin:0;padding:0;list-style:none} #up-shop .us-grid > li::before{content:none} /* WooCommerce's ul.products clearfix (::before/::after content:" ") becomes a grid item here, which takes the first cell and pushes the real first product onto its own row. */ #up-shop .us-grid::before,#up-shop .us-grid::after{content:none;display:none}