/*
 Theme Name:   Forward 2019 Child
 Template:     forward-2019
 Description:  WooCommerce store styling for the Forward 2019 theme.
 Version:      1.0.1
*/

/* =========================================================================
   ABOUT THIS FILE
   -------------------------------------------------------------------------
   The parent theme (forward-2019) is a Timber/Twig theme with no
   header.php or footer.php. WooCommerce's own templates rely on
   get_header() / get_footer() to pull in the site's chrome - with no
   header.php/footer.php in the theme at all, WordPress silently renders
   nothing there, so the shop/product pages were displaying with none of
   the site's real <header>, nav, or the <main class="main"> wrapper the
   rest of the site depends on for its centred, padded layout. That is
   what was causing the "shifts to the left" behaviour: the shop markup
   had no centred parent container to sit inside, so it just started at
   the raw left edge of the browser.

   This child theme adds header.php / footer.php (see those files) so
   every WooCommerce page gets the same header, nav and footer as the
   rest of the site, and replaces WooCommerce's default #primary/#content
   wrapper (functions.php) with a `.shop-page-outer > .shop-page` wrapper
   that this stylesheet controls directly, matching the visual design
   you supplied.

   Everything below is scoped under `.shop-page-outer` / `.shop-page` /
   `.single-product` so it only affects store pages and never leaks
   style changes onto the rest of the site.
   ========================================================================= */

:root {
    --yellow: #ffde4d;
    --purple: #541c8c;
    --purple-light: #ab1cf5;
    --ink: #111111;
    --body-text: #333333;
    --muted: #555555;
    --border: #ececec;
}

/* ---------- Scoped reset -------------------------------------------------
   The parent theme already sets box-sizing, fonts and link colour on
   `body`/`*` site-wide, so those rules are scoped to the store wrapper
   here rather than applied globally - applying them to `body`/`*` directly
   would silently change fonts and colours across the whole site, not just
   the shop. */
.shop-page-outer,
.shop-page-outer * {
    box-sizing: border-box;
}

.shop-page-outer {
    display: block;
    width: 100%;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
        sans-serif;
    color: var(--body-text);
    background: #ffffff;
    padding: 32px 0 0;
}

.shop-page-outer a {
    color: inherit;
}

/* ---------- Page heading (shop / category / search title) ----------
   WooCommerce prints this itself (woocommerce_products_header) as
   <header class="woocommerce-products-header"><h1 class="page-title">.
   No custom template needed - just styling its real output. */
.shop-page .woocommerce-products-header {
    max-width: 1200px;
    margin: 0 auto 20px;
    padding: 0 20px;
}
.shop-page .woocommerce-products-header__title.page-title,
.shop-page h1.page-title {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}
.shop-page .woocommerce-products-header__description {
    max-width: 640px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* WooCommerce's own breadcrumb, rendered just above our title */
.woocommerce-breadcrumb {
    max-width: 1200px;
    margin: 0 auto 12px;
    padding: 0 20px;
    font-size: 0.8rem;
    color: var(--muted);
}
.woocommerce-breadcrumb a {
    color: var(--purple);
    text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

/* ---------- Wrapper / rhythm ---------- */
.shop-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

/* ---------- Intro + impact banner, connected as one unit ---------- */
.impact-section {
    max-width: 1200px;
    margin: 0 auto 40px;
    border-radius: 14px;
    overflow: hidden;
}

.impact-intro {
    background: var(--purple);
    padding: 26px 40px;
    text-align: center;
    border: none;
    border-radius: 14px 14px 0 0;
}

.impact-intro p {
    margin: 0 auto;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #ffffff;
    max-width: 680px;
}

.impact-section .store-impact-banner {
    margin: 0;
    border-radius: 0 0 14px 14px;
}

/* ---------- Carousel: removed ---------------------------------------
   The rotating "carousel" (markup + its auto-advance <script>) isn't
   part of a template file - it's hand-authored directly in the Shop
   page's content in wp-admin (see the note on wpautop in functions.php).
   That means it can't be deleted from here; the block itself still
   needs removing from the Shop page editor. Hiding it in CSS switches
   it off everywhere immediately without touching page content and
   without risking breaking the editor markup - once the block is
   deleted from the page, these rules simply become unused. */
.shop-carousel-wrap {
    display: none !important;
}

/* ---------- Impact banner ---------- */
.store-impact-banner {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "num1 div1 num2 div2 num3"
        "lab1 div1 lab2 div2 lab3";
    background-color: var(--yellow);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 40px;
    padding: 28px 24px;
    border-radius: 12px;
    text-align: center;
    gap: 0;
}
.impact-item {
    display: contents;
}
.impact-item:nth-child(1) .impact-num {
    grid-area: num1;
}
.impact-item:nth-child(1) .impact-label {
    grid-area: lab1;
}
.impact-item:nth-child(3) .impact-num {
    grid-area: num2;
}
.impact-item:nth-child(3) .impact-label {
    grid-area: lab2;
}
.impact-item:nth-child(5) .impact-num {
    grid-area: num3;
}
.impact-item:nth-child(5) .impact-label {
    grid-area: lab3;
}

.impact-divider:nth-child(2) {
    grid-area: div1;
    background-color: rgba(0, 0, 0, 0.15);
    width: 1px;
    align-self: stretch;
}
.impact-divider:nth-child(4) {
    grid-area: div2;
    background-color: rgba(0, 0, 0, 0.15);
    width: 1px;
    align-self: stretch;
}

.impact-num {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
    padding-bottom: 10px;
    margin: 0;
    white-space: nowrap;
}
.impact-label {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    color: var(--ink);
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

/* ---------- Categories ---------- */
.store-categories {
    margin: 16px auto 8px;
}

.store-categories-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 28px;
}

.store-categories-grid {
    display: grid;
    /* 4 per row on desktop - 8 categories = exactly 2 rows */
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 28px;
}

.category-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}
.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(84, 28, 140, 0.14);
    border-color: var(--yellow);
}
.category-card.active-cat {
    border-color: var(--yellow);
    box-shadow: 0 0 0 2px var(--yellow) inset;
}

.category-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f5f5f5;
}
.category-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.category-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 18px 20px 8px;
}
.category-card-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 0 20px 20px;
}

/* ---------- Pill filters ----------
   One shared line, centred as a group. Wraps only as a last resort on
   very narrow / very crowded screens (mobile breakpoint below), so it
   never silently breaks into a lopsided second row on desktop. */
.store-pill-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 40px auto 30px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0 6px;
}
.store-pill-filters::-webkit-scrollbar {
    display: none;
}
.store-pill-filters button.filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 36px;
    min-width: 88px;
    padding: 0 20px;
    border: 1.5px solid #e0e0e0;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--ink);
    background-color: #ffffff;
    cursor: pointer;
    font-family: inherit;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}
.store-pill-filters button.filter-pill.active,
.store-pill-filters button.filter-pill:hover {
    background-color: var(--yellow);
    border-color: var(--yellow);
    color: var(--ink);
}

@media (max-width: 767px) {
    .store-pill-filters {
        justify-content: flex-start;
    }
}

/* ---------- Products Mapped to WooCommerce Default Selectors ---------- */
.products-heading {
    text-align: center;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 0 0 24px;
}

/* Override default WooCommerce UL layout to use your Grid */
.shop-page .woocommerce ul.products,
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

/* Replaces .product-card */
.woocommerce ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(84, 28, 140, 0.14);
}

/* Replaces .product-img */
.woocommerce ul.products li.product > a img,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin: 0 0 14px 0;
    background: #f5f5f5;
}

/* Applies the inner padding you had on .product-body */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
    padding: 0 16px;
}

/* Replaces .product-name */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
    flex: 1;
}

/* Replaces .product-price */
.woocommerce ul.products li.product .price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
}

/* Star ratings inside the loop, tucked between title and price */
.woocommerce ul.products li.product .star-rating {
    margin: 0 16px 8px;
    font-size: 0.85rem;
}

/* Replaces .product-add */
.woocommerce ul.products li.product .button {
    margin: 0 16px 16px;
    text-align: center;
    border: none;
    background: #ff801a;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 9px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: block;
}

.woocommerce ul.products li.product .button:hover {
    background: #e06f12;
}

/* Sale / out of stock badges WooCommerce inserts into the card */
.woocommerce ul.products li.product .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--purple);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    border-radius: 20px;
    min-height: 0;
    min-width: 0;
    line-height: 1.6;
}
.woocommerce ul.products li.product {
    position: relative;
}

/* Replaces .products-empty - this only ever matches the plain <p> placeholder
   WooCommerce prints for "no products found" (shop/category grid) and for
   "your cart is currently empty" (cart page) - both are friendly empty
   states, not actionable notices, so they keep this quiet, centred style.
   Real notices (added-to-cart, coupon applied, login errors, etc.) are
   always rendered as <div>/<ul> elements and are styled separately below
   under "SITE-WIDE WOOCOMMERCE NOTICES" so they don't get swallowed by
   this rule. */
p.woocommerce-info {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--muted);
    padding: 40px 0;
    font-size: 0.9rem;
    background: transparent;
    border: none;
}
.shop-page p.return-to-shop {
    text-align: center;
}
.shop-page p.return-to-shop .button {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    padding: 0 28px;
    border-radius: 6px;
    background: #ff801a;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.shop-page p.return-to-shop .button:hover {
    background: #e06f12;
}

.pagination-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 28px;
}

/* WooCommerce's default pagination (works "as is" alongside the note above) */
.woocommerce nav.woocommerce-pagination {
    margin-top: 28px;
    text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
    display: inline-flex;
    gap: 6px;
    border: none;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--border);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--yellow);
    border-color: var(--yellow);
}

/* =========================================================================
   SECOND PRODUCT SHOWCASE (WooCommerce block grid)
   -------------------------------------------------------------------------
   The site has two separate product listings using two different
   markup patterns: the classic loop / [products] shortcode (targeted
   above via `.woocommerce ul.products`, used on the Shop page) and the
   WooCommerce "Products" Gutenberg block, which renders completely
   different markup/class names (`.wc-block-grid`, `.wc-block-grid__product`)
   that the rules above never touch. That mismatch is why one showcase
   looked designed and the other looked like plain, unstyled WordPress
   defaults. These rules bring the block-based grid to the same look
   (same card, spacing and button treatment) so both showcases match.
   ========================================================================= */
.wc-block-grid .wc-block-grid__products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wc-block-grid__product {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.wc-block-grid__product:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(84, 28, 140, 0.14);
}
.wc-block-grid__product .wc-block-grid__product-image,
.wc-block-grid__product a.wc-block-grid__product-link {
    display: block;
}
.wc-block-grid__product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin: 0 0 14px;
    background: #f5f5f5;
}
.wc-block-grid__product-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 16px 8px !important;
}
.wc-block-grid__product-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 16px 12px !important;
}
.wc-block-grid__product-rating {
    margin: 0 16px 8px;
}
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button,
.wc-block-grid__product .wc-block-components-product-button__button {
    margin: 0 16px 16px !important;
    width: calc(100% - 32px);
    text-align: center;
    border: none;
    background: #ff801a;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 9px 0 !important;
    height: auto !important;
    line-height: normal !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: background 0.2s ease;
}
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover,
.wc-block-grid__product .wc-block-components-product-button__button:hover {
    background: #e06f12;
    color: #fff;
}
@media (min-width: 768px) and (max-width: 1024px) {
    .wc-block-grid .wc-block-grid__products {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 767px) {
    .wc-block-grid .wc-block-grid__products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* =========================================================================
   INDIVIDUAL PRODUCT PAGE
   ========================================================================= */
.shop-page.single-product-page {
    padding-top: 0;
    padding-bottom: 60px;
}

.woocommerce div.product {
    display: flex;
    flex-wrap: wrap;
    gap: 44px;
    margin: 0 0 48px;
}

/* Gallery (left column) */
.woocommerce div.product .woocommerce-product-gallery {
    flex: 1 1 420px;
    max-width: 480px;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}
.woocommerce div.product .woocommerce-product-gallery img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.woocommerce div.product .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.woocommerce div.product .flex-control-thumbs li {
    width: 72px;
}
.woocommerce div.product .flex-control-thumbs img {
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.woocommerce div.product .flex-control-thumbs img.flex-active {
    border-color: var(--yellow);
}

/* Summary (right column) */
.woocommerce div.product .summary {
    flex: 1 1 360px;
}
.woocommerce div.product .summary .product_title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 10px;
}
.woocommerce div.product .summary .price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--purple);
    margin: 0 0 16px;
}
.woocommerce div.product .summary .price del {
    color: var(--muted);
    font-weight: 400;
    opacity: 0.7;
    margin-right: 8px;
}
.woocommerce div.product .summary .price ins {
    text-decoration: none;
}
.woocommerce div.product .summary .woocommerce-product-details__short-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--body-text);
    margin: 0 0 20px;
}
.woocommerce div.product .summary .woocommerce-product-details__short-description p {
    margin: 0 0 10px;
}

/* Quantity + add to cart form */
.woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
}
.woocommerce div.product form.cart .quantity {
    margin: 0;
}
.woocommerce div.product form.cart .quantity .qty {
    width: 74px;
    height: 44px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    text-align: center;
    font-size: 0.95rem;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
    height: 44px;
    padding: 0 28px;
    border-radius: 6px;
    background: #ff801a;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: #e06f12;
}
.woocommerce div.product form.cart .single_add_to_cart_button.disabled {
    background: #cccccc;
    cursor: not-allowed;
}

/* Stock status */
.woocommerce div.product p.stock {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    margin: 0 0 16px;
}
.woocommerce div.product p.stock.in-stock {
    color: #2e7d32;
}
.woocommerce div.product p.stock.out-of-stock {
    color: #c62828;
}

/* SKU / categories / tags meta */
.woocommerce div.product .product_meta {
    font-size: 0.8rem;
    color: var(--muted);
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.woocommerce div.product .product_meta > span {
    display: block;
    margin-bottom: 4px;
}
.woocommerce div.product .product_meta a {
    color: var(--purple);
    text-decoration: none;
}
.woocommerce div.product .product_meta a:hover {
    text-decoration: underline;
}

/* Tabs (description / additional information / reviews) */
.woocommerce div.product .woocommerce-tabs {
    flex: 1 1 100%;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 32px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    border: none;
    flex-wrap: wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 18px;
    border: 1.5px solid #e0e0e0;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    background-color: var(--yellow);
    border-color: var(--yellow);
}
.woocommerce div.product .woocommerce-tabs .panel {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--body-text);
    max-width: 760px;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
    padding: 10px 14px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    text-align: left;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes th {
    background: #fafafa;
    font-weight: 700;
    width: 220px;
}

/* Related products */
.woocommerce div.product .related.products {
    flex: 1 1 100%;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 32px;
}
.woocommerce div.product .related.products > h2 {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 28px;
}
.woocommerce div.product .related.products ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ---------- Responsive ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .store-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .woocommerce ul.products,
    .woocommerce div.product .related.products ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .store-impact-banner {
        display: flex;
        flex-direction: column;
        padding: 16px 20px;
        gap: 0;
        align-items: stretch;
    }
    .impact-divider {
        display: none;
    }
    .impact-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 11px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        text-align: left;
        width: 100%;
    }
    .impact-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .impact-num {
        font-size: 1.5rem;
        white-space: nowrap;
        min-width: 72px;
        text-align: right;
        padding-bottom: 0;
        flex-shrink: 0;
        align-items: center;
        justify-content: flex-end;
    }
    .impact-label {
        font-size: 0.67rem;
        text-align: left;
        justify-content: flex-start;
        align-items: center;
        line-height: 1.25;
    }

    .store-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .category-card-title {
        font-size: 0.92rem;
        margin: 12px 14px 6px;
    }
    .category-card-desc {
        font-size: 0.76rem;
        margin: 0 14px 14px;
    }
    .woocommerce ul.products,
    .woocommerce div.product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .shop-page .woocommerce-products-header__title.page-title,
    .shop-page h1.page-title {
        font-size: 1.6rem;
    }
    .woocommerce div.product {
        gap: 24px;
    }
    .woocommerce div.product .woocommerce-product-gallery,
    .woocommerce div.product .summary {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* =========================================================================
   SITE-WIDE WOOCOMMERCE NOTICES
   -------------------------------------------------------------------------
   Success/info notices (added to cart, coupon applied, "please fill in
   your details", login errors, etc.) render as <div class="woocommerce-
   message|woocommerce-info"> and validation errors render as
   <ul class="woocommerce-error">. These show up on every WooCommerce page
   (shop, single product, cart, checkout, my account) so they're styled
   once, here, for all of them.
   ========================================================================= */
.shop-page-outer div.woocommerce-message,
.shop-page-outer div.woocommerce-info,
.shop-page-outer ul.woocommerce-error {
    display: block;
    list-style: none;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid #ff801a;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 0 0 24px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--body-text);
    overflow: hidden;
}
.shop-page-outer ul.woocommerce-error {
    border-left-color: #c62828;
}
.shop-page-outer ul.woocommerce-error li {
    padding: 2px 0;
}
.shop-page-outer div.woocommerce-message a.button,
.shop-page-outer div.woocommerce-info a.button {
    float: right;
    margin-left: 16px;
    height: 34px;
    line-height: 34px;
    padding: 0 18px;
    border-radius: 6px;
    background: var(--purple);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.shop-page-outer div.woocommerce-message a.button:hover,
.shop-page-outer div.woocommerce-info a.button:hover {
    background: var(--purple-light);
}

/* =========================================================================
   SHARED FORM CONTROLS
   ========================================================================= */
.shop-page-outer .form-row {
    margin: 0 0 16px;
}
.shop-page-outer .form-row label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 6px;
}
.shop-page-outer .form-row label .required {
    color: #c62828;
    text-decoration: none;
}
.shop-page-outer .form-row .woocommerce-input-wrapper {
    display: block;
}
.shop-page-outer input.input-text,
.shop-page-outer select,
.shop-page-outer textarea,
.shop-page-outer .select2-container .select2-selection--single {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--body-text);
    background: #fff;
    font-family: inherit;
}
.shop-page-outer .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
}
.shop-page-outer textarea {
    height: auto;
    min-height: 100px;
    padding: 12px 14px;
    resize: vertical;
}
.shop-page-outer input.input-text:focus,
.shop-page-outer select:focus,
.shop-page-outer textarea:focus {
    outline: none;
    border-color: #ff801a;
}
.shop-page-outer .form-row-first,
.shop-page-outer .form-row-last {
    width: 100%;
}
@media (min-width: 560px) {
    .shop-page-outer .form-row-first {
        float: left;
        width: calc(50% - 10px);
    }
    .shop-page-outer .form-row-last {
        float: right;
        width: calc(50% - 10px);
    }
    .shop-page-outer .form-row-wide {
        clear: both;
    }
}
.shop-page-outer .clear {
    clear: both;
}
.shop-page-outer .woocommerce-password-strength {
    margin: 0 0 16px;
    font-size: 0.8rem;
}

/* Generic branded button used across cart/checkout/account forms */
.shop-page-outer button.button,
.shop-page-outer input.button,
.shop-page-outer a.button,
.shop-page-outer #place_order {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    padding: 0 28px;
    border-radius: 6px;
    background: #ff801a;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}
.shop-page-outer button.button:hover,
.shop-page-outer input.button:hover,
.shop-page-outer a.button:hover,
.shop-page-outer #place_order:hover {
    background: #e06f12;
    color: #fff;
}
.shop-page-outer button.button.alt,
.shop-page-outer input.button.alt,
.shop-page-outer a.button.alt,
.shop-page-outer #place_order {
    background: var(--purple);
}
.shop-page-outer button.button.alt:hover,
.shop-page-outer input.button.alt:hover,
.shop-page-outer a.button.alt:hover,
.shop-page-outer #place_order:hover {
    background: var(--purple-light);
}
.shop-page-outer button.button.disabled,
.shop-page-outer input.button.disabled,
.shop-page-outer a.button.disabled {
    background: #cccccc;
    color: #fff;
    cursor: not-allowed;
}

/* =========================================================================
   CART PAGE
   ========================================================================= */
.shop-page-outer table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 32px;
}
.shop-page-outer table.shop_table th,
.shop-page-outer table.shop_table td {
    padding: 14px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
    vertical-align: middle;
}
.shop-page-outer table.shop_table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    border-bottom: 2px solid var(--border);
}
.shop-page-outer table.cart td.product-thumbnail img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.shop-page-outer table.cart td.product-name a {
    color: var(--ink);
    font-weight: 700;
}
.shop-page-outer table.cart td.product-name a:hover {
    color: #ff801a;
}
.shop-page-outer table.cart td.product-remove a.remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f5f5f5;
    color: var(--ink) !important;
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none !important;
}
.shop-page-outer table.cart td.product-remove a.remove:hover {
    background: #c62828;
    color: #fff !important;
}
.shop-page-outer table.cart td.product-quantity .quantity .qty {
    width: 64px;
    height: 40px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    text-align: center;
    font-size: 0.9rem;
    padding: 0;
}
.shop-page-outer table.cart td.product-subtotal {
    font-weight: 700;
    color: var(--ink);
}
.shop-page-outer table.cart .coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}
.shop-page-outer table.cart .coupon label {
    display: none;
}
.shop-page-outer table.cart .coupon .input-text {
    width: auto;
    flex: 1 1 200px;
    height: 44px;
}
.shop-page-outer table.cart .coupon button,
.shop-page-outer table.cart > tbody > tr > td > button[name="update_cart"] {
    background: var(--purple);
}
.shop-page-outer table.cart .coupon button:hover,
.shop-page-outer table.cart > tbody > tr > td > button[name="update_cart"]:hover {
    background: var(--purple-light);
}
.shop-page-outer .woocommerce-shipping-calculator {
    margin-top: 16px;
}
.shop-page-outer .shipping-calculator-button {
    color: var(--purple);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: underline;
}
.shop-page-outer .woocommerce-shipping-calculator .form-row {
    margin-bottom: 10px;
}
.shop-page-outer .cart-collaterals {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
}
.shop-page-outer .cart-collaterals .cross-sells {
    flex: 1 1 320px;
    order: 1;
}
.shop-page-outer .cart-collaterals .cross-sells h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 16px;
}
.shop-page-outer .cart-collaterals .cross-sells ul.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.shop-page-outer .cart_totals {
    flex: 1 1 320px;
    max-width: 400px;
    order: 2;
    background: #fafafa;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
}
.shop-page-outer .cart_totals h2 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 16px;
}
.shop-page-outer .cart_totals table.shop_table {
    margin: 0 0 20px;
}
.shop-page-outer .cart_totals table.shop_table th,
.shop-page-outer .cart_totals table.shop_table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
}
.shop-page-outer .cart_totals .order-total th,
.shop-page-outer .cart_totals .order-total td {
    border-bottom: none;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    padding-top: 14px;
}
.shop-page-outer .wc-proceed-to-checkout {
    padding: 0;
}
.shop-page-outer .wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    /* !important is needed here: WooCommerce always renders this link with
       both "button" and "alt" classes, and the generic ".button.alt" rule
       above (used for secondary purple actions like "Apply coupon") is
       more specific than this one, so without it "Proceed to checkout"
       would incorrectly render purple instead of the primary orange CTA
       colour used for "Add to cart" elsewhere on the site. */
    background: #ff801a !important;
}
.shop-page-outer .wc-proceed-to-checkout .checkout-button:hover {
    background: #e06f12 !important;
}

/* =========================================================================
   CHECKOUT PAGE
   ========================================================================= */
.shop-page-outer .woocommerce-checkout .col2-set {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.shop-page-outer .woocommerce-checkout #customer_details {
    flex: 1 1 420px;
}
.shop-page-outer .woocommerce-checkout .col-1,
.shop-page-outer .woocommerce-checkout .col-2 {
    width: 100%;
}
.shop-page-outer .woocommerce-checkout h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 18px;
}
.shop-page-outer .woocommerce-checkout .woocommerce-additional-fields {
    margin-top: 24px;
}
.shop-page-outer .woocommerce-checkout .woocommerce-account-fields {
    margin-top: 16px;
}
.shop-page-outer .woocommerce-checkout #ship-to-different-address {
    margin: 8px 0 16px;
    font-weight: 600;
    color: var(--ink);
}
.shop-page-outer .woocommerce-checkout #ship-to-different-address label {
    cursor: pointer;
}
.shop-page-outer .woocommerce-checkout #ship-to-different-address .input-checkbox {
    width: auto;
    height: auto;
    margin-right: 8px;
}
.shop-page-outer #order_review_heading {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
    margin: 40px 0 18px;
}
@media (min-width: 960px) {
    .shop-page-outer .woocommerce-checkout .col2-set {
        flex-wrap: nowrap;
    }
    .shop-page-outer #order_review,
    .shop-page-outer #order_review_heading {
        flex: 0 0 380px;
        max-width: 380px;
    }
}
.shop-page-outer #order_review {
    background: #fafafa;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    align-self: flex-start;
}
.shop-page-outer .woocommerce-checkout-review-order-table {
    margin: 0 0 20px;
}
.shop-page-outer .woocommerce-checkout-review-order-table th,
.shop-page-outer .woocommerce-checkout-review-order-table td {
    background: transparent;
    padding: 10px 0;
}
.shop-page-outer .woocommerce-checkout-review-order-table .cart-subtotal th,
.shop-page-outer .woocommerce-checkout-review-order-table .cart-subtotal td,
.shop-page-outer .woocommerce-checkout-review-order-table .shipping th,
.shop-page-outer .woocommerce-checkout-review-order-table .shipping td {
    border-bottom: 1px solid var(--border);
}
.shop-page-outer .woocommerce-checkout-review-order-table .order-total th,
.shop-page-outer .woocommerce-checkout-review-order-table .order-total td {
    border-top: 2px solid var(--border);
    border-bottom: none;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    padding-top: 14px;
}
.shop-page-outer .woocommerce-checkout-review-order-table td.product-name .product-quantity {
    color: var(--muted);
    font-weight: 400;
}
.shop-page-outer ul.wc_payment_methods {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.shop-page-outer ul.wc_payment_methods li.wc_payment_method {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0 0 10px;
    background: #fff;
}
.shop-page-outer ul.wc_payment_methods li.wc_payment_method label {
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
}
.shop-page-outer ul.wc_payment_methods li.wc_payment_method input.input-radio {
    width: auto;
    height: auto;
    margin-right: 8px;
}
.shop-page-outer ul.wc_payment_methods .payment_box {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--muted);
}
.shop-page-outer .woocommerce-terms-and-conditions-wrapper {
    margin: 16px 0;
    font-size: 0.85rem;
}
.shop-page-outer .woocommerce-privacy-policy-text {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0 0 16px;
}
.shop-page-outer #place_order {
    width: 100%;
    height: 52px;
    line-height: 52px;
    font-size: 0.95rem;
}

/* =========================================================================
   MY ACCOUNT
   ========================================================================= */
.shop-page-outer .woocommerce-MyAccount-navigation {
    margin: 0 0 32px;
}
.shop-page-outer .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--border);
}
.shop-page-outer .woocommerce-MyAccount-navigation-link a {
    display: inline-block;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 2px solid transparent;
}
.shop-page-outer .woocommerce-MyAccount-navigation-link a:hover {
    color: var(--ink);
}
.shop-page-outer .woocommerce-MyAccount-navigation-link.is-active a {
    color: #ff801a;
    border-bottom-color: #ff801a;
}
.shop-page-outer .woocommerce-MyAccount-content > p:first-child {
    margin-top: 0;
}
.shop-page-outer .woocommerce-orders-table {
    width: 100%;
}
.shop-page-outer .woocommerce-orders-table__cell-order-actions .button {
    height: 34px;
    line-height: 34px;
    padding: 0 16px;
    font-size: 0.75rem;
    margin: 2px 4px 2px 0;
}
.shop-page-outer .woocommerce-orders-table__cell-order-status {
    text-transform: capitalize;
}
.shop-page-outer .woocommerce-pagination {
    text-align: center;
    margin-top: 20px;
}
.shop-page-outer .woocommerce-Addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}
.shop-page-outer .woocommerce-Address {
    flex: 1 1 300px;
}
.shop-page-outer .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px;
}
.shop-page-outer .woocommerce-Address-title h2 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}
.shop-page-outer .woocommerce-Address-title .edit {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--purple);
}
.shop-page-outer address {
    font-style: normal;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--body-text);
}
.shop-page-outer .woocommerce-form-login,
.shop-page-outer .woocommerce-form-register,
.shop-page-outer .woocommerce-ResetPassword,
.shop-page-outer .woocommerce-EditAccountForm {
    max-width: 480px;
    background: #fafafa;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 28px;
}
.shop-page-outer .woocommerce-form-login .woocommerce-form-login__rememberme {
    width: auto;
    height: auto;
    margin-right: 8px;
}
.shop-page-outer .woocommerce-form-login__submit,
.shop-page-outer .woocommerce-form-register__submit,
.shop-page-outer .woocommerce-EditAccountForm button[type="submit"],
.shop-page-outer .woocommerce-ResetPassword button[type="submit"] {
    background: var(--purple);
}
.shop-page-outer .woocommerce-form-login__submit:hover,
.shop-page-outer .woocommerce-form-register__submit:hover,
.shop-page-outer .woocommerce-EditAccountForm button[type="submit"]:hover,
.shop-page-outer .woocommerce-ResetPassword button[type="submit"]:hover {
    background: var(--purple-light);
}
.shop-page-outer .woocommerce-LostPassword {
    margin-top: 14px;
    font-size: 0.85rem;
}
.shop-page-outer .u-columns.col2-set {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}
.shop-page-outer .u-columns.col2-set .u-column1,
.shop-page-outer .u-columns.col2-set .u-column2 {
    flex: 1 1 340px;
}

/* =========================================================================
   ORDER RECEIVED / ORDER DETAILS
   -------------------------------------------------------------------------
   Shared by the checkout thank-you page and "View order" in My Account.
   ========================================================================= */
.shop-page-outer .woocommerce-order {
    max-width: 760px;
}
.shop-page-outer .woocommerce-order .woocommerce-notice--success,
.shop-page-outer .woocommerce-order p.woocommerce-thankyou-order-received {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid #2e7d32;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 0 0 24px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}
.shop-page-outer ul.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 20px 0;
    margin: 0 0 32px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.shop-page-outer ul.woocommerce-order-overview li {
    flex: 1 1 25%;
    padding: 4px 16px 4px 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}
.shop-page-outer ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: 4px;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink);
}
.shop-page-outer .woocommerce-order-details__title,
.shop-page-outer .woocommerce-order-downloads__title,
.shop-page-outer .woocommerce-column__title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 16px;
}
.shop-page-outer .woocommerce-customer-details {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 32px;
}
.shop-page-outer .woocommerce-columns--2 .woocommerce-column {
    flex: 1 1 300px;
}
.shop-page-outer table.woocommerce-table--order-details tfoot th {
    font-weight: 700;
}
.shop-page-outer table.woocommerce-table--order-details tfoot tr:last-child th,
.shop-page-outer table.woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
}

/* ---------- Responsive: cart / checkout / account ---------- */
@media (max-width: 767px) {
    .shop-page-outer table.shop_table thead {
        display: none;
    }
    .shop-page-outer table.shop_table tr {
        display: block;
        border-bottom: 1px solid var(--border);
        padding: 12px 0;
    }
    .shop-page-outer table.shop_table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: none;
        padding: 6px 0;
    }
    .shop-page-outer table.shop_table td[data-title]::before {
        content: attr(data-title);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--muted);
        flex: 0 0 auto;
    }
    .shop-page-outer table.cart td.product-remove {
        justify-content: flex-end;
    }
    .shop-page-outer .cart-collaterals {
        flex-direction: column;
    }
    .shop-page-outer .cart_totals {
        max-width: none;
        width: 100%;
    }
    .shop-page-outer .cart-collaterals .cross-sells ul.products {
        grid-template-columns: 1fr;
    }
    .shop-page-outer .woocommerce-checkout .col2-set {
        gap: 24px;
    }
    .shop-page-outer #order_review {
        margin-top: 24px;
    }
    .shop-page-outer .woocommerce-Addresses,
    .shop-page-outer .woocommerce-customer-details,
    .shop-page-outer .u-columns.col2-set {
        flex-direction: column;
        gap: 24px;
    }
    .shop-page-outer .woocommerce-form-login,
    .shop-page-outer .woocommerce-form-register,
    .shop-page-outer .woocommerce-ResetPassword,
    .shop-page-outer .woocommerce-EditAccountForm {
        max-width: none;
        padding: 20px;
    }
    .shop-page-outer ul.woocommerce-order-overview li {
        flex: 1 1 50%;
    }
}

/* =========================================================================
   SITE FOOTER
   -------------------------------------------------------------------------
   footer.php / woo-footer.twig render this exact markup (nav columns,
   social links, "escape site" + donate widget) on every WooCommerce page,
   the same structure the rest of the site uses. It shipped with no rules
   of its own in this stylesheet, so it fell back to unstyled default
   browser/parent-theme spacing - this gives it a proper, branded layout.
   Selectors are left unscoped (matching how the classes are actually
   used) so the fix is consistent site-wide rather than only on shop
   pages.
   ========================================================================= */
footer.footer {
    background: var(--ink);
    color: rgba(255, 255, 255, 0.7);
    padding: 48px 0 28px;
    margin-top: 20px;
}
footer.footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
footer.footer a {
    color: inherit;
    text-decoration: none;
}
footer.footer .footer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
footer.footer .footer-logo img {
    height: 40px;
    width: auto;
    display: block;
}
footer.footer ul.footer-nav.social {
    display: flex;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
footer.footer .footer-nav-item.social .nav-item-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition:
        background 0.2s ease,
        color 0.2s ease;
}
footer.footer .footer-nav-item.social .nav-item-link:hover {
    background: var(--yellow);
    color: var(--ink);
}
footer.footer .footer-nav-item.social svg.icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    font-size: 0;
    color: transparent;
}
footer.footer .footer-header-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 6px;
    background: var(--purple);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
}
footer.footer .footer-header-link:hover {
    background: var(--purple-light);
}
footer.footer .footer-header-link .nav-item-icon img {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
}
footer.footer .footer-nav-outer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
footer.footer ul.footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
footer.footer .footer-nav-item-title {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    margin: 0 0 16px;
}
footer.footer ul.footer-nav .footer-nav-item {
    margin: 0 0 10px;
}
footer.footer ul.footer-nav .footer-nav-item .nav-item-link {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
}
footer.footer ul.footer-nav .footer-nav-item .nav-item-link:hover {
    color: var(--yellow);
}
footer.footer .footer-details {
    font-size: 0.82rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
}
footer.footer .footer-details p {
    margin: 0 0 10px;
}
footer.footer .footer-details a:hover {
    color: var(--yellow);
}

@media (max-width: 900px) {
    footer.footer .footer-nav-outer {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
}
@media (max-width: 600px) {
    footer.footer {
        padding: 36px 0 24px;
    }
    footer.footer .footer-header {
        flex-direction: column;
        align-items: flex-start;
    }
    footer.footer .footer-nav-outer {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}