/* ========================================
   Shop Sections - Category Grid & Product Cards
    Plant nursery collection styling
   ======================================== */

:root {
    --shop-maroon: #002f34;
    --shop-maroon-dark: #002f34;
    --shop-ink: #1f2937;
    --shop-text-muted: #6b7280;
    --shop-border: #e5e7eb;
    --shop-radius: 4px;
    --shop-gold: #f59e0b;
    --shop-gold-dark: #f59e0b;
}

/* ========================================
   Shared Section Header
   ======================================== */

.shop-categories-section,
.shop-products-section {
    padding: 0 0 36px;
    background: #f9fafb;
}

.shop-section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 20px;
}

.shop-section-header-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    text-align: left;
    max-width: none;
    gap: 20px;
}

.shop-section-header-text {
    flex: 1;
    min-width: 0;
}

.shop-section-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--shop-maroon);
    margin-bottom: 10px;
}

.shop-section-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--shop-ink);
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.shop-section-header-split .shop-section-title {
    margin-bottom: 4px;
}

.shop-section-subtitle {
    font-size: 16px;
    color: var(--shop-text-muted);
    margin: 0;
}

.shop-section-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.shop-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 12px 26px;
    border-radius: 50px;
    border: 2px solid var(--shop-ink);
    color: var(--shop-ink);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.shop-view-all:hover {
    background: var(--shop-ink);
    color: #ffffff;
    transform: translateY(-2px);
}

.shop-view-all svg {
    transition: transform 0.3s ease;
}

.shop-view-all:hover svg {
    transform: translateX(3px);
}

/* ========================================
   Shop Search Bar
   Sits above the WooCommerce product loop. The navbar search icon
   links to the shop page and JS focuses #mythemeShopSearchInput.
   ======================================== */

.mytheme-shop-search {
    max-width: 640px;
    margin: 0 auto 40px;
    padding: 0 20px;
}

.mytheme-shop-search-form {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--shop-border);
    border-radius: 999px;
    padding: 6px 110px 6px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.mytheme-shop-search-form:focus-within {
    border-color: var(--shop-maroon);
    box-shadow: 0 4px 20px rgba(0, 47, 52, 0.14);
}

.mytheme-shop-search-icon {
    flex-shrink: 0;
    color: var(--shop-text-muted);
}

.mytheme-shop-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    padding: 10px 12px;
    color: var(--shop-ink);
}

.mytheme-shop-search-input::placeholder {
    color: #6b7280;
}

.mytheme-shop-search-submit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    background: var(--shop-maroon);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 999px;
    transition: background 0.25s ease;
}

.mytheme-shop-search-submit:hover {
    background: var(--shop-maroon-dark);
}

@media (max-width: 480px) {
    .mytheme-shop-search-form {
        padding-left: 14px;
        padding-right: 92px;
    }

    .mytheme-shop-search-submit {
        right: 5px;
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* ========================================
   Category Grid
   ======================================== */

.category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.category-card {
    position: relative;
    display: block;
    flex: 1 1 240px;
    max-width: calc(25% - 18px);
    border-radius: var(--shop-radius);
    overflow: hidden;
    text-decoration: none;
    aspect-ratio: 4 / 5;
    background: #f9fafb;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.category-card:hover {
    transform: translateY(-6px) translateZ(0);
    -webkit-transform: translateY(-6px) translateZ(0);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
}

/* --- Photo-based category card (has a thumbnail set) --- */

.category-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.category-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.category-card:hover .category-card-image img {
    transform: scale(1.08);
}

.category-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 100%);
    transition: background 0.35s ease;
}

.category-card:hover .category-card-overlay {
    background: linear-gradient(to top, rgba(0, 47, 52, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%);
}

.category-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 20px;
    color: #ffffff;
}

.category-card-name {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    letter-spacing: 0.2px;
}

.category-card-count {
    display: block;
    font-size: 13px;
    opacity: 0.85;
    letter-spacing: 0.3px;
}

/* --- Plain category card (no thumbnail set yet) ---
   Instead of a flat dark box, this gets a rich maroon gradient, a subtle
   diagonal texture, and a centered icon badge / name / pill count so it
   reads as a designed tile rather than a missing image. Cycles through a
   few brand-toned gradients by position so a row of several doesn't look
   identical. */

.category-card-plain-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 30px 22px;
    overflow: hidden;
    background: linear-gradient(150deg, #002f34 0%, #002f34 48%, #002f34 100%);
}

.category-card:nth-of-type(4n+2) .category-card-plain-inner {
    background: linear-gradient(150deg, #002f34 0%, #002f34 48%, #002f34 100%);
}

.category-card:nth-of-type(4n+3) .category-card-plain-inner {
    background: linear-gradient(150deg, #f59e0b 0%, #002f34 55%, #1f2937 100%);
}

.category-card:nth-of-type(4n+4) .category-card-plain-inner {
    background: linear-gradient(150deg, #002f34 0%, #002f34 48%, #002f34 100%);
}

.category-card-plain-pattern {
    position: absolute;
    inset: -20%;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 18px);
    opacity: 0.6;
    transition: transform 0.6s ease;
}

.category-card:hover .category-card-plain-pattern {
    transform: rotate(3deg) scale(1.08);
}

.category-card-plain-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    transition: transform 0.4s ease, background 0.4s ease;
}

.category-card:hover .category-card-plain-icon {
    transform: scale(1.1) rotate(-6deg);
    background: rgba(255, 255, 255, 0.22);
}

.category-card-plain-inner .category-card-name {
    position: relative;
    z-index: 2;
    font-size: 25px;
    color: #ffffff;
    margin: 0;
}

.category-card-count-pill {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 5px 16px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 12px;
    opacity: 1;
}

/* ========================================
   Product Grid
   ======================================== */

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

/* ========================================
   Shop Archive
   ======================================== */

.shop-archive-page {
    min-height: 70vh;
    padding: 118px 0 96px;
    background:
        radial-gradient(circle at 90% 0%, rgba(0, 47, 52, 0.09), transparent 28rem),
        #f9fafb;
}

.shop-archive-page .mytheme-shop-search {
    padding: 0;
}

.mytheme-shop-search-result-count {
    margin: 12px 0 0;
    color: var(--shop-maroon);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.shop-archive-results {
    min-width: 0;
}

.shop-archive-toolbar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 26px;
    padding: 16px 20px;
    border: 1px solid rgba(0, 47, 52, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

/* --- Top bar: Filters toggle (left) + view toggle (right) --- */

.shop-archive-toolbar-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.shop-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(0, 47, 52, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: var(--shop-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.shop-filter-toggle svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.shop-filter-toggle:hover {
    border-color: var(--shop-maroon);
    color: var(--shop-maroon);
}

.shop-filter-toggle.is-active {
    background: var(--shop-maroon);
    border-color: var(--shop-maroon);
    color: #ffffff;
}

/* --- Collapsible filter panel: hidden until "Filters" is opened --- */

.shop-filter-panel {
    display: none;
    width: 100%;
}

.shop-filter-panel.is-open {
    display: block;
}

.shop-filter-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

/* --- List / Grid display toggle --- */

.shop-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 4px;
    border: 1px solid rgba(0, 47, 52, 0.14);
    border-radius: 10px;
    background: #ffffff;
}

.shop-view-toggle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shop-text-muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.shop-view-toggle-button svg {
    width: 18px;
    height: 18px;
}

.shop-view-toggle-button:hover {
    color: var(--shop-ink);
}

.shop-view-toggle-button.is-active {
    background: var(--shop-maroon);
    color: #ffffff;
}

/* --- List view: one product per row ---
   Applies both to the WooCommerce archive loop (ul.products, used on
   the shop/sale pages) and to the homepage product-grid sections
   (.product-grid, used in template-parts/shop/product-grid.php). */

.shop-archive-page ul.products.view-list,
.product-grid.view-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.shop-archive-page ul.products.view-list li.product {
    width: 100%;
}

.shop-archive-page ul.products.view-list li.product .product-card,
.product-grid.view-list .product-card {
    flex-direction: row;
    align-items: stretch;
    height: auto;
}

.shop-archive-page ul.products.view-list .product-card-media,
.product-grid.view-list .product-card-media {
    width: 190px;
    min-width: 190px;
    aspect-ratio: auto;
}

.shop-archive-page ul.products.view-list .product-card-quickview,
.product-grid.view-list .product-card-quickview {
    display: none;
}

.shop-archive-page ul.products.view-list .product-card-body,
.product-grid.view-list .product-card-body {
    flex-direction: column;
    justify-content: center;
    padding: 18px 22px;
}

.shop-archive-page ul.products.view-list .product-card-title,
.product-grid.view-list .product-card-title {
    min-height: 0;
    -webkit-line-clamp: 2;
}

.shop-archive-page ul.products.view-list .product-card-action,
.product-grid.view-list .product-card-action {
    max-width: 260px;
}

.shop-archive-toolbar .woocommerce-ordering {
    float: none;
    margin: 0;
}

.shop-archive-toolbar .orderby {
    min-width: 180px;
    padding: 11px 38px 11px 14px;
    border: 1px solid var(--shop-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--shop-ink);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.shop-archive-toolbar .woocommerce-ordering {
    display: flex;
    align-items: center;
}

.shop-archive-toolbar .woocommerce-ordering::before {
    margin-right: 10px;
    color: var(--shop-ink);
    content: 'Sort by';
    font-size: 13px;
    font-weight: 700;
}

.shop-category-filter {
    /* A <details>/<summary> disclosure widget instead of a native <select>:
       the closed "value" text can wrap onto two lines when long (a native
       select's value box can't wrap at all), and because the open menu is
       positioned relative to this element rather than the OS, it's always
       bounded by the element's own width - never wider than the screen. */
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.shop-category-filter summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--shop-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--shop-ink);
    font-size: 14px;
    cursor: pointer;
    list-style: none;
}

.shop-category-filter summary::-webkit-details-marker {
    display: none;
}

.shop-category-filter summary::after {
    flex: 0 0 auto;
    margin-left: 4px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    padding: 3px;
    content: '';
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.shop-category-filter[open] summary::after {
    transform: rotate(-135deg);
}

.shop-category-filter-label {
    flex: 0 0 auto;
    color: var(--shop-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.shop-category-filter-value {
    /* The part that needs to wrap: up to two lines for a long category
       name, then an ellipsis if it's still too long, instead of ever
       forcing this box (and the row it's in) wider than its container. */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--shop-ink);
    font-weight: 600;
    text-align: right;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.shop-category-filter-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    /* Bound to the trigger's own width (not the viewport), so the open
       menu can never spill past the edge of the screen. */
    right: 0;
    max-height: 320px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--shop-border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.shop-category-filter-menu li+li {
    margin-top: 2px;
}

.shop-category-filter-menu a {
    display: block;
    padding: 9px 10px;
    border-radius: 6px;
    color: var(--shop-ink);
    font-size: 14px;
    text-decoration: none;
    /* Long option text wraps here too, rather than being clipped. */
    white-space: normal;
    word-break: break-word;
}

.shop-category-filter-menu a:hover {
    background: rgba(0, 47, 52, 0.06);
}

.shop-category-filter-menu a.is-active {
    background: var(--shop-maroon);
    color: #ffffff;
}

.shop-price-filter {
    min-width: 0;
}

.shop-price-filter-form-wrap {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    padding: 12px;
    border: 1px solid var(--shop-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.shop-price-filter-form {
    display: grid;
    gap: 10px;
}

.shop-price-filter-form label {
    display: grid;
    gap: 6px;
    color: var(--shop-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.shop-price-filter-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--shop-border);
    border-radius: 8px;
    background: #f9fafb;
    color: var(--shop-ink);
    font: inherit;
    font-size: 14px;
}

.shop-price-filter-form input:focus {
    outline: none;
    border-color: var(--shop-maroon);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 47, 52, 0.08);
}

.shop-price-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.shop-price-filter-submit,
.shop-price-filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.shop-price-filter-submit {
    padding: 9px 16px;
    border: none;
    background: var(--shop-maroon);
    color: #ffffff;
    cursor: pointer;
}

.shop-price-filter-submit:hover {
    background: var(--shop-maroon-dark);
}

.shop-price-filter-clear {
    padding: 9px 14px;
    color: var(--shop-ink);
    border: 1px solid var(--shop-border);
    background: #ffffff;
}

.shop-price-filter-clear:hover {
    border-color: var(--shop-maroon);
    color: var(--shop-maroon);
}

.shop-archive-page .product-card-action .add_to_cart_button,
.shop-archive-page .product-card-action .button {
    background: #1f2937;
    color: #ffffff;
}

.shop-archive-page .product-card-action .add_to_cart_button:hover,
.shop-archive-page .product-card-action .button:hover {
    background: var(--shop-maroon);
    color: #ffffff;
}

.shop-archive-page ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-archive-page ul.products::before,
.shop-archive-page ul.products::after {
    display: none;
}

.shop-archive-page ul.products li.product {
    float: none;
    width: auto;
    margin: 0;
}

.shop-archive-page ul.products li.product .product-card {
    height: 100%;
}

.shop-archive-page .woocommerce-pagination {
    margin-top: 48px;
}

.shop-archive-page .woocommerce-pagination ul {
    border: 0;
}

/* Bigger, full card - reserved for the rare "the shop isn't available
   at all" case (e.g. WooCommerce inactive), not for ordinary empty
   filter/search results (those use .shop-empty-notice below). */
.sale-empty-state {
    max-width: 680px;
    margin: 0 auto 70px;
    padding: 64px 24px;
    border: 1px solid rgba(0, 47, 52, 0.14);
    background: rgba(255, 255, 255, 0.75);
    text-align: center;
}

.sale-empty-state h1 {
    margin: 0 0 10px;
    color: var(--shop-ink);
    font-size: clamp(28px, 4vw, 42px);
}

.sale-empty-state p {
    margin: 0;
    color: var(--shop-text-muted);
}

/* Compact, single-line "nothing to show" notice - used for the sale
   filter, an empty category, or any other empty filter/search result.
   Deliberately just one line tall (wraps only on very narrow screens)
   so the New Arrivals section right underneath it is what draws the
   eye, not a big empty block. */
.shop-empty-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 680px;
    margin: 0 auto 40px;
    padding: 14px 22px;
    border: 1px solid rgba(0, 47, 52, 0.14);
    background: rgba(255, 255, 255, 0.75);
    text-align: center;
    font-size: 15px;
    line-height: 1.4;
    color: var(--shop-ink);
}

.shop-empty-notice a {
    color: var(--shop-primary, #f59e0b);
    font-weight: 600;
    text-decoration: underline;
}

/* Used to toggle the pre-rendered New Arrivals block below the notice
   above without having to fetch it again via AJAX. */
.is-hidden {
    display: none !important;
}

.sale-archive-page .shop-products-section {
    margin: 0 -20px;
    padding-top: 0;
    background: transparent;
}

@media (max-width: 992px) {
    .shop-archive-page ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .shop-archive-page {
        padding: 94px 0 56px;
    }

    .mytheme-shop-search {
        margin: 0 auto 12px;
        padding: 0;
    }

    .mytheme-shop-search-result-count {
        margin-top: 8px;
    }

    .shop-archive-toolbar {
        gap: 10px;
        margin-bottom: 14px;
        padding: 12px 12px;
    }

    .shop-filter-toggle {
        padding: 9px 12px;
    }

    .shop-filter-group {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .shop-category-filter,
    .shop-archive-toolbar .woocommerce-ordering {
        justify-content: space-between;
    }

    .shop-category-filter select {
        width: 100%;
    }

    .shop-archive-toolbar .orderby {
        width: 100%;
    }

    .shop-archive-page ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .shop-archive-page ul.products.view-list,
    .product-grid.view-list {
        display: flex;
        gap: 10px;
    }

    .shop-archive-page ul.products.view-list .product-card-media,
    .product-grid.view-list .product-card-media {
        width: 120px;
        min-width: 120px;
    }

    .shop-archive-page ul.products.view-list .product-card-body,
    .product-grid.view-list .product-card-body {
        padding: 10px 14px;
        gap: 4px;
    }

    .shop-archive-page ul.products.view-list .product-card-title,
    .product-grid.view-list .product-card-title {
        font-size: 13px;
    }

    .shop-archive-page ul.products.view-list .product-card-action .add_to_cart_button,
    .shop-archive-page ul.products.view-list .product-card-action .button,
    .product-grid.view-list .product-card-action .add_to_cart_button,
    .product-grid.view-list .product-card-action .button {
        padding: 8px 12px;
        font-size: 12px;
    }

    .shop-archive-page ul.products.view-list .product-gallery-prev,
    .shop-archive-page ul.products.view-list .product-gallery-next,
    .product-grid.view-list .product-gallery-prev,
    .product-grid.view-list .product-gallery-next {
        display: none;
    }

    /* On mobile list view the "Sale" text badge is dropped - the
       "-18%"-style badge (product-card-badges-left) already says enough
       in the tighter list row, so the second "Sale" ribbon
       (product-card-badges-right) is just visual clutter here. */
    .view-list .product-card-badges-right {
        display: none;
    }

    .sale-archive-page .shop-products-section {
        margin: 0;
    }
}

/* ========================================
   Product Card
   ======================================== */

.product-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: var(--shop-radius);
    overflow: hidden;
    border: 1px solid var(--shop-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.12);
    border-color: transparent;
}

.product-card-outofstock {
    opacity: 0.7;
}

/* --- Media / Image area --- */

.product-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f9fafb;
}

.product-card-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.product-card-media img,
.product-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.6s ease;
    display: block;
}

.product-gallery-button {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--shop-ink);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
}

/* The arrow used to be a text character (‹ / ›) - most fonts don't
   actually center that glyph within its own line box, so even inside
   a perfectly centered flex circle it visibly sits off to one side.
   An inline SVG (flex-centered, no font metrics involved) is now used
   instead and centers exactly. Sized here rather than inline so both
   this button and the lightbox one below can each pick their own
   proportionate icon size. */
.product-gallery-button .product-gallery-icon {
    display: block;
    width: 14px;
    height: 14px;
}

.product-gallery-button:hover,
.product-gallery-button:focus-visible {
    background: var(--shop-maroon);
    color: #ffffff;
}

.product-gallery-prev {
    left: 12px;
}

.product-gallery-next {
    right: 12px;
}

.product-gallery-control:hover .product-gallery-button,
.product-gallery-control:focus-within .product-gallery-button {
    opacity: 1;
}

.product-card-image-link,
.product-quickview-image-content,
.single-product-image {
    cursor: zoom-in;
}

.product-card-body {
    cursor: pointer;
}

.product-card-body a,
.product-card-body button,
.product-card-body input,
.product-card-body select,
.product-card-body textarea,
.product-card-body label {
    cursor: pointer;
}

.product-lightbox-open {
    overflow: hidden;
}

/* ========================================
   Full-screen Product Image Gallery Viewer
   - Mobile: true full width + full height of the device viewport
   - Desktop: full viewport height, image centered, pinch/scroll zoom
   ======================================== */

.product-media-lightbox[hidden] {
    display: none;
}

.product-media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: block;
    margin: 0;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

.product-media-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.97);
}

.product-media-lightbox-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.product-media-lightbox-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    cursor: zoom-in;
}

.product-media-lightbox-stage.is-zoomed {
    cursor: grab;
}

.product-media-lightbox-stage.is-zoomed.is-dragging {
    cursor: grabbing;
}

.product-media-lightbox-image {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
    transform: translate(0px, 0px) scale(1);
}

.product-media-lightbox-stage:not(.is-dragging) .product-media-lightbox-image {
    transition: transform 0.2s ease;
}

/* Mobile used to crop-fill (object-fit: cover) instead of showing the
   image at its actual proportions, which made some product photos look
   stretched/oddly cropped edge-to-edge depending on their own aspect
   ratio. Removed so mobile matches desktop: the image is always shown
   at its real height and width (letterboxed if needed, never cropped),
   the same everywhere the lightbox opens from - single product page,
   home page product cards, and sale page product cards. */

.product-media-lightbox-close,
.product-media-lightbox-button,
.product-media-lightbox-zoom-btn {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.55);
    color: #ffffff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.product-media-lightbox-close:hover,
.product-media-lightbox-close:focus-visible,
.product-media-lightbox-button:hover,
.product-media-lightbox-button:focus-visible,
.product-media-lightbox-zoom-btn:hover,
.product-media-lightbox-zoom-btn:focus-visible {
    background: var(--shop-maroon);
    border-color: var(--shop-maroon);
}

.product-media-lightbox-close {
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    width: 42px;
    height: 42px;
    font-size: 26px;
    line-height: 1;
}

.product-media-lightbox-button {
    top: 50%;
    width: 46px;
    height: 46px;
    transform: translateY(-50%);
}

/* Same reasoning as .product-gallery-icon above - an SVG centers
   exactly where the old text-character arrow didn't. */
.product-media-lightbox-button .product-gallery-icon {
    display: block;
    width: 20px;
    height: 20px;
}

.product-media-lightbox-prev {
    left: max(14px, env(safe-area-inset-left));
}

.product-media-lightbox-next {
    right: max(14px, env(safe-area-inset-right));
}

.product-media-lightbox-counter {
    position: absolute;
    top: max(24px, env(safe-area-inset-top));
    left: 50%;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(20, 20, 20, 0.55);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    letter-spacing: 0.4px;
    transform: translateX(-50%);
}

.product-media-lightbox-zoom-controls {
    position: absolute;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 50px;
    background: rgba(20, 20, 20, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transform: translateX(-50%);
}

.product-media-lightbox-zoom-btn {
    position: static;
    width: 36px;
    height: 36px;
    font-size: 18px;
    font-weight: 600;
    border: 0;
    background: transparent;
}

.product-media-lightbox-zoom-btn[data-lightbox-zoom-reset] {
    width: auto;
    padding: 0 12px;
    border-radius: 50px;
    font-size: 12px;
}

.product-card:hover .product-card-media img {
    transform: scale(1.07);
}

.product-card-badges {
    position: absolute;
    top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.product-card-badges-left {
    left: 14px;
    align-items: flex-start;
}

.product-card-badges-right {
    right: 14px;
    align-items: flex-end;
}

.product-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 13px 6px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    overflow: hidden;
    isolation: isolate;
}

.product-badge-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.product-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 65%);
    background-size: 250% 100%;
    background-position: 150% 0;
    animation: mytheme-badge-shine 3.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mytheme-badge-shine {

    0%,
    45% {
        background-position: 150% 0;
    }

    100% {
        background-position: -50% 0;
    }
}

.product-badge-sale {
    background: linear-gradient(135deg, var(--shop-maroon), var(--shop-maroon-dark));
}

.product-badge-new {
    background: linear-gradient(135deg, var(--shop-gold), var(--shop-gold-dark));
}

.product-badge-soldout {
    background: linear-gradient(135deg, #6b7280, #6b7280);
}

.product-badge-soldout::before {
    display: none;
}

.product-property .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.product-card-properties {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    z-index: 2;
}

.product-property {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--shop-maroon);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

.product-property-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.product-quickview-image .product-card-properties {
    top: 16px;
    right: 16px;
}

.product-card-quickview {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 13px 0;
    text-align: center;
    background: rgba(26, 26, 26, 0.88);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transform: translateY(100%);
    visibility: hidden;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    z-index: 2;
}

.product-card:hover .product-card-quickview {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

.quickview-open {
    overflow: hidden;
}

.product-quickview-modal[hidden] {
    display: none;
}

.product-quickview-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.product-quickview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, 0.72);
}

.product-quickview-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 42% 58%;
    width: min(900px, 100%);
    height: min(680px, 90vh);
    max-height: 90vh;
    overflow: hidden;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.product-quickview-image {
    position: relative;
    height: 100%;
    width: 100%;
    min-height: 0;
    background: #f9fafb;
    overflow: hidden;
}

.product-quickview-image .product-card-badges {
    top: 16px;
}

.product-quickview-image .product-card-badges-left {
    left: 16px;
}

.product-quickview-image .product-card-badges-right {
    right: 16px;
}

.product-quickview-image-content {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.product-quickview-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.product-quickview-scroll-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 42px 38px 24px;
}

.product-quickview-scroll-content::-webkit-scrollbar {
    display: none;
}

.product-quickview-content h2 {
    margin: 8px 0 14px;
    color: var(--shop-ink);
    font-size: 30px;
    line-height: 1.2;
}

.product-quickview-price {
    margin-top: 16px;
    color: var(--shop-maroon);
    font-size: 22px;
    font-weight: 800;
}

.product-quickview-price del {
    color: #6b7280;
    font-size: 0.78em;
    font-weight: 600;
}

.product-quickview-price ins {
    color: var(--shop-maroon);
    text-decoration: none;
}

.product-quickview-stock {
    margin: 8px 0 20px;
    color: var(--shop-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.product-quickview-description {
    color: #1f2937;
    font-size: 15px;
    line-height: 1.7;
}

.product-quickview-description p {
    margin: 0 0 12px;
}

.product-quickview-specifications {
    display: grid;
    gap: 8px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--shop-border);
}

.product-quickview-specification {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-size: 14px;
}

.product-quickview-specification span {
    color: var(--shop-text-muted);
}

.product-quickview-specification strong {
    color: var(--shop-ink);
    text-align: right;
}

.product-quickview-product-link {
    display: inline-block;
    flex: 0 0 auto;
    align-self: flex-end;
    margin: 16px 24px 24px 0;
    padding: 12px 20px;
    background: var(--shop-maroon);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    border-radius: 999px;
}

.product-quickview-product-link:hover {
    background: var(--shop-maroon-dark);
    color: #ffffff;
}

.product-quickview-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--shop-ink);
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
}

@media (max-width: 560px) {
    .product-quickview-dialog {
        grid-template-columns: 1fr;
        grid-template-rows: 240px minmax(0, 1fr);
        max-height: 92vh;
    }

    .product-quickview-image,
    .product-quickview-image-content {
        min-height: 0;
        height: 240px;
    }

    .product-quickview-image {
        padding: 0;
    }

    .product-quickview-content {
        padding: 0;
    }

    .product-quickview-scroll-content {
        padding: 28px 24px 24px;
    }

    .product-quickview-product-link {
        margin: 16px 24px 24px 0;
    }

    .product-quickview-content h2 {
        font-size: 24px;
    }
}

/* --- Leave-a-review modal (site-wide testimonial form) --- */

body.review-modal-open {
    overflow: hidden;
}

.review-modal[hidden] {
    display: none;
}

.review-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 20px;
}

.review-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, 0.72);
}

.review-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    max-height: 82vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    padding: 28px 24px 24px;

    /* Scrollable content, invisible scrollbar (Firefox / IE-Edge / WebKit). */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.review-modal-dialog::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.review-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--shop-ink);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.review-modal-content h2 {
    margin: 0 0 4px;
    color: var(--shop-ink);
    font-size: 19px;
    line-height: 1.2;
}

.review-modal-content .gh-leave-review-sub {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
}

.review-modal-content .gh-review-form {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 12px;
}

.review-modal-content .gh-review-form-row {
    gap: 5px;
}

.review-modal-content .gh-review-form-row label,
.review-modal-content .gh-review-form-label {
    font-size: 13px;
}

.review-modal-content .gh-review-form-row input[type="text"],
.review-modal-content .gh-review-form-row textarea {
    padding: 9px 12px;
    font-size: 13px;
}

.review-modal-content textarea#review-text {
    min-height: 64px;
}

.review-modal-content .gh-star-rating label {
    font-size: 22px;
}

.review-modal-content .gh-review-form button[type="submit"] {
    padding: 11px 20px;
    font-size: 13px;
}

@media (max-width: 560px) {
    .review-modal-dialog {
        width: min(400px, 100%);
        max-height: 88vh;
        padding: 24px 18px 20px;
    }
}

/* --- Body / details --- */

.product-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    padding: 20px;
}

.product-card-category {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--shop-maroon);
}

.product-card-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    color: var(--shop-ink);
    /* Clamp to 2 lines so cards in a row stay aligned */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.product-card-title a {
    color: inherit;
    text-decoration: none;
}

.product-card-title a:hover {
    color: var(--shop-maroon);
}

/* ========================================
   Full Product Details
   ======================================== */

.single-product-page {
    padding: 112px 0 90px;
    background: #f9fafb;
}

.single-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
    gap: 64px;
    align-items: start;
    max-width: 1120px;
    margin: 0 auto;
}

.single-product-gallery {
    min-width: 0;
}

.single-product-main-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f9fafb;
    border-radius: 14px;
    cursor: default;
}

.single-product-main-image .product-card-badges {
    top: 18px;
}

.single-product-main-image .product-card-badges-left {
    left: 18px;
}

.single-product-main-image .product-card-badges-right {
    right: 18px;
}

.single-product-main-image .product-card-properties {
    top: 18px;
    right: 18px;
}

.single-product-main-image.is-magnified .single-product-image {
    transform: scale(2.4);
    transition: transform 0.12s ease-out;
    cursor: default;
}

.single-product-brand-color {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 6px;
    margin: 2px 0 4px;
    font-size: 14px;
    color: var(--shop-text-muted);
}

.single-product-brand strong,
.single-product-color strong {
    color: var(--shop-ink);
    font-weight: 700;
}

.single-product-color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.single-product-color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.single-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.25s ease-out;
}

.single-product-thumbnails {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.single-product-thumbnails::-webkit-scrollbar {
    display: none;
}

.single-product-thumbnail {
    display: block;
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--shop-border);
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    opacity: 0.62;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.single-product-thumbnail:hover,
.single-product-thumbnail:focus-visible,
.single-product-thumbnail.is-active {
    border-color: var(--shop-maroon);
    opacity: 1;
}

.single-product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-product-summary {
    padding: 18px 0;
}

.single-product-summary h1 {
    margin: 10px 0 16px;
    color: var(--shop-ink);
    font-size: 42px;
    line-height: 1.12;
}

.single-product-rating {
    color: var(--shop-text-muted);
    font-size: 13px;
}

.single-product-price {
    margin: 22px 0;
    color: var(--shop-maroon);
    font-size: 27px;
    font-weight: 800;
}

.single-product-price del {
    color: #6b7280;
    font-size: 0.72em;
    font-weight: 600;
}

.single-product-price ins {
    text-decoration: none;
}

.single-product-short-description {
    color: #1f2937;
    font-size: 16px;
    line-height: 1.75;
}

.single-product-purchase-details {
    display: grid;
    gap: 0;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--shop-border);
}

.single-product-purchase-details h2 {
    margin: 0 0 6px;
    color: var(--shop-ink);
    font-size: 15px;
    font-weight: 800;
}

.single-product-purchase-detail {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 7px 0;
    border-bottom: 1px solid var(--shop-border);
    font-size: 13px;
}

.single-product-purchase-detail span {
    color: var(--shop-text-muted);
}

.single-product-purchase-detail strong {
    color: var(--shop-ink);
    text-align: right;
}

/* --- Plant Size selector (single product page) --- */

.plant-size-selector {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--shop-border);
}

.plant-size-selector-heading {
    margin: 0 0 12px;
    color: var(--shop-ink);
    font-size: 16px;
    font-weight: 800;
}

.plant-size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.plant-size-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 90px;
    padding: 10px 16px;
    border: 2px solid var(--shop-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.plant-size-pill input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.plant-size-pill:hover {
    border-color: var(--shop-maroon);
}

.plant-size-pill.is-selected {
    border-color: var(--shop-maroon);
    background: rgba(0, 47, 52, 0.06);
}

.plant-size-pill-label {
    color: var(--shop-ink);
    font-size: 14px;
    font-weight: 700;
}

.plant-size-pill-modifier {
    color: var(--shop-text-muted);
    font-size: 12px;
    font-weight: 500;
}

.plant-size-pill.is-selected .plant-size-pill-modifier {
    color: var(--shop-maroon);
}

.plant-size-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--shop-border);
}

.plant-size-selector,
.pot-selector,
.plant-price-total {
    flex: 0 0 100%;
    width: 100%;
}

/* --- Pot selector (single product page) --- */

.pot-selector [hidden] {
    display: none !important;
}

.pot-selector {
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid var(--shop-border);
}

.pot-selector-heading {
    margin: 0 0 6px;
    color: var(--shop-ink);
    font-size: 16px;
    font-weight: 800;
}

.pot-selector-note {
    margin: 0 0 12px;
    color: var(--shop-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.pot-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pot-choice,
.pot-category,
.pot-product {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border: 2px solid var(--shop-border);
    border-radius: 12px;
    background: #ffffff;
    color: var(--shop-ink);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pot-choice {
    width: 132px;
}

.pot-choice:hover,
.pot-category:hover,
.pot-product:hover,
.pot-choice.is-open,
.pot-category.is-open {
    border-color: var(--shop-maroon);
}

.pot-choice.is-selected,
.pot-category.is-open,
.pot-product.is-selected {
    border-color: var(--shop-maroon);
    background: rgba(0, 47, 52, 0.06);
}

.pot-choice-image,
.pot-category-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    object-fit: cover;
    background: #f3f4f6;
}

.pot-choice-image-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shop-maroon);
}

.pot-choice-image-icon svg {
    width: 44%;
    height: 44%;
}

.pot-choice-name,
.pot-category-name,
.pot-product-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.pot-choice-price,
.pot-product-price {
    color: var(--shop-text-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.pot-choice.is-selected .pot-choice-price,
.pot-product.is-selected .pot-product-price {
    color: var(--shop-maroon);
}

.pot-advanced-panel {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--shop-border);
    border-radius: 14px;
    background: #fafafa;
}

.pot-category-grid,
.pot-product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px;
}

.pot-product-panel {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--shop-border);
}

.pot-product-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    object-fit: cover;
    background: #f3f4f6;
}

@media (max-width: 480px) {
    .pot-choice {
        width: calc(50% - 5px);
    }

    .pot-category-grid,
    .pot-product-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.plant-size-total-label {
    color: var(--shop-text-muted);
    font-size: 14px;
    font-weight: 600;
}

.plant-size-total-amount {
    color: var(--shop-maroon);
    font-size: 22px;
    font-weight: 800;
}

.single-product-purchase {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--shop-border);
}

.single-product-purchase form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.single-product-purchase .quantity .qty {
    width: 76px;
    padding: 13px 10px;
    border: 1px solid var(--shop-border);
    border-radius: 8px;
    font: inherit;
    text-align: center;
}

/* --- Quantity stepper (mirrors the cart page's mytheme-qty-box) --- */

.single-product-purchase .mytheme-qty-box {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid var(--shop-border, #f9fafb);
    border-radius: 50px;
    overflow: hidden;
    background: #f9fafb;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.single-product-purchase .mytheme-qty-box:hover {
    border-color: #e5e7eb;
}

.single-product-purchase .mytheme-qty-box:focus-within {
    border-color: var(--shop-maroon, #f59e0b);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 47, 52, 0.1);
}

.single-product-purchase .mytheme-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    border: none;
    background: transparent;
    color: var(--shop-ink, #1f2937);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.single-product-purchase .mytheme-qty-btn:hover {
    background: var(--shop-maroon, #f59e0b);
    color: #ffffff;
}

.single-product-purchase .mytheme-qty-btn:active {
    transform: scale(0.9);
}

.single-product-purchase .mytheme-qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent;
    color: var(--shop-ink, #1f2937);
    transform: none;
}

.single-product-purchase .mytheme-qty-box .quantity {
    display: inline-flex;
}

.single-product-purchase .mytheme-qty-box .qty {
    width: 52px;
    border: none;
    background: transparent;
    text-align: center;
    padding: 13px 2px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: var(--shop-ink, #1f2937);
    -moz-appearance: textfield;
}

.single-product-purchase .mytheme-qty-box .qty::-webkit-outer-spin-button,
.single-product-purchase .mytheme-qty-box .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.single-product-purchase .mytheme-qty-box .qty:focus {
    outline: none;
}

.single-product-purchase .single_add_to_cart_button {
    padding: 14px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--shop-maroon) !important;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}

.single-product-purchase .single_add_to_cart_button:hover {
    background: #1f2937 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.single-product-purchase .single_add_to_cart_button.loading {
    opacity: 0.7;
    pointer-events: none;
    transform: none;
}

/* --- "✓ Added to Cart" confirmation flash right after a successful add --- */
.single-product-purchase .single_add_to_cart_button.mytheme-just-added {
    background: #004a52 !important;
    pointer-events: none;
}

.single-product-purchase .single_add_to_cart_button.mytheme-just-added::before {
    content: '✓';
    margin-right: 6px;
    font-weight: 700;
}

.single-product-purchase .wc-single-add-to-cart-error,
.single-product-purchase .woocommerce-error {
    width: 100%;
    margin: 10px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: #f9fafb;
    color: #002f34;
    font-size: 14px;
    list-style: none;
}

/* --- Size / Attribute Selection (variable products) ---
   WooCommerce automatically requires a variation to be picked before the
   Add to Cart button is enabled - this just gives that native form the
   same look as the rest of the theme instead of a bare browser dropdown. */

.single-product-purchase form.cart.variations_form {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
}

.variations {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.variations tbody,
.variations tr {
    display: block;
}

.variations tr {
    margin-bottom: 16px;
}

.variations tr:last-child {
    margin-bottom: 0;
}

.variations td,
.variations th {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
}

.variations label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--shop-ink);
}

.variations select {
    width: 100%;
    max-width: 320px;
    padding: 13px 16px;
    border: 1px solid var(--shop-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--shop-ink);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.variations select:focus {
    outline: none;
    border-color: var(--shop-maroon);
}

.variations select.error {
    border-color: #f59e0b;
}

.reset_variations {
    display: inline-block;
    margin-top: 8px;
    color: var(--shop-maroon);
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
}

.single_variation_wrap {
    width: 100%;
}

.woocommerce-variation {
    margin-bottom: 14px;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: 10px;
    font-size: 14px;
    color: var(--shop-text-muted);
}

.woocommerce-variation-price .price {
    color: var(--shop-ink);
    font-weight: 700;
}

.woocommerce-variation-availability .stock.out-of-stock {
    color: #f59e0b;
    font-weight: 600;
}

.woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.single-product-purchase .single_add_to_cart_button.disabled,
.single-product-purchase .single_add_to_cart_button[disabled] {
    background: #e5e7eb !important;
    color: #6b7280 !important;
    cursor: not-allowed;
    box-shadow: none;
    transform: none !important;
}

.single-product-highlights {
    display: grid;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--shop-border);
    color: var(--shop-text-muted);
    font-size: 13px;
}

.single-product-highlights span::before {
    content: '✓';
    margin-right: 8px;
    color: var(--shop-maroon);
    font-weight: 800;
}

.single-product-information {
    max-width: 1120px;
    margin: 40px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--shop-border);
}

.single-product-information-header>span {
    color: var(--shop-maroon);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.single-product-information-header h2 {
    margin: 8px 0 30px;
    color: var(--shop-ink);
    font-size: 32px;
}

.single-product-information-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    gap: 60px;
}

.single-product-information-full {
    display: block;
}

.single-product-description,
.single-product-attributes {
    color: #1f2937;
    font-size: 15px;
    line-height: 1.75;
}

.single-product-description h3,
.single-product-attributes h3 {
    margin: 0 0 14px;
    color: var(--shop-ink);
    font-size: 18px;
}

.single-product-attribute {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--shop-border);
}

.single-product-attribute span {
    color: var(--shop-text-muted);
}

.single-product-attribute strong {
    color: var(--shop-ink);
    text-align: right;
}

@media (max-width: 860px) {

    .single-product-layout,
    .single-product-information-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .single-product-page {
        padding-top: 84px;
    }

    .single-product-gallery {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }

    .single-product-main-image {
        width: 100%;
        height: 72vh;
        min-height: 360px;
        max-height: 520px;
        border-radius: 0;
    }

    .single-product-image {
        /* Was object-fit: cover, which crop-fills the box and hides part
           of the image outside the frame. Use contain so the whole photo
           is always visible inside the image holder, matching desktop. */
        object-fit: contain;
    }

    .single-product-summary h1 {
        font-size: 32px;
    }

    .single-product-layout {
        gap: 16px;
    }

    .single-product-summary {
        padding: 8px 0;
    }

    .single-product-price {
        margin: 8px 0;
    }

    .single-product-purchase {
        margin-top: 16px;
        padding-top: 16px;
    }

    .single-product-information {
        margin-top: 20px;
        padding-top: 16px;
    }

    .single-product-information-header h2 {
        margin: 4px 0 12px;
    }
}

.product-card-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-card-stars {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    width: 80px;
    height: 14px;
    --stars-empty: #e5e7eb;
    --stars-full: #f59e0b;
}

.product-card-stars::before,
.product-card-stars::after {
    content: '★★★★★';
    position: absolute;
    top: 0;
    left: 0;
    letter-spacing: 3px;
    white-space: nowrap;
}

.product-card-stars::before {
    color: var(--stars-empty);
}

.product-card-stars::after {
    color: var(--stars-full);
    width: var(--rating);
    overflow: hidden;
}

.product-card-rating-count {
    font-size: 12px;
    color: var(--shop-text-muted);
}

/* --- Price (uses WooCommerce's own markup: <del>/<ins>/.woocommerce-Price-amount) --- */

.product-card-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--shop-ink);
}

.product-card-price del {
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
    text-decoration: line-through;
    margin-right: 8px;
}

.product-card-price ins {
    text-decoration: none;
    color: var(--shop-maroon);
}

.product-card-price-label {
    display: block;
    margin-bottom: 2px;
    color: var(--shop-text-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* --- Add to cart button (WooCommerce renders .add_to_cart_button / .added_to_cart) --- */

.product-card-action {
    /* Pin the button to the bottom of the card regardless of how much
       content sits above it (2-line vs 1-line titles, rating present or
       not, price html empty when a product has no price set yet). Since
       .product-card-body is flex:1 and .product-card-media is stretched
       to a fixed aspect ratio, every card in a grid row ends up the same
       height (CSS Grid's default align-items: stretch) - so margin-top:
       auto here reliably lands every action button on the same line. */
    margin-top: auto;
}

.product-card-action .add_to_cart_button,
.product-card-action .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 18px;
    background: var(--shop-ink);
    color: #ffffff !important;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-card-action .add_to_cart_button:hover,
.product-card-action .button:hover {
    background: var(--shop-maroon);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 47, 52, 0.35);
}

.product-card-action .added_to_cart {
    /* WooCommerce auto-appends its own "View cart" link after a successful
       ajax add-to-cart. We replace that with our own persistent
       "Added to Cart" button (.mytheme-checkout-button below), so the
       default link is hidden to avoid duplicates.
       IMPORTANT: our own .mytheme-checkout-button link must NOT also carry
       the "added_to_cart" class, or this rule hides it too (that was the
       cause of the button going blank). */
    display: none !important;
}

/* --- "Added to Cart" confirmation state (briefly shown right after click) --- */

.product-card-action .add_to_cart_button.mytheme-just-added,
.product-card-action .button.mytheme-just-added {
    background: var(--shop-maroon);
    pointer-events: none;
}

.product-card-action .add_to_cart_button.mytheme-just-added::before,
.product-card-action .button.mytheme-just-added::before {
    content: '✓';
    margin-right: 6px;
    font-weight: 700;
}

/* --- "Already in cart" persistent state --------------------------------
   Shown instead of the Add to Cart button whenever the product is already
   sitting in the shopper's cart. Clicking it is just a plain link straight
   to the cart page - it never re-submits an add-to-cart request, so
   nothing gets added again. */

.product-card-action .mytheme-checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 13px 18px;
    background: var(--shop-ink);
    color: #ffffff !important;
    border: 2px solid var(--shop-ink);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-card-action .mytheme-checkout-button::before {
    content: '✓';
    font-weight: 700;
}

/* Full "Proceed to Checkout" label on larger screens, collapses to just
   "Checkout" on smaller/mobile screens (checkmark stays either way via
   the ::before above) - see the max-width: 768px block further down. */
.mytheme-checkout-text-short {
    display: none;
}

.product-card-action .mytheme-checkout-button:hover {
    background: #ffffff;
    color: var(--shop-ink) !important;
}

.product-card-outofstock .product-card-action .button {
    background: #e5e7eb;
    color: #6b7280 !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   Responsive
   ======================================== */

/* Large screens */
@media (max-width: 1200px) {
    .category-grid {
        gap: 20px;
    }

    .category-card {
        max-width: calc(25% - 15px);
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    .shop-section-title {
        font-size: 30px;
    }
}

/* Tablets */
@media (max-width: 992px) {

    .shop-categories-section,
    .shop-products-section {
        padding: 0 0 30px;
    }

    .category-grid {
        gap: 18px;
    }

    .category-card {
        max-width: calc(33.333% - 12px);
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .shop-section-header-split {
        gap: 16px;
    }

    .shop-section-title {
        font-size: 26px;
    }
}

/* Mobile */
@media (max-width: 768px) {

    .shop-categories-section,
    .shop-products-section {
        padding: 0 0 20px;
    }

    .shop-section-header {
        margin-bottom: 12px;
    }

    .shop-section-header-split {
        align-items: center;
        gap: 12px;
    }

    .shop-view-all {
        padding: 9px 16px;
        font-size: 12px;
        gap: 6px;
    }

    .shop-view-all svg {
        width: 14px;
        height: 14px;
    }

    .shop-section-header-actions {
        gap: 8px;
    }

    .shop-view-toggle-button {
        width: 32px;
        height: 30px;
    }

    .category-grid {
        gap: 14px;
    }

    .category-card {
        max-width: calc(50% - 7px);
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .product-card-body {
        padding: 14px;
        gap: 6px;
    }

    .product-card-title {
        font-size: 14px;
    }

    .product-card-price {
        font-size: 16px;
    }

    .product-gallery-button {
        opacity: 1;
    }

    .product-card-action .add_to_cart_button,
    .product-card-action .button {
        padding: 11px 14px;
        font-size: 13px;
    }

    .mytheme-checkout-text-full {
        display: none;
    }

    .mytheme-checkout-text-short {
        display: inline;
    }

    .category-card-name {
        font-size: 21px;
    }

    .category-card-plain-inner .category-card-name {
        font-size: 21px;
    }

    .category-card-count {
        font-size: 11px;
    }

    .category-card-body {
        padding: 14px 12px;
    }
}

/* Small mobile */
@media (max-width: 480px) {

    /* Gallery viewer stays true edge-to-edge full width/height of the
       device here - no outer padding - only the buttons shrink a touch
       so they don't crowd a small screen. */
    .product-media-lightbox-close {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .product-media-lightbox-button {
        width: 36px;
        height: 36px;
        font-size: 28px;
    }

    .product-media-lightbox-zoom-btn {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .category-grid {
        gap: 10px;
    }

    .category-card {
        max-width: calc(50% - 5px);
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .shop-section-title {
        font-size: 22px;
    }

    .shop-section-subtitle {
        font-size: 14px;
    }

    .shop-view-all {
        padding: 10px 20px;
        font-size: 13px;
    }

    .product-card-quickview {
        display: none;
        /* hover-only affordance doesn't make sense on touch screens */
    }
}

/* ========================================
   How It Works (Purchase & Delivery Steps)
   ======================================== */

.how-it-works-section {
    padding: 16px 0 70px;
    background: #f9fafb;
}

.how-it-works-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

.how-it-works-group-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--shop-ink);
    margin: 0 0 26px 0;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--shop-border);
}

.how-it-works-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.how-it-works-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.how-it-works-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 47, 52, 0.08);
    color: var(--shop-maroon);
}

.how-it-works-step-body {
    position: relative;
    flex: 1;
}

.how-it-works-step-number {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--shop-maroon);
    opacity: 0.6;
    margin-bottom: 2px;
}

.how-it-works-step-body h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--shop-ink);
    margin: 0 0 4px 0;
}

.how-it-works-step-body p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--shop-text-muted);
    margin: 0;
}

/* Connecting line between steps, skipped after the last item */
.how-it-works-step:not(:last-child) {
    position: relative;
}

.how-it-works-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 22px;
    top: 46px;
    width: 2px;
    height: 26px;
    background: var(--shop-border);
}

@media (max-width: 768px) {
    .how-it-works-section {
        padding: 10px 0 50px;
    }

    .how-it-works-columns {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ========================================
   Growhub collection and product finish
   ======================================== */

.shop-categories-section,
.shop-products-section {
    padding: 78px 0 30px;
    background: #f9fafb;
}

.shop-section-header {
    margin-bottom: 34px;
}

.shop-section-eyebrow {
    color: #004a52;
    font-size: 11px;
    letter-spacing: 2.2px;
}

.shop-section-title {
    font-family: Georgia, serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.5px;
}

.shop-section-subtitle {
    max-width: 580px;
    color: #6b7280;
    line-height: 1.7;
}

.shop-section-header-split {
    align-items: center;
}

.shop-view-all {
    padding: 11px 17px;
    border: 1px solid #002f34;
    border-radius: 4px;
    color: #002f34;
}

.shop-view-all:hover {
    background: #002f34;
    transform: translateY(-2px);
}

.category-grid {
    gap: 16px;
}

.category-card {
    max-width: calc(25% - 12px);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(20, 60, 45, 0.08);
}

.category-card:hover {
    box-shadow: 0 20px 44px rgba(20, 60, 45, 0.18);
}

.category-card-overlay {
    background: linear-gradient(to top, rgba(20, 60, 45, 0.82), rgba(20, 60, 45, 0.03) 70%);
}

.category-card:hover .category-card-overlay {
    background: linear-gradient(to top, rgba(20, 60, 45, 0.88), rgba(20, 60, 45, 0.16) 70%);
}

.category-card-name {
    font-family: Georgia, serif;
    font-size: 26px;
    font-weight: 400;
}

.category-card-plain-inner,
.category-card:nth-of-type(4n+2) .category-card-plain-inner,
.category-card:nth-of-type(4n+3) .category-card-plain-inner,
.category-card:nth-of-type(4n+4) .category-card-plain-inner {
    background: linear-gradient(145deg, #004a52, #002f34);
}

.product-grid {
    gap: 20px 16px;
}

.product-card {
    overflow: hidden;
    border: 1px solid #f9fafb;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(20, 60, 45, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(20, 60, 45, 0.14);
}

.product-card-media {
    background: #f9fafb;
}

.product-card-body {
    padding: 17px 17px 19px;
}

.product-card-category {
    color: #004a52;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.product-card-title {
    margin-top: 7px;
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.2;
}

.product-card-title a {
    color: #1f2937;
}

.product-card-price {
    color: #002f34;
    font-size: 17px;
    font-weight: 800;
}

.product-card-quickview,
.product-card-action .button {
    border-radius: 3px;
    background: #002f34;
    color: #ffffff;
}

.product-card-quickview:hover,
.product-card-action .button:hover {
    background: #004a52;
}

.product-card-badge,
.onsale {
    border-radius: 3px;
    background: #f59e0b;
    color: #002f34;
}

.single-product-page {
    background: #f9fafb;
}

.single-product-layout {
    gap: clamp(34px, 6vw, 90px);
}

.single-product-main-image,
.single-product-thumbnail {
    border-radius: 4px;
    background: #f9fafb;
}

.single-product-summary h1 {
    font-family: Georgia, serif;
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 400;
    line-height: 1.02;
}

.single-product-price {
    color: #002f34;
    font-size: 25px;
}

.single-product-purchase,
.single-product-information {
    border-color: #e5e7eb;
}

.single-product-information {
    background: #ffffff;
    border-radius: 4px;
}

@media (max-width: 992px) {
    .category-card {
        max-width: calc(50% - 8px);
    }
}

@media (max-width: 600px) {

    .shop-categories-section,
    .shop-products-section {
        padding-top: 54px;
    }

    .shop-section-header-split {
        align-items: flex-start;
        flex-direction: column;
    }

    .category-card {
        flex-basis: calc(50% - 8px);
        min-width: 0;
    }

    .category-card-name {
        font-size: 21px;
    }
}

/* Alternate editorial palette. */
.shop-categories-section,
.shop-products-section,
.single-product-page {
    background: #f9fafb;
}

.shop-section-eyebrow,
.product-card-category {
    color: #004a52;
}

.shop-section-title {
    color: #002f34;
}

.shop-section-subtitle {
    color: #6b7280;
}

.shop-view-all {
    border-color: #004a52;
    color: #004a52;
}

.shop-view-all:hover {
    background: #004a52;
}

.category-card {
    box-shadow: 0 10px 30px rgba(31, 93, 69, 0.1);
}

.category-card:hover {
    box-shadow: 0 20px 44px rgba(31, 93, 69, 0.2);
}

.category-card-overlay {
    background: linear-gradient(to top, rgba(31, 93, 69, 0.86), rgba(31, 93, 69, 0.04) 70%);
}

.category-card:hover .category-card-overlay {
    background: linear-gradient(to top, rgba(31, 93, 69, 0.92), rgba(44, 122, 120, 0.2) 70%);
}

.category-card-plain-inner,
.category-card:nth-of-type(4n+2) .category-card-plain-inner,
.category-card:nth-of-type(4n+3) .category-card-plain-inner,
.category-card:nth-of-type(4n+4) .category-card-plain-inner {
    background: linear-gradient(145deg, #004a52, #002f34);
}

.product-card {
    border-color: #e5e7eb;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(31, 93, 69, 0.07);
}

.product-card:hover {
    box-shadow: 0 18px 42px rgba(31, 93, 69, 0.16);
}

.product-card-media,
.single-product-main-image,
.single-product-thumbnail {
    background: #f9fafb;
}

.product-card-title a,
.single-product-summary h1 {
    color: #002f34;
}

.product-card-price,
.single-product-price {
    color: #002f34;
}

.product-card-quickview,
.product-card-action .button {
    background: #f59e0b;
    color: #ffffff;
}

.product-card-quickview:hover,
.product-card-action .button:hover {
    background: #002f34;
}

.product-card-badge,
.onsale {
    background: #f59e0b;
    color: #002f34;
}

.single-product-information {
    background: #ffffff;
    border-color: #e5e7eb;
}

/* --- Single product: keep the gallery beside the (now taller) summary ---
   The summary column grows with the Pot selector, which used to leave a big
   empty area to the left of it once the gallery scrolled past. On desktop
   the gallery now stays pinned in view (just under the fixed header) while
   the summary scrolls, so that space is never blank. */
@media (min-width: 861px) {
    .single-product-gallery {
        position: sticky;
        top: calc(var(--mytheme-navbar-height, 90px) + 24px);
    }
}

/* Tighter pot cards so the selector takes less height. */
.pot-selector .pot-choice {
    width: 116px;
    padding: 8px;
}

.pot-selector .pot-category-grid,
.pot-selector .pot-product-list {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.pot-selector .pot-category,
.pot-selector .pot-product {
    padding: 8px;
}

.pot-selector .pot-advanced-panel {
    padding: 10px;
}