/**

 * Theme Name:     Hartwell
 * Author:         NA
 * Template:       generatepress
 * Text Domain:	   hartwell
 * Description:    Hartwell Website
 */

.pillar-float {
    animation: pillarFloat 4s ease-in-out infinite;
}

@keyframes pillarFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-12px) rotate(-2deg);
    }
}

.wc-block-components-form .wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input.is-active input[type=email],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=number],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=password],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=tel],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=text],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=url],
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input.is-active input[type=email],
.wc-block-components-text-input.is-active input[type=number],
.wc-block-components-text-input.is-active input[type=password],
.wc-block-components-text-input.is-active input[type=tel],
.wc-block-components-text-input.is-active input[type=text],
.wc-block-components-text-input.is-active input[type=url],
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-form .wc-block-components-text-input input[type=email],
.wc-block-components-form .wc-block-components-text-input input[type=number],
.wc-block-components-form .wc-block-components-text-input input[type=password],
.wc-block-components-form .wc-block-components-text-input input[type=tel],
.wc-block-components-form .wc-block-components-text-input input[type=text],
.wc-block-components-form .wc-block-components-text-input input[type=url],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=number],
.wc-block-components-text-input input[type=password],
.wc-block-components-text-input input[type=tel],
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=url] {
    padding: 36px 9px 17px !important;
    border: 1px solid rgba(0, 0, 0, .5);
}

:root :where(.wp-element-button, .wp-block-button__link) {
    background-color: var(--accent);
    border-radius: 255px;
}


.hartwell-glow {
    position: relative;
    isolation: isolate;
}

.wp-block-separator {
    border-color: rgba(0, 0, 0, .05) !important;
}

/* Animated border highlight */
.hartwell-glow::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;

    background: conic-gradient(from var(--glow-angle),
            transparent 0deg,
            transparent 315deg,
            rgba(201, 154, 84, 0.15) 325deg,
            #d9aa63 340deg,
            #ffe0a3 350deg,
            #d9aa63 360deg);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    animation: hartwell-border-spin 4s linear infinite;
}

@property --glow-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes hartwell-border-spin {
    to {
        --glow-angle: 360deg;
    }
}

.hartwell-icon-glow {
    animation: hartwell-icon-pulse 3.5s ease-in-out infinite;
}

@keyframes hartwell-icon-pulse {

    0%,
    100% {
        filter:
            drop-shadow(0 0 2px rgba(255, 255, 255, 0.15)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.08));
    }

    50% {
        filter:
            drop-shadow(0 0 4px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.12));
    }
}

.user-account {
    margin-right: 0 !important;
}

.page-header,
.sidebar .widget,
.site-main>* {
    margin-bottom: 0;
}

.hartwell-breadcrumb {
    font-size: 13px;
}

.hartwell-breadcrumb-separator {
    margin: 0 11px;
}

.gb-accordion__toggle:is(.gb-block-is-current, .gb-block-is-current:hover, .gb-block-is-current:focus) {
    font-weight: 400 !important;
}

#masthead button,
#masthead html {
    background-color: rgba(0, 0, 0, 0) !important;
}

.inside-navigation .menu-bar-items {
    display: none;
}

.woocommerce-archive-wrapper {
    padding: 17px 30px 35px 30px;
}

.woocommerce-archive-wrapper .inside-article {
    max-width: 1540px;
    margin: 0 auto;
}

.woocommerce-archive-wrapper .entry-content {
    background-color: var(--base-2);
}


/* ==========================================================
   HARTWELL
   GLOBAL VARIABLES
========================================================== */

:root {
    --hartwell-accent-dark: #572426;
    --hartwell-gold: #c99b5c;

    --hartwell-text: #111;
    --hartwell-text-muted: #8e8e8e;
    --hartwell-price-muted: #9c9c9c;

    --hartwell-image-bg: #f2f0ef;
    --hartwell-modal-image-bg: #f2efed;

    --hartwell-stock: #67a86c;

    --hartwell-card-radius: 11px !important;
    --hartwell-pill-radius: 999px;

    --hartwell-grid-gap: 24px;
}


/* ==========================================================
   01. WOOCOMMERCE PRODUCT GRID
========================================================== */

.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--hartwell-grid-gap) !important;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* Remove old WooCommerce clearfix behavior */

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
    content: none !important;
}


/* Kill legacy WooCommerce float / width / margin layout */

.woocommerce ul.products li.product {
    float: none !important;
    clear: none !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

}


/* ==========================================================
   02. PRODUCT CARD
========================================================== */

.hartwell-product-card {
    width: 100%;
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none;
}


.hartwell-card-inner {
    position: relative;

    display: flex;
    flex-direction: column;

    height: 100%;

    background: #fff;

    border-radius: var(--hartwell-card-radius);
    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.hartwell-product-card:hover .hartwell-card-inner {
    transform: translateY(-4px);

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.08);
}


/* ==========================================================
   03. PRODUCT IMAGE AREA
========================================================== */

.hartwell-product-image-wrap {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    background: var(--hartwell-image-bg);

    overflow: hidden;
}


.hartwell-product-image-link {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    background: #EEECEB;
}


/* ==========================================================
   04. PRODUCT IMAGES
========================================================== */

.hartwell-product-image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;
    object-position: center;

    transition:
        opacity 0.4s ease,
        transform 0.5s ease;
}


/* Primary image */

.hartwell-product-image--primary {
    z-index: 1;
    opacity: 1;
}


/* Second gallery image */

.hartwell-product-image--hover {
    z-index: 2;
    opacity: 0;
}


/*
   Only swap images if PHP added .has-hover-image.
   Products without a second gallery image remain unchanged.
*/

.hartwell-product-image-link.has-hover-image:hover .hartwell-product-image--primary {
    opacity: 0;
}


.hartwell-product-image-link.has-hover-image:hover .hartwell-product-image--hover {
    opacity: 1;
}


/* Subtle zoom */

.hartwell-product-image-link:hover .hartwell-product-image {
    transform: scale(1.025);
}


/* ==========================================================
   05. PRODUCT BADGES
========================================================== */

.hartwell-badges {
    position: absolute;

    top: 20px;
    left: 20px;

    z-index: 10;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    pointer-events: none;
}


.hartwell-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 0 16px;

    border-radius: var(--hartwell-pill-radius);

    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;
}


/* Popular */

.hartwell-badge--popular {
    background: var(--accent);
    color: #fff;
}


/* Sale */

.hartwell-badge--sale {
    background: var(--hartwell-gold);
    color: #fff;
}


/* ==========================================================
   06. QUICK VIEW ICON BUTTON
========================================================== */

.hartwell-quick-view-wrap {
    position: absolute;

    right: 20px;
    bottom: 20px;

    z-index: 10;
}


.hartwell-quick-view {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin: 0 !important;
    padding: 0 !important;

    border: 1.5px solid var(--accent) !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--accent) !important;

    box-shadow: none !important;

    cursor: pointer;
    appearance: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.hartwell-quick-view:hover {
    background: var(--accent) !important;
    color: #fff !important;

    transform: scale(1.04);
}


.hartwell-quick-view:focus {
    outline: none;
}


.hartwell-quick-view-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    line-height: 1;
}


.hartwell-quick-view-icon svg {
    display: block;

    width: 24px;
    height: 24px;

    margin: 0;
    padding: 0;
}


/* ==========================================================
   07. PRODUCT CARD CONTENT
========================================================== */

.hartwell-product-content {
    position: relative;
    z-index: 5;

    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 23px;

    background: #fff;

    transition:
        transform 0.35s ease;
}


/* ==========================================================
   08. PRODUCT TITLE
========================================================== */

.hartwell-product-title-link {
    display: block;

    color: inherit !important;
    text-decoration: none !important;
}


.hartwell-product-title-link:hover {
    color: inherit !important;
    text-decoration: none !important;
}


.hartwell-product-title {
    margin: 0;

    font-family: inherit;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.08;

    color: var(--hartwell-text);
}


/* ==========================================================
   09. PRODUCT CATEGORY
========================================================== */

.hartwell-research-category {
    margin-top: 20px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.03em;
    text-transform: uppercase;

    color: var(--hartwell-gold);
}


/* ==========================================================
   10. PRODUCT PRICE
========================================================== */

.hartwell-product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 26px;
}


/* Sale price */

.hartwell-sale-price {
    color: #DE2929 !important;
    ;

    font-size: 23px;
    font-weight: 700;
    line-height: 1;
}


/* Original retail price */

.hartwell-regular-price {
    color: var(--hartwell-price-muted);

    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    text-decoration: line-through;
    text-decoration-thickness: 1px;
}


/* Discount percentage */

.hartwell-discount {
    width: fit-content;
    flex: 0 0 auto;

    margin-top: 8px;
    padding: 0;
    color: #DE2929;

    font-size: 15px;
    font-weight: 500;
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hartwell-discount {
    margin-top: 8px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #f8f0e4;
    color: #DE2929;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Force discount onto a new line */
.hartwell-discount::before {
    content: "";
}


/* WooCommerce cleanup */

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


.hartwell-product-price del {
    color: inherit;
    opacity: 1;
}


.hartwell-product-price .woocommerce-Price-amount {
    margin: 0;
}


/* ==========================================================
   11. STOCK
========================================================== */

.hartwell-stock {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 24px;

    font-size: 14px;
    line-height: 1.2;

    color: var(--hartwell-text-muted);
}


.hartwell-stock-dot {
    display: block;

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: var(--hartwell-stock);
}


.hartwell-stock--out {
    color: #999;
}


/* ==========================================================
   12. CARD ADD TO CART — DESKTOP UPWARD REVEAL
========================================================== */

/*
   Desktop:
   - Card height stays fixed.
   - Product content slides upward into the image.
   - Add to Cart is revealed underneath the stock row.
*/

.hartwell-hover-cart {
    position: absolute;

    top: 100%;
    left: 0;
    right: 0;

    width: auto;

    padding: 0px 34px 34px;

    background: #fff;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.22s ease;
}


@media (hover: hover) and (min-width: 1025px) {

    .hartwell-product-card:hover .hartwell-product-content {
        transform: translateY(-68px);
    }


    .hartwell-product-card:hover .hartwell-hover-cart {
        opacity: 1;
        pointer-events: auto;
    }

}


/* ==========================================================
   13. CARD ADD TO CART BUTTON
========================================================== */

.hartwell-full-cart,
.hartwell-full-cart.button,
.hartwell-full-cart.add_to_cart_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 54px !important;

    box-sizing: border-box;

    margin: 0 !important;
    padding: 14px 24px !important;

    border: 0 !important;
    border-radius: var(--hartwell-pill-radius) !important;

    background: var(--accent) !important;
    color: #fff !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-align: center !important;
    text-decoration: none !important;

    box-shadow: none !important;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.hartwell-full-cart:hover {
    background: var(--hartwell-accent-dark) !important;
    color: #fff !important;

    transform: translateY(-1px);
}


/* ==========================================================
   14. QUICK VIEW — CLOSED STATE
========================================================== */

.hartwell-qv:not(:popover-open) {
    display: none;
}


/* ==========================================================
   15. QUICK VIEW — POPOVER
========================================================== */

.hartwell-qv {
    position: fixed;

    top: 50%;
    left: 50%;

    width: min(1040px, calc(100vw - 40px));
    max-height: calc(100vh - 60px);

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 24px;

    background: #fff;
    color: var(--hartwell-text);

    transform: translate(-50%, -50%);

    overflow: auto;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.25);
}


/* Quick View backdrop */

.hartwell-qv::backdrop {
    background: rgba(20, 16, 15, 0.68);

    backdrop-filter: blur(4px);
}


/* Quick View opening animation */

.hartwell-qv:popover-open {
    display: block;

    animation: hartwellQvIn 0.25s ease;
}


@keyframes hartwellQvIn {

    from {
        opacity: 0;

        transform:
            translate(-50%, -48%) scale(0.98);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, -50%) scale(1);
    }

}


/* ==========================================================
   16. QUICK VIEW — INNER
========================================================== */

.hartwell-qv-inner {
    position: relative;

    width: 100%;
}


/* ==========================================================
   17. QUICK VIEW — CLOSE BUTTON
========================================================== */

.hartwell-qv-close {
    position: absolute;

    top: 20px;
    right: 20px;

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: var(--hartwell-text);

    cursor: pointer;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.08);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.hartwell-qv-close:hover {
    background: var(--accent);

    transform: scale(1.04);
}


/* CSS-drawn X */

.hartwell-qv-close-line {
    position: absolute;

    width: 18px;
    height: 1.5px;

    background: var(--hartwell-text);

    border-radius: 99px;

    transition:
        background 0.2s ease;
}


.hartwell-qv-close-line--one {
    transform: rotate(45deg);
}


.hartwell-qv-close-line--two {
    transform: rotate(-45deg);
}


.hartwell-qv-close:hover .hartwell-qv-close-line {
    background: #fff;
}


/* ==========================================================
   18. QUICK VIEW — GRID
========================================================== */

.hartwell-qv-grid {
    display: grid;

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

    min-height: 620px;
}


/* ==========================================================
   19. QUICK VIEW — IMAGE
========================================================== */

.hartwell-qv-image {
    position: relative;

    min-height: 620px;

    background: var(--hartwell-modal-image-bg);

    overflow: hidden;
}


.hartwell-qv-image a {
    display: block;

    width: 100%;
    height: 100%;
}


.hartwell-qv-product-image {
    display: block;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================
   20. QUICK VIEW — CONTENT
========================================================== */

.hartwell-qv-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 70px 64px;
}


/* Category */

.hartwell-qv-category {
    margin-bottom: 18px;

    color: var(--hartwell-gold);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* Title */

.hartwell-qv-title {
    margin: 0;

    font-size: 44px;
    font-weight: 400;
    line-height: 1.05;

    color: var(--hartwell-text);
}


.hartwell-qv-title a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================
   21. QUICK VIEW — PRICE
========================================================== */

.hartwell-qv-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 28px;
}


.hartwell-qv-sale-price,
.hartwell-qv-standard-price {
    color: var(--accent);

    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}


.hartwell-qv-regular-price {
    color: var(--hartwell-price-muted);

    font-size: 22px;
    font-weight: 400;

    text-decoration: line-through;
}


.hartwell-qv-discount {
    color: var(--hartwell-text);

    font-size: 22px;
    font-weight: 700;
}


/* ==========================================================
   22. QUICK VIEW — DESCRIPTION
========================================================== */

.hartwell-qv-description {
    margin-top: 30px;

    color: #565656;

    font-size: 16px;
    line-height: 1.65;
}


.hartwell-qv-description p {
    margin: 0 0 16px;
}


.hartwell-qv-description p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   23. QUICK VIEW — STOCK
========================================================== */

.hartwell-qv-stock {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 26px;

    color: #8d8d8d;

    font-size: 14px;
}

/* ==========================================================
   QUICK VIEW QUANTITY STEPPER
========================================================== */

.hartwell-qv-quantity {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hartwell-qv-quantity label {
    color: #777;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.hartwell-qv-quantity-control {
    display: grid;
    grid-template-columns: 42px 1fr 42px;

    width: 100%;
    height: 54px;

    border: 1px solid #ddd;
    border-radius: 999px;

    background: #fff;

    overflow: hidden;
}


/* NUMBER INPUT */

.hartwell-qv-quantity-control input[type="number"] {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    color: #111 !important;
    -webkit-text-fill-color: #111 !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 54px !important;

    text-align: center !important;

    opacity: 1 !important;
    visibility: visible !important;

    outline: none !important;

    -moz-appearance: textfield;
    appearance: textfield;
}


/* Hide browser's native arrows */

.hartwell-qv-quantity-control input[type="number"]::-webkit-outer-spin-button,
.hartwell-qv-quantity-control input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}


/* +/- BUTTONS */

.hartwell-qv-qty-btn {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
    color: var(--accent) !important;

    cursor: pointer;

    box-shadow: none !important;

    transition:
        background 0.2s ease;
}

.hartwell-qv-qty-btn:hover {
    background: rgba(113, 48, 50, 0.08) !important;
}


/* DIVIDERS */

.hartwell-qv-qty-minus {
    border-right: 1px solid #eee !important;
}

.hartwell-qv-qty-plus {
    border-left: 1px solid #eee !important;
}


/* CSS MINUS */

.hartwell-qv-minus-line {
    display: block;

    width: 14px;
    height: 1.5px;

    background: currentColor;

    border-radius: 99px;
}


/* CSS PLUS */

.hartwell-qv-plus-line {
    position: absolute;

    display: block;

    background: currentColor;

    border-radius: 99px;
}

.hartwell-qv-plus-line--horizontal {
    width: 14px;
    height: 1.5px;
}

.hartwell-qv-plus-line--vertical {
    width: 1.5px;
    height: 14px;
}



/* ==========================================================
   24. QUICK VIEW — QUANTITY + CART
========================================================== */

.hartwell-qv-cart {
    display: grid;

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

    gap: 12px;

    margin-top: 34px;
}


/* Quantity */

.hartwell-qv-quantity {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.hartwell-qv-quantity label {
    color: #777;

    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
}


.hartwell-qv-quantity input {
    width: 100%;
    height: 54px;

    box-sizing: border-box;

    padding: 0 16px;

    border: 1px solid #ddd;
    border-radius: var(--hartwell-pill-radius);

    background: #fff;
    color: var(--hartwell-text);

    font-size: 16px;
    text-align: center;

    outline: none;
}


.hartwell-qv-quantity input:focus {
    border-color: var(--accent);
}


/* Quick View Add to Cart */

.hartwell-qv-add {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100%;
    min-height: 54px;

    box-sizing: border-box;

    margin-top: 34px;

    padding: 14px 26px;

    border: 0;
    border-radius: var(--hartwell-pill-radius);

    background: var(--accent);
    color: #fff;

    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.2s ease;
}


.hartwell-qv-cart .hartwell-qv-add {
    margin-top: 19px;
}


.hartwell-qv-add:hover {
    background: var(--hartwell-accent-dark);
    color: #fff;
}


/* ==========================================================
   25. QUICK VIEW — FULL PRODUCT LINK
========================================================== */

.hartwell-qv-full-link {
    display: inline-block;

    width: fit-content;

    margin-top: 24px;

    color: var(--accent);

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
}


.hartwell-qv-full-link:hover {
    text-decoration: underline;
}


/* ==========================================================
   26. TABLET
   4 columns ? 2 columns
========================================================== */

@media (max-width: 1024px) {

    .woocommerce ul.products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px !important;
    }


    /* Card */

    .hartwell-product-content {
        padding: 24px;
    }


    .hartwell-product-title {
        font-size: 22px;
    }


    .hartwell-research-category {
        margin-top: 16px;
        font-size: 12px;
    }


    .hartwell-product-price {
        margin-top: 20px;
    }


    .hartwell-sale-price,
    .hartwell-standard-price {
        font-size: 22px;
    }


    .hartwell-regular-price {
        font-size: 17px;
    }

    .hartwell-discount {
        font-size: 14px;
    }


    .hartwell-stock {
        margin-top: 18px;
        font-size: 13px;
    }


    /* Pills */

    .hartwell-badges {
        top: 16px;
        left: 16px;
    }


    .hartwell-badge {
        min-height: 32px;
        padding: 0 13px;
        font-size: 11px;
    }


    /* Quick View icon */

    .hartwell-quick-view-wrap {
        right: 16px;
        bottom: 16px;
    }


    .hartwell-quick-view {
        width: 48px;
        height: 48px;
    }


    .hartwell-quick-view-icon,
    .hartwell-quick-view-icon svg {
        width: 21px;
        height: 21px;
    }


    /*
       Tablet/touch:
       Add to Cart stays visible instead of relying on hover.
    */


    .hartwell-product-content {
        transform: none !important;
    }


    .hartwell-hover-cart {
        position: static;

        width: 100%;

        margin-top: 14px;
        padding: 0;

        background: transparent;

        opacity: 1;
        overflow: visible;

        pointer-events: auto;

        transform: none;
    }


    .hartwell-full-cart,
    .hartwell-full-cart.button,
    .hartwell-full-cart.add_to_cart_button {
        min-height: 48px !important;

        padding: 12px 16px !important;

        font-size: 14px !important;
    }


    /* Quick View */

    .hartwell-qv-content {
        padding: 60px 42px;
    }


    .hartwell-qv-title {
        font-size: 36px;
    }

}


/* ==========================================================
   27. MOBILE
   stays 2 columns
========================================================== */

@media (max-width: 700px) {

    .woocommerce ul.products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px !important;
    }


    /* Card */

    .hartwell-card-inner {
        border-radius: 18px;
    }


    .hartwell-product-content {
        padding: 16px;
    }


    .hartwell-product-title {
        font-size: 20px;
        line-height: 1.1;
    }


    /* Category */

    .hartwell-research-category {
        margin-top: 12px;

        font-size: 10px;
        line-height: 1.25;
    }


    /* Price */

    .hartwell-product-price {
        margin-top: 16px;

        gap: 5px;
    }


    .hartwell-sale-price,
    .hartwell-standard-price {
        font-size: 18px;
    }


    .hartwell-regular-price {
        font-size: 16px;
    }


    .hartwell-discount {

        font-size: 13px;
    }


    /* Stock */

    .hartwell-stock {
        margin-top: 14px;

        gap: 6px;

        font-size: 12px;
    }


    .hartwell-stock-dot {
        width: 6px;
        height: 6px;

        flex-basis: 6px;
    }


    /* Badges */

    .hartwell-badges {
        top: 10px;
        left: 10px;

        gap: 5px;
    }


    .hartwell-badge {
        min-height: 27px;

        padding: 0 9px;

        font-size: 10px;
    }


    /* Quick View icon */

    .hartwell-quick-view-wrap {
        right: 10px;
        bottom: 10px;
    }


    .hartwell-quick-view {
        width: 40px;
        height: 40px;
    }


    .hartwell-quick-view-icon,
    .hartwell-quick-view-icon svg {
        width: 19px;
        height: 19px;
    }


    /* Add to Cart always visible */


    .hartwell-product-content {
        transform: none !important;
    }


    .hartwell-hover-cart {
        position: static;

        width: 100%;

        margin-top: 12px;
        padding: 0;

        background: transparent;

        opacity: 1;
        overflow: visible;

        pointer-events: auto;

        transform: none;
    }


    .hartwell-full-cart,
    .hartwell-full-cart.button,
    .hartwell-full-cart.add_to_cart_button {
        min-height: 42px !important;

        padding: 10px 12px !important;

        font-size: 13px !important;
    }


    /* Quick View modal */

    .hartwell-qv {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);

        border-radius: 18px;
    }


    .hartwell-qv-grid {
        grid-template-columns: 1fr;

        min-height: 0;
    }


    .hartwell-qv-image {
        min-height: 0;

        aspect-ratio: 1 / 1;
    }


    .hartwell-qv-content {
        padding:
            34px 24px 36px;
    }


    .hartwell-qv-title {
        font-size: 32px;
    }


    .hartwell-qv-price {
        margin-top: 22px;
    }


    .hartwell-qv-description {
        margin-top: 24px;
    }


    .hartwell-qv-cart {
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 28px;
    }


    .hartwell-qv-cart .hartwell-qv-add {
        margin-top: 0;
    }


    .hartwell-qv-close {
        top: 14px;
        right: 14px;
    }

}


/* ==========================================================
   28. BENEFIT MARQUEE
========================================================== */

.benefit-marquee {
    width: 100%;

    overflow: hidden;
}


.benefit-marquee__track {
    display: flex;
    align-items: center;

    width: max-content;
}


.benefit-marquee__group {
    display: flex;
    align-items: center;

    flex-shrink: 0;

    gap: 64px;

    padding-right: 64px;

    animation:
        benefit-scroll 50s linear infinite;
}


.benefit-item {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 22px;

    flex-shrink: 0;

    white-space: nowrap;
}


.benefit-item svg {
    display: block;

    width: auto;
    height: 42px;

    flex-shrink: 0;
}


.benefit-item h3 {
    margin: 0;
    padding: 0;

    line-height: 1;

    white-space: nowrap;

    color: #672A2C;
}


.benefit-dot {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #672A2C;

    font-size: 28px;
    line-height: 1;
}


@keyframes benefit-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }

}




/* ==========================================================
   29. HEADER / NAVIGATION
========================================================== */

.inside-header {
    padding: 11px 25px;
}


.nav-float-right #site-navigation {
    margin-right: auto;
    padding-left: 0;
}


nav.toggled .inside-navigation {
    background: #fff !important;
}

.has-inline-mobile-toggle #site-navigation.toggled {
    margin-top: 0;
}


/* ==========================================================
   30. LEVITATING IMAGE
========================================================== */

.hover-img {
    animation:
        levitate 5s ease-in-out infinite;

    will-change: transform;
}


@keyframes levitate {

    0%,
    100% {
        transform: translateY(5px);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* ==========================================================
   31. INSTRUMENT SERIF
========================================================== */

@font-face {
    font-display: swap;

    font-family: 'Instrument Serif';

    font-style: normal;
    font-weight: 400;

    src:
        url('http://hyper6.com/hartwell/wp-content/uploads/2026/09/instrument-serif-v5-latin-regular.woff2') format('woff2');
}


@font-face {
    font-display: swap;

    font-family: 'Instrument Serif';

    font-style: italic;
    font-weight: 400;

    src:
        url('http://hyper6.com/hartwell/wp-content/uploads/2026/09/instrument-serif-v5-latin-italic.woff2') format('woff2');
}

.footer ul {
    margin: 0;
    padding: 0;
}

.footer ul li {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

footer {
    display: none;
}

.copyright li {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0 25px 0px 0px;
}

.copyright li:last-child {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.copyright ul {
    margin: 0;
}

.copyright p {
    margin: 0;
}

.single-product .site-main {
    padding: 0 20px;
}

.user-account {
    margin-right: 20px;
}



/******** RESPONSIVE MOBILE 999 ********/
@media (max-width: 1024px) {
    .inside-header {
        padding: 10px 20px;
    }

    .woocommerce-archive-wrapper {
        padding: 15px 25px;
    }
    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        margin-right: 0 !important;
    }

    .has-inline-mobile-toggle .inside-header {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    .has-inline-mobile-toggle .site-logo {
        flex-shrink: 0;
        width: 112px;
    }

    .has-inline-mobile-toggle .site-logo img {
        display: block;
    }

    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        order: 3;
        flex-shrink: 0;
        margin-right: 20px;
        margin-left: 8px;
        align-self: center !important;
    }

    .has-inline-mobile-toggle .botons {
        order: 2;
        margin-left: auto;
        flex-shrink: 0;
        align-self: center !important;
    }

    .has-inline-mobile-toggle #site-navigation:not(.toggled) {
        display: none !important;
    }

    .has-inline-mobile-toggle #site-navigation.toggled {
        order: 4;
        width: 100%;
        margin-top: 0;
    }

    .menu-bar-items {
        display: none !important;
    }

    .botons {
        column-gap: 0;
        padding-right: 9px;
    }

    .gp-search-trigger {
        padding: 12px 12px;
    }
}

/* RESPONSIVE MOBILE 768 */

@media (max-width: 768px) {
    .inside-header {
        padding: 10px 15px;
    }

    .benefit-marquee__group {
        gap: 38px;

        padding-right: 38px;
    }

    .benefit-item {
        gap: 14px;
    }

    .benefit-item svg {
        height: 30px;
    }

    .benefit-dot {
        font-size: 22px;
    }
    .woocommerce-archive-wrapper {
        padding: 15px 20px;
    }
}


/* Accessibility — reduced motion */

@media (prefers-reduced-motion: reduce) {

    .benefit-marquee__group {
        animation: none;
    }

}


@media screen and (max-width: 480px) {
    :where(.wp-block-woocommerce-customer-account .wc-block-customer-account__link) .wc-block-customer-account__account-icon {
        height: 1.5em !important;
        width: 1.5em !important;
    }

    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        margin-right: 13px;
    }

    .menu-toggle {
        padding: 0 16px;
    }

    :where(.wp-block-woocommerce-customer-account .wc-block-customer-account__link) .wc-block-customer-account__account-icon {
        height: 2em;
        width: 2em;
    }

    :where(.wp-block-woocommerce-customer-account .wc-block-customer-account__link) {
        padding: .5em;
    }

    .user-account {
        margin-right: 16px;
    }

    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        margin-left: 0;
    }

    .site-logo {
        margin-left: 0;
    }
}

@media screen and (max-width: 420px) {}

/* VERY SMALL MOBILE */
@media screen and (max-width: 350px) {
    .botons {
        .column-gap: 0;
    }

}

.fkcart-shortcode-icon-wrap svg {
    width: 27px;
    height: 27px;
}

.user-account {
    margin-right: 10px;
}

.has-inline-mobile-toggle .site-logo {
    width: 26%;
}
}


/* EXTREMELY SMALL MOBILE */
@media screen and (max-width: 280px) {

    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        margin-left: 4px;
    }

    .fkcart-shortcode-icon-wrap svg {
        width: 23px;
        height: 23px;
    }

    :where(.wp-block-woocommerce-customer-account .wc-block-customer-account__link) .wc-block-customer-account__account-icon {
        height: 1.5em;
        width: 1.5em;
    }
}


/* =========================================================
   HARTWELL PDP
   Replace your existing Hartwell PDP block in style.css with this block.
   ========================================================= */
/* =========================================================
   HARTWELL PDP V4
   Desktop: MEDIA | PRODUCT DETAILS | COMMERCE
   ========================================================= */
.hartwell-pdp {
    --hw-ink: #171614;
    --hw-muted: #746f69;
    --hw-line: #ded9d1;
    --hw-stone: #f2efea;
    --hw-red: #682d2d;
    --hw-red-bright: #d62f2f;
    color: var(--hw-ink)
}

.hartwell-pdp-shell {
    width: min(1580px, calc(100% - 48px));
    margin: auto;
    padding: 22px 0 50px
}

.hartwell-pdp-breadcrumb {
    margin: 0 0 20px;
    font-size: 11px;
    color: var(--hw-muted)
}

.hartwell-breadcrumb-separator {
    display: inline-block;
    margin: 0 8px;
    opacity: .45
}

.hartwell-pdp-hero {
    padding-bottom: 70px;
    display: grid;
    grid-template-columns: minmax(470px, 1.25fr) minmax(400px, 1fr) minmax(300px, .72fr);
    gap: clamp(28px, 3vw, 58px);
    align-items: start
}

/* 1 — MEDIA */
.hartwell-pdp-gallery {
    min-width: 0
}

.hartwell-pdp-gallery-main {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--hw-stone);
    overflow: hidden
}

.hartwell-pdp-main-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.hartwell-pdp-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px
}

.hartwell-pdp-thumb {
    appearance: none;
    padding: 0;
    border: 1px solid transparent;
    background: var(--hw-stone);
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer
}

.hartwell-pdp-thumb:hover,
.hartwell-pdp-thumb:focus-visible {
    border-color: var(--hw-ink)
}

.hartwell-pdp-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* 2 — DETAILS */
.hartwell-pdp-summary {
    min-width: 0
}

.hartwell-pdp-viewers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 54px;
    margin: 0 0 25px;
    padding: 12px 18px;
    border: 1px solid #cfc9c1;
    border-radius: 9px;
    background: #fff;
    color: var(--hw-red);
    font-size: 15px;
    text-align: center
}

.hartwell-pdp-viewers[hidden] {
    display: none !important
}

.hartwell-pdp-eyebrow,
.hartwell-pdp-section-kicker {
    margin: 0 0 12px;
    color: var(--hw-red);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase
}

.hartwell-pdp-heading {
    margin: 0 0 18px;
    font-size: clamp(44px, 3.4vw, 62px);
    line-height: .98;
    font-weight: 400;
    letter-spacing: -.035em
}

.hartwell-pdp-intro {
    margin: 0 0 26px;
    color: var(--hw-muted);
    font-size: 14px;
    line-height: 1.7
}

.hartwell-pdp-intro p:first-child {
    margin-top: 0
}

.hartwell-pdp-accordions {
    border-top: 1px solid var(--hw-line)
}

.hartwell-pdp-detail {
    margin: 0;
    border-bottom: 1px solid var(--hw-line)
}

.hartwell-pdp-detail summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 18px 35px 18px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em
}

.hartwell-pdp-detail summary::-webkit-details-marker {
    display: none
}

.hartwell-pdp-detail summary:after {
    content: "";
    position: absolute;
    right: 3px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23171614' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    transition: transform .18s ease
}

.hartwell-pdp-detail[open] summary:after {
    transform: translateY(-50%) rotate(180deg)
}

.hartwell-pdp-detail-content {
    padding: 0 0 20px;
    color: var(--hw-muted);
    font-size: 13px;
    line-height: 1.65
}

.hartwell-pdp-specs {
    margin: 0
}

.hartwell-pdp-specs>div {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    padding: 5px 0
}

.hartwell-pdp-specs dd {
    margin: 0;
    color: var(--hw-ink)
}

.hartwell-pdp-coa-link {
    color: var(--hw-ink);
    text-decoration: underline;
    text-underline-offset: 4px
}

/* 3 — BUY BOX */
.hartwell-pdp-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 15px
}

.hartwell-pdp-price {
    font-size: 32px;
    line-height: 1;
    font-weight: 750;
    color: var(--hw-red-bright)
}

.hartwell-pdp-price del {
    font-size: 12px;
    color: var(--hw-muted);
    opacity: .7;
    margin-left: 5px
}

.hartwell-pdp-price ins {
    text-decoration: none
}

.hartwell-pdp-discount {
    color: var(--hw-muted);
    font-size: 10px;
    font-weight: 700
}

.hartwell-pdp-stock {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--hw-red-bright);
    font-size: 12px;
    font-weight: 700
}

.hartwell-pdp-stock-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor
}

/* Full-width quantity selector */
.hartwell-pdp-cart form.cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important
}

.hartwell-pdp-cart form.cart .quantity {
    display: none !important
}

.hartwell-qty-select-wrap {
    position: relative;
    width: 100%
}

.hartwell-qty-select {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 58px;
    margin: 0;
    padding: 0 54px 0 22px;
    border: 1px solid #d8d3cd;
    border-radius: 29px;
    background: #fff;
    color: var(--hw-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer
}

.hartwell-qty-select-wrap:after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 14px;
    height: 14px;
    pointer-events: none;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23171614' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
}

.hartwell-pdp-cart form.cart .single_add_to_cart_button {
    display: block !important;
    float: none !important;
    width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 32px !important;
    background: var(--hw-red) !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important
}

/* Buy-box card */
.hartwell-pdp-commerce {
    min-width: 0;
    padding: 26px 24px 24px !important;
    position: sticky;
    top: 24px;
    border: 1px solid #d8d3cd;
    border-radius: 12px;
    background: #fff
}

.hartwell-pdp-shipping-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 25px;
    padding: 22px 20px;
    border: 1px solid #d7d2cc;
    border-radius: 10px;
    background: #fff;
    font-size: 12px
}

.hartwell-pdp-shipping-card>strong {
    font-size: 14px
}

.hartwell-pdp-member-links {
    display: flex;
    gap: 12px;
    align-items: center
}

.hartwell-pdp-member-links a {
    color: var(--hw-ink);
    font-weight: 700;
    text-decoration: underline
}

/* 4 — PRODUCT INFORMATION / LONG-FORM DESCRIPTION */
.hartwell-pdp-about,
.hartwell-pdp-product-information {
    width: 100%;
    max-width: none;
    margin: 0 0 0;
    padding: 30px 0 0;
    border-top: 1px solid var(--hw-line);
    text-align: left;
}

.hartwell-pdp-product-information-heading {
    margin: 0 0 12px;
    padding: 0;
    color: var(--hw-ink);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
}

.hartwell-pdp-about h2 {
    margin: 0 0 25px;
    padding: 0;
    color: var(--hw-ink);
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -.025em;
    text-align: left;
}

.hartwell-pdp-about-copy {
    width: 100%;
    max-width: none;
    color: var(--hw-muted);
    line-height: 1.8;
    text-align: left;
}

.hartwell-pdp-about-copy>*,
.hartwell-pdp-about-copy p,
.hartwell-pdp-about-copy h1,
.hartwell-pdp-about-copy h2,
.hartwell-pdp-about-copy h3,
.hartwell-pdp-about-copy h4,
.hartwell-pdp-about-copy h5,
.hartwell-pdp-about-copy h6,
.hartwell-pdp-about-copy ul,
.hartwell-pdp-about-copy ol {
    text-align: left;
}

@media(max-width:1150px) {
    .hartwell-pdp-shell {
        width: min(100% - 36px, 1040px)
    }

    .hartwell-pdp-hero {
        grid-template-columns: minmax(420px, 1.05fr) minmax(360px, .95fr);
        gap: 36px
    }

    .hartwell-pdp-gallery {
        grid-column: 1;
        grid-row: 1/span 2
    }

    .hartwell-pdp-summary {
        grid-column: 2;
        grid-row: 1
    }

    .hartwell-pdp-commerce {
        grid-column: 2;
        grid-row: 2;
        position: static;
        margin-top: 5px
    }
}

@media(max-width:760px) {
    .hartwell-pdp-shell {
        width: min(100% - 28px, 620px);
        padding-top: 14px
    }

    .hartwell-pdp-hero {
        display: flex;
        flex-direction: column;
        gap: 0
    }

    .hartwell-pdp-gallery {
        order: 1;
        width: 100%
    }

    .hartwell-pdp-summary {
        order: 2;
        width: 100%;
        padding-top: 32px
    }

    .hartwell-pdp-commerce {
        order: 3;
        width: 100%;
        position: static;
        padding-top: 30px
    }

    .hartwell-pdp-thumbnails {
        gap: 8px;
        margin-top: 9px
    }

    .hartwell-pdp-viewers {
        margin-bottom: 22px
    }

    .hartwell-pdp-heading {
        font-size: clamp(44px, 13vw, 62px)
    }
}


/* === V6 GALLERY INTERACTION === */
.hartwell-pdp-gallery-main {
    position: relative;
    overflow: hidden;
}

.hartwell-pdp-gallery-track {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    transform: translateX(0);
    will-change: transform;
    transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}

.hartwell-pdp-gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.hartwell-pdp-gallery-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hartwell-pdp-thumb {
    position: relative;
    border: 1px solid transparent !important;
    transition: border-color .16s ease, opacity .16s ease;
}

.hartwell-pdp-thumb.is-active {
    border-color: var(--hw-red) !important;
}

.hartwell-pdp-thumb.is-preview:not(.is-active) {
    border-color: #aaa39b !important;
}

.hartwell-pdp-thumb:focus-visible {
    outline: 2px solid var(--hw-red);
    outline-offset: 2px;
}

/* === V6 CHEVRONS — force SVG, kill theme/legacy glyphs === */
.hartwell-pdp-detail summary::before {
    display: none !important;
    content: none !important
}

.hartwell-pdp-detail summary::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    border: 0 !important;
    transform: translateY(-50%) rotate(0deg) !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 9l7 7 7-7' stroke='%23171614' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    transition: transform .18s ease !important;
}

.hartwell-pdp-detail[open] summary::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Quantity dropdown chevron */
.hartwell-qty-select-wrap::before {
    display: none !important;
    content: none !important
}

.hartwell-qty-select-wrap::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 21px !important;
    top: 50% !important;
    width: 16px !important;
    height: 16px !important;
    pointer-events: none !important;
    transform: translateY(-50%) !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 9l7 7 7-7' stroke='%23171614' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}


/* === V7 LOCKS === */
.hartwell-pdp-gallery-main {
    aspect-ratio: 1 / 1 !important;
}

/* Exact supplied accordion SVGs */
.hartwell-pdp-detail summary::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    width: 18px !important;
    height: 11px !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 11px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.06836 9.91406L0.263672 2.16211C0 1.95117 0 1.5293 0.263672 1.26562L1.31836 0.263672C1.58203 0 1.95117 0 2.21484 0.263672L8.54297 6.48633L14.8184 0.263672C15.082 0 15.5039 0 15.7148 0.263672L16.7695 1.26562C17.0332 1.5293 17.0332 1.95117 16.7695 2.16211L8.96484 9.91406C8.70117 10.1777 8.33203 10.1777 8.06836 9.91406Z' fill='%230D0D0E'/%3E%3C/svg%3E") !important;
}

.hartwell-pdp-detail[open] summary::after {
    transform: translateY(-50%) !important;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.96484 0.263672L16.7695 7.96289C17.0332 8.22656 17.0332 8.64844 16.7695 8.85938L15.7148 9.91406C15.5039 10.1777 15.082 10.1777 14.8184 9.91406L8.54297 3.69141L2.21484 9.91406C1.95117 10.1777 1.58203 10.1777 1.31836 9.91406L0.263672 8.85938C0 8.64844 0 8.22656 0.263672 7.96289L8.06836 0.263672C8.33203 0 8.70117 0 8.96484 0.263672Z' fill='%230D0D0E'/%3E%3C/svg%3E") !important;
}

/* Quantity uses the same supplied down chevron, slightly smaller */
.hartwell-qty-select-wrap::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 22px !important;
    top: 50% !important;
    width: 14px !important;
    height: 9px !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px auto !important;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.06836 9.91406L0.263672 2.16211C0 1.95117 0 1.5293 0.263672 1.26562L1.31836 0.263672C1.58203 0 1.95117 0 2.21484 0.263672L8.54297 6.48633L14.8184 0.263672C15.082 0 15.5039 0 15.7148 0.263672L16.7695 1.26562C17.0332 1.5293 17.0332 1.95117 16.7695 2.16211L8.96484 9.91406C8.70117 10.1777 8.33203 10.1777 8.06836 9.91406Z' fill='%230D0D0E'/%3E%3C/svg%3E") !important;
}


/* === V8 DYNAMIC WOO COUPON PROMO === */
.hartwell-pdp-promo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 8px 0 18px;
    color: #272421;
    font-size: 14px;
    line-height: 1.4
}

.hartwell-pdp-promo-offer {
    font-weight: 750;
    color: var(--hw-red)
}

.hartwell-pdp-coupon-code {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: var(--hw-red);
    font: inherit;
    font-weight: 800;
    letter-spacing: .035em;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer
}

.hartwell-pdp-coupon-code:hover {
    opacity: .72
}

.hartwell-pdp-coupon-code:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 3px
}

.hartwell-pdp-coupon-copied {
    font-size: 12px;
    color: #6d6862;
    margin-left: 3px
}




/* === V10 ACCORDION EASING === */
.hartwell-pdp-detail {
    overflow: hidden
}

.hartwell-pdp-detail-content {
    overflow: hidden;
    height: auto;
    opacity: 1;
    transition: height 260ms cubic-bezier(.4, 0, .2, 1), opacity 180ms ease;
}

@media (prefers-reduced-motion:reduce) {
    .hartwell-pdp-detail-content {
        transition: none !important
    }
}

/* === V10 PRICE LAYOUT ===
   SALE: large red current price left; discount + RETAIL old price stacked right.
*/
.hartwell-pdp-commerce .price,
.hartwell-pdp-buybox .price {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 0 8px !important;
    line-height: 1 !important;
}

.hartwell-pdp-commerce .price ins,
.hartwell-pdp-buybox .price ins {
    order: 1;
    display: block !important;
    background: none !important;
    text-decoration: none !important;
    margin: 0 !important;
}

.hartwell-pdp-commerce .price ins .woocommerce-Price-amount,
.hartwell-pdp-buybox .price ins .woocommerce-Price-amount {
    color: var(--hw-red) !important;
    font-size: 38px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
}

.hartwell-pdp-commerce .price del,
.hartwell-pdp-buybox .price del {
    order: 2;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    opacity: 1 !important;
    margin: 0 !important;
    color: #77716b !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
}

.hartwell-pdp-commerce .price del::before,
.hartwell-pdp-buybox .price del::before {
    content: attr(data-hw-discount);
    display: block;
    color: var(--hw-red);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 4px;
}

.hartwell-pdp-commerce .price del::after,
.hartwell-pdp-buybox .price del::after {
    content: "RETAIL";
    position: absolute;
    transform: translateY(-14px);
    color: #77716b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
}

.hartwell-pdp-commerce .price del .woocommerce-Price-amount,
.hartwell-pdp-buybox .price del .woocommerce-Price-amount {
    margin-top: 10px;
    color: #77716b !important;
    font-size: 13px !important;
    text-decoration: line-through !important;
}

/* Regular/non-sale price stays large, dark, left aligned. */
.hartwell-pdp-commerce .price>.woocommerce-Price-amount,
.hartwell-pdp-buybox .price>.woocommerce-Price-amount {
    font-size: 38px !important;
    font-weight: 750 !important;
    color: var(--hw-ink) !important;
}


/* =========================================================
   V12 — gallery rail, accordion motion, lightbox, price
========================================================= */

/* Gallery: thumbnails LEFT on desktop */
@media (min-width: 769px) {
    .hartwell-pdp-gallery {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: start !important;
    }

    .hartwell-pdp-gallery-main {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .hartwell-pdp-thumbnails {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        margin: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: 100% !important;
    }

    .hartwell-pdp-thumb {
        width: 72px !important;
        height: 72px !important;
        flex: 0 0 72px !important;
    }
}

@media (max-width:768px) {
    .hartwell-pdp-thumbnails {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        margin-top: 10px !important;
        overflow-x: auto !important
    }
}

/* Main zoom affordance */
.hartwell-pdp-gallery-main {
    position: relative !important
}

.hartwell-pdp-zoom-trigger {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 8;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(13, 13, 14, .14);
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 3px 16px rgba(0, 0, 0, .08);
}

.hartwell-pdp-gallery-main:hover .hartwell-pdp-zoom-trigger,
.hartwell-pdp-zoom-trigger:focus {
    opacity: 1;
    transform: none
}

.hartwell-pdp-zoom-trigger svg,
.hartwell-pdp-lightbox-zoom svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round
}

/* Full-screen gallery */
html.hartwell-lightbox-open {
    overflow: hidden
}

.hartwell-pdp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #fff;
    display: none;
    grid-template-columns: 92px minmax(0, 1fr);
    padding: 24px 30px 24px 24px;
    gap: 24px;
}

.hartwell-pdp-lightbox.is-open {
    display: grid
}

.hartwell-pdp-lightbox-close {
    position: fixed;
    right: 28px;
    top: 22px;
    z-index: 5;
    border: 0;
    background: transparent;
    font-size: 38px;
    line-height: 1;
    font-weight: 300;
    cursor: pointer;
    padding: 8px 12px;
}

.hartwell-pdp-lightbox-thumbs {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-top: 48px
}

.hartwell-pdp-lightbox-thumb {
    width: 76px;
    height: 88px;
    padding: 0;
    border: 1px solid transparent;
    background: #f4f2ee;
    cursor: pointer;
    overflow: hidden
}

.hartwell-pdp-lightbox-thumb.is-active {
    border-color: #111
}

.hartwell-pdp-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hartwell-pdp-lightbox-stage {
    grid-column: 2;
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.hartwell-pdp-lightbox-track {
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform .34s cubic-bezier(.22, .61, .36, 1)
}

.hartwell-pdp-lightbox-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto
}

.hartwell-pdp-lightbox-slide img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform .25s ease
}

.hartwell-pdp-lightbox-zoom {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 3
}

.hartwell-pdp-lightbox.is-zoomed .hartwell-pdp-lightbox-slide img {
    max-width: none;
    max-height: none;
    transform: scale(1.65);
    cursor: zoom-out
}

@media(max-width:768px) {
    .hartwell-pdp-lightbox {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        padding: 55px 14px 14px
    }

    .hartwell-pdp-lightbox-stage {
        grid-column: 1;
        grid-row: 1
    }

    .hartwell-pdp-lightbox-thumbs {
        grid-column: 1;
        grid-row: 2;
        flex-direction: row;
        padding: 0;
        overflow-x: auto
    }

    .hartwell-pdp-lightbox-thumb {
        flex: 0 0 62px;
        width: 62px;
        height: 72px
    }
}

/* Accordion: exact-height easing; only one open */
.hartwell-pdp-detail {
    overflow: hidden
}

.hartwell-pdp-detail-content {
    overflow: hidden;
    transition: height 260ms cubic-bezier(.22, .61, .36, 1), opacity 170ms ease !important;
}

.hartwell-pdp-detail summary::after {
    transition: transform 260ms cubic-bezier(.22, .61, .36, 1) !important;
}

.hartwell-pdp-detail[open] summary::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

@media(prefers-reduced-motion:reduce) {

    .hartwell-pdp-detail-content,
    .hartwell-pdp-detail summary::after {
        transition: none !important
    }
}

/* Price layout: current price left; sale metadata stacked right */
.hartwell-pdp-price-row {
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    align-items: center !important;
    column-gap: 15px !important;
    row-gap: 0 !important;
    margin-bottom: 15px !important;
}

.hartwell-pdp-price {
    grid-column: 1 !important;
    display: block !important;
    font-size: 38px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    color: var(--hw-ink) !important;
}

.hartwell-pdp-price ins {
    text-decoration: none !important;
    background: none !important;
    color: var(--hw-red-bright) !important;
}

.hartwell-pdp-price ins .woocommerce-Price-amount {
    color: var(--hw-red-bright) !important;
    font-size: 38px !important;
    font-weight: 750 !important;
}

.hartwell-pdp-price del {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

.hartwell-pdp-discount {
    grid-column: 2 !important;
    align-self: end !important;
    color: var(--hw-red-bright) !important;
    background: none !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

.hartwell-pdp-discount::first-letter {
    font-size: 0
}

.hartwell-pdp-price-row:has(.hartwell-pdp-price del) .hartwell-pdp-discount::after {
    content: "\A RETAIL  " attr(data-retail);
    white-space: pre;
}

.hartwell-pdp-discount.is-sale-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important
}

.hartwell-pdp-discount.is-sale-meta strong {
    font-size: 12px;
    line-height: 1;
    color: var(--hw-red-bright)
}

.hartwell-pdp-discount.is-sale-meta span {
    font-size: 10px;
    line-height: 1.1;
    color: var(--hw-muted);
    font-weight: 700;
    letter-spacing: .04em
}

.hartwell-pdp-discount.is-sale-meta s {
    font-size: 12px;
    color: var(--hw-muted);
    margin-left: 3px
}

.hartwell-pdp-discount.is-sale-meta::after {
    display: none !important;
    content: none !important
}


/* =========================================================
   V13 — accordion motion correction
   One animation only: JS animates the <details> box itself.
========================================================= */
.hartwell-pdp-detail-content {
    height: auto !important;
    opacity: 1 !important;
    transition: none !important;
}

/* Arrow rotates immediately when clicked, not after <details> finishes closing. */
.hartwell-pdp-detail summary::after {
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1) !important;
    transform: translateY(-50%) rotate(0deg) !important;
}

.hartwell-pdp-detail[open]:not(.hartwell-is-closing) summary::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

.hartwell-pdp-detail.hartwell-is-closing summary::after {
    transform: translateY(-50%) rotate(0deg) !important;
}


/* =========================================================
   V14 — accordion arrow direction correction
   Closed = down. Open = up. Exactly 180deg between states.
========================================================= */
.hartwell-pdp-detail summary::after {
    /* Keep the CLOSED/down artwork as the single icon. */
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1) !important;
    transform: translateY(-50%) rotate(0deg) !important;
}

.hartwell-pdp-detail[open] summary::after {
    /* Override the old [open] background swap: same icon, rotated once. */
    background-image: var(--hartwell-accordion-down-icon, inherit);
    transform: translateY(-50%) rotate(180deg) !important;
}

.hartwell-pdp-detail.hartwell-is-closing summary::after {
    transform: translateY(-50%) rotate(0deg) !important;
}


/* =========================================================
   V15 — authoritative accordion arrow state
   ONE down-arrow SVG only. Rotation alone controls direction.
========================================================= */
.hartwell-pdp-detail>summary::after {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.06836 9.91406L0.263672 2.16211C0 1.95117 0 1.5293 0.263672 1.26562L1.31836 0.263672C1.58203 0 1.95117 0 2.21484 0.263672L8.54297 6.48633L14.8184 0.263672C15.082 0 15.5039 0 15.7148 0.263672L16.7695 1.26562C17.0332 1.5293 17.0332 1.95117 16.7695 2.16211L8.96484 9.91406C8.70117 10.1777 8.33203 10.1777 8.06836 9.91406Z' fill='%230D0D0E'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 11px !important;
    transform: translateY(-50%) rotate(0deg) !important;
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1) !important;
}

/* OPEN = arrow UP */
.hartwell-pdp-detail[open]:not(.hartwell-is-closing)>summary::after {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.06836 9.91406L0.263672 2.16211C0 1.95117 0 1.5293 0.263672 1.26562L1.31836 0.263672C1.58203 0 1.95117 0 2.21484 0.263672L8.54297 6.48633L14.8184 0.263672C15.082 0 15.5039 0 15.7148 0.263672L16.7695 1.26562C17.0332 1.5293 17.0332 1.95117 16.7695 2.16211L8.96484 9.91406C8.70117 10.1777 8.33203 10.1777 8.06836 9.91406Z' fill='%230D0D0E'/%3E%3C/svg%3E") !important;
    transform: translateY(-50%) rotate(180deg) !important;
}

/* CLOSING begins rotating immediately back DOWN */
.hartwell-pdp-detail[open].hartwell-is-closing>summary::after {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.06836 9.91406L0.263672 2.16211C0 1.95117 0 1.5293 0.263672 1.26562L1.31836 0.263672C1.58203 0 1.95117 0 2.21484 0.263672L8.54297 6.48633L14.8184 0.263672C15.082 0 15.5039 0 15.7148 0.263672L16.7695 1.26562C17.0332 1.5293 17.0332 1.95117 16.7695 2.16211L8.96484 9.91406C8.70117 10.1777 8.33203 10.1777 8.06836 9.91406Z' fill='%230D0D0E'/%3E%3C/svg%3E") !important;
    transform: translateY(-50%) rotate(0deg) !important;
}

/* CLOSED = arrow DOWN */
.hartwell-pdp-detail:not([open])>summary::after {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.06836 9.91406L0.263672 2.16211C0 1.95117 0 1.5293 0.263672 1.26562L1.31836 0.263672C1.58203 0 1.95117 0 2.21484 0.263672L8.54297 6.48633L14.8184 0.263672C15.082 0 15.5039 0 15.7148 0.263672L16.7695 1.26562C17.0332 1.5293 17.0332 1.95117 16.7695 2.16211L8.96484 9.91406C8.70117 10.1777 8.33203 10.1777 8.06836 9.91406Z' fill='%230D0D0E'/%3E%3C/svg%3E") !important;
    transform: translateY(-50%) rotate(0deg) !important;
}


/* =========================================================
   V16 — FINAL accordion arrow state
   Native [open] no longer controls arrow direction.
========================================================= */
.hartwell-pdp-detail>summary::after,
.hartwell-pdp-detail[open]>summary::after,
.hartwell-pdp-detail[open]:not(.hartwell-is-closing)>summary::after,
.hartwell-pdp-detail[open].hartwell-is-closing>summary::after,
.hartwell-pdp-detail:not([open])>summary::after {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.06836 9.91406L0.263672 2.16211C0 1.95117 0 1.5293 0.263672 1.26562L1.31836 0.263672C1.58203 0 1.95117 0 2.21484 0.263672L8.54297 6.48633L14.8184 0.263672C15.082 0 15.5039 0 15.7148 0.263672L16.7695 1.26562C17.0332 1.5293 17.0332 1.95117 16.7695 2.16211L8.96484 9.91406C8.70117 10.1777 8.33203 10.1777 8.06836 9.91406Z' fill='%230D0D0E'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 11px !important;
    transform: translateY(-50%) rotate(0deg) !important;
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1) !important;
}

/* The ONLY rule allowed to point the arrow upward. */
.hartwell-pdp-detail.hartwell-arrow-up>summary::after,
.hartwell-pdp-detail[open].hartwell-arrow-up>summary::after,
.hartwell-pdp-detail[open].hartwell-arrow-up:not(.hartwell-is-closing)>summary::after {
    transform: translateY(-50%) rotate(180deg) !important;
}


/* =========================================================
   V19 — Research Areas inline bordered tags
========================================================= */
.hartwell-pdp-research-areas {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 16px 0 22px;
}

.hartwell-pdp-research-area {
    display: inline-flex;
    align-items: center;
    width: auto;
    flex: 0 0 auto;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid #D8D5CF;
    -webkit-border-radius: 255px;
    -moz-border-radius: 255px;
    border-radius: 255px;
    color: #0D0D0E;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
}

.hartwell-pdp-research-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 11px;
    width: 11px;
    height: 9px;
    color: #0D0D0E;
}

.hartwell-pdp-research-check svg {
    display: block;
    width: 11px;
    height: 9px;
    overflow: visible;
}


/* =========================================================
   V25 — Research Area accordion details
   Matches Hartwell's burgundy link language.
========================================================= */
.hartwell-pdp-research-detail {
    margin-bottom: 24px;
}

.hartwell-pdp-research-detail:last-child {
    margin-bottom: 0;
}

.hartwell-pdp-research-detail-title {
    display: block;
}

.hartwell-pdp-research-detail-description p:last-child {
    margin-bottom: 8px;
}

.hartwell-pdp-research-detail-link {
    display: inline-block;
    width: fit-content;
    color: #713032;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hartwell-pdp-research-detail-link:hover,
.hartwell-pdp-research-detail-link:focus {
    color: #572426;
    text-decoration: underline;
}


/* =========================================================
   V27 — COA metadata (surgical)
========================================================= */
.hartwell-pdp-coa-meta {
    margin: 0 0 16px;
}

.hartwell-pdp-coa-meta>div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 7px;
}

.hartwell-pdp-coa-meta>div:last-child {
    margin-bottom: 0;
}

.hartwell-pdp-coa-meta span {
    color: #777;
}

.hartwell-pdp-coa-meta strong {
    color: #0D0D0E;
}

.hartwell-pdp-coa-link {
    color: #713032;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hartwell-pdp-coa-link:hover,
.hartwell-pdp-coa-link:focus {
    color: #572426;
    text-decoration: underline;
}


/* =========================================================
   V28 — COA document icon
========================================================= */
.hartwell-pdp-coa-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hartwell-pdp-coa-icon {
    display: block;
    flex: 0 0 auto;
    width: 16px;
    height: 18px;
    color: currentColor;
}

/* Underline the label only, not the icon. */
.hartwell-pdp-coa-link {
    text-decoration: none;
}

.hartwell-pdp-coa-link span {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hartwell-pdp-coa-link:hover,
.hartwell-pdp-coa-link:focus {
    text-decoration: none;
}

.hartwell-pdp-coa-link:hover span,
.hartwell-pdp-coa-link:focus span {
    text-decoration: underline;
}

/* =========================================================
   HARTWELL PDP — COMPLEMENTARY COMPOUNDS
   Uses the normal Hartwell product cards without section-specific card scaling.
   ========================================================= */
.hartwell-pdp-related {
    position: relative;
    width: 100vw;
    max-width: none;
    margin: 0 0 0 calc(50% - 50vw);
    padding: 58px max(28px, calc((100vw - 1580px)/2)) 72px;
    overflow: hidden;
    isolation: isolate;
    background-size: 100% !important;
    background: url('https://hyper6.com/hartwell/wp-content/uploads/2026/09/bg-complimentary.jpg') bottom center no-repeat #fff;
}

.hartwell-pdp-related-head {
    position: relative;
    z-index: 5;
    width: min(1540px, 100%);
    margin: 0 auto 44px;
    text-align: left;
}

.hartwell-pdp-related-head h2 {
    margin: 0;
    color: var(--hw-ink);
    font-size: clamp(40px, 3.2vw, 62px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -.035em;
}

/* Four equal visual columns: reserved vial space + three standard cards. */
.hartwell-pdp-related-stage {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.4vw, 24px);
    align-items: start;
    width: min(1580px, 100%);
    min-height: 520px;
    margin: 0 auto;
}

.woocommerce .hartwell-pdp-related-grid,
.hartwell-pdp .hartwell-pdp-related-grid {
    position: relative;
    z-index: 4;
    grid-column: 2 / 5;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(16px, 1.4vw, 24px) !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* The vial is decorative and never participates in card sizing. */
.hartwell-pdp-floating-render-wrap {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 50%;
    width: calc((100% - (3 * clamp(16px, 1.4vw, 24px))) / 4);
    min-width: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.hartwell-pdp-floating-render {
    display: block;
    width: 75%;
    max-width: 75%;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 34px 30px rgba(24, 18, 14, .17));
    animation: hartwellPdpLevitate 5s ease-in-out infinite;
    will-change: transform;
}

@keyframes hartwellPdpLevitate {

    0%,
    100% {
        transform: translateY(7px) rotate(-8deg)
    }

    50% {
        transform: translateY(-10px) rotate(-8deg)
    }
}

.hartwell-pdp-hex-field {
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: -150px;
    width: 120vw;
    height: 440px;
    transform: translateX(-50%);
    opacity: .24;
    pointer-events: none;
    background:
        linear-gradient(30deg, transparent 24%, rgba(113, 48, 50, .25) 25%, rgba(113, 48, 50, .25) 26%, transparent 27%, transparent 74%, rgba(113, 48, 50, .25) 75%, rgba(113, 48, 50, .25) 76%, transparent 77%),
        linear-gradient(150deg, transparent 24%, rgba(113, 48, 50, .25) 25%, rgba(113, 48, 50, .25) 26%, transparent 27%, transparent 74%, rgba(113, 48, 50, .25) 75%, rgba(113, 48, 50, .25) 76%, transparent 77%),
        linear-gradient(30deg, transparent 24%, rgba(113, 48, 50, .16) 25%, rgba(113, 48, 50, .16) 26%, transparent 27%, transparent 74%, rgba(113, 48, 50, .16) 75%, rgba(113, 48, 50, .16) 76%, transparent 77%),
        linear-gradient(150deg, transparent 24%, rgba(113, 48, 50, .16) 25%, rgba(113, 48, 50, .16) 26%, transparent 27%, transparent 74%, rgba(113, 48, 50, .16) 75%, rgba(113, 48, 50, .16) 76%, transparent 77%);
    background-size: 76px 132px;
    background-position: 0 0, 0 0, 38px 66px, 38px 66px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .05) 14%, #000 68%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .05) 14%, #000 68%, #000 100%);
}

/* Card copy should remain left aligned everywhere. */
.hartwell-product-content {
    text-align: left;
}

@media(max-width:1050px) {
    .hartwell-pdp-related-stage {
        grid-template-columns: minmax(150px, .8fr) repeat(2, minmax(0, 1fr));
        min-height: 420px;
    }

    .woocommerce .hartwell-pdp-related-grid,
    .hartwell-pdp .hartwell-pdp-related-grid {
        grid-column: 2 / 4;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .hartwell-pdp-related-grid>li:nth-child(n+3) {
        display: none !important
    }

    .hartwell-pdp-floating-render-wrap {
        width: calc((100% - 32px) / 3);
    }
}

@media(max-width:820px) {
    .hartwell-pdp-related {
        margin-top: 75px;
        padding: 44px 20px 58px
    }

    .hartwell-pdp-related-head {
        margin-bottom: 30px
    }

    .hartwell-pdp-related-stage {
        grid-template-columns: minmax(120px, .7fr) repeat(2, minmax(0, 1fr));
        gap: 12px;
        min-height: 360px;
    }

    .woocommerce .hartwell-pdp-related-grid,
    .hartwell-pdp .hartwell-pdp-related-grid {
        gap: 12px !important;
    }

    .hartwell-pdp-floating-render-wrap {
        width: calc((100% - 24px) / 3);
    }
}

@media(max-width:620px) {
    .hartwell-pdp-related-head h2 {
        font-size: clamp(38px, 11vw, 52px)
    }

    .hartwell-pdp-related-stage {
        grid-template-columns: minmax(90px, .62fr) repeat(2, minmax(0, 1fr));
        gap: 10px;
        min-height: 0;
    }

    .woocommerce .hartwell-pdp-related-grid,
    .hartwell-pdp .hartwell-pdp-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .hartwell-pdp-floating-render-wrap {
        top: 45%;
        width: calc((100% - 20px) / 3);
    }

    .hartwell-pdp-hex-field {
        width: 190vw;
        height: 390px;
        bottom: -120px
    }
}

@media(prefers-reduced-motion:reduce) {
    .hartwell-pdp-floating-render {
        animation: none
    }
}

/* ==========================================================
   HARTWELL PDP — SECTION HORIZONTAL PADDING
   Related + Product Information / About
========================================================== */

.hartwell-pdp-related,
.hartwell-pdp-about,
.hartwell-pdp-product-information {
    padding-left: 30px;
    padding-right: 30px;
}

@media (max-width: 1024px) {

    .hartwell-pdp-related,
    .hartwell-pdp-about,
    .hartwell-pdp-product-information {
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media (max-width: 768px) {

    .hartwell-pdp-related,
    .hartwell-pdp-about,
    .hartwell-pdp-product-information {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ==========================================================
   HARTWELL PDP — LIGHTBOX CONTROL / COLOR FIX
========================================================== */

.hartwell-pdp-lightbox {
    background: #f7f5f1 !important;
    color: #111 !important;
}

.hartwell-pdp-lightbox-stage {
    background: #f2efed;
}

/* Close + previous/next controls */
.hartwell-pdp-lightbox-close,
.hartwell-pdp-lightbox-prev,
.hartwell-pdp-lightbox-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(17, 17, 17, .14) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .96) !important;
    color: #111 !important;
    box-shadow: 0 3px 16px rgba(0, 0, 0, .08) !important;
    cursor: pointer;
    opacity: 1 !important;
    visibility: visible !important;
}

.hartwell-pdp-lightbox-close {
    position: fixed;
    top: 22px;
    right: 28px;
    z-index: 20;
    width: 46px;
    height: 46px;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}

.hartwell-pdp-lightbox-prev,
.hartwell-pdp-lightbox-next {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}

.hartwell-pdp-lightbox-prev {
    left: 18px;
}

.hartwell-pdp-lightbox-next {
    right: 18px;
}

.hartwell-pdp-lightbox-close:hover,
.hartwell-pdp-lightbox-prev:hover,
.hartwell-pdp-lightbox-next:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* Hide a direction only when there is nowhere to go. */
.hartwell-pdp-lightbox-prev:disabled,
.hartwell-pdp-lightbox-next:disabled {
    opacity: .28 !important;
    cursor: default;
}

/* Zoom buttons: force icon geometry + visible dark stroke. */
.hartwell-pdp-zoom-trigger,
.hartwell-pdp-lightbox-zoom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: #111 !important;
    background: #fff !important;
}

.hartwell-pdp-zoom-trigger svg,
.hartwell-pdp-lightbox-zoom svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    flex: 0 0 20px;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.hartwell-pdp-lightbox-thumb {
    background: #fff;
}

@media (max-width: 768px) {
    .hartwell-pdp-lightbox-close {
        top: 10px;
        right: 12px;
        width: 42px;
        height: 42px;
    }

    .hartwell-pdp-lightbox-prev,
    .hartwell-pdp-lightbox-next {
        width: 42px;
        height: 42px;
        font-size: 26px;
    }

    .hartwell-pdp-lightbox-prev {
        left: 10px;
    }

    .hartwell-pdp-lightbox-next {
        right: 10px;
    }
}

/* ==========================================================
   HARTWELL PDP — COMPLEMENTARY COMPOUNDS 33 / 67 LAYOUT
   Floating render owns 33%; three cards share remaining 67%.
========================================================== */

.hartwell-pdp-related-stage {
    display: grid !important;
    grid-template-columns: 33% minmax(0, 67%) !important;
    gap: 0 !important;
    align-items: center !important;
}

.hartwell-pdp-floating-render-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hartwell-pdp-floating-render {
    width: 75% !important;
    max-width: 75% !important;
}

.woocommerce .hartwell-pdp-related-grid,
.hartwell-pdp .hartwell-pdp-related-grid {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.25vw, 20px) !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Keep all three complementary cards visible in this dedicated row. */
.hartwell-pdp-related-grid>li:nth-child(n) {
    display: block !important;
}

@media (max-width: 820px) {
    .hartwell-pdp-related-stage {
        grid-template-columns: 33% minmax(0, 67%) !important;
        gap: 0 !important;
    }

    .woocommerce .hartwell-pdp-related-grid,
    .hartwell-pdp .hartwell-pdp-related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .hartwell-pdp-floating-render {
        width: 82% !important;
        max-width: 82% !important;
    }
}

@media (max-width: 620px) {
    .hartwell-pdp-related-stage {
        grid-template-columns: 33% minmax(0, 67%) !important;
    }

    .woocommerce .hartwell-pdp-related-grid,
    .hartwell-pdp .hartwell-pdp-related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}


/* ==========================================================
   HARTWELL PDP — PRODUCT REVIEWS
========================================================== */
.hartwell-pdp-reviews {
    margin-top: 100px;
    padding: 72px 30px 90px;
    border-top: 1px solid rgba(17, 17, 17, .10);
    background: #fff
}

.hartwell-pdp-reviews-inner {
    width: min(1180px, 100%);
    margin: 0 auto
}

.hartwell-pdp-reviews-kicker {
    margin-bottom: 12px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase
}

.hartwell-pdp-reviews h2 {
    margin: 0 0 42px;
    color: var(--hartwell-text);
    font-size: clamp(40px, 3.2vw, 62px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.035em
}

.hartwell-pdp-reviews #reviews {
    margin: 0
}

.hartwell-pdp-reviews #comments {
    margin: 0 0 54px
}

.hartwell-pdp-reviews .woocommerce-Reviews-title {
    margin: 0 0 30px;
    font-size: 24px;
    font-weight: 400
}

.hartwell-pdp-reviews .commentlist {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important
}

.hartwell-pdp-reviews .commentlist li {
    margin: 0 !important;
    padding: 28px 0 !important;
    border-bottom: 1px solid rgba(17, 17, 17, .10)
}

.hartwell-pdp-reviews .comment_container {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px
}

.hartwell-pdp-reviews .avatar {
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50%
}

.hartwell-pdp-reviews .comment-text {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important
}

.hartwell-pdp-reviews .star-rating {
    color: var(--hartwell-gold)
}

.hartwell-pdp-reviews .meta {
    margin: 8px 0 12px !important;
    color: #777;
    font-size: 13px
}

.hartwell-pdp-reviews .description {
    color: #333;
    font-size: 16px;
    line-height: 1.65
}

.hartwell-pdp-reviews #review_form_wrapper {
    max-width: 760px;
    margin: 0;
    padding: 36px;
    border: 1px solid rgba(17, 17, 17, .10);
    border-radius: 14px;
    background: #f7f5f1
}

.hartwell-pdp-reviews .comment-reply-title {
    display: block;
    margin-bottom: 22px;
    font-size: 28px;
    font-weight: 400
}

.hartwell-pdp-reviews .comment-form-rating,
.hartwell-pdp-reviews .comment-form-comment,
.hartwell-pdp-reviews .comment-form-author,
.hartwell-pdp-reviews .comment-form-email {
    margin-bottom: 20px
}

.hartwell-pdp-reviews label {
    display: block;
    margin-bottom: 7px;
    color: #555;
    font-size: 13px;
    font-weight: 600
}

.hartwell-pdp-reviews textarea,
.hartwell-pdp-reviews input[type="text"],
.hartwell-pdp-reviews input[type="email"] {
    width: 100%;
    border: 1px solid rgba(17, 17, 17, .18);
    border-radius: 8px;
    background: #fff;
    color: #111
}

.hartwell-pdp-reviews textarea {
    min-height: 150px;
    padding: 14px
}

.hartwell-pdp-reviews input[type="text"],
.hartwell-pdp-reviews input[type="email"] {
    min-height: 52px;
    padding: 0 14px
}

.hartwell-pdp-reviews .form-submit .submit {
    min-height: 52px;
    padding: 0 26px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--accent) !important;
    color: #fff !important;
    font-weight: 600
}

@media(max-width:1024px) {
    .hartwell-pdp-reviews {
        padding-left: 25px;
        padding-right: 25px
    }
}

@media(max-width:768px) {
    .hartwell-pdp-reviews {
        margin-top: 72px;
        padding: 54px 20px 68px
    }

    .hartwell-pdp-reviews h2 {
        margin-bottom: 32px
    }

    .hartwell-pdp-reviews #review_form_wrapper {
        padding: 26px 20px
    }
}

/* ==========================================================
   HARTWELL PDP — REVIEWS WIDTH / ALIGNMENT
========================================================== */
.hartwell-pdp-reviews-inner {
    width: min(1540px, 100%) !important;
    max-width: 1540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
}

.hartwell-pdp-reviews #reviews,
.hartwell-pdp-reviews #comments,
.hartwell-pdp-reviews #review_form_wrapper,
.hartwell-pdp-reviews .comment-text,
.hartwell-pdp-reviews .description {
    text-align: left !important;
}

/* ==========================================================
   HARTWELL PDP — CANONICAL PAGE CONTAINER
   Outer gutter: 30 / 25 / 20
   Inner container: 1540px centered
========================================================== */

/* One horizontal gutter for the PDP. */
.hartwell-pdp {
    padding-left: 30px;
    padding-right: 30px;
}

/* One centered content width. No nested horizontal padding. */
.hartwell-pdp-shell {
    width: 100% !important;
    max-width: 1540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* These sections live inside the canonical PDP container,
   so don't add a second horizontal gutter. */
.hartwell-pdp-about,
.hartwell-pdp-product-information,
.hartwell-pdp-reviews {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Reviews should use the same full 1540px content line. */
.hartwell-pdp-reviews-inner {
    width: 100% !important;
    max-width: 1540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Override the old shell-width breakpoints: only the gutter changes. */
@media (max-width: 1024px) {
    .hartwell-pdp {
        padding-left: 25px;
        padding-right: 25px;
    }

    .hartwell-pdp-shell {
        width: 100% !important;
        max-width: 1540px !important;
    }
}

@media (max-width: 768px) {
    .hartwell-pdp {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hartwell-pdp-shell {
        width: 100% !important;
        max-width: 1540px !important;
    }
}

/* ==========================================================
   HARTWELL PDP — RESPONSIVE GALLERY + COMPLEMENTARY PRODUCTS
   Tablet: [image | 2-column cards]
   Mobile: [image] / [2-column cards]
========================================================== */

/* MOBILE GALLERY
   Put the thumbnail rail below the main image and make it a compact
   horizontal carousel rather than large full-width thumbs. */
@media (max-width: 768px) {
    .hartwell-pdp-gallery {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .hartwell-pdp-gallery-main {
        order: 1 !important;
        width: 100% !important;
    }

    .hartwell-pdp-thumbnails {
        order: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 0 0 5px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .hartwell-pdp-thumb {
        width: 92px !important;
        height: 92px !important;
        min-width: 92px !important;
        flex: 0 0 92px !important;
        scroll-snap-align: start;
    }

    .hartwell-pdp-thumb img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* TABLET — floating image at left, two cards beside it. */
@media (min-width: 621px) and (max-width: 1050px) {
    .hartwell-pdp-related-stage {
        display: grid !important;
        grid-template-columns: minmax(150px, .8fr) minmax(0, 2fr) !important;
        gap: 16px !important;
        align-items: center !important;
        min-height: 420px !important;
    }

    .hartwell-pdp-floating-render-wrap {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .woocommerce .hartwell-pdp-related-grid,
    .hartwell-pdp .hartwell-pdp-related-grid {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .hartwell-pdp-related-grid>li:nth-child(n+3) {
        display: none !important;
    }
}

/* MOBILE — floating image gets its own row; two cards sit below it. */
@media (max-width: 620px) {
    .hartwell-pdp-related-stage {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
        align-items: start !important;
        min-height: 0 !important;
    }

    .hartwell-pdp-floating-render-wrap {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hartwell-pdp-floating-render {
        width: min(62%, 260px) !important;
        max-width: 260px !important;
    }

    .woocommerce .hartwell-pdp-related-grid,
    .hartwell-pdp .hartwell-pdp-related-grid {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .hartwell-pdp-related-grid>li:nth-child(n+3) {
        display: none !important;
    }
}




/* ==========================================================
   HARTWELL PDP — V50 RESPONSIVE POLISH
   Complementary compounds carousel on tablet/mobile.
========================================================== */

/* Tablet + mobile: related section follows the previous section directly. */
@media (max-width: 1050px) {
    .hartwell-pdp-related {
        margin-top: 0 !important;
    }

    /* Keep every complementary product available in the swipe rail. */
    .hartwell-pdp-related-grid>li:nth-child(n) {
        display: block !important;
    }

    .woocommerce .hartwell-pdp-related-grid,
    .hartwell-pdp .hartwell-pdp-related-grid {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        padding-bottom: 8px !important;
        scrollbar-width: thin;
    }

    .woocommerce .hartwell-pdp-related-grid>li,
    .hartwell-pdp .hartwell-pdp-related-grid>li {
        flex: 0 0 calc((100% - 16px) / 2) !important;
        width: calc((100% - 16px) / 2) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }
}

/* At the 768px/mobile breakpoint give the buy box breathing room. */
@media (max-width: 768px) {
    .hartwell-pdp-commerce {
        margin-top: 35px !important;
    }
}

/* Mobile: floating vial above; two-card-wide swipe rail below. */
@media (max-width: 620px) {

    .woocommerce .hartwell-pdp-related-grid,
    .hartwell-pdp .hartwell-pdp-related-grid {
        gap: 10px !important;
    }

    .woocommerce .hartwell-pdp-related-grid>li,
    .hartwell-pdp .hartwell-pdp-related-grid>li {
        flex-basis: calc((100% - 10px) / 2) !important;
        width: calc((100% - 10px) / 2) !important;
    }
}

/* ==========================================================
   HARTWELL PDP — V54 COMPLEMENTARY CAROUSEL FIX
   Beat the global WooCommerce ul.products / li.product grid rules.
========================================================== */
@media (max-width: 1050px) {

    .woocommerce ul.products.hartwell-pdp-related-grid,
    .hartwell-pdp ul.products.hartwell-pdp-related-grid {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
    }

    .woocommerce ul.products.hartwell-pdp-related-grid>li.product,
    .hartwell-pdp ul.products.hartwell-pdp-related-grid>li.product {
        display: block !important;
        flex: 0 0 calc((100% - 16px) / 2) !important;
        width: calc((100% - 16px) / 2) !important;
        min-width: calc((100% - 16px) / 2) !important;
        max-width: calc((100% - 16px) / 2) !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .hartwell-pdp-related-grid>li.product:nth-child(n+3) {
        display: block !important;
    }
}

@media (max-width: 620px) {

    .woocommerce ul.products.hartwell-pdp-related-grid,
    .hartwell-pdp ul.products.hartwell-pdp-related-grid {
        gap: 10px !important;
    }

    .woocommerce ul.products.hartwell-pdp-related-grid>li.product,
    .hartwell-pdp ul.products.hartwell-pdp-related-grid>li.product {
        flex-basis: calc((100% - 10px) / 2) !important;
        width: calc((100% - 10px) / 2) !important;
        min-width: calc((100% - 10px) / 2) !important;
        max-width: calc((100% - 10px) / 2) !important;
    }
}



/* ==========================================================
   HARTWELL PDP — V56 SURGICAL RESPONSIVE ADDITIONS
   Preserve V54 carousel mechanics exactly.
========================================================== */
.hartwell-pdp-related-dots {
    display: none;
}

@media (max-width: 1050px) {
    .hartwell-pdp-related-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: 12px 0 0;
    }

    .hartwell-pdp-related-dot {
        appearance: none;
        width: 7px;
        height: 7px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(17, 17, 17, .24);
        cursor: pointer;
        transition: width .2s ease, background .2s ease;
    }

    .hartwell-pdp-related-dot.is-active {
        width: 20px;
        background: var(--accent, #713032);
    }
}

@media (max-width: 768px) {
    .hartwell-pdp-floating-render-wrap {
        display: none !important;
    }

    .hartwell-pdp-related-stage {
        display: block !important;
        min-height: 0 !important;
    }

    .woocommerce ul.products.hartwell-pdp-related-grid,
    .hartwell-pdp ul.products.hartwell-pdp-related-grid {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* User server adjustment — preserve at tablet breakpoint. */
@media (max-width: 1024px) {
    .single-product .site-main {
        padding: 0px;
    }
}

/* ==========================================================
   HARTWELL PDP — V57 STICKY ADD TO CART
========================================================== */
.hartwell-pdp-sticky-atc {
    position: fixed;
    z-index: 9990;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid rgba(17, 17, 17, .12);
    box-shadow: 0 -12px 34px rgba(17, 17, 17, .08);
    transform: translateY(calc(100% + 12px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .22s ease, visibility .22s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hartwell-pdp-sticky-atc.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hartwell-pdp-sticky-atc-inner {
    width: min(1540px, calc(100% - 60px));
    min-height: 78px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
}

.hartwell-pdp-sticky-atc-image {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: #f3f2ef;
}

.hartwell-pdp-sticky-atc-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hartwell-pdp-sticky-atc-info {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

.hartwell-pdp-sticky-atc-name {
    margin: 0;
    color: #111;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.hartwell-pdp-sticky-atc-meta {
    margin-top: 3px;
    color: #777;
    font-size: 12px;
    line-height: 1.2;
}

.hartwell-pdp-sticky-atc-price {
    color: #111;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
}

.hartwell-pdp-sticky-atc-price del {
    opacity: .5;
    margin-right: 5px;
}

.hartwell-pdp-sticky-atc-price ins {
    color: var(--accent, #713032);
    text-decoration: none;
}

.hartwell-pdp-sticky-atc-action {
    margin-left: auto;
}

.hartwell-pdp-sticky-atc-button {
    display: inline-flex;
    min-width: 190px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 0;
    background: var(--accent, #713032);
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-decoration: none !important;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 255px !important;
    transition: opacity .2s ease, transform .2s ease;
}

.hartwell-pdp-sticky-atc-button:hover {
    opacity: .9;
    transform: translateY(-1px);
}

@media (max-width: 1024px) {
    .hartwell-pdp-sticky-atc-inner {
        width: calc(100% - 40px);
    }
}

@media (max-width: 768px) {
    .hartwell-pdp-sticky-atc-inner {
        width: calc(100% - 24px);
        min-height: 70px;
        gap: 10px;
        padding: 8px 0;
    }

    .hartwell-pdp-sticky-atc-image {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
    }

    .hartwell-pdp-sticky-atc-info {
        display: block;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .hartwell-pdp-sticky-atc-name {
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hartwell-pdp-sticky-atc-meta {
        display: none;
    }

    .hartwell-pdp-sticky-atc-price {
        margin-top: 4px;
        font-size: 13px;
    }

    .hartwell-pdp-sticky-atc-action {
        flex: 0 0 auto;
        margin-left: 4px;
    }

    .hartwell-pdp-sticky-atc-button {
        min-width: 118px;
        min-height: 46px;
        padding: 11px 15px;
        font-size: 11px;
    }
}

@media (max-width: 420px) {
    .hartwell-pdp-sticky-atc-image {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .hartwell-pdp-sticky-atc-button {
        min-width: 106px;
        padding-inline: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hartwell-pdp-sticky-atc {
        transition: none;
    }
}


/* ==========================================================
   HARTWELL PDP — V58 HORIZONTAL PAGE OVERFLOW FIX
   Full-bleed 100vw content can exceed the document viewport
   by the browser scrollbar width. Nested carousels remain scrollable.
========================================================== */
html:has(body.single-product),
body.single-product {
    overflow-x: clip;
    max-width: 100%;
}


/* ==========================================================
   HARTWELL PDP — V59 STICKY BUTTON MATCH
   Match the site's normal commerce button treatment.
========================================================== */
.hartwell-pdp-sticky-atc-button {
    min-width: 0;
    min-height: 0;
    padding: 14px 24px;
    border-radius: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
}

@media (max-width: 768px) {
    .hartwell-pdp-sticky-atc-button {
        min-width: 0;
        min-height: 0;
        padding: 13px 18px;
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .hartwell-pdp-sticky-atc-button {
        min-width: 0;
        padding-inline: 16px;
    }
}


/* ==========================================================
   HARTWELL — V60 QUICK VIEW MOBILE / POPOVER FALLBACK
   Hidden is the safe baseline. Native :popover-open and the
   JS .is-open fallback are the only states allowed to display.
========================================================== */
.hartwell-qv {
    display: none;
}

.hartwell-qv:popover-open,
.hartwell-qv.is-open {
    display: block;
}

.hartwell-qv.is-open {
    position: fixed;
    z-index: 100000;
}

.hartwell-qv-backdrop {
    display: none;
    position: fixed;
    z-index: 99999;
    inset: 0;
    background: rgba(20, 16, 15, 0.68);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hartwell-qv-backdrop.is-open {
    display: block;
}

/* ==========================================================
   HARTWELL PRODUCT GRID — MOBILE
   Override GeneratePress/Woo @supports flex card rule.
   2 columns through normal mobile; 1 column <= 350px.
========================================================== */
@media (max-width: 700px) {
    @supports (display: grid) {
        .woocommerce ul.products li.product {
            display: block !important;
            flex-direction: initial !important;
        }
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

@media (max-width: 350px) {
    .woocommerce ul.products {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}