@charset "UTF-8";
/* =============================================================================
   Priyaas — modern theme layer
   Loaded after style.css and codex-enhancements.css. Purely additive: nothing
   in the vendor theme is edited, so removing this file restores the old look.
   ========================================================================== */

/* -- 1. Design tokens ----------------------------------------------------- */
/*
 * Neutral-first. The UI is charcoal on white and sand; a single accent carries
 * every action, price and active state. --pm-accent is overridable per
 * white-label storefront (see includes/site_head.php), so nothing downstream
 * may hard-code the brand colour.
 */
:root {
    /* Default only. Every PHP page overrides these from the admin setting (see
       priyaas_theme_head_snippet). 404.html and privacy-policy.html are served
       as static files, so they use exactly these values. */
    --pm-accent: #1d5c54;
    --pm-on-accent: #ffffff;
    --pm-accent-strong: #184b45;
    --pm-accent-soft: rgba(29, 92, 84, 0.09);
    --pm-accent-line: rgba(29, 92, 84, 0.24);

    --pm-ink: #1c1a19;
    --pm-ink-2: #3d3936;
    --pm-muted: #5c5650;
    --pm-faint: #6f6961;

    --pm-surface: #ffffff;
    --pm-sand: #f7f4f1;
    --pm-sand-2: #efeae5;
    --pm-line: #e6e1dc;
    --pm-line-strong: #d7d0c8;

    --pm-gold: #b08a4a;

    --pm-shadow-sm: 0 1px 2px rgba(28, 26, 25, 0.04), 0 2px 8px rgba(28, 26, 25, 0.04);
    --pm-shadow: 0 2px 6px rgba(28, 26, 25, 0.05), 0 12px 28px -14px rgba(28, 26, 25, 0.22);
    --pm-shadow-lg: 0 4px 10px rgba(28, 26, 25, 0.06), 0 28px 56px -24px rgba(28, 26, 25, 0.28);

    --pm-radius-sm: 0.8rem;
    --pm-radius: 1.2rem;
    --pm-radius-lg: 1.8rem;
    --pm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --pm-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;

    /* Aliases kept so older rules in this file resolve to the new palette. */
    --pm-plum: var(--pm-ink);
    --pm-rose: var(--pm-accent);
    --pm-rose-deep: var(--pm-accent-strong);
    --pm-rose-soft: var(--pm-accent-soft);
    --pm-blush: var(--pm-sand);
    --pm-cream: var(--pm-sand);
}

/*
 * Re-point the vendor theme's own variables at the neutral palette. Everything
 * built on --secondary-color (search button, spinner, play button, .text__secondary,
 * .bg__secondary, minicart links) recolours from here, rather than being chased
 * selector by selector.
 */
:root {
    --secondary-color: var(--pm-accent);
    --primary-color: var(--pm-ink);
    --text-gray-color: var(--pm-muted);
    --black-color: var(--pm-ink);
    --border-color: var(--pm-line);
    --border-color2: var(--pm-line);
    --border-color3: var(--pm-line);
    --gray-color: var(--pm-sand);
    --gray-color2: var(--pm-sand);
    --bg-gray-color: var(--pm-sand);
    --yellow-color: var(--pm-gold);
}

/* -- 2. Base typography & readability ------------------------------------- */
body {
    color: var(--pm-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--pm-accent);
    color: var(--pm-on-accent);
}

:focus-visible {
    outline: 2px solid var(--pm-rose);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Display face for the headings that carry the brand voice. */
.section__heading--maintitle,
.section__header--title,
.collection__section--title h2,
.banner__items--content__title,
.banner__content--style2__title,
.deals__banner--content__maintitle,
.breadcrumb__content--title,
.footer__widget--title,
.product__details--info__title,
.testimonial__items--title,
.about__content--maintitle,
.about__author--name,
.counterup__banner--items__number,
.contact__form--title,
.contact__info--content__title,
.cart__title,
.checkout__total--title,
.order__confirmed--title,
.predictive__search--title,
.minicart__title,
.product__reviews--header__title {
    font-family: var(--pm-display);
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
}

/* -- 3. Motion primitives -------------------------------------------------- */
[data-pm-reveal] {
    opacity: 0;
    transform: translate3d(0, 2.8rem, 0);
    transition:
        opacity 0.75s var(--pm-ease) var(--pm-delay, 0s),
        transform 0.75s var(--pm-ease) var(--pm-delay, 0s);
    will-change: opacity, transform;
}

[data-pm-reveal="fade"] {
    transform: none;
}

[data-pm-reveal="zoom"] {
    transform: scale(0.94);
}

[data-pm-reveal="left"] {
    transform: translate3d(-3rem, 0, 0);
}

[data-pm-reveal="right"] {
    transform: translate3d(3rem, 0, 0);
}

[data-pm-reveal].pm-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* -- 4. Scroll progress + header --------------------------------------------*/
.pm-progress {
    position: fixed;
    inset: 0 auto auto 0;
    height: 3px;
    width: 100%;
    transform: scaleX(var(--pm-progress, 0));
    transform-origin: 0 50%;
    background: var(--pm-accent);
    z-index: 200;
    pointer-events: none;
}

.header__topbar.bg__secondary {
    background: var(--pm-ink) !important;
}

/* The vendor hovers these to --primary-color, which now resolves to the same
   ink as the bar behind them — the link would disappear on hover. */
.header__topbar .header__shipping--text__link:hover,
.header__topbar .header__shipping--text__link:focus-visible {
    color: #ffffff !important;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
}

.header__section .main__header {
    transition: box-shadow 0.35s var(--pm-ease), background-color 0.35s var(--pm-ease),
        padding 0.35s var(--pm-ease), transform 0.4s var(--pm-ease);
}

.header__sticky.sticky {
    background: rgba(255, 255, 255, 0.86) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--pm-line);
    box-shadow: 0 10px 30px -18px rgba(74, 18, 48, 0.45) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header__sticky.sticky {
        background: #fff !important;
    }
}

.header__menu--link {
    position: relative;
    transition: color 0.3s var(--pm-ease);
}

.header__menu--link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.4rem;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--pm-ink);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 0.4s var(--pm-ease);
}

.header__menu--items:hover .header__menu--link::after,
.header__menu--items.active .header__menu--link::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

.header__search--box .header__search--input {
    transition: box-shadow 0.3s var(--pm-ease), border-color 0.3s var(--pm-ease);
}

.header__search--box:focus-within {
    box-shadow: 0 0 0 3px var(--pm-rose-soft);
    border-radius: 0.6rem;
}

.header__account--btn .items__count {
    background: var(--pm-ink);
    color: #fff;
    box-shadow: none;
}

/* Announcement / USP strip */
.pm-usp {
    background: var(--pm-sand);
    border-bottom: 1px solid var(--pm-line);
    overflow: hidden;
}

.pm-usp__track {
    display: flex;
    align-items: center;
    gap: 4.8rem;
    padding: 1rem 0;
    justify-content: center;
    flex-wrap: wrap;
}

.pm-usp__item {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--pm-ink-2);
    white-space: nowrap;
}

.pm-usp__item svg {
    flex-shrink: 0;
    color: var(--pm-faint);
}

/* The duplicated run only exists to make the phone marquee loop seamlessly. */
@media only screen and (min-width: 768px) {
    .pm-usp__item[aria-hidden="true"] {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    .pm-usp__track {
        gap: 3.2rem;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: max-content;
        animation: pm-marquee 22s linear infinite;
        padding: 0.8rem 0;
    }

    .pm-usp__item {
        font-size: 1.25rem;
    }
}

@keyframes pm-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* Promo marquee: admin text scrolling under the trust strip on every viewport.
   The track holds six copies of the line and slides by half its width, so
   the loop never shows a gap. */
.pm-promo {
    overflow: hidden;
    background: var(--pm-accent);
    color: var(--pm-on-accent);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pm-promo__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: pm-marquee 28s linear infinite;
    padding: 0.7rem 0;
}

.pm-promo:hover .pm-promo__track {
    animation-play-state: paused;
}

.pm-promo__item {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0 2.4rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pm-promo__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

@media only screen and (max-width: 767px) {
    .pm-promo__track {
        animation-duration: 18s;
        padding: 0.6rem 0;
    }

    .pm-promo__item {
        font-size: 1.2rem;
        padding: 0 1.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pm-promo__track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
    }

    .pm-promo__item[aria-hidden="true"] {
        display: none;
    }
}

/* -- 5. Buttons ------------------------------------------------------------ */
.primary__btn,
.newsletter__subscribe--button,
.checkout__btn,
.cart__btn {
    position: relative;
    overflow: hidden;
    border-radius: var(--pm-radius-sm) !important;
    background: var(--pm-accent);
    background-image: none;
    color: var(--pm-on-accent);
    letter-spacing: 0.01em;
    font-weight: 600;
    box-shadow: none;
    transition: background-color 0.25s var(--pm-ease), transform 0.2s var(--pm-ease);
}

.primary__btn:hover,
.newsletter__subscribe--button:hover,
.checkout__btn:hover,
.cart__btn:hover {
    background: var(--pm-accent-strong);
    color: var(--pm-on-accent);
    transform: none;
    box-shadow: none;
}

.primary__btn:active,
.newsletter__subscribe--button:active,
.checkout__btn:active,
.cart__btn:active {
    transform: scale(0.985);
}

/* Secondary action: outlined, ink text. */
.pm-btn-quiet {
    border: 1px solid var(--pm-line-strong);
    background: transparent;
    color: var(--pm-ink);
    border-radius: var(--pm-radius-sm);
    font-weight: 600;
}

.pm-btn-quiet:hover {
    border-color: var(--pm-ink);
    color: var(--pm-ink);
}

.pm-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    transform: scale(0);
    animation: pm-ripple 0.6s var(--pm-ease) forwards;
    pointer-events: none;
}

@keyframes pm-ripple {
    to { transform: scale(2.6); opacity: 0; }
}

/* -- 5b. Form fields ------------------------------------------------------- */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea,
.checkout__input--field,
.contact__form--input {
    border-radius: 1rem;
    border-color: var(--pm-line);
    transition: border-color 0.3s var(--pm-ease), box-shadow 0.3s var(--pm-ease);
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.checkout__input--field:focus,
.contact__form--input:focus {
    border-color: var(--pm-rose) !important;
    box-shadow: 0 0 0 3px var(--pm-accent-soft);
    outline: none;
}

/* These two live inside their own bordered shells. */
.header__search--input,
.predictive__search--input,
.newsletter__subscribe--input {
    border-radius: inherit;
}

.header__search--input:focus,
.predictive__search--input:focus {
    box-shadow: none;
}

::placeholder {
    color: var(--pm-faint);
    opacity: 1;
}

/* The stock lamp/bus/email icons are baked pink PNGs; mute them to sit with
   the neutral chrome rather than reintroducing the old accent. */
.header__discount--icon__img,
.header__shipping--text__icon {
    filter: grayscale(1) brightness(1.6);
    opacity: 0.75;
}

/* The shipping/payment/return marks are baked orange; mute them to ink so the
   trust row reads as chrome rather than a third accent. */
.shipping__items2--icon img,
.shipping__items--icon img {
    filter: grayscale(1) brightness(0.55);
    opacity: 0.9;
}

/* -- 6. Section headings --------------------------------------------------- */
.section__heading--maintitle {
    font-size: clamp(2.8rem, 4vw, 4.4rem);
    line-height: 1.1;
    font-weight: 600;
    color: var(--pm-ink);
    padding-bottom: 2.6rem;
}

.section__heading--maintitle::before {
    background: var(--pm-line-strong) !important;
    width: 8rem !important;
    height: 1px !important;
    border-radius: 0;
}

.section__heading--maintitle::after {
    content: "";
    position: absolute;
    bottom: -0.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--pm-gold);
}

.collection__section--title h2 {
    color: var(--pm-ink);
    text-transform: none !important;
    letter-spacing: -0.015em !important;
    font-weight: 600;
}

.collection__section--title p {
    color: var(--pm-muted) !important;
    font-size: 1.6rem !important;
    line-height: 1.7;
}

/* Small eyebrow label above a heading, added by the JS layer. */
.pm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
    padding: 0;
    color: var(--pm-faint);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.pm-eyebrow::before,
.pm-eyebrow::after {
    content: "";
    width: 2.4rem;
    height: 1px;
    background: var(--pm-line-strong);
}

/* -- 7. Hero --------------------------------------------------------------- */
.hero__slider--section .swiper-slide-active .hero__banner--img {
    animation: pm-kenburns 8s var(--pm-ease) both;
}

@keyframes pm-kenburns {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
}

.hero__slider--section .swiper-pagination-bullet {
    background: var(--pm-plum);
    opacity: 0.28;
    transition: width 0.35s var(--pm-ease), opacity 0.35s var(--pm-ease),
        background-color 0.35s var(--pm-ease);
}

.hero__slider--section .swiper-pagination-bullet-active {
    background: var(--pm-rose);
    opacity: 1;
    width: 2.4rem;
    border-radius: 999px;
}

.swiper__nav--btn {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid var(--pm-line) !important;
    box-shadow: var(--pm-shadow);
    transition: transform 0.35s var(--pm-ease), background-color 0.35s var(--pm-ease);
}

.swiper__nav--btn:hover {
    background: #fff !important;
    transform: scale(1.08);
}

/* -- 8. Collection cards --------------------------------------------------- */
.collection__grid {
    perspective: 1200px;
}

.collection__card {
    box-shadow: var(--pm-shadow);
    transition: transform 0.55s var(--pm-ease), box-shadow 0.55s var(--pm-ease);
    transform-style: preserve-3d;
}

.collection__card::before {
    background: linear-gradient(
        180deg,
        rgba(35, 20, 28, 0) 0%,
        rgba(35, 20, 28, 0.08) 42%,
        rgba(35, 20, 28, 0.62) 100%
    ) !important;
    transition: opacity 0.5s var(--pm-ease);
}

.collection__card:hover {
    transform: translateY(-8px);
    box-shadow: var(--pm-shadow-lg);
}

.collection__card--media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.9s var(--pm-ease);
    z-index: 0;
}

.collection__card:hover .collection__card--media {
    transform: scale(1.07);
}

.collection__pill {
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    background: rgba(35, 20, 28, 0.34) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    transition: transform 0.4s var(--pm-ease), background-color 0.4s var(--pm-ease);
}

.collection__card:hover .collection__pill {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: transparent !important;
    color: var(--pm-ink) !important;
    text-shadow: none;
    transform: translateY(-3px);
}

/* -- 9. Product cards ------------------------------------------------------ */
.product__items {
    position: relative;
    border-radius: var(--pm-radius);
    background: var(--pm-surface);
    transition: transform 0.4s var(--pm-ease), box-shadow 0.4s var(--pm-ease);
}

.product__items:hover {
    transform: translateY(-4px);
    box-shadow: var(--pm-shadow);
}

.product__list--items {
    padding: 1.6rem;
    border: 1px solid var(--pm-line);
}

.product__list--items:hover {
    transform: none;
    box-shadow: var(--pm-shadow);
}

.product__list--items .product__items--action__list:not(:first-child) {
    flex: 0 0 auto;
}

.product__list--items .product__items--action__list:first-child {
    flex: 0 0 auto;
    max-width: 20rem;
}

.product__items--thumbnail,
.product__items--grid__thumbnail {
    border-radius: var(--pm-radius);
    background: var(--pm-sand);
    border: 1px solid var(--pm-line);
}

.product__items--img {
    transition: transform 0.7s var(--pm-ease), opacity 0.5s var(--pm-ease);
}

.product__items:hover .product__items--img {
    transform: scale(1.07) !important;
}

.product__badge--items {
    border-radius: 0.5rem;
    padding: 0.4rem 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    background: var(--pm-ink);
    color: #fff;
}

.product__badge--items.sale {
    background: var(--pm-ink);
    color: #ffffff;
}

.product__items--content {
    padding-top: 1.4rem;
}

.product__items--content__subtitle {
    color: var(--pm-faint);
    font-size: 1.15rem !important;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.product__items--content__title,
.product__items--content__title a {
    color: var(--pm-ink);
    font-weight: 600;
    letter-spacing: -0.005em;
}

.product__items--content__title a {
    background-image: linear-gradient(var(--pm-ink), var(--pm-ink));
    background-repeat: no-repeat;
    background-size: 0 1px;
    background-position: 0 100%;
    transition: background-size 0.35s var(--pm-ease);
}

.product__items--content__title a:hover {
    background-size: 100% 1px;
}

.current__price {
    color: var(--pm-accent) !important;
    font-size: 1.7rem !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.old__price {
    color: var(--pm-faint) !important;
    font-size: 1.35rem !important;
    font-weight: 500;
}

/* A gap reads cleaner than the stock dash, and stops an empty old price from
   leaving a dangling divider. */
.product__items--price,
.product__list--items__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.8rem;
}

.price__divided {
    display: none !important;
}

/* Saving chip: the one place a second colour earns its keep, because the
   discount is the strongest reason to click. */
.pm-save {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 0.4rem;
    background: var(--pm-accent-soft);
    color: var(--pm-accent);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.old__price:empty {
    display: none;
}

/* Action row: a full-width primary pill, with wishlist / quick view lifted onto
   the image as floating circles so the pill never has to share the line. */
.product__items--action {
    align-items: center;
    gap: 0.8rem;
}

.product__items--action__list {
    margin-right: 0 !important;
}

.product__items--action__list:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.product__items--action__btn {
    /* The ripple is absolutely positioned; without a containing block here it
       anchored to the card and spilled outside the pill. */
    position: relative;
    overflow: hidden;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 4.4rem !important;
    padding: 0 1rem;
    border-radius: var(--pm-radius-sm) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-plum) !important;
    background: #fff;
    line-height: 1 !important;
    white-space: nowrap;
    transition: background-color 0.35s var(--pm-ease), color 0.35s var(--pm-ease),
        border-color 0.35s var(--pm-ease), transform 0.35s var(--pm-ease),
        box-shadow 0.35s var(--pm-ease), opacity 0.35s var(--pm-ease);
}

.product__items--action__btn:hover {
    background: var(--pm-ink);
    border-color: var(--pm-ink) !important;
    color: #fff !important;
    transform: none;
}

.product__items--action__btn.add__to--cart {
    background: var(--pm-accent);
    border-color: transparent !important;
    color: var(--pm-on-accent) !important;
    font-weight: 600;
    box-shadow: none;
}

.product__items--action__btn.add__to--cart:hover {
    background: var(--pm-accent-strong);
    transform: none;
}

.add__to--cart__text {
    font-size: 1.35rem;
    letter-spacing: 0.01em;
}

@media only screen and (min-width: 576px) {
    .product__items:not(.product__list--items) .product__items--action__list:not(:first-child) {
        position: absolute;
        right: 1.2rem;
        z-index: 3;
        width: 4.2rem;
        opacity: 0;
        transform: translateX(1rem);
        transition: opacity 0.35s var(--pm-ease), transform 0.35s var(--pm-ease);
    }

    .product__items:not(.product__list--items) .product__items--action__list:nth-child(2) {
        top: 1.2rem;
    }

    .product__items:not(.product__list--items) .product__items--action__list:nth-child(3) {
        top: 6.2rem;
    }

    .product__items:not(.product__list--items):hover .product__items--action__list:not(:first-child),
    .product__items:not(.product__list--items):focus-within .product__items--action__list:not(:first-child) {
        opacity: 1;
        transform: none;
    }

    .product__items:not(.product__list--items) .product__items--action__list:not(:first-child) .product__items--action__btn {
        width: 4.2rem;
        padding: 0;
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        box-shadow: var(--pm-shadow-sm);
    }
}

@media only screen and (max-width: 575px) {
    /* Two taps' worth of room only: buy and save. Tapping the card is the
       quick view, so the eye button is redundant here. */
    .product__items:not(.product__list--items) .product__items--action__list:nth-child(3) {
        display: none;
    }

    .product__items--action__list:not(:first-child) .product__items--action__btn {
        width: 4.2rem;
        padding: 0;
        flex: 0 0 auto;
    }

    .add__to--cart__text {
        display: inline !important;
        font-size: 1.2rem;
    }

    /* A two-up card is too narrow for price + struck price + chip on one line.
       The saving percentage says the same thing in less space, so when it is
       present the original price steps aside. */
    .product__items--price:has(.pm-save) .old__price {
        display: none;
    }

    .pm-save {
        font-size: 1.1rem;
        padding: 0.2rem 0.6rem;
    }
}

/* Tab pills (Featured / Trending / ...) */
.product__tab--primary__btn__list {
    border-radius: 999px;
    padding: 0.9rem 2.2rem;
    margin-right: 1rem !important;
    border: 1px solid var(--pm-line);
    background: #fff;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.35s var(--pm-ease), color 0.35s var(--pm-ease),
        border-color 0.35s var(--pm-ease), box-shadow 0.35s var(--pm-ease);
}

.product__tab--primary__btn__list:hover {
    border-color: var(--pm-rose);
    color: var(--pm-rose-deep);
}

.product__tab--primary__btn__list.active {
    background: var(--pm-ink);
    border-color: var(--pm-ink);
    color: #fff !important;
    box-shadow: none;
}

.product__tab--primary__btn__list.active::before,
.product__tab--primary__btn__list.active::after {
    display: none;
}

.product__rating .rating__list svg,
.product__rating .rating__list {
    color: var(--pm-gold);
}

/* -- 9b. Product detail & shop sidebar ------------------------------------- */
.product__details--info__title,
.product__details--info__price .current__price {
    color: var(--pm-plum);
}

/* The stock stepper and its Add To Cart sit at 35-38px; both are below the
   44px minimum tap target and read as an afterthought next to Buy it now. */
.quantity__box {
    display: inline-flex;
    align-items: center;
    height: 4.8rem;
    border-radius: 999px;
    border: 1px solid var(--pm-line);
    overflow: hidden;
    background: #fff;
}

.quantity__box .quantity__value {
    width: 4.4rem;
    height: 4.8rem;
    border: 0;
    background: transparent;
    color: var(--pm-plum);
    font-size: 2rem;
    line-height: 1;
    transition: background-color 0.3s var(--pm-ease), color 0.3s var(--pm-ease);
}

.quantity__box .quantity__value:hover {
    background: var(--pm-rose-soft);
    color: var(--pm-rose-deep);
}

.quantity__box .quantity__number {
    width: 5rem;
    height: 4.8rem;
    border: 0;
    border-left: 1px solid var(--pm-line);
    border-right: 1px solid var(--pm-line);
    text-align: center;
    font-weight: 600;
    color: var(--pm-plum);
}

.quantity__box label {
    margin: 0;
    display: block;
}

.quickview__cart--btn.primary__btn {
    height: 4.8rem !important;
    line-height: 4.8rem !important;
    padding: 0 3rem !important;
    font-size: 1.5rem !important;
}

.product__details--action__wrapper .quickview__cart--btn,
.product__variant--chip {
    min-height: 4.4rem;
}

.product__media--preview,
.product__details--media,
.product__media--nav .swiper-slide img {
    border-radius: var(--pm-radius);
    overflow: hidden;
}

.product__tab--primary__btn__list,
.product__details--tab__list {
    cursor: pointer;
}

/* Shop sidebar widgets */
.shop__sidebar--widget,
.widget__categories,
.offcanvas__filter--sidebar .shop__sidebar--widget {
    border-radius: var(--pm-radius) !important;
    border-color: var(--pm-line) !important;
    box-shadow: var(--pm-shadow-sm);
}

.widget__title {
    color: var(--pm-plum);
}

.shop__sidebar--widget .widget__categories--menu__link:hover,
.shop__sidebar--widget .sidebar__categories--menu__link:hover {
    color: var(--pm-rose-deep) !important;
}

/* -- 10. Banners & deals --------------------------------------------------- */
.banner__items--thumbnail,
.deals__banner--inner {
    border-radius: var(--pm-radius-lg);
    overflow: hidden;
}

.banner__items {
    transition: transform 0.55s var(--pm-ease), box-shadow 0.55s var(--pm-ease);
}

.banner__items:hover {
    transform: translateY(-5px);
}

.banner__items--content__title,
.deals__banner--content__maintitle {
    color: var(--pm-plum);
    line-height: 1.18;
}

.deals__banner--content__subtitle {
    color: var(--pm-rose-deep) !important;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 1.25rem;
}

.banner__items--content__link {
    position: relative;
    font-weight: 600;
}

.countdown__item {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow-sm);
}

.countdown__number {
    color: var(--pm-plum);
    font-family: var(--pm-display);
}

/* -- 11. Testimonials ------------------------------------------------------ */
.testimonial__items {
    border-radius: var(--pm-radius) !important;
    border: 1px solid var(--pm-line);
    background: var(--pm-surface);
    transition: transform 0.5s var(--pm-ease), box-shadow 0.5s var(--pm-ease);
}

.testimonial__items:hover {
    transform: translateY(-6px);
    box-shadow: var(--pm-shadow);
}

.testimonial__section .swiper-pagination-bullet-active {
    background: var(--pm-rose);
}

/* -- 12. Footer & newsletter ----------------------------------------------- */
.footer__section.bg__black {
    background: #1c1a19;
}

/* The stock footer sizes its columns in percentages plus fixed margins, which
   overflows and wraps to a ragged two-up between roughly 1200px and 1365px.
   A grid sizes itself instead. */
@media only screen and (min-width: 768px) {
    .main__footer {
        display: grid !important;
        gap: 4rem 3rem;
        align-items: start;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .main__footer .footer__widget,
    .main__footer .footer__widget--width {
        width: auto !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media only screen and (min-width: 1200px) {
    .main__footer {
        grid-template-columns: 1.5fr 1fr 1.3fr 1.4fr;
    }
}

.main__footer {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.footer__instagram--list {
    gap: 1rem;
}

.footer__instagram .instagram__thumbnail {
    margin-right: 0 !important;
    border-radius: 1rem;
}

.footer__widget--title {
    color: #fff;
    font-weight: 600;
}

.footer__widget--title::before {
    background: rgba(255, 255, 255, 0.28) !important;
    height: 1px !important;
    border-radius: 0;
}

.footer__widget--menu__text,
.footer__widget--menu__link {
    transition: color 0.3s var(--pm-ease), padding-left 0.3s var(--pm-ease);
}

.footer__widget--menu__link:hover {
    color: #ffffff !important;
    padding-left: 0.6rem;
}

.footer__social--menu__link,
.footer__widget .social__share--link {
    transition: transform 0.35s var(--pm-ease), color 0.3s var(--pm-ease);
}

.footer__social--menu__link:hover {
    transform: translateY(-3px);
    color: #ffffff !important;
}

.newsletter__subscribe--input {
    border-radius: 999px !important;
    transition: box-shadow 0.3s var(--pm-ease);
}

.newsletter__subscribe--input:focus {
    box-shadow: 0 0 0 3px var(--pm-accent-soft);
}

.footer__instagram .instagram__thumbnail--img img {
    border-radius: 1rem;
    transition: transform 0.5s var(--pm-ease), filter 0.5s var(--pm-ease);
}

.footer__instagram .instagram__thumbnail--img:hover img {
    transform: scale(1.08);
    filter: saturate(1.15);
}

/* -- 12b. Toasts & badge feedback ------------------------------------------ */
.pm-toasts {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none;
}

.pm-toast {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    max-width: 32rem;
    padding: 1.3rem 1.8rem 1.3rem 4.2rem;
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid var(--pm-line);
    box-shadow: var(--pm-shadow-lg);
    color: var(--pm-plum);
    font-size: 1.45rem;
    font-weight: 600;
    position: relative;
    opacity: 0;
    transform: translateY(1.6rem) scale(0.96);
    transition: opacity 0.35s var(--pm-ease), transform 0.35s var(--pm-ease);
}

.pm-toast::before {
    content: "";
    position: absolute;
    left: 1.4rem;
    top: 50%;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
    border-radius: 50%;
    background-color: var(--pm-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    background-size: 1.1rem 1.1rem;
    background-position: center;
    background-repeat: no-repeat;
}

.pm-toast.pm-in {
    opacity: 1;
    transform: none;
}

.items__count.pm-empty {
    display: none !important;
}

.items__count.pm-pop {
    animation: pm-pop 0.5s var(--pm-ease);
}

@keyframes pm-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.45); }
    100% { transform: scale(1); }
}

@media only screen and (max-width: 767px) {
    .pm-toasts {
        right: 1.2rem;
        left: 1.2rem;
        bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px));
        align-items: stretch;
    }

    .pm-toast {
        max-width: none;
    }
}

/* -- 12c. Inline notice ----------------------------------------------------- */
.pm-notice {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.4rem;
    padding: 1.4rem 1.8rem;
    border: 1px solid var(--pm-accent-line);
    border-left: 3px solid var(--pm-accent);
    border-radius: var(--pm-radius-sm);
    background: var(--pm-accent-soft);
    color: var(--pm-ink);
    font-size: 1.45rem;
    line-height: 1.5;
}

/* -- 12d. Read more ---------------------------------------------------------- */
[data-pm-clamp] {
    position: relative;
    transition: max-height 0.45s var(--pm-ease);
}

[data-pm-clamp].pm-clamped {
    overflow: hidden;
}

/* The fade is what tells the reader there is more below the cut. */
[data-pm-clamp].pm-clamped::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 6.5rem;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        var(--pm-clamp-bg, var(--pm-surface)) 88%
    );
    pointer-events: none;
}

.pm-readmore {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.2rem;
    padding: 0.9rem 1.6rem 0.9rem 1.8rem;
    min-height: 4.4rem;
    border: 1px solid var(--pm-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--pm-ink);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: border-color 0.25s var(--pm-ease), color 0.25s var(--pm-ease),
        background-color 0.25s var(--pm-ease);
}

.pm-readmore:hover {
    border-color: var(--pm-accent);
    color: var(--pm-accent);
    background: var(--pm-accent-soft);
}

.pm-readmore__chevron {
    transition: transform 0.35s var(--pm-ease);
}

[aria-expanded="true"].pm-readmore .pm-readmore__chevron {
    transform: rotate(180deg);
}

.pm-readmore[hidden] {
    display: none;
}

/* -- 12e. Card affordances & attention motion -------------------------------- */
.pm-card-nav {
    cursor: pointer;
}

/* The card is clickable, so give it the same hover feedback a link would get. */
.pm-card-nav:hover .product__items--content__title a {
    background-size: 100% 1px;
}

@keyframes pm-nudge {
    0%, 100% { transform: none; }
    12% { transform: translate3d(-2px, 0, 0); }
    26% { transform: translate3d(2px, 0, 0); }
    40% { transform: translate3d(-1.5px, 0, 0); }
    54% { transform: translate3d(1.5px, 0, 0); }
    68% { transform: translate3d(-1px, 0, 0); }
    82% { transform: translate3d(1px, 0, 0); }
}

.pm-nudge {
    animation: pm-nudge 0.75s var(--pm-ease);
}

/* -- 13. Back to top ------------------------------------------------------- */
#scroll__top {
    background: var(--pm-ink);
    box-shadow: var(--pm-shadow);
    transition: transform 0.3s var(--pm-ease), opacity 0.3s var(--pm-ease),
        background-color 0.3s var(--pm-ease);
}

#scroll__top:hover {
    background: var(--pm-accent);
    color: var(--pm-on-accent);
    transform: translateY(-3px);
}

/* -- 14. Mobile ------------------------------------------------------------ */
@media only screen and (max-width: 991px) {
    .section__heading--maintitle {
        font-size: clamp(2.4rem, 7vw, 3.2rem);
        padding-bottom: 2.2rem;
    }

    .collection__section--title p {
        font-size: 1.5rem !important;
        padding: 0 0.6rem;
    }

    /* Phones scroll past a lot of photography — keep the bar close to solid so
       the logo and icons stay legible over whatever is behind them. */
    .header__sticky.sticky {
        padding: 1rem 0 !important;
        background: rgba(255, 255, 255, 0.97) !important;
    }

    .header__sticky.sticky .main__logo--img {
        max-height: 5.2rem;
        width: auto;
    }

    /* Slide the sticky bar away while scrolling down, bring it back on scroll up. */
    .header__sticky.sticky.pm-header-hidden {
        transform: translateY(-104%);
    }

    .product__items--content__title,
    .product__items--content__title a {
        font-size: 1.5rem;
        line-height: 1.4;
        font-weight: 600;
    }

    .product__items--content__subtitle {
        font-size: 1.1rem !important;
    }

    .current__price {
        font-size: 1.6rem !important;
    }

    .product__items--action__btn {
        min-height: 4.4rem;
    }

    .add__to--cart__text {
        font-size: 1.25rem;
    }
}

@media only screen and (max-width: 991px) {
    /* Reclaim vertical space above the fold: the stock logo is a 100px square
       and the announcement bar is set at desktop size. */
    .header__topbar .header__shipping--text {
        font-size: 1.25rem;
        line-height: 1.6;
    }

    .header__topbar--inner {
        padding: 0.4rem 0;
    }

    .main__header .main__logo--img {
        width: auto !important;
        height: 6.4rem !important;
    }

    .main__header {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    /* Bottom tab bar: line icons on a quiet bar. The active tab is marked by
       the accent rule above it, not by a filled disc behind every icon. */
    .offcanvas__stikcy--toolbar {
        padding: 0.4rem 0.6rem calc(0.4rem + env(safe-area-inset-bottom, 0px)) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        backdrop-filter: saturate(180%) blur(18px);
        border-top: 1px solid var(--pm-line);
        box-shadow: none !important;
    }

    .offcanvas__stikcy--toolbar__list {
        position: relative;
        flex: 1 1 0;
    }

    .offcanvas__stikcy--toolbar__btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.9rem 0.2rem 0.7rem;
        color: var(--pm-muted);
    }

    .offcanvas__stikcy--toolbar__icon {
        width: 2.6rem !important;
        height: 2.6rem !important;
        line-height: 1 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        color: var(--pm-ink-2) !important;
        box-shadow: none !important;
        transition: color 0.25s var(--pm-ease), transform 0.25s var(--pm-ease);
    }

    .offcanvas__stikcy--toolbar__icon svg {
        width: 2.2rem;
        height: 2.2rem;
        stroke-width: 1.6;
    }

    .offcanvas__stikcy--toolbar__label {
        font-size: 1.05rem !important;
        font-weight: 500;
        letter-spacing: 0.01em;
        margin-top: 0 !important;
        color: var(--pm-muted);
        transition: color 0.25s var(--pm-ease);
    }

    /* Active tab: accent icon, accent label, 3px rule along the top edge. */
    .offcanvas__stikcy--toolbar__list.pm-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 2.8rem;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--pm-accent);
    }

    .offcanvas__stikcy--toolbar__list.pm-active .offcanvas__stikcy--toolbar__icon {
        color: var(--pm-accent) !important;
    }

    .offcanvas__stikcy--toolbar__list.pm-active .offcanvas__stikcy--toolbar__label {
        color: var(--pm-accent);
        font-weight: 600;
    }

    .offcanvas__stikcy--toolbar__btn:active .offcanvas__stikcy--toolbar__icon {
        transform: scale(0.92);
    }

    /* Counters read as small ink pills pinned to the icon, not floating above
       the bar as the stock -13px offset leaves them. */
    .offcanvas__stikcy--toolbar .items__count {
        position: absolute;
        top: 0.4rem !important;
        right: auto !important;
        left: 50% !important;
        margin-left: 0.4rem;
        background: var(--pm-accent) !important;
        color: var(--pm-on-accent);
        box-shadow: 0 0 0 2px #fff;
        font-size: 0.95rem;
        font-weight: 700;
        min-width: 1.6rem;
        height: 1.6rem;
        line-height: 1.6rem;
        padding: 0 0.4rem;
        border-radius: 999px;
        text-align: center;
    }

    #scroll__top {
        bottom: calc(9rem + env(safe-area-inset-bottom, 0px)) !important;
        right: 1.6rem !important;
        width: 4rem;
        height: 4rem;
    }

    /* Collection tiles read better as a taller 2-up grid on phones. */
    .collection__pill {
        font-size: 1.1rem !important;
        letter-spacing: 0.06em !important;
        min-height: 3.8rem !important;
        padding: 0.8rem 1rem !important;
    }

    .product__items {
        border-radius: 1.4rem;
    }

    .product__items:hover {
        transform: none;
        box-shadow: none;
    }

    .banner__items--content__title {
        font-size: 2rem;
        line-height: 1.25;
    }

    .section--padding {
        padding-top: 4.8rem;
        padding-bottom: 4.8rem;
    }

    .testimonial__items {
        border-radius: 1.8rem !important;
    }

    .pm-usp {
        border-top: 1px solid var(--pm-line);
    }
}

/* Drawer footer: the menu ends well short of the bottom on a phone, so the
   space carries the two things a shopper actually reaches for next. */
.offcanvas__menu {
    padding-bottom: 3rem;
}

.pm-drawer__cta {
    margin: 2.4rem 2rem 0;
    padding: 2rem;
    border-radius: var(--pm-radius);
    background: var(--pm-sand);
    border: 1px solid var(--pm-line);
}

.pm-drawer__cta--label {
    display: block;
    margin-bottom: 1.2rem;
    color: var(--pm-muted);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pm-drawer__cta--call,
.pm-drawer__cta--social {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.4rem;
    color: var(--pm-plum);
    font-size: 1.5rem;
    font-weight: 600;
    transition: color 0.3s var(--pm-ease);
}

.pm-drawer__cta--call svg,
.pm-drawer__cta--social svg {
    flex-shrink: 0;
    color: var(--pm-faint);
}

.pm-drawer__cta--call:hover,
.pm-drawer__cta--social:hover {
    color: var(--pm-rose-deep);
}

/* Offcanvas menu: larger, calmer targets. */
.offcanvas__menu_item {
    font-family: var(--pm-display);
    font-size: 2rem;
    transition: color 0.3s var(--pm-ease), padding-left 0.3s var(--pm-ease);
}

.offcanvas__menu_item:hover {
    color: var(--pm-rose) !important;
    padding-left: 0.6rem;
}

/* -- 15. Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    [data-pm-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .pm-nudge {
        animation: none !important;
    }

    [data-pm-clamp] {
        transition: none !important;
    }

    .pm-usp__track {
        animation: none !important;
        width: auto !important;
    }
}