/* ════════════════════════════════════
   COLLECTION PAGES
   Product listing pages (shop archive, categories, /new-arrivals/,
   /stl-files/) and /all-collections/
   ════════════════════════════════════ */

.category-intro {
    width: 50%;
}

.entry-header .archive-title {
    display: none;
}

.woocommerce-products-header {
    border-bottom: 1px solid var(--blush);
    margin-bottom: 3em;
}

/* Product card */
.loop-entry.product {
    position: relative;
    overflow: visible !important;
    background: var(--warm-white) !important;
    box-shadow: none !important;
}

.loop-entry .woocommerce-loop-image-link {
    display: block;
    width: 100%;
    position: static;
}

.loop-entry .product-details {
    position: static !important;
    background: transparent !important;
    padding: 12px 0 0 !important;
    border-top: none !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
}

.loop-entry .product-action-wrap {
    overflow: visible !important;
    position: static !important;
    width: 100%;
    margin-top: 10px;
    padding: 0 !important;
    margin-left: 0 !important;
}

/* Hide arrow icon on button */
.loop-entry.product .button .kadence-svg-iconset {
    display: none !important;
}

/* Product title */
.loop-entry .woocommerce-loop-product__title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    letter-spacing: 0.02em !important;
    color: var(--charcoal) !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
}

/* Price */
.loop-entry .price {
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    letter-spacing: 0.05em !important;
    color: var(--charcoal) !important;
    padding: 0 !important;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce .woocommerce-pagination ul.page-numbers,
.woocommerce-page .woocommerce-pagination ul.page-numbers {
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 40px 0;
}

.woocommerce nav.woocommerce-pagination ul li {
    display: flex;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--terracotta) !important;
    background: transparent !important;
    color: var(--terracotta) !important;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    border-radius: 0;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
    background: var(--terracotta) !important;
    color: var(--warm-white) !important;
}

/* Add to cart button */
.woocommerce ul.products li.product .button.product_type_variable,
.woocommerce ul.products li.product .button.product_type_simple {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    border: 1px solid var(--charcoal) !important;
    background: transparent !important;
    padding: 10px 24px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    transition: background 0.3s ease, color 0.3s ease !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product .button.product_type_variable:hover,
.woocommerce ul.products li.product .button.product_type_simple:hover {
    background: var(--charcoal) !important;
    color: var(--warm-white) !important;
}

/* Collections Page */
/* ── Collection pages ── */
/* Hero tightened so the first row of products is visible without
   scrolling: measured 522px to the grid, first row ending at 888px
   on a 911px viewport. Before: grid at 691px. */
.lcc-utility-hero {
    padding: 32px 60px 28px !important;
    margin-bottom: 24px !important;
}

.lcc-utility-hero h1 {
    font-size: 38px;
}

.kadence-shop-top-row {
    padding-bottom: 20px;
}

/* The SEO copy, printed below the product grid by the snippet.
   On its own panel with a heading, so it reads as a deliberate section
   rather than text left behind under the products. */
.lcc-collection-copy {
    max-width: 1200px;
    margin: 64px auto 0;
    padding: 46px 56px 48px;
    background: var(--linen);
}

.lcc-collection-copy h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 300;
    line-height: 1.3;
    color: var(--charcoal);
    max-width: 28ch;
    margin: 0 0 18px;
}

.lcc-collection-copy p {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    line-height: 1.85;
    color: var(--charcoal);
    max-width: 68ch;
    margin: 0 0 16px;
}

.lcc-collection-copy p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .lcc-utility-hero {
        padding: 28px 24px 24px !important;
    }

    .lcc-utility-hero h1 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .lcc-collection-copy {
        margin-top: 44px;
        padding: 32px 24px 34px;
    }

    .lcc-collection-copy h2 {
        font-size: 23px;
    }
}

/* Size Display */
/* ── Product cards ── */
/* Matched to the Bestsellers cards on the homepage: 12px gap, 10px gold
   caps, 19px Cormorant name, 13px price, nothing below the price.
   Card comes out 354px against the homepage's 355px. */

.lcc-card-type {
    display: block;
    order: -1;
    /* .product-details is a flex column — this lifts the
                label above the name wherever it is printed */
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #8A6124;
    /* 4.96:1 on the cream card */
    margin: 0 0 6px;
}

ul.products li.product .product-details {
    padding: 18px 0 0 !important;
}

ul.products li.product h2.woocommerce-loop-product__title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
}

/* Size, between the name and the price. */
.lcc-card-size {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #6B655D;
    margin: 0 0 5px;
}

ul.products li.product span.price {
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--charcoal) !important;
    margin: 0 !important;
}

/* Add to cart. :not(:empty) so cards without a button don't keep the gap. */
ul.products li.product .product-action-wrap:not(:empty) {
    margin-top: 14px;
}

/* ── Result count and sort ── */
/* The select was a bare 25px native control with no boundary — nothing
   said it could be pressed. 36px with a hairline box. */
.woocommerce-result-count {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    color: #6B655D;
    margin: 0;
}

.woocommerce-ordering select {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid rgba(44, 43, 40, 0.25);
    border-radius: 0;
    background-color: transparent;
    color: var(--charcoal);
}

.woocommerce-ordering select:focus {
    outline: 0;
    border-color: var(--charcoal);
}

/* ── Hero: linen ── */
/* Scoped to any page that lists products, so the shop archive,
   /new-arrivals/ and /stl-files/ get it too, not just category
   archives. .lcc-utility-hero is shared with FAQ, Contact, Delivery
   and Privacy, which have no product list and stay charcoal.
   Single product pages do carry a ul.products (related items) but no
   .lcc-utility-hero, so they are unaffected — checked on
   /polymer-clay-cutters/deniz-safagi/.
   On linen: h1 10.9:1, body 7.31:1, eyebrow 4.89:1.
   The charcoal version was 4.52:1 — over the 4.5 minimum by 0.02. */
body:has(ul.products) .lcc-utility-hero {
    background: var(--linen);
}

body:has(ul.products) .lcc-utility-hero-pattern {
    background-image: radial-gradient(circle, var(--charcoal) 1px, transparent 1px);
    opacity: 0.07;
}

/* Every category description carries style="color: var(--sage-light)"
   inline on the eyebrow — 1.93:1 on linen. This overrides all 16
   without editing them. */
body:has(ul.products) .lcc-utility-hero .eyebrow {
    color: #7E5820 !important;
}

body:has(ul.products) .lcc-utility-hero h1 {
    color: var(--charcoal);
}

body:has(ul.products) .lcc-utility-hero h1 em {
    color: var(--sage-dark);
}

body:has(ul.products) .lcc-utility-hero-rule {
    background: var(--charcoal);
    opacity: 0.3;
}

/* Scoped inside the hero: the snippet moves these same paragraphs into
   .lcc-collection-copy below the grid, which has its own colour. */
body:has(ul.products) .lcc-utility-hero .lcc-utility-hero-desc,
body:has(ul.products) .lcc-utility-hero .lcc-utility-hero-desc-long {
    color: #4A453E;
}

/* ── Shop bar: filters left, sort right ── */
/* Kadence prints its own top row as a separate sibling in <main>, so
   the two can't share a line with CSS alone. The bar below carries its
   own copy of the sort form and Kadence's row is hidden — only where
   our bar actually rendered, so pages without filters keep theirs. */

body:has(.lcc-shop-bar) .kadence-shop-top-row {
    display: none;
}

.lcc-shop-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 0 0 26px;
}

.lcc-shop-bar-sort {
    margin-left: auto;
}

.lcc-shop-bar .woocommerce-ordering {
    margin: 0;
}

/* The grid dims while the next set is being fetched. */
ul.products.lcc-is-loading {
    opacity: .45;
    transition: opacity .15s ease;
}

@media (prefers-reduced-motion: reduce) {
    ul.products.lcc-is-loading {
        transition: none;
    }
}


/* ── Filters ── */
/* Separate pills, not a joined segmented control: more than one can be
   on at once, and a segmented control reads as "pick one". The STL
   page's control is joined for exactly that reason — there the choice
   is exclusive. */

.lcc-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0;
}

.lcc-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.lcc-filter-label {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6B655D;
}

.lcc-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.woocommerce a.lcc-filter-option,
a.lcc-filter-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid rgba(44, 43, 40, .25);
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--charcoal);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.lcc-filter-option span {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .04em;
    color: #6B655D;
}

.lcc-filter-option:hover {
    background: rgba(44, 43, 40, .05);
}

.woocommerce a.lcc-filter-option.is-active,
a.lcc-filter-option.is-active {
    background: var(--charcoal);
    border-color: var(--charcoal);
    color: var(--warm-white);
}

.lcc-filter-option.is-active span {
    color: rgba(250, 242, 232, .72);
}

.lcc-filter-option:focus-visible {
    outline: 2px solid #B4521F;
    outline-offset: 2px;
}

.woocommerce a.lcc-filter-clear,
a.lcc-filter-clear {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6B655D;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lcc-filter-clear:hover {
    color: var(--charcoal);
}


/* ── Result count ── */
/* Kadence renders "Showing all 8 results" itself, inside its own
   .kadence-woo-results-count wrapper — not through WooCommerce's
   woocommerce_before_shop_loop hook, so remove_action has no effect on
   it, and there is no Customizer setting for it either. Hidden here.
   The sort bar doesn't move: .kadence-shop-top-row is already
   justify-content:flex-end, measured with the count removed. */

.kadence-shop-top-row .kadence-woo-results-count {
    display: none;
}


/* ── "View cart" after an ajax add ── */
/* WooCommerce injects <a class="added_to_cart"> after the button once
   something is added. It made that one card's action block 96px while
   its neighbours stayed 64px, and because the block is bottom-anchored
   the whole row's buttons dropped 32px, leaving a gap above them.
   Hidden in the grid only — the product page keeps it, and the header
   cart count still updates either way. */

body:has(ul.products) ul.products li.product a.added_to_cart {
    display: none !important;
}

/* With that link gone, the button itself carries the confirmation.
   WooCommerce puts .added on it after a successful ajax add; nothing
   was styling that. font-size:0 hides the "Add to cart" text node —
   CSS can't replace a text node, so the new label comes from ::before.
   The button keeps its exact 254x40, so no card shifts.
   Warm white on sage-dark is 5.59:1. */

.woocommerce ul.products li.product a.button.add_to_cart_button.added {
    font-size: 0 !important;
    background: #5A6455 !important;
    border-color: #5A6455 !important;
}

.woocommerce ul.products li.product a.button.add_to_cart_button.added::before {
    content: "Added to cart";
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #FAF2E8;
}

.woocommerce ul.products li.product a.button.add_to_cart_button.added:hover {
    background: #4C5548 !important;
    border-color: #4C5548 !important;
}


/* ── /all-collections/ index ── */
.lcc-collections-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 40px 80px;
}

.lcc-collections-title {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--stone);
    text-align: center;
    margin-bottom: 36px;
    font-weight: 300;
}

.lcc-collections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.lcc-collection-card {
    position: relative;
    overflow: hidden;
    border: 0.5px solid var(--blush);
    background: var(--warm-white);
    height: 110px;
    cursor: pointer;
}

.lcc-collection-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 58%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: var(--blush);
    transition: transform 0.5s ease;
}

.lcc-collection-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, var(--warm-white) 50%, transparent 100%);
}

.lcc-collection-card:hover .lcc-collection-bg {
    transform: scale(1.05);
}

.lcc-collection-text {
    position: relative;
    z-index: 2;
    padding: 0 0 0 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 50%;
}

.lcc-collection-name {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--charcoal);
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

.lcc-collection-count {
    font-size: 10px;
    color: var(--stone);
    letter-spacing: 0.05em;
    font-weight: 300;
    margin: 0;
}

@media (max-width: 768px) {
    .lcc-collections-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lcc-collections-page {
        padding: 32px 20px 60px;
    }
}

@media (max-width: 480px) {
    .lcc-collections-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Mobile ── */
/* The grid was one column: 43 cards at 507px each, a 21,534px scroll.
   Two columns brings the page to 9,206px.

   Two things these selectors work around:
   1. .woocommerce sits on <body> next to .tax-product_cat, so
      ".tax-product_cat .woocommerce ..." matches nothing — it would need
      .woocommerce to be a descendant.
   2. The competing rules live in 90-mobile.css, which loads after this
      file, and tie on specificity. The leading "body" breaks the tie. */
@media (max-width: 767px) {
    body:has(ul.products):not(.single-product) ul.products.grid-cols {
        grid-template-columns: 1fr 1fr !important;
        gap: 22px 14px !important;
    }

    body:has(ul.products):not(.single-product) ul.products li.product .product-details {
        padding: 14px 0 0 !important;
    }

    body:has(ul.products):not(.single-product) ul.products li.product h2.woocommerce-loop-product__title {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    /* Was 34px — under the 44px thumb target. */
    body:has(ul.products):not(.single-product) ul.products li.product .button.product_type_variable,
    body:has(ul.products):not(.single-product) ul.products li.product .button.product_type_simple {
        padding: 13px 8px !important;
        font-size: 10px !important;
    }

    body:has(ul.products):not(.single-product) .lcc-card-size {
        font-size: 10px;
    }

    /* 50-templates.css sets 36px at this width; this outranks it. */
    body:has(ul.products) .lcc-utility-hero h1 {
        font-size: 30px;
    }
}


@media (max-width: 767px) {

    /* A scrolling row keeps the grid in view instead of pushing it down
     three rows of pills. */
    .lcc-shop-bar {
        gap: 10px;
        margin-bottom: 20px;
    }

    /* Filters take the full width on their own line, sort sits under
     them — three pills and a select won't fit side by side at 390px. */
    .lcc-filters {
        flex: 1 1 100%;
        gap: 8px;
    }

    .lcc-shop-bar-sort {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .lcc-shop-bar-sort .woocommerce-ordering select {
        width: 100%;
    }

    .lcc-filter-options {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .lcc-filter-options::-webkit-scrollbar {
        display: none;
    }

    .woocommerce a.lcc-filter-option,
    a.lcc-filter-option {
        min-height: 38px;
        padding: 0 12px;
        font-size: 10px;
        letter-spacing: .05em;
    }
}