/*
Theme Name: TeeCheap - Child
Text Domain: teecheap
Theme URI: https://harutheme.com/teecheap
Author: HaruTheme
Author URI: https://harutheme.com/
Description: This is child theme of TeeCheap
Template: teecheap
Version: 1.0.0
*/

/*---------------------------------
  	Write your css code from here
------------------------------------*/

:root {
    --color-white: #FFFFFF;

    --color-pink-300: #E8447D;
    --color-pink-500: #E0004E;

    --color-unavailable: #D9D9D9;
    --color-unavailable-text: #6E6E6E;
}

/* Apply Heebo font globally */
body,
h1, h2, h3, h4, h5, h6,
p, span, div, a, button, input, textarea, select, option,
.btn, .woocommerce button.button, .woocommerce a.button,
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce-cart-form, .woocommerce-checkout, .woocommerce-account,
.product-title, .product-price, .product-category,
table, th, td, li, ul, ol {
    font-family: 'Heebo', sans-serif !important;
}

/* Ensure proper font rendering */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* RTL support for Heebo font */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] div, [dir="rtl"] a, [dir="rtl"] button,
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] option {
    font-family: 'Heebo', sans-serif !important;
}

/*
 * Neutralize Haru parent-theme teal button defaults (#35b7a8).
 * Unstyled buttons stay transparent; classes / Woo .button keep their own styles.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    background-color: transparent;
    color: inherit;
    fill: currentColor;
    height: auto;
    min-height: 0;
    line-height: inherit;
}
button:hover,
[type="button"]:hover,
[type="reset"]:hover,
[type="submit"]:hover {
    background-color: transparent;
}

.ipop-custom-pink-button {
    background-color: var(--color-pink-300);
    color: var(--color-white);
    transition: all 0.2s;
}

.ipop-custom-pink-button:hover {
    background-color: var(--color-pink-500);
    color: var(--color-white);
}

/* Shopping Cart Popup - Enlarged for better readability and scrolling */
.haru-cart .haru-cart-wrap.cart-side .cart-side-widget {
    width: 450px !important;
}

.haru-cart .haru-cart-wrap.cart-side .cart-side-widget.in {
    width: 450px !important;
    transform: translateX(-100%) !important;
}

@media screen and (max-width: 768px) {
    .haru-cart .haru-cart-wrap.cart-side .cart-side-widget {
        width: 90vw !important;
        max-width: 450px !important;
        min-height: 90vh !important;
    }
    
    .haru-cart .haru-cart-wrap.cart-side .cart-side-widget.in {
        width: 90vw !important;
        max-width: 450px !important;
        min-height: 90vh !important;
        transform: translateX(-100%) !important;
    }
}

/* Hide untransformed cart items to prevent double display */
.woocommerce-mini-cart-item .cart-left,
.woocommerce-mini-cart-item .cart-right {
    opacity: 0 !important;
    display: none !important;
}

/* Show the custom transformed cart items */
.woocommerce-mini-cart-item .cart-item {
    opacity: 1 !important;
    display: flex !important;
}

/* Ensure cart body stays visible and maintains height */
.cart-side-widget {
    pointer-events: all !important;
}

.cart-side-widget .widget_shopping_cart,
.cart-side-widget .widget_shopping_cart_content,
.cart-side-widget .cart_list_wrap,
.cart-side-widget .cart_list_content {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 100px !important;
}

.cart-side-widget .cart_list {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================================
   IPOP Single Product — Mobile-first editorial design
   ============================================================ */

/* ── Google Fonts & Material Symbols loaded via functions.php enqueue ── */

/* Design tokens */
:root {
    --ipop-sp-primary:        #E8447D;   /* unified to brand primary */
    --ipop-sp-primary-dark:   #B4185B;   /* unified to premium deep magenta */
    --ipop-sp-on-primary:     #ffffff;
    --ipop-sp-surface:        #f8f9ff;
    --ipop-sp-surface-card:   #ffffff;
    --ipop-sp-surface-low:    #eff3ff;
    --ipop-sp-surface-cont:   #e6eeff;
    --ipop-sp-on-surface:     #131c29;
    --ipop-sp-on-variant:     #594046;
    --ipop-sp-outline:        #8c7075;
    --ipop-sp-outline-var:    #e0bec4;
    --ipop-sp-secondary:      #594046;
    --ipop-sp-sec-cont:       #ffd9e0;
    --ipop-sp-on-sec-cont:    #8f0042;
    --ipop-sp-tertiary:       #805200;
    --ipop-sp-tert-bg:        #a26800;
    --ipop-sp-on-tertiary:    #ffffff;
    --ipop-sp-radius:         1rem;
    --ipop-sp-radius-lg:      1.5rem;
    --ipop-sp-radius-xl:      2rem;
}

/* Wrapper */
.ipop-single-product {
    font-family: 'Heebo', sans-serif;
    direction: rtl;
    background: var(--ipop-sp-surface);
    color: var(--ipop-sp-on-surface);
    overflow-x: hidden;
}

.ipop-single-product,
.ipop-single-product *,
.ipop-single-product *::before,
.ipop-single-product *::after {
    box-sizing: border-box;
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.ipop-sp-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    /* Cap height so the image never eats the whole viewport — keeps the
       card details visible without excessive scrolling on mobile. */
    max-height: 58vh;
    background: var(--ipop-sp-surface-cont);
    overflow: hidden;
}

.ipop-sp-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .3s;
}

.ipop-sp-hero__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(128,82,0,.9);
    backdrop-filter: blur(8px);
    color: var(--ipop-sp-on-tertiary);
    font-size: .75rem;
    font-weight: 700;
    padding: .375rem .75rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: .25rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
}

/* thumbnails strip — lifted clear of the card overlap zone (the card climbs
   2.5rem up over the hero, so the strip must sit above that) */
.ipop-sp-hero__thumbnails {
    position: absolute;
    bottom: 3.25rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: .5rem;
    padding: .5rem 1rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.ipop-sp-hero__thumbnails::-webkit-scrollbar {
    display: none;
}

.ipop-sp-thumb {
    width: 3rem;
    height: 3rem;
    border-radius: .5rem;
    overflow: hidden;
    border: 2px solid transparent;
    background: #fff;
    padding: 0;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.ipop-sp-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #fff !important;
}

.ipop-sp-thumb--active,
.ipop-sp-thumb:hover {
    border-color: var(--ipop-sp-primary);
    box-shadow: inset 0 0 0 1px var(--ipop-sp-primary);
}

/* ── Details card ────────────────────────────────────────────────────── */
.ipop-sp-card {
    background: var(--ipop-sp-surface-card);
    border-radius: var(--ipop-sp-radius-xl) var(--ipop-sp-radius-xl) 0 0;
    margin-top: -1.5rem;
    position: relative;
    z-index: 10;
    padding: 1.5rem 1.25rem 2.5rem;
    box-shadow: 0 -8px 24px rgba(19,28,41,.08);
}

/* header */
.ipop-sp-card__header {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.ipop-sp-card__header .ipop-sp-card__title {
    flex: 1 1 100%;
}

.ipop-sp-card__title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: var(--ipop-sp-on-surface) !important;
    margin-bottom: .5rem !important;
}

.ipop-sp-card__pricing {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.ipop-sp-card__price {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--ipop-sp-primary-dark);
}

.ipop-sp-card__price--original {
    font-size: .875rem;
    color: var(--ipop-sp-outline);
    text-decoration: line-through;
}

/* description */
.ipop-sp-card__desc {
    color: var(--ipop-sp-on-variant);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: .95rem;
}

/* ── WooCommerce form styling ─────────────────────────────────────────── */
/* Scope border-box so full-width cells + padding never exceed the card and
   cause horizontal overflow (clipped chips / title on mobile). */
.ipop-sp-card__form,
.ipop-sp-card__form * {
    box-sizing: border-box;
}

.ipop-sp-card__form .variations {
    width: 100%;
    border: none !important;
    margin-bottom: 0.25rem !important;
    padding: 4px 0 !important;
}

.ipop-sp-card__form .variations td,
.ipop-sp-card__form .variations th {
    border: none;
    padding: 0;
    /* Cells must span the row so the chip grid has room to form columns
       rather than collapsing to its content width. */
    width: 100%;
    display: block;
}

.ipop-sp-card__form .variations tr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    margin-bottom: 0.3rem !important;
    padding: 2px 0 !important;
}

.ipop-sp-card__form .variations .label label {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ipop-sp-secondary);
}

/* ── Color swatches — circle + name caption (a11y / colour-blind support) ─ */
/* Real DOM classes: ul.color-attribute-wrap > li.variable-item.color-variable-item
   Each li carries an inline background-color and contains a hidden
   <span class="haru-tooltip"> with the colour name. We keep the coloured
   circle on the li and surface that name as a visible caption beneath it. */
.ipop-sp-card__form .color-attribute-wrap,
.ipop-sp-card__form ul.color-attribute-wrap {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1rem .75rem;
    list-style: none;
    padding: .5rem !important;
    margin: 0 !important;
    overflow: visible !important;
}

.ipop-sp-card__form .color-attribute-wrap li.variable-item {
    list-style: none;
    flex-shrink: 0;
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,.12) !important; /* keeps white visible on white bg */
    box-shadow: none;
    outline: 2px solid transparent;
    outline-offset: 3px;
    transition: outline-color .2s, box-shadow .2s;
    cursor: pointer;
    /* room beneath the circle for the colour-name caption */
    margin: 0 0 1.1rem 0 !important;
    padding: 0 !important;
    position: relative;
    overflow: visible !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Colour-name caption: show the tooltip span centred below the circle.
   The parent theme styles this as a hidden hover-bubble *above* the swatch
   with higher selector specificity, so each repositioning property needs
   !important to win. */
.ipop-sp-card__form .color-attribute-wrap li .haru-tooltip,
.ipop-sp-card__form .color-attribute-wrap li .button-tooltip {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: calc(100% + .3rem) !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 5rem !important;
    text-align: center !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    color: var(--ipop-sp-on-variant) !important;
    white-space: normal !important;
    pointer-events: none;
    /* reset the parent's dark tooltip-bubble styling */
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide the parent theme's tooltip pointer arrow */
.ipop-sp-card__form .color-attribute-wrap li .haru-tooltip:after,
.ipop-sp-card__form .color-attribute-wrap li .button-tooltip:after {
    display: none !important;
    content: none !important;
}

/* Hover — subtle ring */
.ipop-sp-card__form .color-attribute-wrap li:hover {
    outline-color: rgba(178,20,86,.35);
}

/* Selected state — solid outline ring with gap + emphasised caption */
.ipop-sp-card__form .color-attribute-wrap li.selected {
    outline-color: var(--ipop-sp-primary) !important;
    z-index: 2;
}

.ipop-sp-card__form .color-attribute-wrap li.selected .haru-tooltip,
.ipop-sp-card__form .color-attribute-wrap li.selected .button-tooltip {
    color: var(--ipop-sp-primary) !important;
    font-weight: 700 !important;
}

/* Checkmark inside selected swatch */
.ipop-sp-card__form .color-attribute-wrap li.selected::after {
    content: '✓';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
    pointer-events: none;
}

/* For very light swatches, use dark checkmark */
.ipop-sp-card__form .color-attribute-wrap li.selected[style*="ffffff"]::after,
.ipop-sp-card__form .color-attribute-wrap li.selected[style*="FFFFFF"]::after,
.ipop-sp-card__form .color-attribute-wrap li.selected[style*="#fff"]::after {
    color: var(--ipop-sp-primary);
    text-shadow: none;
}

/* Hide the ::before pseudo-element that haru uses for selected ring */
.ipop-sp-card__form .color-attribute-wrap li:before {
    display: none !important;
}

/* ── Label / size chips — catalog style: rounded-xl pills ────────────── */
/* Real DOM: select.haru-variation-select-box — convert to hidden + render
   custom chips via CSS targeting the existing select */
.ipop-sp-card__form .haru-label-swatches,
.ipop-sp-card__form ul.haru-label-swatches,
.ipop-sp-card__form .label-attribute-wrap,
.ipop-sp-card__form ul.label-attribute-wrap {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
    gap: .5rem;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

.ipop-sp-card__form .haru-label-swatches li,
.ipop-sp-card__form .label-attribute-wrap li.variable-item {
    list-style: none;
    width: 100%;
    cursor: pointer;
}

.ipop-sp-card__form .haru-label-swatches li a,
.ipop-sp-card__form .label-attribute-wrap li.variable-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 3.25rem;
    height: 3rem !important;
    padding: 0 .5rem;
    border-radius: .75rem;
    background: #e6eeff;
    color: var(--ipop-sp-on-surface);
    font-weight: 600;
    font-size: .95rem;
    border: none !important;
    box-shadow: none !important;
    transition: background .15s, color .15s;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Heebo', sans-serif;
    line-height: 1;
}

.ipop-sp-card__form .label-attribute-wrap li.variable-item:hover,
.ipop-sp-card__form .haru-label-swatches li a:hover {
    background: var(--ipop-sp-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(178,20,86,.25);
}

.ipop-sp-card__form .label-attribute-wrap li.selected,
.ipop-sp-card__form .haru-label-swatches li.selected a {
    background: var(--ipop-sp-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(178,20,86,.25) !important;
}

.ipop-sp-card__form .label-attribute-wrap li.haru-li-disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Select fallback (size/color if attribute type is plain select) ──── */
/* When converted to chips by JS, hide the select */
.ipop-sp-card__form select.haru-variation-select-box.ipop-select-hidden,
.ipop-sp-card__form .variations select.ipop-select-hidden,
/* Label-type attributes render a paired <select class="hide"> alongside the
   <ul.label-attribute-wrap> chips — keep that hidden so only chips show. */
.ipop-sp-card__form .variations select.hide {
    display: none !important;
}

.ipop-sp-card__form select.haru-variation-select-box,
.ipop-sp-card__form .variations select {
    width: 100%;
    padding: .6rem 1rem;
    border-radius: .75rem;
    border: 1.5px solid var(--ipop-sp-outline-var);
    background: var(--ipop-sp-surface-low);
    color: var(--ipop-sp-on-surface);
    font-family: 'Heebo', inherit;
    font-size: .95rem;
    -webkit-appearance: auto;
    appearance: auto;
    margin-bottom: .5rem;
}

/* ── Size chip buttons generated by JS ──────────────────────────────── */
/* Equal-width grid: chips line up in tidy rows of uniform cells regardless
   of label length (S, M, 2XL, 18 all occupy the same footprint). */
.ipop-size-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
    gap: .5rem;
    margin-top: .25rem;
    width: 100%;
}

.ipop-size-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3rem;
    padding: 0 .5rem;
    border-radius: .75rem;
    background: #e6eeff;
    color: var(--ipop-sp-on-surface);
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    line-height: 1;
    user-select: none;
}

.ipop-size-chip:hover {
    background: var(--ipop-sp-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(178,20,86,.25);
}

.ipop-size-chip.ipop-size-chip--active {
    background: var(--ipop-sp-primary) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(178,20,86,.28);
}

/* quantity */
.ipop-sp-card__form .quantity {
    display: flex;
    align-items: center;
    background: var(--ipop-sp-surface-low);
    border-radius: 1rem;
    padding: .25rem;
    width: fit-content;
    margin-bottom: 1.25rem;
    gap: 0;
}

.ipop-sp-card__form .quantity input[type="number"] {
    width: 3rem;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    background: transparent;
    color: var(--ipop-sp-on-surface);
    -moz-appearance: textfield;
    appearance: textfield;
}

.ipop-sp-card__form .quantity input[type="number"]::-webkit-outer-spin-button,
.ipop-sp-card__form .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* add to cart button */
.ipop-sp-card__form .single_add_to_cart_button,
.ipop-sp-card__form button[type="submit"].button {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    background: linear-gradient(135deg, var(--ipop-sp-primary), var(--ipop-sp-primary-dark)) !important;
    color: var(--ipop-sp-on-primary) !important;
    font-family: 'Heebo', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 1rem !important;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(178,20,86,.3) !important;
    transition: transform .15s, box-shadow .15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-top: .5rem !important;
}

.ipop-sp-card__form .single_add_to_cart_button:hover,
.ipop-sp-card__form button[type="submit"].button:hover {
    transform: translateY(-1px) scale(1.01) !important;
    box-shadow: 0 12px 32px rgba(178,20,86,.35) !important;
}

.ipop-sp-card__form .single_add_to_cart_button:active,
.ipop-sp-card__form button[type="submit"].button:active {
    transform: scale(.98) !important;
}

/* variation price update */
.ipop-sp-card__form .woocommerce-variation-price .woocommerce-Price-amount {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--ipop-sp-primary-dark);
}

/* reset link */
.ipop-sp-card__form .reset_variations {
    font-size: .8rem;
    color: var(--ipop-sp-secondary);
    text-decoration: underline;
}

/* ── Specs bento ─────────────────────────────────────────────────────── */
.ipop-sp-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: 2rem;
}

.ipop-sp-specs__item {
    background: var(--ipop-sp-surface-low);
    border-radius: var(--ipop-sp-radius);
    padding: .9rem;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.ipop-sp-specs__item .material-symbols-outlined {
    color: var(--ipop-sp-secondary);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.ipop-sp-specs__item strong {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ipop-sp-on-surface);
    margin-bottom: .1rem;
}

.ipop-sp-specs__item span {
    font-size: .75rem;
    color: var(--ipop-sp-on-variant);
}

/* ── WhatsApp FAB ────────────────────────────────────────────────────── */
.ipop-sp-whatsapp {
    position: fixed;
    bottom: 5.5rem;
    right: 1.25rem;
    width: 3.5rem;
    height: 3.5rem;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px -4px rgba(19,28,41,.15);
    color: #25D366;
    z-index: 100;
    transition: transform .2s;
    text-decoration: none;
}

.ipop-sp-whatsapp:hover {
    transform: scale(1.1);
}

/* ── Bulk order CTA button ─────────────────────────────────────────────── */
.ipop-sp-bulk-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: .75rem;
    padding: .875rem 1.25rem;
    background: var(--ipop-sp-sec-cont, #ffd9e0);
    color: var(--ipop-sp-on-sec-cont, #8f0042);
    border: 1.5px solid rgba(178,20,86,.2);
    border-radius: 1rem;
    font-family: 'Heebo', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, transform .15s, filter .15s;
    cursor: pointer;
}

.ipop-sp-bulk-btn:hover {
    background: #ffb1c3;
    color: #3f0019;
}

.ipop-sp-bulk-btn:active {
    transform: scale(.98);
}

.ipop-sp-bulk-btn .material-symbols-outlined {
    font-size: 1.25rem;
}

/* ── Product tabs & related products — keep existing theme below fold ── */
.single-product-bottom {
    padding: 0 1rem;
}

/* ── Quantity picker overrides for the new design ─────────────────────── */
.ipop-sp-card__form .quantity.buttons_added {
    display: flex !important;
    align-items: center;
    background: var(--ipop-sp-surface-low);
    border-radius: 1rem;
    padding: .25rem;
    width: fit-content;
    margin-bottom: 1.25rem;
    border: none !important;
    box-shadow: none !important;
}

.ipop-sp-card__form .quantity.buttons_added .minus,
.ipop-sp-card__form .quantity.buttons_added .plus {
    width: 2.5rem !important;
    height: 2.5rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: .75rem !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--ipop-sp-on-surface) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s;
    padding: 0 !important;
    line-height: 1 !important;
}

.ipop-sp-card__form .quantity.buttons_added .minus:hover,
.ipop-sp-card__form .quantity.buttons_added .plus:hover {
    background: var(--ipop-sp-surface-cont) !important;
}

/* ── Back-to-top: compact size ─────────────────────────────────── */
.back-to-top {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    right: 12px !important;
    border-radius: 6px !important;
    opacity: 0.65;
}

.back-to-top:before {
    font-size: 14px !important;
}

.back-to-top.in {
    bottom: 80px !important;
}

.back-to-top:hover {
    opacity: 1;
}

@media screen and (max-width: 767px) {
    .back-to-top {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        right: 8px !important;
    }
}

/* ── Product page: remove page-title top bar spacing ────────────── */
.single-product .haru-page-title {
    display: none !important;
}

.single-product .haru-single-product {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.single-product .single-product-inner {
    padding-top: 0 !important;
}

/* ── Desktop layout: two-column side-by-side ────────────────────── */
@media (min-width: 768px) {

    /* Constrain the whole product to a readable max-width and center it */
    .ipop-single-product {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        align-items: start;
        gap: 0 2.5rem;
        padding: 2rem 1.5rem 4rem;
    }

    /* Hero stays in left column, no more full-width stretch */
    .ipop-single-product .ipop-sp-hero {
        grid-column: 1;
        grid-row: 1;
        border-radius: 1.5rem;
        aspect-ratio: 3/4;
        max-height: none;
        overflow: hidden;
        position: sticky;
        top: 100px;
    }

    /* On desktop the card no longer overlaps the hero, so put the thumbnail
       strip back at the bottom edge of the image. */
    .ipop-single-product .ipop-sp-hero__thumbnails {
        bottom: .75rem;
    }

    /* Cap chip grid so sizes stay compact, not stretched across the column */
    .ipop-sp-card__form .haru-label-swatches,
    .ipop-sp-card__form ul.haru-label-swatches,
    .ipop-sp-card__form .label-attribute-wrap,
    .ipop-sp-card__form ul.label-attribute-wrap,
    .ipop-size-chips {
        grid-template-columns: repeat(auto-fill, 3.25rem);
    }

    /* Card goes in right column */
    .ipop-single-product .ipop-sp-card {
        grid-column: 2;
        grid-row: 1;
        border-radius: 1.5rem;
        margin-top: 0;
        padding: 2rem 1.75rem 2.5rem;
        box-shadow: 0 4px 32px rgba(0,0,0,.07);
    }

    /* Theme compatibility stubs don't affect layout */
    .ipop-single-product > .single-product-image-wrap,
    .ipop-single-product > .single-product-summary {
        display: none !important;
    }

    /* Title a bit larger on desktop */
    .ipop-sp-card__title {
        font-size: 1.8rem !important;
    }

    /* Add-to-cart button — keep width natural on desktop */
    .ipop-sp-card__form .single_add_to_cart_button,
    .ipop-sp-card__form button[type="submit"].button {
        width: 100% !important;
    }
}

/* ── Large desktop: give a little more breathing room ──────────── */
@media (min-width: 1200px) {
    .ipop-single-product {
        max-width: 1200px;
        gap: 0 3.5rem;
        padding: 2.5rem 2rem 5rem;
    }
}