/* ============================================================
   Wools by Jools Shop — plugin stylesheet.
   Uses the theme's brand tokens (--brand, --brand-dark, --brand-deep,
   --font, --font-display) and the .wbj-btn / .wbj-card / .wbj-grid /
   .wbj-container primitives defined in the theme's style.css. Each var()
   below carries a fallback so this file degrades gracefully if it is ever
   loaded before (or without) the theme stylesheet.
   ============================================================ */

/* --- Fulfilment timing panel: single product page --- */
.wbj-timing-panel {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--cream-alt, #F5EFE4);
    border: 1px solid var(--line-soft, #EFE7DA);
    border-left: 2px solid var(--brand, #2BBCB3);
    border-radius: var(--radius, 16px);
    padding: 16px 20px;
    margin: 18px 0 22px;
}

.wbj-timing-icon {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    fill: none;
    stroke: var(--brand, #2BBCB3);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wbj-timing-panel p {
    margin: 0;
    color: var(--ink, #3D3532);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* --- Archive/category card short timing line --- */
.wbj-card-timing {
    font-family: var(--font, Lato, sans-serif);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted, #8A817A);
    margin: 2px 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.wbj-card-timing-icon {
    width: 17px;
    height: 17px;
    flex: none;
    fill: none;
    stroke: var(--brand, #2BBCB3);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wbj-card-timing--in_stock { color: var(--brand-deep, #3E8A85); }

/* --- Admin: products list Fulfilment column badge (loaded in wp-admin too,
   see wbj-shop.php — wp-admin never loads the theme stylesheet, so every
   var() below needs its fallback and none of this assumes brand fonts). --- */
.wbj-fulfilment-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    background: #f0f0f1;
    color: #50575e;
}

.wbj-fulfilment-in_stock { background: #edf9f4; color: var(--brand-deep, #3E8A85); }
.wbj-fulfilment-made_to_order { background: #f0f0f1; color: #50575e; }
.wbj-fulfilment-bespoke { background: #fcf3e3; color: #8a6d3b; }

/* --- Enquiry-only display price label + button --- */
.wbj-price-label {
    display: inline-block;
    font-family: var(--font, Lato, sans-serif);
    font-weight: 700;
    color: var(--brand-deep, #3E8A85);
}

.wbj-enquire-btn { display: inline-block; margin-top: 6px; }
.wbj-enquire-btn--card { width: 100%; text-align: center; }

.wbj-add-to-cart-btn { display: inline-block; width: 100%; text-align: center; margin-top: 6px; }

/* --- Cart & checkout: the Timing line under each item --- */
dt.variation-Timing,
dd.variation-Timing {
    font-size: 0.86rem;
}

dt.variation-Timing {
    font-weight: 700;
    color: var(--ink-soft, #6E6560);
}

dd.variation-Timing p {
    color: var(--ink-soft, #6E6560);
    margin: 0 0 6px;
}

.wbj-postage-note {
    background: var(--cream-alt, #F5EFE4);
    border: 1px solid var(--line-soft, #EFE7DA);
    border-radius: var(--radius, 16px);
    padding: 14px 18px;
    margin: 0 0 24px;
    font-size: 0.88rem;
    color: var(--ink-soft, #6E6560);
}

/* --- Shop gallery: one page, a section per category (D22) ---
   No sidebar and no two-column wrapper any more. The sections sit directly in
   the page container and the product grids inside them are the shared
   .wbj-grid, same as everywhere else. */
.wbj-shop-section {
    /* The site header is sticky (style.css .site-header), so without this an
       anchored heading scrolls to underneath it and the customer lands looking
       at the second row of cards. Measured, not derived: the header is 59 to
       62px at every width since D23 kept the name on one line. 96px leaves
       room for a logo image up to about 80px tall if Julie supplies one. */
    scroll-margin-top: 96px;
    margin: 0 0 58px;
}

.wbj-shop-section:last-child { margin-bottom: 0; }

.wbj-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 18px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line-soft, #EFE7DA);
    padding-top: 24px;
    margin: 0 0 8px;
}

.wbj-section-title {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: clamp(1.5rem, 3vw, 2.05rem);
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
}

.wbj-section-count {
    margin: 0;
    color: var(--muted, #8A817A);
    font-size: 0.82rem;
    white-space: nowrap;
}

.wbj-section-blurb {
    margin: 0 0 12px;
    max-width: 62ch;
    color: var(--ink-soft, #6E6560);
}

/* The "view just these" route to /product-category/<slug>/, which stays the
   canonical URL. Underlined rather than a button: it is a secondary path off a
   page the customer is already browsing, not the thing to do next. */
.wbj-section-link {
    display: inline-block;
    margin: 0 0 22px;
    font-family: var(--font, Lato, sans-serif);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-deep, #3E8A85);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    transition: color 0.2s;
}

.wbj-section-link:hover { color: var(--ink, #3D3532); }

/* --- Jump links: in-page anchors, not filters ---
   Every one of these targets a section that is already on the page. Nothing
   here narrows a query or changes what is rendered. */
.wbj-shop-jump { margin: 0 0 44px; }

.wbj-shop-jump ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wbj-shop-jump a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    background: #fff;
    border: 1px solid var(--line, #E5DBCB);
    border-radius: 999px;
    font-size: 0.87rem;
    color: var(--ink, #3D3532);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, transform 0.2s;
}

.wbj-shop-jump a:hover {
    border-color: var(--brand, #2BBCB3);
    color: var(--brand-deep, #3E8A85);
    transform: translateY(-1px);
}

.wbj-shop-jump a:focus-visible {
    outline: 2px solid var(--brand, #2BBCB3);
    outline-offset: 2px;
}

.wbj-shop-jump .cat-icon { width: 17px; height: 17px; }

.wbj-shop-jump-count { color: var(--muted, #8A817A); font-size: 0.76rem; }


/* --- Product grid: uniform square tiles ---
   Scoped to bare ul.products, never to a shop-page wrapper. Every rule below
   is a fix for WooCommerce's float-era stylesheet, and WooCommerce renders
   that same markup in four places now (LES-114): each category section on
   /shop/, a /product-category/<slug>/ archive, the related-products block on
   a single product page, and upsells/cross-sells. It was once scoped to the
   shop's own wrapper, which meant the single product page got none of the
   fixes and its related products showed the exact original bugs — cards
   collapsed inside wide tracks and an empty first cell. The fixes belong
   wherever the markup is, so check a product page as well as /shop/ after
   touching anything below.
   Column count and breakpoints come from the theme's shared .wbj-grid
   primitive (applied via the woocommerce_product_loop_start filter in
   inc/shop-archive.php) and the card surface/hover from the shared
   .wbj-card primitive — both in the theme's style.css. This file only
   resets the <ul>/<li> defaults .wbj-grid doesn't know about (it's a
   generic grid, not list-specific) and adds what's genuinely product-card
   content, not covered by either shared primitive. */
ul.products {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

/* WooCommerce's own stylesheet floats every li.product and gives it a percentage
   width for ITS float layout (li.product { float: left; width: 22.05% }, narrowed
   further by the columns-N class). Those rules do not know the parent has been made
   a CSS grid, and they win, so each card collapsed to about 56px wide inside a
   256px grid track — titles wrapping one word per line and images the size of a
   thumbnail. The ul reset above was written to cover this and only ever reset the
   ul. !important because WooCommerce's stylesheet loads after this one. */
ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    clear: none !important;
}

/* Same cause, second symptom. WooCommerce clearfixes ul.products with
   ::before/::after { content: ""; display: table }, which was harmless when the
   ul was a float container. On a CSS grid a generated box becomes a GRID ITEM, so
   those two took the first and last cells: the first product started in column 2
   and every row after it was pushed out of alignment, leaving an empty hole at the
   top left of the shop. */
ul.products::before,
ul.products::after {
    display: none !important;
}

.wbj-card-media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cream-alt, #F5EFE4);
    position: relative;
}

.wbj-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wbj-card-body { padding: 16px 16px 18px; }

.wbj-card-title-link { text-decoration: none; }

/* Cards fill the full height of their grid row and the body grows to fill the
   card, so the CTA block's margin-top: auto pins the buttons to the bottom and
   they line up across a row whatever the title length. */
ul.products li.product.wbj-card {
    display: flex;
    flex-direction: column;
}

ul.products li.product.wbj-card .wbj-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.wbj-card-cta {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Card buttons are full-width and smaller than the page-level .wbj-btn.
   At the shared 15px/30px padding plus 0.16em letter-spacing, "ADD TO CART"
   wrapped onto three lines inside a grid track. */
.wbj-card-cta .wbj-btn,
.wbj-card-cta .button {
    display: block;
    width: 100%;
    padding: 11px 12px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-align: center;
    box-sizing: border-box;
}

.wbj-card-title-link .woocommerce-loop-product__title {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink, #3D3532);
    margin: 0 0 4px;
}

.wbj-card-meta .price {
    display: block;
    font-family: var(--font, Lato, sans-serif);
    font-weight: 700;
    color: var(--brand-deep, #3E8A85);
    margin: 0 0 4px;
}

/* --- Responsive --- */
@media (max-width: 860px) {
    .wbj-shop-section { margin-bottom: 46px; }

    .wbj-shop-jump { margin-bottom: 32px; }
}

/* On a phone the eight pills wrapped into a 351px stack that pushed the first
   section below the fold. One line that scrolls sideways instead (D23). It runs
   out to the screen edge through the container's 24px padding, and the right
   edge fades so the row reads as continuing. The fade is needed, not a finish:
   at 390px and 375px a pill happens to end right at the screen edge, so a
   cut-off pill cannot be relied on to show there is more. */
@media (max-width: 768px) {
    .wbj-shop-jump ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -24px;
        padding: 2px 24px;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    }

    .wbj-shop-jump ul::-webkit-scrollbar { display: none; }

    .wbj-shop-jump li { flex: none; }

    .wbj-shop-jump a { white-space: nowrap; }

    .wbj-shop-jump a:hover { transform: none; }
}

@media (max-width: 480px) {
    .wbj-shop-jump a { padding: 8px 13px; font-size: 0.82rem; }

    /* The count sits under the title rather than squeezing it. */
    .wbj-section-head { gap: 2px; }
    .wbj-section-title { flex: 1 1 100%; }
}


/* ---------------------------------------------------------------------------
   Guessed prices — STAGING ONLY. See inc/price-guess.php.
   Loud on purpose. A guessed price must never be mistakeable for one of
   Julie's own, either by a customer on the test domain or by whoever is
   checking the site before it goes live.
   --------------------------------------------------------------------------- */

.wbj-price-guess-flag {
	display: inline-block;
	margin-left: .4em;
	padding: .1em .45em;
	border: 1px solid #b45309;
	border-radius: var(--radius-sm, 10px);
	background: #fef3c7;
	color: #7c2d12;
	font-family: var(--font, Lato, system-ui, sans-serif);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: middle;
}

.wbj-price-guess-notice {
	margin: .75rem 0 1rem;
	padding: .7rem .85rem;
	border: 1px solid #b45309;
	border-left-width: 4px;
	border-radius: var(--radius-sm, 10px);
	background: #fffbeb;
	color: #7c2d12;
	font-size: .85rem;
	line-height: 1.5;
}

.wbj-price-guess-notice strong { color: #7c2d12; }

.wbj-price-guess-basis {
	display: block;
	margin-top: .35rem;
	font-size: .78rem;
	opacity: .85;
}

/* wp-admin products list */
.wbj-admin-guess-flag {
	display: inline-block;
	margin-top: .2em;
	padding: .1em .4em;
	border: 1px solid #b45309;
	border-radius: var(--radius-sm, 10px);
	background: #fef3c7;
	color: #7c2d12;
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .04em;
}

/* =========================================================================
 * Single product page
 *
 * There was no CSS here at all, and no theme template either, so the page
 * inherited WooCommerce's float layout with none of the site's page gutters:
 * the gallery sat flush against the left edge of the screen and the related
 * products butted straight up against it. The theme's woocommerce/
 * single-product.php now supplies the .section > .container wrapper; this
 * lays out what goes inside it.
 * ====================================================================== */

.wbj-single-product .woocommerce-breadcrumb {
    font-size: 0.82rem;
    color: var(--ink-soft, #6E6560);
    margin: 0 0 28px;
}

.wbj-single-product .woocommerce-breadcrumb a {
    color: var(--ink-soft, #6E6560);
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft, #E6DFD4);
}

.wbj-single-product .woocommerce-breadcrumb a:hover { color: var(--brand-deep, #2F6E63); }

/* Two columns: gallery left, summary right. Children are placed explicitly
   rather than auto-flowed, so anything WooCommerce or a plugin injects into
   div.product later lands full width underneath instead of silently taking
   the cell next to the photo. */
.wbj-single-product div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 52px;
    align-items: start;
}

/* Same clearfix trap as the product grid: WooCommerce gives div.product
   ::before/::after boxes for its float layout, and on a grid a generated box
   becomes a grid item and steals a cell. */
.wbj-single-product div.product::before,
.wbj-single-product div.product::after { display: none !important; }

.wbj-single-product div.product > * { grid-column: 1 / -1; }

.wbj-single-product div.product > .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.wbj-single-product div.product > .summary {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.wbj-single-product .woocommerce-product-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius, 16px);
}

.wbj-single-product .product_title {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--ink, #3D3532);
    margin: 0 0 14px;
    line-height: 1.2;
}

.wbj-single-product .summary .price {
    font-size: 1.35rem;
    color: var(--ink, #3D3532);
    margin: 0 0 18px;
}

.wbj-single-product .summary form.cart {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 24px 0 0;
}

.wbj-single-product .summary form.cart .quantity input {
    width: 72px;
    padding: 13px 10px;
    border: 1px solid var(--line-soft, #E6DFD4);
    border-radius: var(--radius-sm, 10px);
    font-family: var(--font, Lato, sans-serif);
    text-align: center;
}

.wbj-single-product .product_meta {
    margin: 28px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--line-soft, #E6DFD4);
    font-size: 0.84rem;
    color: var(--ink-soft, #6E6560);
}

.wbj-single-product .product_meta a {
    color: var(--brand-deep, #2F6E63);
    text-decoration: none;
}

/* Related products: its own band, clearly separated from the piece above it
   rather than butted against the photo. */
.wbj-single-product .related.products,
.wbj-single-product .upsells.products {
    margin: 72px 0 0;
    padding: 44px 0 0;
    border-top: 1px solid var(--line-soft, #E6DFD4);
}

.wbj-single-product .related.products > h2,
.wbj-single-product .upsells.products > h2 {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink, #3D3532);
    margin: 0 0 26px;
}

/* No column count set here. The related and upsells blocks take .wbj-grid's
   own steps (3, then 2 under 1000px, then 1 under 480px) like every other
   product grid. This block used to pin --wbj-grid-cols: 3, and because
   that selector outranks the theme's media-query rule it held three columns
   at every width: on a phone the related cards were 94px wide with titles
   one word per line. WooCommerce is told 3 in inc/shop-archive.php. */

@media (max-width: 860px) {
    .wbj-single-product div.product {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 30px;
    }
    .wbj-single-product div.product > .woocommerce-product-gallery,
    .wbj-single-product div.product > .summary {
        grid-column: 1;
        grid-row: auto;
    }
    .wbj-single-product .product_title { font-size: 1.7rem; }
    .wbj-single-product .related.products,
    .wbj-single-product .upsells.products { margin-top: 48px; padding-top: 32px; }
}

/* WooCommerce's own `.woocommerce a.button` / `.woocommerce button.button` is
   two class selectors deep, so it outranks the theme's single-class .wbj-btn
   primitives and repainted every Add to Cart in its default grey (cards) and
   purple (single product). Matching its specificity here rather than reaching
   for !important, so a later deliberate override still works. */
.woocommerce .wbj-card-cta a.wbj-btn-ghost,
.woocommerce .wbj-card-cta a.wbj-btn-ghost:hover {
    background: transparent;
    color: var(--brand-deep, #2F6E63);
    border: 1px solid var(--brand-deep, #2F6E63);
    /* WooCommerce's rule also sets its own radius, size and spacing, which made
       this button bigger and squarer than View item directly above it. */
    border-radius: var(--radius-sm, 10px);
    padding: 11px 12px;
    font-family: var(--font, Lato, sans-serif);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
}

.woocommerce .wbj-card-cta a.wbj-btn-ghost:hover {
    background: var(--brand-deep, #2F6E63);
    color: #fff;
}

.woocommerce .wbj-single-product .summary button.single_add_to_cart_button {
    background: var(--brand-deep, #2F6E63);
    color: #fff;
    border: 1px solid var(--brand-deep, #2F6E63);
    border-radius: var(--radius-sm, 10px);
    padding: 14px 30px;
    font-family: var(--font, Lato, sans-serif);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.woocommerce .wbj-single-product .summary button.single_add_to_cart_button:hover {
    background: var(--ink, #3D3532);
    border-color: var(--ink, #3D3532);
}

/* --- Rounded corners on WooCommerce's own single-product gallery (D13) --- */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image img {
    border-radius: var(--radius, 16px);
    overflow: hidden;
}


/* --- Block cart and checkout (D13) ---
   Cart and checkout are WooCommerce's block templates, which bring their own
   black square buttons and 4px fields rather than anything from this theme.
   Brand buttons, rounded fields and a rounded order summary bring them into line. */
.wc-block-components-button:not(.is-link) {
    background: var(--brand-deep, #3E8A85);
    color: #fff;
    border-radius: var(--radius-sm, 10px);
    font-family: var(--font, Lato, sans-serif);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wc-block-components-button:not(.is-link):hover {
    background: var(--ink, #3D3532);
    color: #fff;
}

/* The form-scoped and select-scoped selectors match WooCommerce's own, which are
   three classes plus an attribute deep, so a bare input selector loses to them. */
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type],
.wc-block-components-text-input input,
.wc-block-components-textarea,
body .wc-blocks-components-select .wc-blocks-components-select__container,
body .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-address-card,
.wc-block-components-notice-banner,
.wc-block-components-quantity-selector {
    border-radius: var(--radius-sm, 10px);
}

.wc-block-components-checkbox__input { border-radius: 5px; }

.wp-block-woocommerce-checkout-order-summary-block {
    border-radius: var(--radius, 16px);
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
    border-radius: var(--radius-sm, 10px);
}

/* --- Customer photos panel: single product page (inc/customer-photos.php) ---
   Sits inside form.cart, which is a wrapping flex row, so flex-basis 100% puts
   the panel on its own line above the quantity and Add to cart. Same cream
   panel as .wbj-timing-panel above it. */
.wbj-photos-panel {
    flex: 1 1 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--cream-alt, #F5EFE4);
    border: 1px solid var(--line-soft, #EFE7DA);
    border-left: 2px solid var(--brand, #2BBCB3);
    border-radius: var(--radius, 16px);
    padding: 18px 20px;
    margin: 0 0 8px;
}

.wbj-photos-title {
    font-size: 1.25rem;
    margin: 0 0 8px;
}

.wbj-photos-text {
    margin: 0 0 14px;
    color: var(--ink, #3D3532);
    font-size: 0.95rem;
    line-height: 1.65;
}

.wbj-photos-text a { color: var(--brand-deep, #3E8A85); overflow-wrap: anywhere; }

.wbj-photos-input {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 9px;
    background: #fff;
    border: 1px solid var(--line, #E5DBCB);
    border-radius: var(--radius-sm, 10px);
    font-family: var(--font, Lato, sans-serif);
    font-size: 0.88rem;
    color: var(--ink-soft, #6E6560);
    cursor: pointer;
}

.wbj-photos-input::file-selector-button {
    font-family: var(--font, Lato, sans-serif);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--brand-deep, #3E8A85);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm, 10px);
    padding: 10px 16px;
    margin-right: 12px;
    cursor: pointer;
}

.wbj-photos-input:hover::file-selector-button { background: var(--ink, #3D3532); }

.wbj-photos-input:focus-visible { outline: 2px solid var(--brand, #2BBCB3); outline-offset: 2px; }

.wbj-photos-help {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: var(--muted, #8A817A);
}

/* Block cart, checkout and mini cart run every line under an item together,
   joined by an aria-hidden " / " span. With Timing and Your photos both there
   it read "...plus 2 to 3 days postage. / Your photos: 2 added" and wrapped
   mid-label. One line each instead. */
.wc-block-components-product-details > span { display: block; }
.wc-block-components-product-details > span > span[aria-hidden="true"] { display: none; }