/* =============================================================
   SHOP / SHOP2 — Premium polish (shared)
   ============================================================= */

/* Page container: give the WC content proper container + spacing */
.woocommerce.archive,
.woocommerce-page.archive,
.woocommerce-shop,
.woocommerce-page,
body.woocommerce,
body[class*="product-archive"] {
    background: var(--sfc-color-bg);
}

/* Main content area: kill the default padding/box */
.woocommerce .site-main,
.woocommerce-page .site-main,
body.woocommerce #content,
body.woocommerce-page #content,
body.woocommerce-shop #content {
    background: transparent;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

/* =============================================================
   1. SHOP HERO BANNER
   ============================================================= */
.sfc-shop-hero {
    background: var(--sfc-color-bg-alt);
    padding: 64px 32px 56px;
    margin: 0 0 0 0;
    text-align: center;
    border-bottom: 1px solid var(--sfc-color-line);
    position: relative;
}

.sfc-shop-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?w=1920&q=70&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    opacity: 0.10;
    pointer-events: none;
}

.sfc-shop-hero__inner {
    position: relative;
    max-width: var(--sfc-container);
    margin: 0 auto;
}

.sfc-shop-hero__eyebrow {
    display: inline-block;
    font-family: var(--sfc-font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sfc-color-accent);
    margin-bottom: 14px;
}

.sfc-shop-hero__title {
    font-family: var(--sfc-font-display);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--sfc-color-ink);
    margin: 0 0 16px;
}

.sfc-shop-hero__subtitle {
    font-family: var(--sfc-font-sans);
    font-size: 18px;
    line-height: 1.6;
    color: var(--sfc-color-ink-soft);
    max-width: 640px;
    margin: 0 auto 28px;
}

/* Category chips row */
.sfc-shop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

.sfc-shop-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--sfc-color-surface);
    border: 1px solid var(--sfc-color-line);
    border-radius: 999px;
    font-family: var(--sfc-font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--sfc-color-ink);
    text-decoration: none;
    transition: all 160ms ease;
}
.sfc-shop-chip:hover {
    border-color: var(--sfc-color-ink);
    background: var(--sfc-color-ink);
    color: #fff;
}
.sfc-shop-chip.is-active {
    background: var(--sfc-color-ink);
    color: #fff;
    border-color: var(--sfc-color-ink);
}
.sfc-shop-chip__count {
    font-size: 11px;
    opacity: 0.6;
    font-weight: 500;
}

@media (max-width: 600px) {
    .sfc-shop-hero { padding: 48px 20px 40px; }
    .sfc-shop-chips { gap: 6px; }
    .sfc-shop-chip { padding: 6px 12px; font-size: 12px; }
}

/* =============================================================
   2. FILTER STRIP — search + sort + count
   ============================================================= */
.sfc-shop-toolbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    max-width: var(--sfc-container);
    margin: 32px auto 28px;
    padding: 16px 24px;
    background: var(--sfc-color-surface);
    border: 1px solid var(--sfc-color-line);
    border-radius: var(--sfc-radius);
    box-shadow: var(--sfc-shadow-sm);
}

.sfc-shop-search {
    position: relative;
}
.sfc-shop-search input[type="search"] {
    width: 100%;
    background: var(--sfc-color-bg-alt);
    border: 1px solid var(--sfc-color-line);
    border-radius: var(--sfc-radius-sm);
    padding: 10px 14px 10px 38px;
    font-family: var(--sfc-font-sans);
    font-size: 14px;
    color: var(--sfc-color-ink);
}
.sfc-shop-search input[type="search"]::placeholder {
    color: var(--sfc-color-ink-muted);
}
.sfc-shop-search input[type="search"]:focus {
    outline: none;
    border-color: var(--sfc-color-ink);
    background: #fff;
}
.sfc-shop-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sfc-color-ink-muted);
    pointer-events: none;
    font-size: 14px;
    line-height: 1;
}

.sfc-shop-count {
    font-family: var(--sfc-font-sans);
    font-size: 13px;
    color: var(--sfc-color-ink-soft);
    font-weight: 500;
    white-space: nowrap;
}

.sfc-shop-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sfc-font-sans);
    font-size: 13px;
    color: var(--sfc-color-ink-soft);
}
.sfc-shop-sort select,
.woocommerce-ordering select,
.sfc-shop-toolbar select {
    background: var(--sfc-color-bg-alt);
    border: 1px solid var(--sfc-color-line);
    border-radius: var(--sfc-radius-sm);
    padding: 9px 32px 9px 14px;
    font-family: var(--sfc-font-sans);
    font-size: 13px;
    color: var(--sfc-color-ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231a1a1a' d='M5 6L0 0h10z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 9px;
}
.sfc-shop-sort select:focus,
.woocommerce-ordering select:focus {
    outline: none;
    border-color: var(--sfc-color-ink);
}

@media (max-width: 900px) {
    .sfc-shop-toolbar {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 18px;
    }
    .sfc-shop-sort { justify-content: space-between; }
}

/* =============================================================
   3. PRODUCT GRID
   ============================================================= */
.woocommerce.archive .site-main .products,
.woocommerce-page .site-main ul.products,
body.woocommerce ul.products,
body[class*="product-archive"] ul.products,
.woocommerce-page ul.products,
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 28px !important;
    max-width: var(--sfc-container);
    margin: 0 auto !important;
    padding: 0 32px;
    clear: both;
}

@media (max-width: 1100px) {
    .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 820px) {
    .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .woocommerce-page ul.products { grid-template-columns: 1fr !important; padding: 0 20px; }
}

/* Result count — hide the default and use ours */
.woocommerce-result-count {
    display: none !important;
}

/* Move the order-by form into our toolbar */
.woocommerce-ordering {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce-ordering select {
    /* styled above */
}

/* The bottom sort form that Storefront adds - hide it */
body.woocommerce form.woocommerce-ordering,
body.woocommerce-page form.woocommerce-ordering,
.woocommerce .sfc-shop-container form.woocommerce-ordering {
    display: none !important;
}

/* Hide the storefront-sorting wrapper that contains the sort + result-count + top pagination */
.woocommerce .sfc-shop-container > .storefront-sorting,
.woocommerce-page .sfc-shop-container > .storefront-sorting,
.woocommerce .storefront-sorting,
.woocommerce-page .storefront-sorting {
    display: none !important;
}

/* =============================================================
   4. PRODUCT CARD — already styled in main style.css but enhance:
      - Hover lift
      - Category chip
      - Better spacing
   ============================================================= */
.woocommerce ul.products li.product {
    background: var(--sfc-color-surface) !important;
    border: 1px solid var(--sfc-color-line) !important;
    border-radius: var(--sfc-radius) !important;
    overflow: hidden !important;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column;
    position: relative;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: var(--sfc-shadow-lg);
    border-color: transparent;
}

/* Image — cleaner, consistent aspect */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block;
    background: var(--sfc-color-bg-alt);
}
.woocommerce ul.products li.product img {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    height: auto !important;
    margin: 0 !important;
    transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.woocommerce ul.products li.product:hover img {
    transform: scale(1.04);
}

/* Title + price + add to cart stack */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--sfc-font-sans) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--sfc-color-ink) !important;
    padding: 16px 20px 4px !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    text-align: left;
}
.woocommerce ul.products li.product .price {
    padding: 0 20px 6px !important;
    color: var(--sfc-color-ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: left;
    display: block;
}
.woocommerce ul.products li.product .price del {
    color: var(--sfc-color-ink-muted) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
    margin-right: 6px;
    font-size: 14px;
}
.woocommerce ul.products li.product .price ins {
    background: transparent !important;
    color: var(--sfc-color-accent) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* Category shown as small chip below price */
.woocommerce ul.products li.product .star-rating {
    margin: 4px 20px 0;
    font-size: 13px;
    color: var(--sfc-color-star);
}

/* Add to cart — make it span the full width and look like a button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    margin: auto 20px 20px !important;
    padding: 13px 20px !important;
    background: var(--sfc-color-ink) !important;
    color: #fff !important;
    border-radius: var(--sfc-radius-sm) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 160ms ease, transform 160ms ease;
    display: block !important;
    text-align: center;
    width: calc(100% - 40px);
    border: 0;
}
.woocommerce ul.products li.product .button:hover {
    background: var(--sfc-color-accent) !important;
}
.woocommerce ul.products li.product .added_to_cart {
    background: var(--sfc-color-success) !important;
}

/* Category chip on product card */
.sfc-product-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--sfc-color-ink);
    font-family: var(--sfc-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    z-index: 3;
}

/* =============================================================
   5. PAGINATION
   ============================================================= */
.woocommerce nav.woocommerce-pagination,
nav.woocommerce-pagination {
    max-width: var(--sfc-container);
    margin: 56px auto;
    padding: 0 32px;
    text-align: center;
}
/* Hide the top pagination (we have a hero + chips for context already)
   The pagination is inside div.storefront-sorting. Hide the first storefront-sorting div. */
.woocommerce .sfc-shop-container > .storefront-sorting,
.woocommerce-page .sfc-shop-container > .storefront-sorting {
    display: none !important;
}
.woocommerce .sfc-shop-container .woocommerce-result-count,
.woocommerce-page .sfc-shop-container .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count,
.woocommerce .woocommerce-result-count {
    display: none !important;
}
/* The bottom default sort form - hide it, our JS moved it to the toolbar */
.woocommerce-page form.woocommerce-ordering,
.woocommerce form.woocommerce-ordering {
    display: none !important;
}
.woocommerce nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul {
    display: inline-flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li,
nav.woocommerce-pagination ul li {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: var(--sfc-color-surface);
    color: var(--sfc-color-ink) !important;
    border: 1px solid var(--sfc-color-line) !important;
    border-radius: var(--sfc-radius-sm) !important;
    font-family: var(--sfc-font-sans);
    font-weight: 500;
    text-decoration: none;
    transition: all 160ms ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--sfc-color-ink);
    color: #fff !important;
    border-color: var(--sfc-color-ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
nav.woocommerce-pagination ul li span.current {
    background: var(--sfc-color-ink);
    color: #fff !important;
    border-color: var(--sfc-color-ink);
}

/* =============================================================
   6. WC notices (cart messages etc.)
   ============================================================= */
.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
    max-width: var(--sfc-container);
    margin: 24px auto;
}
.woocommerce-message {
    background: #e7f4ec;
    color: var(--sfc-color-success);
    border-radius: var(--sfc-radius);
    border: 0;
    padding: 16px 24px;
    font-family: var(--sfc-font-sans);
}

/* Hide the bottom default sort form (we already have ours in the toolbar) */
.woocommerce-page .woocommerce-result-count,
.woocommerce .woocommerce-result-count {
    display: none !important;
}
/* The bottom duplicate form.woocommerce-ordering - hide it, our JS moved it to the toolbar */
.woocommerce.archive form.woocommerce-ordering,
.woocommerce-page form.woocommerce-ordering {
    display: none !important;
}
/* Pagination - use the one in our toolbar by default but show bottom too */
.woocommerce .sfc-shop-toolbar + form.woocommerce-ordering,
.woocommerce-page .sfc-shop-toolbar + form.woocommerce-ordering {
    display: none !important;
}

/* =============================================================
   7. /shop2 (Gutenberg) - Distinct variant
   ============================================================= */
body.page-id-7634 .sfc-shop-hero {
    /* Gutenberg version: more editorial, more text */
    background: var(--sfc-color-ink);
    color: #fff;
    padding: 80px 32px 64px;
}
body.page-id-7634 .sfc-shop-hero::before {
    background-image: url('https://images.unsplash.com/photo-1455390582262-044cdead277a?w=1920&q=70&auto=format&fit=crop');
    opacity: 0.15;
}
body.page-id-7634 .sfc-shop-hero__eyebrow {
    color: #f3a17e;
}
body.page-id-7634 .sfc-shop-hero__title {
    color: #fff;
}
body.page-id-7634 .sfc-shop-hero__subtitle {
    color: #c8c8c8;
}
body.page-id-7634 .sfc-shop-chip {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}
body.page-id-7634 .sfc-shop-chip:hover,
body.page-id-7634 .sfc-shop-chip.is-active {
    background: #fff;
    color: var(--sfc-color-ink);
    border-color: #fff;
}

/* /shop2 (Gutenberg) — different product card treatment */
body.page-id-7634 ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px 32px !important;
}
body.page-id-7634 .woocommerce ul.products li.product {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.page-id-7634 .woocommerce ul.products li.product:hover {
    transform: none;
    box-shadow: none;
}
body.page-id-7634 .woocommerce ul.products li.product img {
    aspect-ratio: 1 / 1 !important;
    border-radius: var(--sfc-radius) !important;
}
body.page-id-7634 .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--sfc-font-display) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    text-align: center;
    padding: 16px 20px 0 !important;
}
body.page-id-7634 .woocommerce ul.products li.product .price {
    text-align: center;
    font-family: var(--sfc-font-display);
    font-size: 16px !important;
}
body.page-id-7634 .woocommerce ul.products li.product .button,
body.page-id-7634 .woocommerce ul.products li.product .added_to_cart {
    background: transparent !important;
    color: var(--sfc-color-ink) !important;
    border: 1px solid var(--sfc-color-ink);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.08em;
    margin: 16px 20px 0 !important;
    width: calc(100% - 40px);
}
body.page-id-7634 .woocommerce ul.products li.product .button:hover {
    background: var(--sfc-color-ink) !important;
    color: #fff !important;
}
body.page-id-7634 .woocommerce ul.products li.product .added_to_cart {
    background: var(--sfc-color-ink) !important;
    color: #fff !important;
}
body.page-id-7634 .woocommerce ul.products li.product .star-rating {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1100px) {
    body.page-id-7634 ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    body.page-id-7634 ul.products { grid-template-columns: 1fr !important; }
}

/* =============================================================
   8. /shop2 — Hero on Gutenberg has a different layout
      (3 columns: title-left, divider, subtitle-right)
   ============================================================= */
body.page-id-7634 .sfc-shop-hero {
    text-align: left;
}
body.page-id-7634 .sfc-shop-hero__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 48px;
    align-items: center;
}
body.page-id-7634 .sfc-shop-hero__eyebrow {
    text-align: left;
    margin-bottom: 12px;
}
body.page-id-7634 .sfc-shop-hero__title {
    text-align: left;
}
body.page-id-7634 .sfc-shop-hero__subtitle {
    text-align: left;
    margin: 0 0 0;
    color: #c8c8c8;
}
body.page-id-7634 .sfc-shop-hero__divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
    align-self: stretch;
}
body.page-id-7634 .sfc-shop-hero__meta {
    color: #c8c8c8;
    text-align: right;
}
body.page-id-7634 .sfc-shop-hero__meta-row {
    margin: 8px 0;
    font-family: var(--sfc-font-sans);
    font-size: 13px;
}
body.page-id-7634 .sfc-shop-hero__meta-row strong {
    color: #fff;
    font-weight: 600;
}
body.page-id-7634 .sfc-shop-chips {
    justify-content: flex-start;
}

@media (max-width: 900px) {
    body.page-id-7634 .sfc-shop-hero__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    body.page-id-7634 .sfc-shop-hero__divider { display: none; }
    body.page-id-7634 .sfc-shop-hero__meta { text-align: left; }
}

/* =============================================================
   9. Empty space between sections
   ============================================================= */
.woocommerce-products-header,
.woocommerce .term-description {
    display: none !important;
}

/* Pagination bottom spacing */
.woocommerce.archive .site-main,
.woocommerce-page .site-main {
    padding-bottom: 80px;
}