/* .page-product .content-section h2 {

    max-width: 620px;

}



.product-detail {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);

    gap: clamp(28px, 6vw, 72px);

    align-items: start;

}



.product-detail__featured {

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: var(--radius-lg);

    background: var(--color-blush);

    box-shadow: var(--shadow-soft);

}



.product-detail__gallery {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 12px;

    margin-top: 14px;

}



.product-detail__gallery img {

    width: 100%;

    aspect-ratio: 1;

    object-fit: cover;

    border-radius: 16px;

}



.breadcrumb {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 18px;

    color: var(--color-muted);

}



.product-detail__badges {

    position: static;

    margin-bottom: 16px;

}



.product-detail__price {

    display: flex;

    align-items: baseline;

    gap: 14px;

    margin-bottom: 10px;

}



.product-detail__price strong {

    font-size: 1.8rem;

}



.product-detail__price s,

.product-detail__stock {

    color: var(--color-muted);

}



.product-variations {

    margin-top: 24px;

}



.product-variations div {

    display: flex;

    justify-content: space-between;

    gap: 16px;

    padding: 12px 0;

    border-bottom: 1px solid var(--color-border);

}



.product-purchase {

    display: grid;

    gap: 14px;

    margin: 26px 0 14px;

    padding: 20px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    background: #fff;

}



.product-purchase label {

    display: grid;

    gap: 8px;

}



.product-purchase select,

.product-purchase input {

    min-height: 48px;

    border: 1px solid var(--color-border);

    border-radius: 16px;

    padding: 0 14px;

}



.cart-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 360px;

    gap: 28px;

    align-items: start;

}



.cart-items {

    display: grid;

    gap: 16px;

}



.cart-item,

.wishlist-item,

.cart-summary {

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    background: #fff;

    box-shadow: var(--shadow-soft);

}



.cart-item {

    display: grid;

    grid-template-columns: 96px minmax(0, 1fr) 100px 150px 100px auto;

    gap: 16px;

    align-items: center;

    padding: 16px;

}



.cart-item__image {

    width: 96px;

    height: 96px;

    border-radius: 18px;

    background: var(--color-blush);

    overflow: hidden;

}



.cart-item__image img,

.wishlist-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.cart-item h2,

.wishlist-item h2 {

    margin-bottom: 6px;

    font-family: var(--font-body);

    font-size: 1rem;

}



.cart-quantity {

    display: grid;

    gap: 8px;

}



.cart-summary {

    position: sticky;

    top: 110px;

    display: grid;

    gap: 14px;

    padding: 24px;

}



.cart-summary p {

    display: flex;

    justify-content: space-between;

    gap: 18px;

    margin: 0;

}



.wishlist-grid {

    display: grid;

    gap: 16px;

}



.wishlist-item {

    display: grid;

    grid-template-columns: 120px minmax(0, 1fr);

    gap: 18px;

    padding: 16px;

}



.wishlist-item img {

    aspect-ratio: 1;

    border-radius: 18px;

}



.storefront-toast {

    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 999;

    max-width: min(360px, calc(100vw - 40px));

    padding: 14px 18px;

    border-radius: 18px;

    background: var(--color-ink);

    color: #fff;

    box-shadow: var(--shadow-soft);

    opacity: 0;

    transform: translateY(10px);

    pointer-events: none;

    transition: opacity 180ms ease, transform 180ms ease;

}



.storefront-toast.is-visible {

    opacity: 1;

    transform: translateY(0);

}



@media (max-width: 820px) {

    .product-detail {

        grid-template-columns: 1fr;

    }



    .cart-layout {

        grid-template-columns: 1fr;

    }



    .cart-summary {

        position: static;

    }



    .cart-item {

        grid-template-columns: 82px minmax(0, 1fr);

    }



    .cart-item > div,

    .cart-item > form,

    .cart-item > strong {

        grid-column: 2;

    }



    .cart-item__image {

        grid-column: 1;

        grid-row: 1 / span 4;

        width: 82px;

        height: 82px;

    }

}



@media (max-width: 520px) {

    .wishlist-item {

        grid-template-columns: 1fr;

    }

} */











/* ============================================================

   HOME PRODUCT SECTION

\============================================================ */



.home-products-section {

    padding: 82px 0;



    background: #fff;

}





.home-products-section--kids {

    background: #f8fbfb;

}





.home-products-title-row {

    display: flex;



    align-items: flex-end;

    justify-content: space-between;



    gap: 30px;



    margin-bottom: 30px;

}





.home-products-title-row h2 {

    margin: 0;



    color: #2b565e;



    font-family: "Outfit", sans-serif;

    font-size: clamp(2rem, 3vw, 3rem);

    font-weight: 600;



    line-height: 1.1;

}





.home-products-view-all {

    display: inline-flex;



    align-items: center;



    gap: 8px;



    padding-bottom: 5px;



    color: #2b565e;



    font-size: 0.86rem;

    font-weight: 600;

}





.home-products-view-all:hover {

    color: #1d454d;

}





/* ============================================================

   PRODUCT ROW

\============================================================ */



.shop-product-row {

    display: grid;



    grid-auto-flow: column;

    grid-auto-columns:

        calc((100% - 64px) / 5);



    gap: 16px;



    overflow-x: auto;



    padding:

        5px

        2px

        16px;



    scroll-snap-type: x proximity;



    scrollbar-width: thin;

}





.shop-product-row::-webkit-scrollbar {

    height: 5px;

}





.shop-product-row::-webkit-scrollbar-thumb {

    border-radius: 999px;



    background: #cbd9d7;

}





/* ============================================================

   PRODUCT CARD

\============================================================ */



.shop-product-card {

    min-width: 0;



    background: transparent;



    border: 0;



    box-shadow: none;



    text-align: center;



    scroll-snap-align: start;

}





/* ============================================================

   PRODUCT IMAGE

\============================================================ */



.shop-product-card__media {

    position: relative;



    overflow: hidden;



    width: 100%;



    background: transparent;



    border-radius: 8px;

}





.shop-product-card__image-link {

    display: block;

}





.shop-product-card__image-link img {

    display: block;



    width: 100%;



    aspect-ratio: 1 / 1;



    object-fit: cover;



    background: transparent;



    transition:

        transform 300ms ease;

}





.shop-product-card:hover

.shop-product-card__image-link img {

    transform: scale(1.02);

}





/* ============================================================

   SALE CORNER

\============================================================ */



.shop-product-card__sale {

    position: absolute;



    top: 12px;

    right: 12px;



    z-index: 4;



    display: flex;



    min-width: 78px;

    min-height: 30px;



    align-items: center;

    justify-content: center;



    padding:

        7px

        12px;



    background: #d93b45;



    color: #fff;



    border-radius: 999px;



    font-size: 0.67rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.06em;

    text-transform: uppercase;



    box-shadow:

        0 10px 24px

        rgba(217, 59, 69, 0.26);

    white-space: nowrap;

}





/* ============================================================

   HOVER ACTIONS

\============================================================ */



.shop-product-card__actions {

    position: absolute;



    left: 50%;

    bottom: 17px;



    z-index: 5;



    display: flex;



    gap: 9px;



    opacity: 0;



    visibility: hidden;



    transform:

        translate(-50%, 14px);



    transition:

        opacity 200ms ease,

        transform 200ms ease,

        visibility 200ms ease;

}





.shop-product-card:hover

.shop-product-card__actions {

    opacity: 1;



    visibility: visible;



    transform:

        translate(-50%, 0);

}





.product-action-btn {

    display: grid;



    width: 43px;

    height: 43px;



    place-items: center;



    padding: 0;



    border: 0;

    border-radius: 50%;



    background: #fff;



    color: #111;



    box-shadow:

        0 6px 20px

        rgba(0, 0, 0, 0.13);



    cursor: pointer;



    transition:

        background 180ms ease,

        color 180ms ease,

        transform 180ms ease;

}





.product-action-btn:hover {

    background: #2b565e;



    color: #fff;



    transform:

        translateY(-2px);

}





.product-action-btn svg {

    width: 20px;

    height: 20px;



    fill: none;



    stroke: currentColor;



    stroke-width: 1.8;

}





.product-action-btn span {

    display: block;



    margin-top: -5px;



    font-size: 1.15rem;

    font-weight: 600;



    letter-spacing: 1px;

}





/* ============================================================

   QUICK ADD PANEL

\============================================================ */



.product-quick-panel {

    position: absolute;



    inset:

        auto

        0

        0

        0;



    z-index: 10;



    padding:

        40px

        14px

        14px;



    max-height:

        calc(100% - 12px);



    overflow-y: auto;



    background:

        rgba(255, 255, 255, 0.99);



    opacity: 0;



    visibility: hidden;



    transform:

        translateY(100%);



    transition:

        opacity 240ms ease,

        transform 240ms ease,

        visibility 240ms ease;

}





.shop-product-card.quick-open

.product-quick-panel {

    opacity: 1;



    visibility: visible;



    transform:

        translateY(0);

}





.shop-product-card.quick-open

.shop-product-card__actions {

    opacity: 0;



    visibility: hidden;

}





.product-quick-panel__close {

    position: absolute;



    top: 11px;

    right: 14px;



    width: 24px;

    height: 24px;



    padding: 0;



    border: 0;



    background: transparent;



    color: #111;



    font-size: 1.7rem;

    font-weight: 500;



    line-height: 1;



    cursor: pointer;

}





.product-quick-panel__title {

    padding:

        0

        28px

        14px;



    color: #111;



    font-size: 0.9rem;

    font-weight: 500;



    text-align: center;

}





/* Options */



.product-quick-options {

    display: grid;



    gap: 10px;

}





.product-quick-options__group {

    min-width: 0;



    margin: 0;

    padding: 0;



    border: 0;

}





.product-quick-options__group legend,

.product-quantity-label {

    display: flex;



    align-items: baseline;

    gap: 6px;



    margin: 0 0 6px;



    color: #111;



    font-size: 0.92rem;

    font-weight: 400;

    letter-spacing: 0;

    text-align: left;

    text-transform: none;

}





.product-quick-options__group legend span {

    color: #6d6d6d;

}





.product-quick-options__group legend strong {

    color: #000;



    font-weight: 500;

}





.product-quick-options__values {

    display: flex;



    flex-wrap: wrap;



    gap: 6px;

}





.product-quick-option {

    min-height: 24px;



    padding:

        2px

        12px;



    border:

        1px

        solid

        #d9d9d9;



    border-radius: 4px;



    background: #fff;



    color: #222;



    font-family: inherit;

    font-size: 0.92rem;

    font-weight: 400;

    line-height: 1.2;



    cursor: pointer;



    transition:

        border-color 180ms ease,

        background 180ms ease,

        color 180ms ease,

        opacity 180ms ease;

}





.product-quick-option:hover,

.product-quick-option.is-selected {

    border-color: #000;



    background: #000;



    color: #fff;

}





.product-quick-option:disabled {

    opacity: 0.38;



    cursor: not-allowed;

}





.product-quick-options__message {

    min-height: 0;



    margin: 0;



    color: #b3261e;



    font-size: 0.76rem;

    text-align: left;

}





.product-quick-options__message:empty {

    display: none;

}





.product-quantity-label {

    display: none;

}





/* Quantity */



.product-quantity {

    display: grid;



    grid-template-columns:

        46px

        1fr

        46px;



    height: 48px;



    margin-top: 16px;



    overflow: hidden;



    border:

        1px

        solid

        #d9d9d9;



    border-radius: 10px;

}





.product-quantity button,

.product-quantity input {

    border: 0;



    background: transparent;



    text-align: center;

}





.product-quantity button {

    color: #222;



    font-size: 1.45rem;

    font-weight: 300;



    cursor: pointer;

}





.product-quantity input {

    width: 100%;



    color: #111;



    font-family: inherit;

    font-size: 0.95rem;



    outline: 0;



    appearance: textfield;

}





.product-quantity input::-webkit-inner-spin-button,

.product-quantity input::-webkit-outer-spin-button {

    margin: 0;



    appearance: none;

}





/* Quick add button */



.product-quick-panel__cart {

    width: 100%;



    min-height: 48px;



    margin-top: 12px;



    border:

        2px

        solid

        #111;



    border-radius: 10px;



    background: #fff;



    color: #111;



    font-family: "Outfit", sans-serif;

    font-size: 0.8rem;

    font-weight: 500;



    letter-spacing: 0.12em;



    cursor: pointer;



    transition:

        background 180ms ease,

        color 180ms ease;

}





.product-quick-panel__cart:hover {

    background: #111;



    color: #fff;

}





.product-quick-panel__cart:not(:disabled) {

    border-color: #000;

}





.product-quick-panel__cart:disabled,

.product-quick-panel__cart:disabled:hover {

    border-color: #d6d6d6;



    background: #f4f4f4;



    color: #8a8a8a;



    cursor: not-allowed;

}





/* ============================================================

   PRODUCT INFORMATION

\============================================================ */



.shop-product-card__content {

    padding:

        13px

        5px

        0;



    text-align: center;

}





.shop-product-card h3 {

    min-height: 0;



    margin:

        0

        0

        7px;



    color: #151515;



    font-family: "Outfit", sans-serif;

    font-size: 0.94rem;

    font-weight: 500;



    line-height: 1.3;



    text-align: center;

}





.shop-product-card h3 a {

    color: inherit;

}





.shop-product-card h3 a:hover {

    color: #2b565e;

}





/* ============================================================

   PRICE

\============================================================ */



.shop-product-card__price {

    display: flex;



    align-items: center;

    justify-content: center;



    gap: 8px;



    margin-bottom: 7px;



    text-align: center;

}





.current-price {

    color: #d3333e;



    font-size: 0.95rem;

    font-weight: 500;

}





.shop-product-card__price del {

    color: #8e8e8e;



    font-size: 0.82rem;

}





/* ============================================================

   RATING

\============================================================ */



.shop-product-card__rating {

    display: flex;



    align-items: center;

    justify-content: center;



    gap: 7px;



    margin-bottom: 13px;

}





.rating-stars {

    color: #f2a01f;



    font-size: 0.82rem;



    letter-spacing: 1px;

}





.rating-count {

    color: #7a7a7a;



    font-size: 0.73rem;

}





/* ============================================================

   ADD TO CART

\============================================================ */



.shop-product-card__cart {

    display: flex;



    width: 100%;



    min-height: 42px;



    align-items: center;

    justify-content: center;



    gap: 8px;



    padding:

        9px

        12px;



    border: 0;

    border-radius: 8px;



    background: #2b565e;



    color: #fff;



    font-family: "Outfit", sans-serif;

    font-size: 0.8rem;

    font-weight: 500;



    cursor: pointer;



    transition:

        background 180ms ease,

        transform 180ms ease;

}





.shop-product-card__cart svg {

    width: 17px;

    height: 17px;



    fill: none;



    stroke: currentColor;



    stroke-width: 1.7;

}





.shop-product-card__cart:hover {

    background: #1e474e;



    transform:

        translateY(-1px);

}





/* ============================================================

   TABLET

\============================================================ */



@media (max-width: 1100px) {



    .shop-product-row {

        grid-auto-columns:

            calc((100% - 45px) / 4);

    }



}





@media (max-width: 850px) {



    .shop-product-row {

        grid-auto-columns:

            calc((100% - 30px) / 3);

    }





    .home-products-title-row {

        align-items: flex-start;



        flex-direction: column;



        gap: 12px;

    }



}





/* ============================================================

   MOBILE

\============================================================ */



@media (max-width: 600px) {



    .home-products-section {

        padding:

            58px

            0;

    }





    .shop-product-row {

        grid-auto-columns:

            72vw;



        gap: 13px;

    }





    /*

     * Touch devices don't have hover.

     * Keep actions visible.

     */



    .shop-product-card__actions {

        bottom: 13px;



        opacity: 1;



        visibility: visible;



        transform:

            translate(-50%, 0);

    }





    .product-action-btn {

        width: 39px;

        height: 39px;

    }





    .shop-product-card h3 {

        font-size: 0.9rem;

    }



}


/* ============================================================
   PRODUCT CARDS — FINAL MOBILE EXPERIENCE
   Desktop / tablet styles above are intentionally preserved.
============================================================ */

.shop-product-card__price-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.shop-product-card__mobile-cart-form,
.shop-product-card__mobile-options-link {
    display: none;
}

@media (max-width: 760px) {

    /*
     * Mobile homepage cards:
     * image -> name -> price -> rating -> Add to Cart.
     * Hover / quick-action icons are desktop/tablet only.
     */
    .shop-product-card__actions,
    .shop-product-card.quick-open .shop-product-card__actions,
    .product-quick-panel {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .shop-product-row {
        grid-auto-columns: calc((100% - 12px) / 2);
        gap: 12px;
    }

    .shop-product-card__media {
        overflow: hidden;
        border-radius: 10px;
    }

    .shop-product-card__image-link,
    .shop-product-card__image-link img,
    .shop-product-card__placeholder {
        width: 100%;
    }

    .shop-product-card__image-link img,
    .shop-product-card__placeholder {
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    .shop-product-card__content {
        display: flex;
        flex-direction: column;
        padding: 10px 1px 0;
        text-align: left;
    }

    .shop-product-card h3 {
        order: 1;
        min-height: 0;
        margin: 0 0 6px;
        font-size: 0.82rem;
        line-height: 1.3;
        text-align: left;
    }

    .shop-product-card__price-link {
        order: 2;
    }

    .shop-product-card__price {
        justify-content: flex-start;
        gap: 6px;
        margin-bottom: 5px;
        text-align: left;
    }

    .current-price {
        font-size: 0.92rem;
        font-weight: 600;
    }

    .shop-product-card__price del {
        font-size: 0.72rem;
    }

    .shop-product-card__rating {
        order: 3;
        justify-content: flex-start;
        gap: 5px;
        margin-bottom: 10px;
    }

    .rating-stars {
        font-size: 0.68rem;
        letter-spacing: 0.5px;
    }

    .rating-count {
        font-size: 0.62rem;
    }

    .shop-product-card__desktop-variable {
        display: none !important;
    }

    .shop-product-card__mobile-cart-form,
    .shop-product-card__mobile-options-link {
        display: block;
        order: 4;
        width: 100%;
    }

    .shop-product-card__content > form:not(.shop-product-card__mobile-cart-form),
    .shop-product-card__content > .shop-product-card__cart {
        order: 4;
    }

    .shop-product-card__cart {
        width: 100%;
        min-height: 40px;
        padding: 9px 8px;
        border-radius: 8px;
        font-size: 0.73rem;
    }

    .shop-product-card__cart svg {
        width: 15px;
        height: 15px;
    }

    .shop-product-card__mobile-options-link {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
}

@media (max-width: 390px) {
    .shop-product-row {
        grid-auto-columns: calc((100% - 9px) / 2);
        gap: 9px;
    }

    .shop-product-card h3 {
        font-size: 0.78rem;
    }

    .shop-product-card__cart {
        font-size: 0.69rem;
    }
}

/* ============================================================
   HOMEPAGE PRODUCT CARDS — MOBILE SIZE / CENTRE ALIGNMENT
============================================================ */
@media (max-width: 760px) {
    /* Use more of the phone width so the two cards are visibly larger. */
    .page-home .home-products-section > .container {
        width: min(100% - 12px, var(--container));
    }

    .page-home .home-products-section .shop-product-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-columns: auto;
        gap: 22px 8px;
        overflow: visible;
        padding-right: 0;
        padding-left: 0;
    }

    .page-home .shop-product-card__image-link img,
    .page-home .shop-product-card__placeholder {
        aspect-ratio: 1 / 1.10;
    }

    .page-home .shop-product-card__content {
        align-items: center;
        padding: 11px 3px 0;
        text-align: center;
    }

    .page-home .shop-product-card h3 {
        width: 100%;
        margin-bottom: 6px;
        font-size: 18px;
        line-height: 1.3;
        text-align: center;
    }

    .page-home .shop-product-card__price-link {
        width: 100%;
    }

    .page-home .shop-product-card__price {
        justify-content: center;
        margin-bottom: 6px;
        text-align: center;
    }

    .page-home .shop-product-card .current-price {
        font-size: 1rem;
    }

    .page-home .shop-product-card__price del {
        font-size: 0.74rem;
    }

    .page-home .shop-product-card__rating {
        width: 100%;
        justify-content: center;
        margin-bottom: 11px;
        text-align: center;
    }

    .page-home .shop-product-card .rating-stars {
        font-size: 13px;
    }

    .page-home .shop-product-card .rating-count {
        font-size: 14px;
    }

    .page-home .shop-product-card__mobile-cart-form,
    .page-home .shop-product-card__mobile-options-link,
    .page-home .shop-product-card__content > form:not(.shop-product-card__mobile-cart-form) {
        width: 100%;
    }

    .page-home .shop-product-card__cart {
        min-height: 42px;
        font-size: 0.75rem;
    }
}

@media (max-width: 390px) {
    .page-home .home-products-section > .container {
        width: min(100% - 10px, var(--container));
    }

    .page-home .home-products-section .shop-product-row {
        gap: 20px 7px;
    }
}