/*
Theme Name: QuickTheme
Theme URI: https://wpquickform.com
Author: QuickTheme
Author URI: https://wpquickform.com
Description: Ultra-lightweight WordPress theme optimized for COD (Cash on Delivery) sellers. Built for speed with minimal CSS, JS, and HTML. Integrates seamlessly with QuickFORM for instant checkout.
Version: 1.6
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quicktheme
Tags: e-commerce, woocommerce, lightweight, fast, cod, checkout

QuickTheme is a minimal, high-performance theme designed for COD sellers.
*/

@font-face {
    font-family: "Thmanyah Sans";
    src: url("assets/fonts/ThmanyahSans-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Thmanyah Sans";
    src: url("assets/fonts/ThmanyahSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Thmanyah Sans";
    src: url("assets/fonts/ThmanyahSans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Thmanyah Sans";
    src: url("assets/fonts/ThmanyahSans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary-color: #17a2b8;
    --primary-color-hover: #138496;
    --header-top-bg: var(--primary-color);
    --header-top-text: #ffffff;
    --font-body: "Thmanyah Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-headings: "Thmanyah Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-weight-body: 400;
    --font-weight-headings: 700;
    /* Corner radius: overridden in Customizer (QuickTheme — Apparence → Rayon des coins) */
    --theme-radius: 8px;
    --theme-radius-sm: 4px;
    --theme-radius-md: 6px;
    --theme-radius-lg: 12px;
    --theme-radius-xl: 16px;
    /* Align with QuickFORM shells; follows theme radius when Customizer CSS loads */
    --qt-field-radius: var(--theme-radius);
    --qt-field-shadow: -2px 5px 12.9px -9px rgba(157, 157, 157, 0.81);
    /* Shared show/hide reveal — reuse for banners, notices, expand panels */
    --qt-reveal-duration: 0.35s;
    --qt-reveal-ease: ease;
    --qt-reveal-distance: 6px;
    /* QForm action-button tokens mapped to the active brand color. */
    --qt-button-bg: var(--primary-color);
    --qt-button-bg-hover: color-mix(in srgb, var(--primary-color) 88%, #000);
    --qt-button-bg-pressed: color-mix(in srgb, var(--primary-color) 74%, #000);
    --qt-button-edge: color-mix(in srgb, var(--primary-color) 72%, #000);
    --qt-button-focus: color-mix(in srgb, var(--primary-color) 45%, transparent);
    /* Floating header bar: the <header> is a transparent shell and .header-main
       is a centred card detached from the top of the viewport. */
    /* One track for the whole site: the floating header bar, .home-shell and
       every .container-based layout all measure to this. */
    --qt-layout-max: 1280px;
    --qt-header-max: var(--qt-layout-max);
    /* Sign-out glyph, applied as a mask so it takes the link's colour. */
    --qt-logout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 17l5-5-5-5'/%3E%3Cpath d='M20 12H9'/%3E%3Cpath d='M9 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E");
    /* 24px matches the theme's canvas gutter, so the bar's edges line up with
       .home-shell and the .container-based layouts at every width. */
    --qt-header-gutter: 24px;
    --qt-header-gap: 16px;
    --qt-header-radius: 12px;
    --qt-header-pad-x: 16px;
    --qt-header-min-h: 60px;
    /* Header button palette. Set --qt-header-cta-bg to #181b25 for a neutral/black CTA. */
    --qt-header-cta-bg: var(--primary-color);
    --qt-header-btn-border: #e4e7ec;
    --qt-header-btn-text: #181b25;
    --qt-header-btn-hover: #f9fafb;
    --qt-header-nav-text: #475467;
}

/* ============================================
   CSS Reset & Base Styles
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-body);
    line-height: 1.6;
    color: #333;
    background: #fff;
    font-variant-numeric: normal;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

body.menu-open {
    overflow: hidden;
}

/* Headings use bold */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-headings);
    font-weight: var(--font-weight-headings);
    line-height: 1.3em;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Description, short description & header nav: theme color + center-expand underline */
.woocommerce-product-details__short-description a,
.woocommerce-Tabs-panel--description a,
#tab-description a,
.main-navigation .nav-menu > li > a {
    position: relative;
    display: inline-block;
    transition: color 0.2s ease;
}

.woocommerce-product-details__short-description a::after,
.woocommerce-Tabs-panel--description a::after,
#tab-description a::after,
.main-navigation .nav-menu > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.woocommerce-product-details__short-description a:hover,
.woocommerce-product-details__short-description a:focus-visible,
.woocommerce-Tabs-panel--description a:hover,
.woocommerce-Tabs-panel--description a:focus-visible,
#tab-description a:hover,
#tab-description a:focus-visible,
.main-navigation .nav-menu > li > a:hover,
.main-navigation .nav-menu > li > a:focus-visible,
.main-navigation .nav-menu > li.current-menu-item > a,
.main-navigation .nav-menu > li.current-menu-ancestor > a {
    color: var(--primary-color);
}

.woocommerce-product-details__short-description a:hover::after,
.woocommerce-product-details__short-description a:focus-visible::after,
.woocommerce-Tabs-panel--description a:hover::after,
.woocommerce-Tabs-panel--description a:focus-visible::after,
#tab-description a:hover::after,
#tab-description a:focus-visible::after,
.main-navigation .nav-menu > li > a:hover::after,
.main-navigation .nav-menu > li > a:focus-visible::after,
.main-navigation .nav-menu > li.current-menu-item > a::after,
.main-navigation .nav-menu > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
}

@media (max-width: 768px) {
    .main-navigation .nav-menu > li > a::after {
        content: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce-product-details__short-description a,
    .woocommerce-Tabs-panel--description a,
    #tab-description a,
    .main-navigation .nav-menu > li > a {
        transition: color 0.15s ease;
    }

    .woocommerce-product-details__short-description a::after,
    .woocommerce-Tabs-panel--description a::after,
    #tab-description a::after,
    .main-navigation .nav-menu > li > a::after {
        transition: none;
    }
}

/* Final mobile canvas gutter: all page layouts align to 24px side padding. */
@media (max-width: 768px) {
    .site-main > .container,
    .site-main > .shop-page-wrapper,
    .site-main > .single-product-wrapper,
    .site-main > .landing-page-wrapper,
    .site-main > .page-hero,
    .site-main > .categories-grid-section,
    .site-main > .info-boxes-row,
    .site-main > .subcat-slider-section,
    .site-main > .qt-reviews-page {
        padding-inline: 24px;
    }

    .home-shell {
        width: calc(100% - 48px);
        padding-inline: 0;
    }

    .container {
        width: auto;
        max-width: none;
        margin-inline: 0;
        padding-inline: 24px;
    }

    .categories-grid-section,
    .info-boxes-row,
    .subcat-slider-wrapper {
        padding-inline: 24px;
    }
}

/* Outline treatment for preview actions (kept after the shared solid-button layer). */
.home-page .home-hero__button--secondary,
.home-page .home-purchase-card__preview {
    background: transparent !important;
    color: #111827 !important;
    border-color: color-mix(in srgb, #111827 25%, #fff) !important;
    box-shadow: none !important;
}

.home-page .home-hero__button--secondary:hover,
.home-page .home-purchase-card__preview:hover {
    background: rgba(17, 24, 39, 0.04) !important;
    color: #111827 !important;
    border-color: color-mix(in srgb, #111827 25%, #fff) !important;
    box-shadow: none !important;
}

/* Consistent vertical rhythm for the main page sections across templates.
   One token drives every section so top and bottom padding always match and
   the whole page tightens together on small screens. */
:root {
    --qt-section-space: 40px;
    /* Clearance between the floating bar and the first hero on a page. */
    --qt-hero-top-space: 32px;
}

@media (min-width: 769px) {
    :root {
        --qt-section-space: 56px;
        --qt-hero-top-space: 48px;
    }
}

@media (min-width: 1025px) {
    :root {
        --qt-section-space: 112px;
        --qt-hero-top-space: 64px;
    }
}

.site-main section,
.home-page > section {
    margin-block: 0 !important;
    padding-block: var(--qt-section-space);
}

/* The hero sits directly beneath the fixed bar, and .home-page already offsets
   the page by that bar's height — without trimming it back out the space above
   the headline reads as roughly double every other section's. */
.home-page > .home-hero {
    padding-top: max(var(--qt-hero-top-space), calc(var(--qt-section-space) - var(--header-height, 0px)));
}

/* ============================================
   QForm Footer
   ============================================ */
.qform-footer {
    margin-top: 0;
    border-top: 1px solid #e8e8e8;
    background: #fff;
    color: #1f2937;
}

/* Three-column band: brand + description on one side, two link columns beside
   it. The brand column takes the wider track so its paragraph wraps at a
   readable measure while the link columns stay tight. */
.qform-footer__inner {
    max-width: var(--qt-layout-max);
    margin-inline: auto;
    padding: 64px 24px 32px;
}

.qform-footer__cols {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
    gap: 48px;
    align-items: start;
}

.qform-footer__brand {
    display: grid;
    justify-items: start;
    gap: 20px;
    max-width: 420px;
}

.qform-footer__tagline {
    margin: 0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.85;
}

.qform-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qform-footer__socials li {
    margin: 0;
}

.qform-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 999px;
    color: #4b5563;
    transition: color 160ms ease, border-color 160ms ease;
}

.qform-footer__social svg {
    width: 17px;
    height: 17px;
}

.qform-footer__social:hover,
.qform-footer__social:focus-visible {
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
}

.qform-footer__col-title {
    margin: 0 0 20px;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.qform-footer__menu {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qform-footer__menu li {
    margin: 0;
}

.qform-footer__menu a {
    color: #4b5563;
    font-size: 15px;
    text-decoration: none;
    transition: color 160ms ease;
}

.qform-footer__menu a:hover,
.qform-footer__menu a:focus-visible {
    color: var(--primary-color);
}

.qform-footer__logo .custom-logo-link {
    display: inline-flex;
    align-items: center;
}

.qform-footer__logo .custom-logo {
    display: block;
    width: auto;
    max-height: 40px;
}

.qform-footer__name {
    color: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

/* One shared focus ring for every footer link. */
.qform-footer a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Legal row: copyright at the inline start, policy links at the end, split off
   by a hairline rule inside the same panel. */
.qform-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid #e8e8e8;
    color: #6b7280;
    font-size: 14px;
}

.qform-footer__copyright {
    margin: 0;
}

.qform-footer__legal ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qform-footer__legal li {
    margin: 0;
}

.qform-footer__legal a {
    color: #4b5563;
    text-decoration: none;
    transition: color 160ms ease;
}

.qform-footer__legal a:hover,
.qform-footer__legal a:focus-visible {
    color: var(--primary-color);
}

@media (max-width: 1024px) {
    .qform-footer__cols {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 40px;
    }

    /* Brand spans the full row so its paragraph keeps a readable measure and the
       two link columns pair up underneath it. */
    .qform-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .qform-footer {
        margin-top: 0;
    }

    .qform-footer__inner {
        padding: 40px 24px 28px;
        text-align: center;
    }

    .qform-footer__cols {
        gap: 32px;
        justify-items: center;
    }

    .qform-footer__brand {
        justify-items: center;
        max-width: 100%;
    }

    .qform-footer__tagline {
        text-align: center;
    }

    .qform-footer__socials {
        justify-content: center;
    }

    .qform-footer__col {
        width: 100%;
        text-align: center;
    }

    .qform-footer__col-title,
    .qform-footer__menu,
    .qform-footer__menu a {
        text-align: center;
    }

    .qform-footer__col-title {
        margin-bottom: 16px;
    }

    .qform-footer__bottom {
        margin-top: 36px;
        padding-top: 24px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        text-align: center;
    }

    .qform-footer__legal ul {
        justify-content: center;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .qform-footer__cols {
        grid-template-columns: 1fr;
    }
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

ul,
ol {
    list-style: none;
}

/* Light page transitions — leave fade only (no blank enter flash) */
@media (prefers-reduced-motion: no-preference) {
    body.qt-transitions {
        transition: opacity 0.1s ease;
    }

    body.qt-transitions.qt-page-leave {
        opacity: 0;
    }
}

/* ============================================
   Header Styles
   ============================================ */
/* Transparent shell: only the announcement bar and the floating .header-main card
   paint, so the gaps around the card stay click-through to the page beneath. */
.site-header {
    background: transparent;
    /* Fixed — immune to overflow-x:hidden on html/body which silently breaks position:sticky */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.site-header > * {
    pointer-events: auto;
}

/* Lift the floating bar once scrolled (all pages) */
.site-header.header-scrolled .header-main {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 28px -16px rgba(16, 24, 40, 0.3);
}

/* Hide-on-scroll (sticky header JS toggles .header-hidden) */
.site-header.header-hidden {
    transform: translateY(-100%);
}

/* Top-bar slides up and fades out on first scroll, leaving only header-main visible.

   --qt-top-bar-h is measured in header-utils.js and is the bar's real height. A fixed
   ceiling taller than the content leaves dead travel at the open end of the animation:
   the bar reaches full height early and the rest of the duration animates nothing, which
   reads as a snap on the way back down. Every property shares one duration and easing so
   height, fade and slide land together. The 48px fallback only applies before JS runs. */
.site-header .header-top-bar {
    max-height: var(--qt-top-bar-h, 48px);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition:
        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .site-header .header-top-bar {
        transition: none;
    }
}

.site-header.header-scrolled .header-top-bar {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

/* Product pages: announcement bar is not rendered; keep CSS fallback if markup is present */
/* overflow-x:hidden breaks position:sticky; clip keeps PDP gallery sticky usable */
html:has(body.single-product-page),
body.single-product-page {
    overflow-x: clip;
}

/* Offset body so fixed header doesn't overlap content — value set by ResizeObserver in JS.
   Qualified with `html` so it outranks the `body { padding: 0 }` that WordPress emits from
   theme.json in #global-styles-inline-css, which otherwise wins on WooCommerce archives. */
html body {
    padding-top: var(--header-height, 0px);
}

.header-top-bar {
    background: var(--header-top-bg);
    padding: 9px 8px; /* ~35% shorter than previous 14px vertical padding */
    font-size: 12px;
    font-weight: 500;
    color: var(--header-top-text);
}

.header-top-bar--carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.header-top-bar__viewport {
    flex: 1;
    min-width: 0;
    max-width: 40%;
}

.header-top-bar__track {
    display: grid;
    margin: 0;
    padding: 0;
}

.header-top-bar__item {
    grid-area: 1 / 1;
    margin: 0;
    padding: 0;
    line-height: 1.1rem;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: opacity 0.65s ease, transform 0.45s ease, visibility 0.45s;
    pointer-events: none;
}

.header-top-bar__item.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .header-top-bar__item {
        transition: none;
        transform: none;
    }
}

.header-top-bar__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    margin: 0;
    border: none;
    background: transparent;
    /* Match announcement text (Customizer --header-top-text); Hugeicons use currentColor after theme processing */
    color: var(--header-top-text);
    cursor: pointer;
    line-height: 0;
}

.header-top-bar__btn svg {
    display: block;
    flex-shrink: 0;
}

.header-top-bar__btn svg :where(path, line, circle, ellipse, polyline) {
    stroke: currentColor;
}

/* RTL: flip top-bar chevrons direction (visual only). */
[dir="rtl"] .header-top-bar__btn svg {
    transform: scaleX(-1);
}

.header-top-bar__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.header-top-bar--single .header-top-bar__btn {
    display: none;
}

.header-top-bar--single .header-top-bar__viewport {
    flex: 1 1 auto;
}

@media (max-width: 768px) {
    .header-top-bar {
        padding: 10px 10px; /* −4px total height vs desktop 9px vertical */
    }

    .header-top-bar__viewport {
        max-width: 100%;
    }
    .header-top-bar__item {
        font-size: 10px;
    }
}

/* The floating bar itself: a centred, rounded card inset from the viewport edges. */
.header-main {
    width: min(calc(100% - (var(--qt-header-gutter) * 2)), var(--qt-header-max));
    margin: var(--qt-header-gap) auto 0;
    padding: 10px var(--qt-header-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--qt-header-min-h);
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: var(--qt-header-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    /* Don't clip fixed positioned children */
    overflow: visible;
}

.site-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-width: 0;
}

.site-logo img {
    max-height: 32px;
    width: auto;
}

.main-navigation {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.main-navigation ul {
    display: flex;
    gap: 0;
    align-items: center;
}

/* Padding lives on the <li> (like the reference header) so the nav underline
   hugs the label instead of spanning the whole hit area. */
.main-navigation .nav-menu > li {
    padding: 8px 16px;
}

.main-navigation a {
    font-size: 15px;
    color: var(--qt-header-nav-text);
    letter-spacing: 0px;
}

/* ---- Shared button pair (outline + solid). Used by the header bar and the
   pricing plan cards, so both stay in step. ---- */
.qt-header-btn,
.home-plan-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 9px 14px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.qt-header-btn--outline,
.home-plan-card__cta--outline {
    background: #fff;
    border: 1px solid var(--qt-header-btn-border);
    color: var(--qt-header-btn-text);
}

.qt-header-btn--outline:hover,
.home-plan-card__cta--outline:hover {
    background: var(--qt-header-btn-hover);
}

.qt-header-btn--outline:focus-visible,
.home-plan-card__cta--outline:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(16, 24, 40, 0.08);
}

.qt-header-btn--solid,
.home-plan-card__cta--solid {
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%), var(--qt-header-cta-bg);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.24), 0 0 0 1px color-mix(in srgb, var(--qt-header-cta-bg) 78%, #000);
}

.qt-header-btn--solid:hover,
.home-plan-card__cta--solid:hover {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), var(--qt-button-bg-hover, var(--qt-header-cta-bg));
}

.qt-header-btn--solid:focus-visible,
.home-plan-card__cta--solid:focus-visible {
    outline: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.24), 0 0 0 4px var(--qt-button-focus);
}

/* Account button drops out of the bar on mobile — it moves into the drawer. */
.mobile-menu-actions {
    display: none;
}

.header-search {
    flex-shrink: 0;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    color: #333;
}

.header-search:hover {
    color: var(--primary-color);
}

.header-search svg {
    width: 32px;
    height: 32px;
    display: block;
    flex-shrink: 0;
    fill: none;
    overflow: visible;
    transition: color 0.2s;
}

.header-search svg path {
    fill: none;
    stroke: currentColor;
}

/* Desktop wishlist (before account) */
.header-wishlist {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #333;
    line-height: 0;
    text-decoration: none;
}

.header-wishlist:hover {
    color: var(--primary-color);
}

.header-wishlist svg {
    width: 32px;
    height: 32px;
    display: block;
    flex-shrink: 0;
    fill: none;
    overflow: visible;
    transition: color 0.2s;
}

.header-wishlist svg path {
    fill: none;
    stroke: currentColor;
}

/* Header Actions Container */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Desktop: logo start, nav centred, buttons end. */
@media (min-width: 769px) {
    :root {
        --qt-header-gap: 24px;
        --qt-header-radius: 16px;
        --qt-header-pad-x: 24px;
        --qt-header-min-h: 72px;
    }

    .header-main {
        padding-top: 14px;
        padding-bottom: 14px;
        gap: 24px;
    }

    .site-logo img {
        max-height: 36px;
    }

    .header-actions {
        gap: 12px;
    }

    /* Logo and actions are fixed-width bookends; the nav takes the middle and
       stays optically centred as long as both ends are of similar width. */
    .site-logo,
    .header-actions {
        flex: 0 0 auto;
    }
}

@media (min-width: 1280px) {
    :root {
        --qt-header-gap: 28px;
    }
}

/* ---- Desktop inline search bar + live results ---- */
.header-search-bar {
    position: relative;
    /* Grows into the free space between logo/nav and the action icons */
    flex: 1 1 400px;
    max-width: 440px;
    min-width: 0;
}

/* Live region for screen readers only */
.header-search-bar__status.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Desktop shows the bar, mobile falls back to the icon + popup */
.header-search {
    display: none;
}

.header-search-bar__form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.header-search-bar__form:focus-within {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.header-search-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #666;
    line-height: 0;
}

.header-search-bar__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
}

.header-search-bar__icon svg path {
    fill: none;
    stroke: currentColor;
}

.header-search-bar__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: #333;
    padding: 0;
}

.header-search-bar__input::placeholder {
    color: #999;
}

/* Hide the browser's native search clear affordance — we ship our own */
.header-search-bar__input::-webkit-search-decoration,
.header-search-bar__input::-webkit-search-cancel-button,
.header-search-bar__input::-webkit-search-results-button,
.header-search-bar__input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.header-search-bar__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #555;
    cursor: pointer;
    line-height: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.header-search-bar__clear:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #111;
}

.header-search-bar__clear svg {
    width: 12px;
    height: 12px;
}

.header-search-bar__spinner {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: qt-live-search-spin 0.7s linear infinite;
}

@keyframes qt-live-search-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .header-search-bar__spinner {
        animation-duration: 1.6s;
    }
}

.header-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1100;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
    padding: 6px;
}

.header-search-results__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-search-results__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    line-height: 1.35;
    transition: background 0.15s ease;
}

.header-search-results__item:hover,
.header-search-results__item.is-active,
.header-search-results__item:focus-visible {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
}

.header-search-results__thumb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px;
    background: #f2f2f2;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.header-search-results__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.header-search-results__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: #222;
    /* Single line + ellipsis keeps every row the same height */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-search-results__price {
    font-size: 13px;
    line-height: 1.35;
    color: #666;
}

/* WooCommerce price HTML carries global rules (26px, bold, display:flex) that
   would blow up these compact rows — neutralise them inside the dropdown only. */
.header-search-results__price .woocommerce-Price-amount,
.header-search-results__price .amount {
    display: inline;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: inherit;
    text-transform: none;
    color: var(--primary-color);
}

.header-search-results__price bdi {
    display: inline;
    white-space: nowrap;
}

.header-search-results__price .woocommerce-Price-currencySymbol {
    font-size: 0.92em;
    font-weight: 500;
}

.header-search-results__price ins {
    text-decoration: none;
    font-weight: 600;
    background: none;
    color: var(--primary-color);
}

.header-search-results__price del,
.header-search-results__price del .woocommerce-Price-amount {
    font-weight: 400;
    color: #9a9a9a;
}

.header-search-results__price del {
    opacity: 0.75;
    margin-inline-end: 6px;
}

/* Variable-product ranges ("4.400 – 10.500") stay on one line */
.header-search-results__price .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.header-search-results__empty {
    margin: 0;
    padding: 18px 12px;
    text-align: center;
    font-size: 14px;
    color: #777;
}

.header-search-results__more {
    display: block;
    margin-top: 4px;
    padding: 11px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 0 0 10px 10px;
    transition: background 0.15s ease;
}

.header-search-results__more:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Tablet/small desktop: narrow the bar before it starts squeezing the nav */
@media (max-width: 1100px) and (min-width: 769px) {
    .header-search-bar {
        flex-basis: 260px;
        max-width: 320px;
    }

    .header-main {
        gap: 18px;
        /* Step the full-bleed side padding down before the mobile block takes over */
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Header Cart Icon */
.header-cart {
    flex-shrink: 0;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    position: relative;
    color: #333;
}

.header-cart:hover {
    color: var(--primary-color);
}

.header-cart svg {
    width: 32px;
    height: 32px;
    display: block;
    flex-shrink: 0;
    fill: none;
    overflow: visible;
    transition: color 0.2s;
}

.header-cart svg path {
    fill: none;
    stroke: currentColor;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: var(--theme-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.cart-count:empty {
    display: none;
}

/* ============================================
   Inline tip — the site's alert treatment
   A contained card with a soft fill, a rounded accent bar on the reading-start
   edge, a bold label and the message. Replaces the full-bleed notice banners,
   which stretched edge to edge on the checkout shell and broke its layout.
   All logical properties: the bar and the text flip with the document direction.
   ============================================ */
:root {
    --qt-tip-bg: #fafafa;
    --qt-tip-border: rgba(17, 24, 39, 0.09);
    --qt-tip-label: #18181b;
    --qt-tip-text: #52525b;
    --qt-tip-accent: #a1a1aa;
    --qt-tip-radius: 10px;
    --qt-tip-pad-block: 14px;
    --qt-tip-pad-inline: 18px;
    --qt-tip-bar: 3px;
    /* Tips read as a paragraph, so they stop well short of a wide container. */
    --qt-tip-max: 640px;
}

.qt-inline-tip,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    position: relative;
    display: block;
    box-sizing: border-box;
    max-width: var(--qt-tip-max);
    margin: 12px 0 20px;
    padding: var(--qt-tip-pad-block) var(--qt-tip-pad-inline);
    padding-inline-start: calc(var(--qt-tip-pad-inline) + var(--qt-tip-bar) + 14px);
    border: 1px solid var(--qt-tip-border);
    border-radius: var(--qt-tip-radius);
    background: var(--qt-tip-bg);
    color: var(--qt-tip-text);
    font-size: 0.95rem;
    line-height: 1.65;
    list-style: none;
}

/* The accent bar. A pseudo-element rather than a border so it can be inset and
   rounded, and so it works the same on the <ul> WooCommerce uses for errors. */
.qt-inline-tip::before,
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    content: "";
    position: absolute;
    inset-block: var(--qt-tip-pad-block);
    inset-inline-start: var(--qt-tip-pad-inline);
    width: var(--qt-tip-bar);
    border-radius: 999px;
    background: var(--qt-tip-accent);
}

.woocommerce-message,
.qt-inline-tip--success {
    --qt-tip-accent: #3f9a73;
}

.woocommerce-info,
.qt-inline-tip--info {
    --qt-tip-accent: #a1a1aa;
}

.qt-inline-tip--warning {
    --qt-tip-accent: #e9762b;
}

.woocommerce-error,
.qt-inline-tip--error {
    --qt-tip-accent: #e4485d;
}

.qt-inline-tip__label {
    font-weight: 600;
    color: var(--qt-tip-label);
}

.woocommerce-error li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-error li + li {
    margin-top: 6px;
}

/* Buttons WooCommerce drops inside a notice ("View cart") read as a link here —
   a filled button would fight the tip's quiet surface. WooCommerce floats them
   (woocommerce-layout.css, .woocommerce .woocommerce-message .button), which
   pulls the action away from the sentence it belongs to — the prefixed
   selectors below exist to outrank that. */
.qt-inline-tip .button,
.woocommerce .qt-inline-tip .button,
.woocommerce-page .qt-inline-tip .button {
    display: inline;
    float: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none !important;
    box-shadow: none;
    color: var(--qt-tip-label) !important;
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* WooCommerce gives a fresh notice tabindex="-1" and focuses it so screen
   readers announce it. Chrome counts that programmatic focus as :focus-visible
   and paints its default ring around the tip; since tabindex="-1" keeps the box
   out of the tab order, no keyboard user can land here on their own and the
   ring only adds noise. Links inside keep their own focus styles. */
.qt-inline-tip:focus,
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
    outline: none;
}

/* Checkout coupon prompt — compact/minimal */
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 0;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    margin: 8px 0 12px !important;
    padding: 16px 12px;
    min-height: 0;
    gap: 8px;
    border-width: 0;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.3;
    color: #4b5563;
    background: rgba(250, 250, 250, 0);
    justify-content: center;
    align-items: center;
    width: fit-content;
    max-width: 458px;
}

/* The coupon prompt is a bare line, not a tip: no bar, no label, no bar inset. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
    display: none;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info .qt-inline-tip__label {
    display: none;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
    font-size: inherit;
    font-weight: 500;
    text-underline-offset: 2px;
}

/* Checkout errors must stay visible. These used to be display:none so field-level
   validation could speak for itself, but the same containers carry gateway
   failures from process_payment() — a misconfigured gateway then failed in total
   silence, with no way for the buyer or the shop owner to see why. */
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout,
body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
body.woocommerce-checkout form.checkout > .woocommerce-error,
body.qt-checkout-shell .woocommerce-notices-wrapper .woocommerce-error,
body.qt-checkout-shell .woocommerce-notices-wrapper .wc-block-components-notice-banner.is-error,
body.qt-checkout-shell > .woocommerce-error,
body.qt-checkout-shell .woocommerce > .woocommerce-error,
body.qt-checkout-shell .qt-checkout-form--shell > .woocommerce-error {
    display: block;
}

/* Keep the inline coupon message from doubling up with its banner. */
body.qt-checkout-shell .woocommerce-form-coupon .woocommerce-error {
    display: none;
}

/* Links inside a tip stay part of the sentence: label-dark, underlined, no
   colour shift that would compete with the accent bar. */
.qt-inline-tip a,
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color: var(--qt-tip-label);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.qt-inline-tip a:hover,
.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover {
    text-decoration: none;
}

/* The coupon prompt keeps the brand accent — it reads as an action, not a notice. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
    color: var(--qt-checkout-accent, var(--primary-color));
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon:hover {
    color: var(--qt-checkout-accent, var(--primary-color));
    filter: brightness(0.92);
}

.woocommerce-Price-amount {
    color: var(--primary-color);
}

/* Shared canvas panel header (cart, mobile menu, shop filters) */
.canvas-panel-header,
.side-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: max(16px, calc(10px + env(safe-area-inset-top, 0px))) 20px 12px;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
}

.canvas-panel-header .canvas-panel-title,
.side-cart-header .canvas-panel-title,
.canvas-panel-header h3,
.side-cart-header h3 {
    font-family: var(--font-headings);
    font-size: 20px;
    font-weight: var(--font-weight-headings, 700);
    line-height: 1.3;
    margin: 0;
    color: #333;
    display: block;
}

.canvas-panel-close,
.side-cart-close {
    background: #E8E8E8;
    border: none;
    padding: 12px;
    cursor: pointer;
    color: #666;
    transition: color 0.2s;
    border-radius: var(--theme-radius);
    line-height: 0;
}

.canvas-panel-close:hover,
.side-cart-close:hover {
    color: #333;
}

.canvas-panel-close svg,
.side-cart-close svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

/* Side Cart */
.side-cart {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    /* No shell fade — panel slides fully like the mobile menu */
    pointer-events: none;
}

.side-cart.active {
    pointer-events: all;
}

.side-cart-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 480ms cubic-bezier(0.4, 0.05, 0.35, 1);
}

.side-cart.active .side-cart-overlay {
    opacity: 1;
}

.side-cart-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    /* Desktop: previous 400px + 30% */
    width: 520px;
    max-width: 90%;
    height: 100%;
    background: #fff;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    border-radius: 0;
    /* Match menu: enter from the left (LTR) */
    transform: translateX(-100%);
    transition: transform 480ms cubic-bezier(0.4, 0.05, 0.35, 1);
    will-change: transform;
}

.side-cart.active .side-cart-panel {
    transform: translateX(0);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0;
}

[dir="rtl"] .side-cart-panel {
    left: auto;
    right: 0;
    transform: translateX(100%);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    border-radius: 0;
}

[dir="rtl"] .side-cart.active .side-cart-panel {
    transform: translateX(0);
    border-radius: 0;
}

/* Desktop: cart on the right, slide in right → left (LTR exception; RTL already right) */
@media (min-width: 769px) {
    .side-cart-panel {
        left: auto;
        right: 0;
        transform: translateX(100%);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    }

    .side-cart.active .side-cart-panel {
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .side-cart-panel,
    .side-cart.active .side-cart-panel,
    [dir="rtl"] .side-cart-panel,
    [dir="rtl"] .side-cart.active .side-cart-panel {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
    }
}

.side-cart-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    height: inherit;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.side-cart-content .widget_shopping_cart_content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.side-cart-content .woocommerce-mini-cart {
    padding: 0;
    margin: 0;
}

body.cart-open {
    overflow: hidden;
}

/* ============================================
   Search Popup
   ============================================ */
.search-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
}

.search-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.search-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.search-popup-content {
    position: relative;
    background: #fff;
    border-radius: var(--theme-radius);
    padding: 0;
    max-width: 600px;
    width: 50%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.search-popup-body {
    padding: 24px 30px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.search-popup-close {
    line-height: 0;
}

.search-popup-form {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: nowrap;
}

.search-popup-field {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.2);
    padding-bottom: 10px;
}

.search-popup-field__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6b7280;
    line-height: 0;
}

.search-popup-field__icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.search-popup-field__icon svg :where(path, line, circle, ellipse, polyline, polygon, rect) {
    stroke: currentColor;
    fill: none;
}

.search-popup-input {
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: color 0.2s;
    box-shadow: none;
}

.search-popup-input::placeholder {
    color: #b0b0b0;
}

.search-popup-input:focus {
    outline: none;
}

.search-popup-submit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--theme-radius-sm);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, filter 0.2s;
    font-family: inherit;
    flex-shrink: 0;
}

.search-popup-submit:hover {
    background: var(--primary-color-hover);
}

.search-popup-submit svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.search-popup-suggestions {
    margin-top: 40px;
    padding-top: 8px;
}

.search-popup-suggestions__heading {
    margin: 0 0 22px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #9ca3af;
}

.search-popup-suggestions__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-popup-suggestions__item {
    margin: 0 0 20px;
}

.search-popup-suggestions__item:last-child {
    margin-bottom: 0;
}

.search-popup-suggestions__link {
    display: inline-block;
    font-size: 17px;
    font-weight: 400;
    color: #111827;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

.search-popup-suggestions__link:hover,
.search-popup-suggestions__link:focus-visible {
    color: var(--primary-color);
}

body.search-open {
    overflow: hidden;
}

/* Search panel: full-height drawer on mobile (bottom bar search) */
@media (max-width: 768px) {
    .search-popup {
        display: block;
        /* Match menu/cart: no shell fade — full slide visible start→end */
        opacity: 1;
        visibility: visible;
        transition: none;
        pointer-events: none;
    }

    .search-popup.active {
        pointer-events: all;
    }

    .search-popup-overlay {
        opacity: 0;
        transition: opacity 480ms cubic-bezier(0.4, 0.05, 0.35, 1);
    }

    .search-popup.active .search-popup-overlay {
        opacity: 1;
    }

    .search-popup-content {
        position: fixed;
        top: 0;
        left: 0;
        right: auto;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: 12px 0 48px rgba(0, 0, 0, 0.14);
        /* Match menu: enter from the left (LTR) */
        transform: translateX(-100%);
        transition: transform 480ms cubic-bezier(0.4, 0.05, 0.35, 1);
        overflow: hidden;
        will-change: transform;
    }

    [dir="rtl"] .search-popup-content {
        left: auto;
        right: 0;
        transform: translateX(100%);
        box-shadow: -12px 0 48px rgba(0, 0, 0, 0.14);
        border-radius: 0;
    }

    [dir="rtl"] .search-popup.active .search-popup-content {
        transform: translateX(0);
    }

    body.quicktheme-mobile-bottom-nav .search-popup-body {
        padding-bottom: calc(28px + var(--quicktheme-mobile-bar-height, 56px) + env(safe-area-inset-bottom, 0px));
    }

    .search-popup.active .search-popup-content {
        transform: translateX(0);
    }

    .search-popup-body {
        flex: 1;
        min-height: 0;
        padding: 20px 24px 28px;
    }

    .search-popup-form {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .search-popup-submit {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .search-popup-submit:focus {
        position: static;
        width: auto;
        height: auto;
        clip: auto;
        clip-path: none;
        margin-top: 12px;
        padding: 12px 24px;
    }

    .search-popup-suggestions {
        margin-top: 36px;
    }
}

/* Mobile Menu Toggle Button — boxed icon button matching the header buttons */
.mobile-menu-toggle {
    display: none;
    background: #fff;
    border: 1px solid var(--qt-header-btn-border);
    border-radius: 10px;
    padding: 0 8px;
    min-width: 40px;
    height: 40px;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--qt-header-btn-text);
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.mobile-menu-toggle:hover {
    background: var(--qt-header-btn-hover);
}

.mobile-menu-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(16, 24, 40, 0.08);
}

.mobile-menu-toggle__label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.mobile-menu-toggle--icon-only {
    gap: 0;
    width: 40px;
    padding: 0;
}

.mobile-menu-toggle__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
    fill: none;
    overflow: visible;
}

.mobile-menu-toggle svg path {
    fill: none;
    stroke: currentColor;
}

.mobile-menu-close {
    display: none;
}

.mobile-menu-body {
    display: contents;
}

/* ============================================
   Footer Styles
   ============================================ */
.site-footer {
    margin-top: 0;
    background: #2c2c2c;
    color: #fff;
}

.footer-top {
    max-width: var(--qt-layout-max);
    margin: 0 auto;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    /* Stack vertically always as requested, or just mobile? Request implied redesign */
    align-items: center;
    justify-content: center;
    gap: 30px;
    text-align: center;
}

/* .footer-menu ul removed */

.footer-menu a {
    color: var(--footer-link, #ccc);
    font-size: 14px;
    transition: color 0.2s;
}

.footer-menu a:hover {
    color: #fff;
}

.footer-nav-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-logo img {
    max-height: 40px;
    width: auto;
}

.footer-social {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.footer-social a {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* transition: transform 0.2s; */
    /* Optional hover effect */
    color: #ccc;
    transition: opacity 0.2s;
    cursor: pointer;
}

.footer-social a:hover {
    opacity: 0.8;
}

/* Mobile: header search icon visible before the cart; opens the search drawer. */

.footer-bottom {
    padding: 20px;
    font-size: 14px;
}

.footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-bottom-social {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-bottom-social__link {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: #fff;
    border-radius: var(--theme-radius);
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-bottom-social__link:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    color: #fff;
}

.footer-bottom-social__link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
    fill: none;
    stroke: #fff;
    color: #fff;
}

.footer-bottom__copyright {
    margin-left: auto;
    text-align: end;
    line-height: 1.4;
}

[dir="rtl"] .footer-bottom__copyright {
    margin-left: 0;
    margin-right: auto;
    text-align: start;
}

/* ============================================
   Homepage Hero
   ============================================ */
.hero-section {
    /* +25% height on desktop */
    min-height: 562px;
    height: 62.5vh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: start;
    padding: 60px 48px;
    background: #111;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 1;
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 800px;
    width: 100%;
    color: #fff;
    margin-bottom: 20px;
    /* Bottom-start alignment: content hugs the lower-left of the hero */
    text-align: start;
}

.hero-inner h1 {
    font-size: 26px;
    font-weight: var(--font-weight-headings);
    margin-bottom: 14px;
    color: #fff;
    line-height: 1.15;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-btn-wrap {
    margin-top: 12px;
}

/* Smaller, tighter CTA to match the reduced title */
.hero-btn-wrap .shop-button {
    padding: 11px 26px;
    font-size: 14px;
}

/* Mobile keeps the centred layout and a shorter hero — the bottom-start
   treatment above is a desktop composition. */
@media (max-width: 768px) {
    .hero-section {
        /* Unchanged from the original — the +25% is desktop-only. */
        min-height: 450px;
        height: 50vh;
        justify-content: center;
        text-align: center;
        padding: 60px 20px;
    }

    .hero-inner {
        text-align: center;
    }

    .hero-inner h1 {
        font-size: 24px;
    }
}

.shop-button {
    display: inline-block;
    padding: 15px 45px;
    background: var(--primary-color);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-radius: var(--theme-radius);
    /* Rounded pill style like screenshot */
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.shop-button:hover {
    background: var(--primary-color-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ============================================
   Homepage redesign
   Premium Arabic landing page with a soft Vamtam-style surface, rounded cards,
   and a strict 4px rhythm for spacing.
   ============================================ */
body.home {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.home-page {
    position: relative;
    padding: 0;
    background:
        radial-gradient(circle at 100% 0%, rgb(23 162 184 / 0.08), transparent 28%),
        radial-gradient(circle at 0% 8%, rgb(23 162 184 / 0.05), transparent 22%),
        linear-gradient(180deg, #ffffff 0%, #f7f7f5 100%);
    color: #111827;
}

/* Pull the surface up under the fixed header so the body offset band paints the page
   gradient instead of white; the equal padding keeps content where it was.
   Applies to every .home-page surface, not just the front page: the tinted radial is
   anchored to the top of this element, so a page that started below the bar left a
   white seam behind the floating header while its content read green. */
.home-page {
    margin-top: calc(var(--header-height, 0px) * -1);
    padding-top: var(--header-height, 0px);
}

.home-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(17, 24, 39, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 24, 39, 0.015) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 72%);
    opacity: 0.5;
}

.home-shell {
    position: relative;
    z-index: 1;
    width: min(var(--qt-layout-max), calc(100% - 48px));
    margin-inline: auto;
}

.home-hero__surface {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    align-items: center;
    gap: 24px;
}

.home-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8px;
}

/* Hero label: a soft translucent pill holding a solid "what's new" chip. */
.home-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0;
    padding: 4px;
    padding-inline-end: 14px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    color: #52525b;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.4;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.home-hero__badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

.home-hero__badge-icon {
    display: inline-flex;
}

.home-hero__badge-icon svg {
    width: 15px;
    height: 15px;
}

.home-hero__eyebrow,
.home-section__eyebrow {
    margin: 0;
    color: var(--primary-color);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.home-hero__title,
.home-section__title {
    margin: 0;
    text-wrap: balance;
}

.home-problem__surface {
    padding: 0;
}

.home-problem__heading {
    max-width: 760px;
}

.home-problem__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-problem-card {
    min-height: 100%;
    padding: 20px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
}

.home-problem-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(23, 162, 184, 0.1);
    color: var(--primary-color);
    font-size: 0.82rem;
    font-weight: 800;
}

.home-problem-card__title {
    margin: 0 0 10px;
    font-size: 1.08rem;
    line-height: 1.65;
}

.home-problem-card__text {
    margin: 0;
    color: #5b6472;
    line-height: 1.8;
}

.home-problem__bridge {
    max-width: 760px;
    margin: 24px 0 0;
    color: #374151;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.8;
}

.home-hero__title {
    font-size: clamp(2.7rem, 4.6vw, 4.9rem);
    line-height: 1.26;
    letter-spacing: -0.03em;
}

.home-hero__lead,
.home-section__lead {
    margin: 0;
    color: #5b6472;
    font-size: 1.05rem;
    line-height: 1.85;
}

.home-hero__lead {
    max-width: 42rem;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.home-hero__button {
    min-width: 176px;
    border-radius: 14px !important;
}

.home-hero__button--secondary {
    background: transparent !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow:
        inset 0 0.75px 0 rgb(255 255 255 / 0.7),
        0 1px 2px rgb(15 23 42 / 0.08),
        0 0 0 1px rgb(15 23 42 / 0.03) !important;
}

.home-hero__button--secondary:hover {
    background: rgba(23, 162, 184, 0.08) !important;
    border-color: rgba(23, 162, 184, 0.26) !important;
}

.home-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
    list-style: none;
}

.home-hero__pills li {
    padding: 8px 12px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}

.home-hero__panel {
    display: flex;
    align-items: stretch;
}

.home-purchase-card {
    width: 100%;
    padding: 28px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.home-purchase-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.home-purchase-card__header h2 {
    margin: 0;
    font-size: 1.55rem;
}

.home-purchase-card__price {
    color: #374151;
    font-size: 1.3rem;
    white-space: nowrap;
}

.home-purchase-card__price strong {
    color: #118b21;
    font-size: 2rem;
}

.home-purchase-card__plans {
    display: grid;
    gap: 12px;
}

.home-purchase-card__plan {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(17, 24, 39, 0.16);
    border-radius: 10px;
    box-shadow: 0 4px 0 rgba(17, 24, 39, 0.1);
}

.home-purchase-card__plan--active {
    border-color: var(--qt-button-bg);
    box-shadow: 0 5px 0 var(--qt-button-bg);
}

.home-purchase-card__radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #111827;
    color: #fff;
    background: #111827;
    font-size: 0.9rem;
    font-weight: 800;
}

.home-purchase-card__plan:not(.home-purchase-card__plan--active) .home-purchase-card__radio {
    background: #fff;
}

.home-purchase-card__plan--active .home-purchase-card__radio {
    border-color: var(--qt-button-bg);
    background: var(--qt-button-bg);
}

.home-purchase-card__plan > div {
    text-align: start;
}

.home-purchase-card__plan strong {
    display: block;
    font-size: 1.12rem;
}

.home-purchase-card__plan p {
    margin: 4px 0 0;
    color: #5b6472;
    line-height: 1.55;
}

.home-purchase-card__plan b {
    white-space: nowrap;
}

.home-purchase-card__benefits {
    display: grid;
    gap: 8px;
    margin: 22px 0;
    padding: 0;
    list-style: none;
}

.home-purchase-card__benefits li {
    position: relative;
    padding-inline-start: 22px;
    color: #374151;
    line-height: 1.55;
}

.home-purchase-card__benefits li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    color: #15952b;
    font-weight: 800;
}

.home-purchase-card__actions {
    display: grid;
    gap: 10px;
}

.home-purchase-card__actions .qt-button {
    width: 100%;
    border-radius: 10px !important;
    text-align: center;
}

.home-purchase-card__preview {
    background: transparent !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.home-purchase-card__preview-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.home-section {
    padding-inline: 0;
}

.home-section__heading {
    display: grid;
    gap: 20px;
    max-width: 780px;
    margin-bottom: 24px;
}

.home-section__heading--compact {
    margin-bottom: 20px;
}

.home-section__title {
    font-size: clamp(1.9rem, 3vw, 3rem);
    line-height: 1.32;
    letter-spacing: -0.02em;
}

.home-features__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* .qt-button is declared later and forces display:inline-flex, which makes
   margin-inline:auto a no-op — hence the extra .home-page qualifier. */
.home-page .home-features__all-link,
.home-page .home-showcase__all-link {
    display: flex;
    width: fit-content;
    min-width: 176px;
    margin: 32px auto 0;
    border-radius: 14px !important;
}

/* Feature cards follow the Medusa docs inline Tip: a subtle filled surface with
   a hairline border and 8px corners, and a rounded rule that sits *inside* the
   padding — not on the card edge — spanning only the text it annotates.
   The rule is a grid item (column 1, spanning both content rows) rather than an
   absolute box, so it stretches to the content height and stops there even when
   a stretched grid makes the card taller. Being a grid item also puts it on the
   inline-start side in RTL for free.
   The accent tracks --primary-color so the rule stays in step with the header
   bar, which paints from the same token via --header-top-bg.
   Note: the rows are explicit because the rule spans 1 / -1; a card that grows
   past its title + text needs that track count bumped to match. */
.home-feature-card {
    --qt-tip-accent: var(--primary-color, #015f5a);
    --qt-tip-surface: #fafafa;
    --qt-tip-border: #e4e4e7;
    --qt-tip-rule: 3px;
    --qt-tip-gap: 14px;
    --qt-tip-pad-x: 16px;
    --qt-tip-pad-y: 16px;
    display: grid;
    grid-template-columns: var(--qt-tip-rule) minmax(0, 1fr);
    grid-template-rows: repeat(2, auto);
    align-content: start;
    column-gap: var(--qt-tip-gap);
    row-gap: 6px;
    min-height: 100%;
    padding: var(--qt-tip-pad-y) var(--qt-tip-pad-x);
    border: 1px solid var(--qt-tip-border);
    border-radius: var(--theme-radius, 8px);
    background: var(--qt-tip-surface);
}

.home-feature-card::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / -1;
    border-radius: 999px;
    background: var(--qt-tip-accent);
}

.home-feature-card > * {
    grid-column: 2;
}

.home-feature-card__icon {
    display: none;
}

.home-feature-card__title {
    margin: 0;
    color: #18181b;
    font-size: 1.15rem;
    line-height: 1.6;
}

.home-feature-card__text {
    margin: 0;
    color: #52525b;
    line-height: 1.85;
}

/* ============================================
   Homepage — Feature showcase
   ============================================ */
/* 12-column track. Cards alternate 5/7 then 7/5 spans so each row reads 40/60
   and the wide card swaps sides every row. */
.home-showcase__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-showcase__item {
    grid-column: span 12;
}

@media (min-width: 1025px) {
    .home-showcase__item:nth-child(4n + 1),
    .home-showcase__item:nth-child(4n) {
        grid-column: span 5;
    }

    .home-showcase__item:nth-child(4n + 2),
    .home-showcase__item:nth-child(4n + 3) {
        grid-column: span 7;
    }
}

.home-showcase-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    height: 100%;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.home-showcase-card__copy {
    display: grid;
    gap: 10px;
}

.home-showcase-card__title {
    margin: 0;
    color: #18181b;
    font-size: 1.35rem;
    line-height: 1.45;
}

.home-showcase-card__text {
    margin: 0;
    color: #52525b;
    line-height: 1.8;
}

/* Placeholder canvas: tinted surface + faint grid, sized to hold a screenshot. */
.home-showcase-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    padding: 24px;
    border-radius: 18px;
    background:
        linear-gradient(rgba(17, 24, 39, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 24, 39, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 7%, #fff) 0%, #fafafa 100%);
    background-size: 28px 28px, 28px 28px, auto;
}

.home-showcase-card__image {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: 16px;
    overflow: hidden;
}

.home-showcase-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 16px 32px -22px rgba(16, 24, 40, 0.5);
}

.home-showcase-card__chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color) 10%, #fff);
    color: var(--primary-color);
}

.home-showcase-card__chip-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.home-showcase-card__chip-copy strong {
    color: #18181b;
    font-size: 1.05rem;
    line-height: 1.3;
}

.home-showcase-card__chip-copy span {
    color: #71717a;
    font-size: 0.85rem;
    line-height: 1.4;
}

@media (max-width: 1024px) and (min-width: 769px) {
    .home-showcase__item {
        grid-column: span 6;
    }
}

@media (max-width: 768px) {
    .home-showcase__grid {
        gap: 16px;
    }

    .home-showcase-card {
        gap: 20px;
        padding: 22px 20px;
        border-radius: 20px;
    }

    .home-showcase-card__title {
        font-size: 1.2rem;
    }

    .home-showcase-card__media {
        min-height: 150px;
        padding: 18px;
    }
}

/* ============================================
   Dinar prices (shown alongside USD everywhere)
   ============================================ */
.qt-price-dzd {
    display: inline-block;
    margin-inline-start: 8px;
    color: #71717a;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
}

.home-plan-card__dzd {
    display: block;
    margin-top: 4px;
    color: #71717a;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
}

.home-purchase-card__dzd {
    display: block;
    margin-top: 2px;
    color: #71717a;
    font-size: 0.85rem;
    font-weight: 500;
}

.home-purchase-card__plan b small {
    display: block;
    margin-top: 2px;
    color: #71717a;
    font-size: 0.78rem;
    font-weight: 500;
}

/* Cart / checkout total row */
.qt-cart-total-dzd {
    color: #52525b;
    font-weight: 500;
}

.qt-cart-total-dzd__note {
    margin: 4px 0 0;
    color: #71717a;
    font-size: 0.8rem;
    line-height: 1.5;
}

.qt-cart-total-dzd td {
    text-align: end;
}

.qt-cart-total-dzd small {
    display: block;
    margin-top: 4px;
    color: #71717a;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
}

/* ============================================
   Homepage — Trust strip + closing CTA
   ============================================ */
/* Compact by design — it sits between the hero and the first real section, so it
   uses roughly half the standard rhythm instead of the full token. */
.home-page > .home-trust {
    padding-block: calc(var(--qt-section-space) * 0.5);
}

.home-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.75);
}

.home-trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color) 10%, #fff);
    color: var(--primary-color);
}

.home-trust__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.home-trust__copy strong {
    color: #18181b;
    font-size: 1rem;
    line-height: 1.4;
}

.home-trust__copy span {
    color: #52525b;
    font-size: 0.88rem;
    line-height: 1.6;
}

/* Closing CTA */
.home-cta__panel {
    padding: 56px 40px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    border-radius: 28px;
    background:
        radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--primary-color) 14%, transparent), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 9%, #fff) 0%, #fff 70%);
    text-align: center;
}

.home-cta__title {
    margin: 0 auto;
    max-width: 22ch;
    font-size: clamp(1.7rem, 2.6vw, 2.5rem);
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.home-cta__lead {
    margin: 16px auto 0;
    max-width: 60ch;
    color: #52525b;
    line-height: 1.85;
}

.home-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.home-cta__actions .home-plan-card__cta {
    width: auto;
    min-width: 190px;
    padding: 13px 26px;
    font-size: 1rem;
}

@media (max-width: 1024px) {
    .home-trust__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .home-trust__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .home-trust__item {
        padding: 14px 16px;
    }

    .home-cta__panel {
        padding: 36px 20px;
        border-radius: 22px;
    }

    .home-cta__actions {
        flex-direction: column;
        margin-top: 24px;
    }

    .home-cta__actions .home-plan-card__cta {
        width: 100%;
    }
}

/* ============================================
   Homepage — Pricing
   ============================================ */
.home-section__heading--center {
    align-items: center;
    margin-inline: auto;
    text-align: center;
}

@media (max-width: 768px) {
    .home-page .home-section__heading--center {
        align-items: start;
        margin-inline: 0;
        text-align: start;
    }
}

/* Billing switcher: annual ⟷ lifetime. The knob is positioned with logical
   insets so it slides toward the correct edge in RTL without an override. */
.home-pricing__billing {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.home-pricing__billing-label {
    color: #71717a;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.25s ease;
}

.home-pricing[data-billing="annual"] [data-billing-label="annual"],
.home-pricing[data-billing="lifetime"] [data-billing-label="lifetime"] {
    color: #18181b;
    font-weight: 700;
}

.home-pricing__switch {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--primary-color);
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.home-pricing__switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--qt-button-focus);
}

.home-pricing__switch-knob {
    position: absolute;
    top: 50%;
    inset-inline-start: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
    transform: translateY(-50%);
    transition: inset-inline-start 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-pricing[data-billing="lifetime"] .home-pricing__switch-knob {
    inset-inline-start: calc(100% - 25px);
}

.home-pricing__billing-save {
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 12%, #fff);
    color: color-mix(in srgb, var(--primary-color) 82%, #000);
    font-size: 0.82rem;
    font-weight: 700;
}

.home-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

.home-plan-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 24px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.home-plan-card--featured {
    border-color: color-mix(in srgb, var(--primary-color) 24%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 8%, #fff) 0%, #fff 62%);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 20px 44px -30px rgba(16, 24, 40, 0.55);
}

.home-plan-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-plan-card__name {
    margin: 0;
    color: #18181b;
    font-size: 1.2rem;
    line-height: 1.4;
}

.home-plan-card__badge {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 12%, #fff);
    color: color-mix(in srgb, var(--primary-color) 82%, #000);
    font-size: 0.78rem;
    font-weight: 700;
}

.home-plan-card__badge--gold {
    border: 1px solid #e6bd57;
    background: linear-gradient(135deg, #fff7d6 0%, #f4cf70 100%);
    color: #6f4900;
    box-shadow: 0 5px 14px rgba(174, 119, 12, 0.16);
}

.home-plan-card__price {
    margin: 0;
    color: #18181b;
    font-size: clamp(2.1rem, 3.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.home-plan-card__period {
    color: #71717a;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
}

.home-plan-card__summary {
    margin: 0;
    color: #52525b;
    line-height: 1.7;
}

.home-plan-card__cta {
    width: 100%;
    padding: 12px 18px;
    font-size: 0.95rem;
}

.home-plan-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.home-plan-card__trust {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -2px 0 0;
    color: #52606d;
    font-size: 0.78rem;
    line-height: 1.6;
}

.home-plan-card__trust span {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--primary-color);
}

.home-plan-card__features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.home-plan-card__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #3f3f46;
    line-height: 1.6;
}

.home-plan-card__mark {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--primary-color);
}

.home-plan-card__mark svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 1024px) {
    .home-pricing__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Three plans over two columns leaves an odd gap, so the featured card leads. */
    .home-plan-card--featured {
        order: -1;
    }
}

@media (max-width: 768px) {
    .home-pricing__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-plan-card {
        padding: 24px 20px;
    }

    .home-pricing__billing {
        margin-bottom: 24px;
    }
}


/* ============================================
   Homepage — Verified product reviews
   ============================================ */
.home-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.home-review-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: 26px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.home-review-card__stars {
    display: flex;
    gap: 3px;
    color: #d6d3d1;
}

.home-review-card__stars .is-active {
    color: #d69b16;
}

.home-review-card blockquote {
    margin: 20px 0 24px;
}

.home-review-card blockquote p {
    margin: 0;
    color: #3f3f46;
    font-size: 1rem;
    line-height: 1.9;
}

.home-review-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
}

.home-review-card__footer > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.home-review-card__footer strong {
    color: #18181b;
}

.home-review-card__footer a {
    overflow: hidden;
    color: #71717a;
    font-size: 0.84rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-review-card__verified {
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 10%, #fff);
    color: color-mix(in srgb, var(--primary-color) 82%, #000);
    font-size: 0.72rem;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .home-reviews__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .home-reviews__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-review-card {
        padding: 22px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-pricing__switch,
    .home-pricing__switch-knob,
    .home-pricing__billing-label {
        transition: none;
    }
}

/* ============================================
   Homepage — Why QuickTheme
   ============================================ */
.home-why__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-why__item {
    min-width: 0;
}

.home-why-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100%;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary-color) 10%, transparent) 0, transparent 44%),
        rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.home-why-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 24px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
    border-radius: 17px;
    background: color-mix(in srgb, var(--primary-color) 10%, #fff);
    color: var(--primary-color);
}

.home-why-card__icon svg {
    width: 26px;
    height: 26px;
}

.home-why-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.28em;
    margin: 0 0 10px;
    color: #18181b;
    font-size: 1.24rem;
    line-height: 1.55;
}

.home-why-card__latin {
    direction: ltr;
    unicode-bidi: isolate;
}

.home-why-card__text {
    margin: 0;
    color: #5b6472;
    line-height: 1.85;
}

@media (max-width: 1024px) {
    .home-why__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .home-why__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-why-card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .home-why-card__icon {
        margin-bottom: 20px;
    }
}

.home-faq__shell {
    max-width: var(--qt-layout-max);
}

.home-faq__layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
    gap: 28px;
    align-items: start;
}

.home-faq__intro {
    position: relative;
}

.home-faq__intro-card {
    position: sticky;
    top: 28px;
    display: grid;
    gap: 20px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.home-faq__intro-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 60%, #fff));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25);
}

.home-faq__intro-icon svg {
    width: 28px;
    height: 28px;
}

.home-faq__intro-points {
    display: grid;
    gap: 12px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.home-faq__intro-points li {
    position: relative;
    padding-inline-start: 20px;
    color: #374151;
    font-size: 0.98rem;
    line-height: 1.8;
}

.home-faq__intro-points li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.78em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0 4px rgb(23 162 184 / 0.14);
}

.home-faq__accordions {
    position: sticky;
    top: 28px;
    display: grid;
    gap: 12px;
}

.home-faq__all-link {
    justify-self: start;
    min-width: 176px;
    margin-top: 4px;
    border-radius: 14px !important;
    text-align: center;
}

.home-faq__list {
    display: grid;
    gap: 12px;
}

.home-faq__item {
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.home-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
    list-style: none;
    min-height: 74px;
}

.home-faq__question::-webkit-details-marker {
    display: none;
}

.home-faq__question-text {
    max-width: 34rem;
}

.home-faq__question-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(23, 162, 184, 0.08);
    color: var(--primary-color);
    transition: background-color 240ms ease, color 240ms ease;
}

.home-faq__question-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.home-faq__question-icon > span {
    display: inline-flex;
}

.home-faq__item[open] .home-faq__question-icon-open,
.home-faq__item:not([open]) .home-faq__question-icon-close {
    display: none;
}

.home-faq__question::after {
    content: none;
}

.home-faq__item[open] .home-faq__question-icon {
    background: rgba(23, 162, 184, 0.14);
}

.home-faq__answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    color: #5b6472;
    line-height: 1.85;
    transition: max-height 420ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: max-height;
}

.home-faq__answer-inner {
    padding: 0 0 22px;
}

.home-faq__answer p {
    margin: 0;
}

.home-faq__item[open] .home-faq__answer {
    max-height: 520px;
}

.home-faq__item > :not(summary) {
    display: block;
}

.home-faq__item summary {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1024px) {
    .home-hero__surface {
        grid-template-columns: 1fr;
    }

    .home-features__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-problem__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-faq__layout {
        grid-template-columns: 1fr;
    }

    .home-faq__intro-card,
    .home-faq__accordions {
        position: static;
        top: auto;
    }
}

@media (max-width: 768px) {
    /* Keep every primary page canvas on the same 24px mobile rhythm. */
    .site-main > .container,
    .site-main > .shop-page-wrapper,
    .site-main > .single-product-wrapper,
    .site-main > .landing-page-wrapper,
    .site-main > .page-hero,
    .site-main > .categories-grid-section,
    .site-main > .info-boxes-row,
    .site-main > .subcat-slider-section,
    .site-main > .qt-reviews-page {
        padding-inline: 24px;
    }

    .home-shell {
        width: calc(100% - 48px);
    }

    .container {
        padding-inline: 24px;
    }

    .categories-grid-section,
    .info-boxes-row {
        padding-inline: 24px;
    }

    .subcat-slider-wrapper {
        padding-inline: 24px;
    }

    /* No padding-block reset here: the base rule is already padding:0, and zeroing it
       would undo the padding-top that offsets the fixed header on mobile. */

    .home-shell {
        width: min(100% - 32px, 1200px);
    }

    .home-faq__item,
    .home-purchase-card {
        border-radius: 20px;
    }

    .home-hero__surface {
        gap: 20px;
    }

    .home-hero__copy {
        padding: 0;
        gap: 20px;
    }

    .home-hero__title {
        font-size: clamp(2.2rem, 9vw, 3.2rem);
    }

    .home-hero__lead,
    .home-section__lead {
        font-size: 1rem;
        line-height: 1.8;
    }

    .home-hero__actions {
        flex-direction: column;
    }

    .home-hero__button {
        width: 100%;
        min-width: 0;
    }

    .home-features__grid {
        grid-template-columns: 1fr;
    }

    .home-section__heading {
        gap: 20px;
        margin-bottom: 20px;
    }

    .home-problem__grid {
        grid-template-columns: 1fr;
    }

    .home-faq__question,
    .home-faq__answer,
    .home-purchase-card {
        padding-inline: 20px;
    }

    /* Drive the card through its own tokens so the rule keeps its inset
       instead of being swallowed by a flat padding-inline. */
    .home-feature-card {
        --qt-tip-pad-x: 18px;
        --qt-tip-pad-y: 18px;
    }

    .home-faq__question {
        padding-block: 16px;
        min-height: 68px;
    }

    .home-faq__answer-inner {
        padding-bottom: 20px;
    }
}

/* ============================================
   Homepage Marquee Band
   Full-bleed scrolling strip under the hero.
   Duration comes from the Customizer via --marquee-duration (inline).
   ============================================ */
.marquee-band {
    --marquee-duration: 30s;
    --marquee-bg: var(--primary-color);
    --marquee-text: #fff;
    width: 100%;
    background: var(--marquee-bg);
    color: var(--marquee-text);
    overflow: hidden;
    padding: 14px 0;
    user-select: none;
}

.marquee-band__viewport {
    display: flex;
    width: max-content;
    /* Floor the pair of tracks at the band width: each track then gets at
       least half the screen, so the loop never exposes an empty gap. */
    min-width: 100%;
}

.marquee-band__track {
    display: flex;
    align-items: center;
    /* Fills the row only when the items are too few to reach full width;
       with normal content the items keep their natural ticker spacing. */
    justify-content: space-between;
    /* Equal halves of the floored viewport: both copies stay identical in
       width, which is what keeps the -100% loop seamless. */
    flex: 1 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: qt-marquee-scroll var(--marquee-duration) linear infinite;
    will-change: transform;
}

/* Right-scrolling starts a full track to the left and travels back to 0. */
.marquee-band__track--right {
    animation-name: qt-marquee-scroll-reverse;
}

.marquee-band:hover .marquee-band__track {
    animation-play-state: paused;
}

.marquee-band__item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.marquee-band__text {
    font-family: var(--font-headings);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.marquee-band__sep {
    width: 6px;
    height: 6px;
    margin: 0 28px;
    border-radius: 50%;
    background: #D5A657;
    opacity: 1;
    flex: 0 0 auto;
}

@keyframes qt-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-100%, 0, 0); }
}

@keyframes qt-marquee-scroll-reverse {
    from { transform: translate3d(-100%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@media (max-width: 768px) {
    .marquee-band {
        padding: 15px 0;
    }

    .marquee-band__text {
        font-size: 14px;
    }

    .marquee-band__sep {
        margin: 0 18px;
    }
}

/* Static, readable fallback when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
    .marquee-band__track {
        animation: none;
    }

    .marquee-band__viewport {
        width: 100%;
        justify-content: center;
    }

    .marquee-band__track:nth-child(2) {
        display: none;
    }

    .marquee-band__track {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
        padding: 0 20px;
    }
}

/* ============================================
   Info Boxes Section
   ============================================ */
.info-boxes-section {
    padding: 40px 0 20px;
    border-bottom: 1px solid var(--footer-border);
    margin-bottom: 20px;
}

.info-boxes-row {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap;
    color: var(--footer-text);
}

.info-box {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 250px;
    justify-content: center;
}

.info-box-icon {
    width: 48px;
    height: 48px;
    background: color-mix(in srgb, var(--primary-color), transparent 85%);
    border-radius: var(--theme-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--footer-text);
}

.info-box-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.info-box-content p {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .info-boxes-row {
        flex-direction: column;
        align-items: flex-start;
        padding-right: 20px;
        padding-left: 20px;
    }

    .info-box {
        justify-content: flex-start;
        width: 100%;
    }
}

/* ============================================
   Categories Grid Section
   ============================================ */
.categories-grid-section {
    padding: 60px 20px;
    background: #fff;
}

.categories-grid-title {
    text-align: start;
    font-size: 24px;
    font-weight: var(--font-weight-headings);
    color: #333;
    margin-bottom: 40px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-grid-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}

.category-grid-item:hover {
    transform: translateY(-4px);
}

.category-grid-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f8f8f8;
    border-radius: var(--theme-radius);
    overflow: hidden;
    margin-bottom: 0;
}

.category-grid-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.category-grid-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: start;
    margin: 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 0;
}

.category-grid-name__count,
.category-name__count {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .categories-grid-section {
        padding: 40px 20px;
    }

    .categories-grid-title {
        font-size: 20px;
        margin-bottom: 30px;
    }

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

    .category-grid-name {
        font-size: 14px;
    }
}

/* ============================================
   Subcategories Slider — category archive pages
   ============================================ */
.subcat-slider-section {
    padding: 28px 0 24px;
    background: #fff;
}

.subcat-slider-header {
    margin-bottom: 16px;
}

.subcat-slider-title {
    font-size: 20px;
    font-weight: var(--font-weight-headings);
    color: #333;
}

.subcat-slider-wrapper {
    position: relative;
    padding: 0 48px;
}

.subcat-slider-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.subcat-slider-viewport::-webkit-scrollbar {
    display: none;
}

.subcat-slider-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 20px) / 4);
    gap: 20px;
    padding-bottom: 2px;
}

.subcat-slide {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.subcat-slide:hover {
    transform: translateY(-3px);
}

.subcat-slide-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f8f8f8;
    border-radius: var(--theme-radius);
    overflow: hidden;
}

.subcat-slide-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.subcat-slide-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin: 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    min-height: 36px;
}

.subcat-slide-name__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

.subcat-slider-btn {
    display: none;
    position: absolute;
    top: calc(50% - 18px);
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
    padding: 0;
    color: #333;
    z-index: 2;
}

.subcat-slider-btn:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
}

.subcat-slider-btn:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.subcat-slider-btn--prev {
    left: 0;
}

.subcat-slider-btn--next {
    right: 0;
}

.subcat-slider-has-overflow .subcat-slider-btn {
    display: flex;
}

@media (max-width: 1024px) {
    .subcat-slider-track {
        grid-auto-columns: calc((100% - 2 * 20px) / 3);
    }
}

@media (max-width: 640px) {
    .subcat-slider-section {
        padding: 20px 0 16px;
    }

    .subcat-slider-wrapper {
        padding: 0 40px;
    }

    .subcat-slider-track {
        grid-auto-columns: calc((100% - 20px) / 2);
        gap: 16px;
    }

    .subcat-slider-btn {
        width: 32px;
        height: 32px;
    }

    .subcat-slider-btn--prev { left: 0; }
    .subcat-slider-btn--next { right: 0; }
}

/* ============================================
   Latest Products Section
   ============================================ */
.latest-products-section {
    padding: 20px 20px;
    background: #fff;
}

.latest-products-header,
.related-products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.related-products-header {
    padding-bottom: 0;
    margin-bottom: 16px;
}

.latest-products-header {
    margin-bottom: 32px;
    padding-bottom: 0;
}

.latest-products-title,
.related-products-title {
    text-align: start;
    font-weight: var(--font-weight-headings);
    color: #333;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.latest-products-title {
    font-size: 24px;
}

.related-products-title {
    font-size: 28px;
}

.view-more-link {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: underline;
    transition: color 0.2s;
}

.view-more-link:hover {
    color: var(--primary-color-hover);
}

/* Specific grids moved lower to override base styles */

/* More Products Button */
.more-products-button-wrapper {
    text-align: center;
    margin-top: 40px;
}

.more-products-button {
    display: inline-block;
    padding: 15px 40px;
    background: var(--primary-color);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--theme-radius);
    transition: background 0.2s, filter 0.2s;
    cursor: pointer;
}

.more-products-button:hover {
    background: var(--primary-color-hover);
}

/* ============================================
   Related Products Section (header matches .latest-products-header)
   ============================================ */
.related-products-section {
    background: #fff;
    padding: 32px 0 20px;
}

/* Related products moved lower */

/* ============================================
   Single Product Page
   ============================================ */
.single-product-wrapper {
    max-width: var(--qt-layout-max);
    margin: 20px auto;
    padding: 0 20px;
}

/* Sticky CTA bar (order + live preview) — mobile only, every page but cart/checkout.
   Rendered from footer.php; the breakpoint here is the only thing gating it to mobile. */
.qt-sticky-cta {
    display: none;
}

@media (max-width: 768px) {
    .qt-sticky-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        padding: 12px 20px;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

    .qt-sticky-cta.visible {
        transform: translateY(0);
    }

    /* Order + preview share one row; flex ordering follows the document direction,
       so the pair reads correctly in RTL without mirrored rules. */
    .qt-sticky-cta__inner {
        display: flex;
        align-items: stretch;
        gap: 10px;
        max-width: 480px;
        margin: 0 auto;
    }

    /* The order action keeps the visual weight of the pair. */
    .qt-sticky-cta.has-preview .qt-sticky-cta__buy {
        flex: 1 1 58%;
        width: auto;
        max-width: none;
        margin: 0;
        min-width: 0;
    }

    .qt-sticky-cta.has-preview .qt-sticky-cta__preview {
        flex: 1 1 42%;
        min-width: 0;
    }
}

.qt-sticky-cta__buy {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 14px 20px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--theme-radius);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
}

.qt-sticky-cta__buy:hover {
    background: var(--primary-color-hover);
}

/* Outline companion to the solid order button, matching the homepage preview action. */
.qt-sticky-cta__preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, #111827 25%, #fff);
    border-radius: var(--theme-radius);
    background: transparent;
    color: #111827;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.qt-sticky-cta__preview:hover,
.qt-sticky-cta__preview:focus {
    background: rgba(17, 24, 39, 0.04);
    color: #111827;
}

.qt-sticky-cta__preview:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--qt-button-focus);
}

.qt-sticky-cta__preview-icon {
    flex: none;
    width: 18px;
    height: 18px;
}

/* PDP swatch-driven accent: bg/text vars are set per-visitor by pdp-swatch-theme.js
   from the picked QuickForm colour swatch; fallbacks keep the default look until then.
   Text-on-accent flips dark on light swatches so it stays readable; smooth recolour. */
body.single-product-page .header-top-bar {
    color: var(--primary-on, var(--header-top-text));
    transition: background-color 0.35s ease, color 0.35s ease;
}
body.single-product-page .qf-submit {
    color: var(--primary-on, #fff) !important;
    transition: background-color 0.35s ease, color 0.35s ease;
}

/* Native WooCommerce PDP cart form: one clear purchase action, with quantity
   fixed to WooCommerce's default of one rather than exposing a stepper. */
.single-product-wrapper .product-summary form.cart {
    display: block;
    width: 100%;
    margin: 0;
}

.single-product-wrapper .product-summary form.cart .quantity {
    display: none !important;
}

.single-product-wrapper .product-summary form.cart .single_add_to_cart_button {
    width: 100%;
    min-height: 40px;
}

/* Variable products: mute add-to-cart + quantity until a full variation is picked.
   Toggled by pdp-variant-gate.js; mirrors QuickForm's own upsell lock look. */
.qf-form .qf-add-to-cart.qf-variant-locked,
.qf-form .qf-qty.qf-variant-locked {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
    transition: opacity 0.25s ease;
}

.product-images {
    position: sticky;
    top: calc(var(--header-main-height, var(--header-height, 70px)) + 16px);
    width: 100%;
    min-width: 0;
    align-self: start;
    z-index: 1;
}

.gallery-slide {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.55s ease-in-out, visibility 0.7s ease-in-out;
    z-index: 0;
    pointer-events: none;
}

.gallery-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    pointer-events: auto;
}

.gallery-slide img,
.gallery-slide .product-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: var(--theme-radius-sm);
}

.gallery-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.gallery-thumbnails__rail {
    display: contents;
}

.gallery-thumbs-nav {
    display: none;
}

.gallery-thumb {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    aspect-ratio: 1 / 1;
    /* Fixed 1:1 square */
    box-sizing: border-box;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, border-color 0.2s;
    border: 2px solid transparent;
    border-radius: var(--theme-radius);
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.gallery-thumb:hover,
.gallery-thumb.active {
    opacity: 1;
    border-color: var(--primary-color);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

.product-summary {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.product-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

/* Title + reviews: above gallery on mobile, above summary on desktop */
.product-intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

/* Single product summary: filled stars + review count (optically centered) */
.woocommerce-product-rating {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 10px;
    line-height: 1;
}

.woocommerce-product-rating .product-card-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    height: 14px;
    /* Optical: filled star glyph reads slightly high vs. text */
    transform: translateY(1px);
}

.woocommerce-product-rating .woocommerce-review-link {
    font-size: 13px;
    font-weight: 400;
    color: #888;
    text-decoration: none;
    cursor: pointer;
    line-height: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

.woocommerce-product-rating .woocommerce-review-link:hover {
    color: var(--primary-color);
}

.woocommerce-product-rating .product-card-star {
    width: 14px;
    height: 14px;
    line-height: 0;
}

.woocommerce-product-rating .product-card-star svg {
    width: 14px;
    height: 14px;
    display: block;
}

.woocommerce-product-rating .product-card-star-fg svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* Product Star Rating */
.product-star-rating {
    display: flex;
    gap: 4px;
    margin: -12px 0px;
    line-height: 1;
}

.product-star-rating .star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.product-star-rating .star svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: #edbf40;
}

.product-star-rating .star.filled {
    color: #FFD700;
    /* Gold color for filled stars */
}

.product-star-rating .star.empty {
    color: #ddd;
    /* Light gray for empty stars */
}

/* Gallery Lightbox — mobile full-screen preview */
html.gallery-lightbox-open,
body.gallery-lightbox-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.gallery-lightbox-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overscroll-behavior: none;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: zoom-out;
    touch-action: none;
}

.lightbox-stage {
    position: relative;
    z-index: 10001;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.lightbox-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.28s ease;
    will-change: transform;
}

.lightbox-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 16px 24px;
    box-sizing: border-box;
}

.lightbox-image,
.lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox-content {
    position: relative;
    z-index: 10001;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 0px));
    inset-inline-end: 12px;
    z-index: 10002;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
    background: rgba(255, 255, 255, 0.28);
    outline: none;
}

@media (min-width: 769px) {
    /* Desktop uses hover zoom — hide lightbox chrome if ever opened. */
    .gallery-lightbox {
        display: none !important;
    }
}

.product-price {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 30px;
    font-variant-numeric: normal;
}

/* Consolidated Product Tabs moved to end of file */

.product-description p {
    margin-bottom: 16px;
}

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

.product-description h1,
.product-description h2,
.product-description h3,
.product-description h4 {
    margin-top: 24px;
    margin-bottom: 16px;
    color: #333;
}

.product-description ul,
.product-description ol {
    margin: 16px 0;
    padding-right: 20px;
}

.product-description li {
    margin-bottom: 8px;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
    /* Logo at the start, CTA + burger at the end; the nav collapses into the drawer. */
    .header-main {
        justify-content: space-between;
        position: relative;
        padding: 10px 14px;
        min-height: 56px;
    }

    .header-wishlist svg,
    .header-search svg,
    .header-cart svg {
        width: 28px;
        height: 28px;
    }

    /* Sticky header mobile adjustments */
    body:not(.single-product-page):not(.landing-page) .site-header.header-scrolled .header-main {
        min-height: 52px;
        padding: 8px 14px;
    }

    .site-logo img {
        max-height: 28px;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        position: static;
        left: auto;
        right: auto;
    }

    /* The outline account button moves out of the bar and into the drawer. */
    .header-actions > .qt-header-btn--outline {
        display: none;
    }

    /* Drawer items already carry their own separators, so no border here. */
    .mobile-menu-actions {
        display: block;
        margin-top: 24px;
    }

    .mobile-menu-actions .qt-header-btn {
        display: flex;
        width: 100%;
        padding: 12px 16px;
        font-size: 15px;
    }

    .qt-header-btn--solid {
        padding: 8px 12px;
        font-size: 13px;
    }

    .header-wishlist {
        display: none !important;
    }

    .header-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 8px;
    }

    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
        z-index: 99998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 480ms cubic-bezier(0.4, 0.05, 0.35, 1), visibility 480ms;
        pointer-events: none;
    }

    body.menu-open .mobile-menu-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    /*
     * backdrop-filter on .site-header creates a containing block for position:fixed
     * descendants, so the drawer was sized to the header instead of the viewport
     * (looked like a z-index bug — page content showed under/through the menu).
     * Keep it off while closing too — body.menu-open is removed at close start,
     * but the slide-out still needs a viewport-level fixed containing block.
     */
    body.menu-open .site-header,
    body.menu-closing .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        z-index: 100000;
    }

    /* Move menu to viewport level when on mobile to break out of header containing block */
    .main-navigation {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        background: #fff;
        z-index: 99999 !important;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        padding: 0;
        transform: translateX(-100%);
        /* Delay visibility:hidden until slide-out finishes (open had no delay, close was snapping) */
        transition: transform 480ms cubic-bezier(0.4, 0.05, 0.35, 1), visibility 0s linear 480ms;
        overflow: hidden;
        contain: none !important;
        isolation: isolate;
        visibility: hidden;
        pointer-events: none;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
        border-radius: 0;
    }

    .main-navigation.menu-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto;
        /* Show immediately on open so the slide-in is visible */
        transition: transform 480ms cubic-bezier(0.4, 0.05, 0.35, 1), visibility 0s linear 0s;
    }

    [dir="rtl"] .main-navigation {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
        border-radius: 0;
    }

    [dir="rtl"] .main-navigation.menu-open {
        transform: translateX(0) !important;
    }

    .mobile-menu-header {
        display: flex;
    }

    .mobile-menu-body {
        display: block;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 20px 20px;
    }

    /* Menu body entrance: fade/slide links in after the drawer finishes opening */
    .main-navigation .mobile-menu-body .nav-menu > li {
        opacity: 0;
        transform: translateY(10px);
        transition: none;
    }

    .main-navigation.menu-open .mobile-menu-body .nav-menu > li {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 480ms cubic-bezier(0.4, 0.05, 0.35, 1), transform 480ms cubic-bezier(0.4, 0.05, 0.35, 1);
    }

    .main-navigation.menu-open .mobile-menu-body .nav-menu > li:nth-child(1) { transition-delay: 480ms; }
    .main-navigation.menu-open .mobile-menu-body .nav-menu > li:nth-child(2) { transition-delay: 540ms; }
    .main-navigation.menu-open .mobile-menu-body .nav-menu > li:nth-child(3) { transition-delay: 600ms; }
    .main-navigation.menu-open .mobile-menu-body .nav-menu > li:nth-child(4) { transition-delay: 660ms; }
    .main-navigation.menu-open .mobile-menu-body .nav-menu > li:nth-child(5) { transition-delay: 720ms; }
    .main-navigation.menu-open .mobile-menu-body .nav-menu > li:nth-child(6) { transition-delay: 780ms; }
    .main-navigation.menu-open .mobile-menu-body .nav-menu > li:nth-child(7) { transition-delay: 840ms; }
    .main-navigation.menu-open .mobile-menu-body .nav-menu > li:nth-child(8) { transition-delay: 900ms; }
    .main-navigation.menu-open .mobile-menu-body .nav-menu > li:nth-child(n+9) { transition-delay: 960ms; }

    /* Match shared canvas close button (same as cart / search) */
    .mobile-menu-close {
        display: inline-flex;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .main-navigation li {
        width: 100%;
        border-bottom: 1px solid #e5e5e5;
    }

    /* Inline-bar padding lives on the <li>; the drawer puts it on the <a> instead. */
    .main-navigation .nav-menu > li {
        padding: 0;
    }

    .main-navigation a {
        display: block;
        padding: 15px 0;
        font-size: 16px;
    }

    /* Slide-out menu: keep nav tracking consistent */
    .main-navigation a {
        letter-spacing: 0;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .latest-products-title {
        font-size: 20px;
    }

    .related-products-title {
        font-size: 1.0625rem; /* 17px: compact row next to "Plus" */
    }

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

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

    .product-content {
        flex-direction: column;
    }

    .product-images {
        position: static;
        width: 100%;
        flex: 0 0 100%;
    }

    .product-summary {
        width: 100%;
        flex: 0 0 100%;
    }

    .footer-top {
        flex-direction: column;
        text-align: center;
    }

    .footer-menu ul {
        justify-content: center;
    }

    .product-tabs-section .woocommerce-tabs .tabs.wc-tabs li a {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 0.875rem;
    }

    .woocommerce-Tabs-panel {
        padding: 18px 14px 22px;
    }

    .product-description {
        font-size: 14px;
    }
}

/* ============================================
   Landing Page Template
   ============================================ */
.landing-page-wrapper {
    width: 100%;
}

.landing-page-wrapper .entry-content {
    width: 100%;
}

/* Elementor compatibility - full width */
.elementor-page .landing-page-wrapper {
    padding: 0;
}

/* ============================================
   Utility Classes
   ============================================ */
.container {
    max-width: var(--qt-layout-max);
    margin: 0 auto;
    padding: 20px;
    width: 100%;
}

@media (min-width: 1280px) {
    .container {
        width: var(--qt-layout-max);
    }
}
@media (max-width: 768px) {
    .container {
        padding: 20px 20px;
    }
}

/* ============================================
   Page / post Gutenberg prose
   (global * reset removes default margins)
   ============================================ */
body.page .container > article .entry-header,
body.single-post .container > article .entry-header {
    margin: 0 0 32px;
    text-align: center;
}

body.page .container > article .entry-title,
body.single-post .container > article .entry-title {
    margin: 0;
    font-size: 2.25rem;
    line-height: 1.2;
    font-weight: var(--font-weight-headings);
    color: #111;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content,
body.single-post .container > article .entry-content {
    max-width: 760px;
    margin: 0 auto 48px;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #333;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content > *:first-child,
body.single-post .container > article .entry-content > *:first-child {
    margin-top: 0;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content > *:last-child,
body.single-post .container > article .entry-content > *:last-child {
    margin-bottom: 0;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content p,
body.single-post .container > article .entry-content p,
body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content .wp-block-paragraph,
body.single-post .container > article .entry-content .wp-block-paragraph {
    margin: 0 0 1.25em;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content :is(h1, h2, h3, h4, h5, h6),
body.single-post .container > article .entry-content :is(h1, h2, h3, h4, h5, h6) {
    color: #111;
    font-weight: var(--font-weight-headings);
    line-height: 1.25;
    margin: 2em 0 0.65em;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content :is(h1, h2, h3, h4, h5, h6):first-child,
body.single-post .container > article .entry-content :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content h1,
body.single-post .container > article .entry-content h1 {
    font-size: 2rem;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content h2,
body.single-post .container > article .entry-content h2 {
    font-size: 1.75rem;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content h3,
body.single-post .container > article .entry-content h3 {
    font-size: 1.35rem;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content h4,
body.single-post .container > article .entry-content h4 {
    font-size: 1.15rem;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content h5,
body.single-post .container > article .entry-content h5 {
    font-size: 1.05rem;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content h6,
body.single-post .container > article .entry-content h6 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content ul,
body.single-post .container > article .entry-content ul,
body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content ol,
body.single-post .container > article .entry-content ol {
    margin: 0 0 1.15em;
    padding-inline-start: 1.4em;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content li,
body.single-post .container > article .entry-content li {
    margin: 0 0 0.4em;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content li:last-child,
body.single-post .container > article .entry-content li:last-child {
    margin-bottom: 0;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content a,
body.single-post .container > article .entry-content a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content a:hover,
body.single-post .container > article .entry-content a:hover {
    opacity: 0.85;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content blockquote,
body.single-post .container > article .entry-content blockquote {
    margin: 0 0 1.25em;
    padding-block: 0.75em;
    padding-inline: 1.15em 0;
    border-inline-start: 3px solid var(--primary-color);
    color: #555;
}

body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content hr,
body.single-post .container > article .entry-content hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid #e5e5e5;
}

@media (max-width: 768px) {
    body.page .container > article .entry-title,
    body.single-post .container > article .entry-title {
        font-size: 1.75rem;
    }

    body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content,
    body.single-post .container > article .entry-content {
        font-size: 1rem;
    }

    body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content h1,
    body.single-post .container > article .entry-content h1 {
        font-size: 1.75rem;
    }

    body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content h2,
    body.single-post .container > article .entry-content h2 {
        font-size: 1.5rem;
    }

    body.page:not(.woocommerce-account):not(.qt-checkout-shell):not(.woocommerce-order-received) .container > article .entry-content h3,
    body.single-post .container > article .entry-content h3 {
        font-size: 1.25rem;
    }
}

/**
 * Max --qt-layout-max content width, centered, no horizontal padding.
 * Use inside sections that already set side padding (pair with .categories-grid-section / .latest-products-section).
 */
.container--flush-x {
    max-width: var(--qt-layout-max);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.text-center {
    text-align: center;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

/* ============================================
   Product Gallery Styles
   ============================================ */

/* ============================================
   Error 404 Styles
   ============================================ */
.error-404 {
    padding: 80px 20px;
}

.error-404 h1 {
    font-size: 120px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.error-404 h2 {
    font-size: 32px;
    margin-bottom: 15px;
}

.error-404 p {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
}

/* ============================================
   Shop Page Styles
   ============================================ */
.shop-page-wrapper {
    max-width: var(--qt-layout-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Shop Layout: sidebar + main ────────────────────────────────────────── */
.shop-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.shop-sidebar {
    flex: 0 0 260px;
    width: 260px;
    position: sticky;
    top: calc(var(--header-height, 70px) + 20px);
    max-height: calc(100vh - var(--header-height, 70px) - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    /* Scrollable, but the bar itself stays hidden — the filter list is short
       enough to scroll by wheel/trackpad and the visible track was noisy. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.shop-sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }

@media (min-width: 769px) {
    .mobile-menu-header {
        display: none;
    }
}

@media (min-width: 901px) {
    .shop-sidebar__header,
    .shop-sidebar__mobile-close {
        display: none;
    }
}

.shop-main {
    flex: 1;
    min-width: 0;
}

.shop-toolbar__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shop-sidebar__toggle {
    display: none;
    align-items: center;
    gap: 6px;
    height: var(--shop-toolbar-btn-height, 36px);
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: var(--theme-radius-sm, 6px);
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.shop-sidebar__toggle:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.shop-sidebar__backdrop { display: none; }

/* ── Sidebar inner ──────────────────────────────────────────────────────── */
.shop-sidebar__inner {
    display: flex;
    flex-direction: column;
}

.sf-widget {
    border-bottom: 1px solid #f0f0f0;
    padding: 20px 0;
}
.sf-widget:first-child { padding-top: 0; }
.sf-widget:last-child  { border-bottom: none; }

.sf-widget__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    text-align: start;
    letter-spacing: 0.01em;
}

.sf-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #64748b;
    line-height: 0;
    transition: transform 480ms cubic-bezier(0.4, 0.05, 0.35, 1), color 0.2s ease;
}
.sf-chevron svg {
    display: block;
    width: 16px;
    height: 16px;
}
.sf-widget__toggle:hover .sf-chevron {
    color: #111;
}
.sf-widget__toggle[aria-expanded="false"] .sf-chevron {
    transform: rotate(-90deg);
}
[dir="rtl"] .sf-widget__toggle[aria-expanded="false"] .sf-chevron {
    transform: rotate(90deg);
}

/* ── List filters ───────────────────────────────────────────────────────── */
.sf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sf-list__item--hidden { display: none; }

.sf-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: var(--theme-radius-sm, 6px);
    text-decoration: none;
    color: #444;
    font-size: 13.5px;
    transition: background 0.15s, color 0.15s;
}
.sf-list__link:hover {
    background: #f5f5f5;
    color: var(--primary-color);
}
.sf-list__link.is-active {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    font-weight: 600;
}
.sf-list__count { font-size: 12px; color: #aaa; }
.sf-list__link.is-active .sf-list__count { color: var(--primary-color); }

.sf-load-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    color: var(--primary-color);
    cursor: pointer;
    font-weight: 500;
    transition: opacity 0.15s;
}
.sf-load-more:hover { opacity: 0.75; }

/* ── Price slider ───────────────────────────────────────────────────────── */
.sf-range-wrap {
    position: relative;
    height: 20px;
    margin-bottom: 18px;
}
.sf-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: #e8e8e8;
    border-radius: 2px;
    transform: translateY(-50%);
}
.sf-range-fill {
    position: absolute;
    inset-inline-start: 0;
    height: 100%;
    background: var(--primary-color);
    border-radius: 2px;
}
.sf-range {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    outline: none;
}
.sf-range--max { z-index: 1; }
.sf-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary-color);
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: box-shadow 0.15s;
}
.sf-range::-webkit-slider-thumb:hover,
.sf-range::-webkit-slider-thumb:active {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary-color) 15%, transparent);
}
.sf-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary-color);
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.sf-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.sf-price-input-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: var(--theme-radius-sm, 6px);
    padding: 5px 8px;
    transition: border-color 0.15s;
}
.sf-price-input-group:focus-within { border-color: var(--primary-color); }
.sf-price-currency { font-size: 12px; color: #888; flex-shrink: 0; }
.sf-price-input-group input[type="number"] {
    border: none;
    outline: none;
    width: 100%;
    font-size: 13px;
    color: #333;
    padding: 0;
    background: transparent;
    -moz-appearance: textfield;
    appearance: textfield;
}
.sf-price-input-group input[type="number"]::-webkit-inner-spin-button,
.sf-price-input-group input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; }
.sf-price-sep { color: #ccc; font-size: 14px; flex-shrink: 0; }
.sf-price-apply {
    display: block;
    width: 100%;
    padding: 9px 16px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--theme-radius-sm, 6px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.sf-price-apply:hover { opacity: 0.85; }

/* ── Rating filter ──────────────────────────────────────────────────────── */
.sf-rating-link { gap: 8px; justify-content: flex-start; }
.sf-stars { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
.sf-star { color: #e0e0e0; }
.sf-star--filled { color: #f5a623; }
/* The HugeIcons star ships as an outline; these render solid, so paint the path. */
.sf-star path { fill: currentColor; }
.sf-rating-label { font-size: 13px; color: #666; }
.sf-rating-link.is-active .sf-rating-label { color: var(--primary-color); font-weight: 600; }

/* ── Active filter pills ────────────────────────────────────────────────── */
.sf-active-filters { padding-bottom: 20px; }
.sf-active-filters__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #aaa;
    margin: 0 0 8px;
}
.sf-active-filters__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sf-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
}
.sf-pill:hover { background: color-mix(in srgb, var(--primary-color) 18%, transparent); }
.sf-clear-all { font-size: 12px; color: #999; text-decoration: underline; text-underline-offset: 2px; }
.sf-clear-all:hover { color: var(--primary-color); }

/* ── Mobile drawer ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .shop-layout { gap: 0; }

    .shop-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        background: #fff;
        z-index: 1100;
        box-shadow: 4px 0 24px rgba(0,0,0,0.12);
        /* Full off-canvas travel — same as mobile menu */
        transform: translateX(-100%);
        transition: transform 480ms cubic-bezier(0.4, 0.05, 0.35, 1);
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 0;
        will-change: transform;
    }
    .shop-sidebar.is-open { transform: translateX(0); }

    [dir="rtl"] .shop-sidebar {
        box-shadow: -4px 0 24px rgba(0,0,0,0.12);
        transform: translateX(100%);
        border-radius: 0;
    }
    [dir="rtl"] .shop-sidebar.is-open { transform: translateX(0); }

    .shop-sidebar__header {
        display: flex;
    }

    .shop-sidebar__mobile-close {
        display: inline-flex;
    }

    .shop-sidebar__inner {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 20px 40px;
    }

    .shop-sidebar__toggle { display: inline-flex; }

    .shop-sidebar__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1090;
        opacity: 0;
        pointer-events: none;
        transition: opacity 480ms cubic-bezier(0.4, 0.05, 0.35, 1);
    }
    .shop-sidebar__backdrop.is-visible {
        opacity: 1;
        pointer-events: all;
    }
}

/* ── Page Hero (Breadcrumb + Title) ─────────────────────────────────────────
   Shared: shop, category archives, checkout, cart
   ──────────────────────────────────────────────────────────────────────────*/
.page-hero {
    text-align: center;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    padding: var(--qt-hero-top-space) 20px 36px;
    margin-bottom: 40px;
    border-bottom: 1px solid #f0f0f0;
}

.page-hero__breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    font-size: 13px;
}

.page-hero__crumb {
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
    padding: 2px 4px;
}

a.page-hero__crumb:hover {
    color: var(--primary-color);
}

.page-hero__crumb--current {
    color: #444;
    font-weight: 500;
}

.page-hero__sep {
    display: flex;
    align-items: center;
    color: #ccc;
    flex-shrink: 0;
    line-height: 1;
}

.page-hero__sep svg {
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    fill: none;
    overflow: visible;
}

.page-hero__sep svg path {
    fill: none;
    stroke: currentColor;
}

[dir="rtl"] .page-hero__sep svg {
    transform: scaleX(-1);
}

.page-hero__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.2;
}

.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
    --shop-toolbar-btn-height: 36px;
}

.shop-results-count {
    font-size: 14px;
    color: #666;
}

.shop-sorting {
    flex-shrink: 0;
}

.shop-sorting__trigger {
    position: relative;
    width: var(--shop-toolbar-btn-height, 36px);
    height: var(--shop-toolbar-btn-height, 36px);
}

.shop-sorting__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px solid #e0e0e0;
    border-radius: var(--theme-radius-sm);
    background: #fff;
    color: #333;
    pointer-events: none;
}

.shop-sorting__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.shop-sorting .woocommerce-ordering {
    margin: 0;
    position: absolute;
    inset: 0;
}

.shop-sorting select.orderby {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--theme-radius-sm);
    opacity: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Shop & category archives: 3 columns alongside sidebar */
.shop-page-wrapper ul.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/*
 * WooCommerce applies clearfix to ul.products (::before/::after with display:table).
 * On a grid container those pseudos become grid items and consume the first column.
 */
.shop-page-wrapper ul.products::before,
.shop-page-wrapper ul.products::after,
.woocommerce ul.products.products-grid::before,
.woocommerce ul.products.products-grid::after,
.woocommerce-page ul.products.products-grid::before,
.woocommerce-page ul.products.products-grid::after {
    content: none !important;
    display: none !important;
}

/* WooCommerce layout.css uses float + 22.05% width; grid needs full-width cells */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products-grid li.product {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

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

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

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

@media (max-width: 400px) {
    .shop-page-wrapper ul.products {
        grid-template-columns: 1fr;
    }
}

/* Subcategories: own row above products (not mixed into ul.products — see functions.php) */
.product-subcategories {
    max-width: var(--qt-layout-max);
    margin: 0 auto 32px;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

.product-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-categories-grid li.product {
    min-width: 0;
    width: 100%;
}

/* Match archive product card look for category tiles */
.product-categories-grid .product-category a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.product-categories-grid .product-category .woocommerce-loop-category__title {
    margin: 10px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.product-categories-grid .woocommerce-loop-category__title mark {
    background: none;
    color: inherit;
    font-weight: 600;
}

.qt-cat-count {
    color: var(--primary-color);
    font-weight: 600;
}

.product-categories-grid img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--theme-radius);
    display: block;
}

@media (max-width: 1200px) {
    .product-categories-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .product-categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    .product-categories-grid {
        grid-template-columns: 1fr;
    }
}

.search-products-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: var(--qt-layout-max);
    margin: 0 auto;
}

/* Specific Grid Overrides - Placed here to ensure they override .products-grid */
.latest-products-grid,
.related-products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: var(--qt-layout-max);
    margin: 0 auto;
    gap: 30px;
}

.latest-products-grid li,
.related-products-grid li {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    list-style: none !important;
}

/* ============================================
   Product Card Styles (minimal: image, title, price, rating)
   ============================================ */
.product-card {
    position: relative;
    border: none;
    border-radius: var(--theme-radius);
    overflow: visible;
    background: transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: none;
}

.product-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/*
 * Product card image frame: locked 4:5 portrait.
 * Must use content-box — with the global border-box reset,
 * height:0 + padding-bottom:125% would collapse to 0px.
 * Absolute images so WooCommerce’s height:auto cannot stretch the card.
 */
.product-card .product-image-wrapper,
.product-image-wrapper {
    position: relative;
    width: 100%;
    box-sizing: content-box !important;
    height: 0 !important;
    padding: 0 0 125% !important; /* 5/4 → 4:5 */
    aspect-ratio: auto !important;
    flex: 0 0 auto;
    align-self: stretch;
    background: #fff;
    /* visible so the heart can slide out on unhover; images clip on the link */
    overflow: visible;
    border-radius: var(--theme-radius);
}

.product-card .product-image-link,
.product-image-link {
    display: block;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
    overflow: hidden;
    border-radius: var(--theme-radius);
}

.product-badge-discount {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 14px;
    border-end-end-radius: var(--theme-radius);
    pointer-events: none;
    z-index: 2;
}

/*
 * Fill the 4:5 frame. WooCommerce’s
 * `.woocommerce ul.products li.product a img { height:auto; margin:0 0 1em }`
 * must not win — keep cover crop inside the fixed frame.
 */
.product-card .product-image-wrapper img,
.product-card .product-image-wrapper .product-image,
.product-image-wrapper img,
.product-image-wrapper .product-image,
.woocommerce ul.products li.product .product-image-wrapper img,
.woocommerce-page ul.products li.product .product-image-wrapper img,
ul.products-grid li.product .product-image-wrapper img,
.latest-products-grid li.product .product-image-wrapper img,
.related-products-grid li.product .product-image-wrapper img,
.woocommerce ul.products li.product a.product-image-link img,
ul.products-grid li.product a.product-image-link img {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    /* Anchor to the top: square product shots cropped into the 4:5 card would
       otherwise lose the model's head. Trimming the bottom keeps the face and
       the garment's neckline, which is what shoppers scan for. */
    object-position: top center !important;
    display: block !important;
    box-shadow: none !important;
}

/* Hover: crossfade to gallery / variation image (secondary fades in over primary) */
.product-image-wrapper.has-secondary .product-image--secondary {
    opacity: 0;
    z-index: 1;
    transition: opacity 0.4s ease-in-out !important;
    will-change: opacity;
    pointer-events: none;
}

.product-image-wrapper.has-secondary .product-image--primary {
    z-index: 0;
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .product-card:hover .product-image-wrapper.has-secondary .product-image--secondary {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-image-wrapper.has-secondary .product-image--secondary,
    .product-card-wishlist {
        transition: none !important;
    }
}

/* Heart: slides in from the inline-end on card hover (animates both ways) */
.product-card-wishlist {
    --qt-wl-slide: 14px;
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--theme-radius);
    background: rgba(255, 255, 255, 0.94);
    color: #1e293b;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(var(--qt-wl-slide), 0, 0);
    transition:
        transform var(--qt-reveal-duration, 0.35s) var(--qt-reveal-ease, ease),
        opacity var(--qt-reveal-duration, 0.35s) var(--qt-reveal-ease, ease),
        visibility 0s linear var(--qt-reveal-duration, 0.35s),
        color 0.2s ease,
        background 0.2s ease;
}

[dir="rtl"] .product-card-wishlist {
    --qt-wl-slide: -14px;
}

.product-card-wishlist svg {
    width: 18px;
    height: 18px;
    display: block;
}

.product-card-wishlist .qt-heart-fill {
    display: none;
}

.product-card-wishlist .qt-heart-outline {
    display: block;
}

.product-card-wishlist.is-active {
    color: #f43f5e;
}

.product-card-wishlist.is-active .qt-heart-outline {
    display: none;
}

.product-card-wishlist.is-active .qt-heart-fill {
    display: block;
}

.product-card-wishlist:hover,
.product-card-wishlist:focus-visible {
    background: #fff;
    outline: none;
}

.product-card .product-card-wishlist__yith {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

@media (hover: hover) and (pointer: fine) {
    .product-card:hover .product-card-wishlist,
    .product-card-wishlist:focus-visible,
    .product-card-wishlist.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
        /* Show immediately on enter; leave uses base transition (visibility delayed) */
        transition:
            transform var(--qt-reveal-duration, 0.35s) var(--qt-reveal-ease, ease),
            opacity var(--qt-reveal-duration, 0.35s) var(--qt-reveal-ease, ease),
            visibility 0s linear 0s,
            color 0.2s ease,
            background 0.2s ease;
    }
}

/* Touch: always show heart (no hover). */
@media (hover: none), (pointer: coarse) {
    .product-card-wishlist {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }
}

.product-link--body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.product-info {
    padding: 12px 0 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: start;
    align-items: flex-start;
}

/* Loop card: variation swatches (QuickFORM / Emran-compatible logic) */
.product-card-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    width: 100%;
    margin: 0 0 4px;
}

.product-card-swatches-inner {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.product-card-swatch {
    width: 22px;
    height: 22px;
    padding: 3px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--theme-radius);
    flex-shrink: 0;
    box-sizing: border-box;
}

.product-card-swatch--color {
    background-color: #e8e8e8;
}

.product-card-swatch--image {
    background-color: #f2f2f2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3px;
}

.product-card-swatch--label {
    background: rgba(240, 240, 240, 0);
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    overflow: hidden;
}

.product-card-swatch-label-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 1px;
}

.product-card .product-title {
    font-size: 15px;
    font-weight: 500;
    color: #000;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: start;
    line-height: 1.3;
}

.product-price-wrapper {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.product-card .product-price-original {
    font-size: 14px;
    color: #888;
    text-decoration: line-through;
    font-weight: 500;
    font-variant-numeric: normal;
}

.product-card .product-price-original .woocommerce-Price-amount bdi {
    color: rgba(0, 0, 0, 0.4);
}

.product-card .product-price-current {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    font-variant-numeric: normal;
    line-height: 1.2;
    text-decoration: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    max-width: 100%;
}

.product-card .product-price-current .woocommerce-Price-amount {
    color: #000;
    font-variant-numeric: normal;
    text-decoration: none;
}

.product-card .product-price-current .woocommerce-Price-amount bdi {
    font-weight: 600;
}

/* Loop card rating: stars + average + (count) */
.product-card-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 2px;
    line-height: 1;
}

.product-card-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.product-card-star {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.product-card-star svg {
    width: 14px;
    height: 14px;
    display: block;
    overflow: visible;
}

/* Hugeicons StarIcon (solid-rounded); colors via path fill */
.product-card-star--full path {
    fill: #eab308;
    stroke: none;
}

.product-card-star--empty path {
    fill: #e0e0e0;
    stroke: none;
}

.product-card-star--split {
    position: relative;
    width: 14px;
    height: 14px;
}

.product-card-star-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-star-bg path {
    fill: #e0e0e0;
    stroke: none;
}

.product-card-star-fg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.product-card-star-fg svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.product-card-star-fg path {
    fill: #eab308;
    stroke: none;
}

.product-card-rating-value {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.product-card-rating-count,
.product-card-swatches-more {
    font-size: 13px;
    font-weight: 400;
    color: #888;
}

.no-products {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

/* ============================================
   Pagination Styles
   ============================================ */
.pagination,
.navigation {
    margin: 40px 0;
    text-align: center;
}

.page-numbers {
    display: inline-flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.page-numbers li {
    display: inline-block;
}

.page-numbers a,
.page-numbers span {
    display: inline-block;
    padding: 8px 12px;
    min-width: 40px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: var(--theme-radius-sm);
    color: #333;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.page-numbers a:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.page-numbers .current {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    font-weight: 700;
}

.page-numbers .dots {
    border: none;
    padding: 8px 4px;
}

.page-numbers .prev,
.page-numbers .next {
    font-weight: 700;
}

/* ============================================
   Shop Page Responsive
   ============================================ */
@media (max-width: 768px) {
    .page-hero {
        padding: 32px 16px 24px;
        margin-bottom: 24px;
    }

    .page-hero__title {
        font-size: 1.75rem;
    }

    .shop-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

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

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

    /* Search grid becomes 2 columns on tablet */
    .search-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Latest and related products become 2 columns on tablet */
    .latest-products-grid,
    .related-products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 20px;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Search grid becomes 1 column on mobile */
    .search-products-grid {
        grid-template-columns: 1fr;
    }

    /* Grids become 2 columns on mobile */
    .latest-products-grid,
    .related-products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 10px;
    }

    .latest-products-title {
        font-size: 20px;
    }

    .related-products-title {
        font-size: 18px;
    }

    /* Unified override above handles this */

    .product-card .product-info {
        padding: 10px 0 0;
    }

    .product-card-swatch {
        width: 22px;
        height: 22px;
    }

    /* Product card typography adjustments for mobile */
    .product-card .product-title {
        font-size: 14px;
    }

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

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

    .page-numbers a,
    .page-numbers span {
        padding: 6px 10px;
        min-width: 36px;
        font-size: 14px;
    }
}

.woocommerce-Price-amount {
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: normal;
    line-height: 1.2;
    display: flex;
    text-align: center;
    text-transform: uppercase;
}

/* Single product page price styling - only regular price has line-through */
.product-summary p.price,
.product-summary .price,
.product-intro p.price,
.product-intro .price {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    color: var(--primary-color);
}

.product-summary .price del,
.product-intro .price del {
    text-decoration: line-through !important;
    color: #333;
    opacity: 0.5;
}

.product-summary .price del .woocommerce-Price-amount,
.product-intro .price del .woocommerce-Price-amount {
    color: inherit;
}

.product-summary .price ins,
.product-intro .price ins {
    text-decoration: none !important;
    /* Remove default underline from ins tag */
    color: var(--primary-color);
    font-size: 40px;
    font-weight: 700;
    display: inline-block;
}

.product-summary .price ins .woocommerce-Price-amount,
.product-intro .price ins .woocommerce-Price-amount {
    text-decoration: none !important;
    color: var(--primary-color);
}

.woocommerce-product-details__short-description {
    color: #666;
    line-height: 1.6;
}

/* Discount Badge */
.product-discount-badge {
    display: inline-flex;
    align-items: center;
    background: #28a745;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: var(--theme-radius-sm);
    margin-inline-start: 8px;
    line-height: 1.2;
    vertical-align: middle;
}

.product-discount-badge__text {
    white-space: nowrap;
}

/* Product Header Wrapper */
.product-header-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    flex-wrap: nowrap;

}

/* Product Custom Tagline */
.product-custom-tagline {
    display: inline-block;
    background-color: #FFDF86;
    /* Gold Background */
    color: #8B4400;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 8px;
    border-radius: var(--theme-radius-sm);
    margin-bottom: 0;
    line-height: normal;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.product-custom-tagline:before {
    animation: shiny 2s ease-in-out infinite;
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    pointer-events: none;
    z-index: 1;
}

.product_title.entry-title {
    line-height: 1.2em;
    margin-bottom: 0;
    font-size: 1.75rem;
    /* Margin handled by flex gap */
}

/* ============================================
   QuickFORM Compatibility Fixes
   ============================================ */

/* Tiny checkmark on colour swatches — always present so unselect can fade out */
.qf-swatch.qf-swatch-color::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 9px;
	margin: 0;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	background: none;
	transform: translate(-50%, -58%) rotate(45deg) scale(0.6);
	opacity: 0;
	box-sizing: border-box;
	pointer-events: none;
	filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.55));
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.qf-swatch.qf-swatch-color.selected::before {
	opacity: 1;
	transform: translate(-50%, -58%) rotate(45deg) scale(1);
}

.qf-swatch.qf-swatch-color {
	position: relative;
}

.qf-swatch.qf-swatch-color,
.qf-swatch.qf-swatch-image {
	transition: border-color 0.22s ease, box-shadow 0.22s ease, outline-offset 0.22s ease, outline-color 0.22s ease, opacity 0.22s ease;
}

/* Ensure proper flexbox layout isn't disrupted by QuickFORM styles */
.single-product-wrapper .product-content {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    align-items: start !important;
    clear: none !important;
    float: none !important;
}

.product-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

/* Desktop: gallery | details (intro + summary stacked, no tall empty grid row) */
@media (min-width: 769px) {
    .single-product-wrapper .product-content {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 40px !important;
    }

    .single-product-wrapper .product-images {
        flex: 0 0 calc(60% - 20px);
        width: calc(60% - 20px) !important;
        max-width: calc(60% - 20px);
    }

    .single-product-wrapper .product-details {
        flex: 0 0 calc(40% - 20px);
        width: calc(40% - 20px);
        max-width: calc(40% - 20px);
    }

    .single-product-wrapper .product-summary {
        width: 100% !important;
    }
}

/* Product Breadcrumb */
.product-breadcrumb {
    width: 100%;
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
    padding: 0;
}

.product-breadcrumb a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-breadcrumb a:hover {
    color: var(--primary-color, #17a2b8);
}

.breadcrumb-separator {
    color: #999;
    margin: 0;
}

.breadcrumb-current {
    color: #333;
    font-weight: 500;
}

.single-product-wrapper .product-images,
.single-product-wrapper .product-summary {
    clear: none !important;
    float: none !important;
    box-sizing: border-box !important;
}

@media (min-width: 769px) {
    .single-product-wrapper .product-images {
        /* Sticky + positioned containing block: gallery sets height, thumb rail fills it */
        position: sticky !important;
        top: calc(var(--header-main-height, var(--header-height, 70px)) + 16px);
        align-self: start;
        display: block;
    }

    .single-product-wrapper .product-images:has(.gallery-thumbnails) {
        padding-inline-start: 120px; /* wider 4:5 thumb rail + gutter */
    }

    /* Vertical thumbnail rail — wider portrait thumbs (FIGS-style 4:5) */
    .single-product-wrapper .gallery-thumbnails {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        margin: 0;
        width: 108px;
        height: 100%;
        max-height: 100%;
        overflow: visible;
        box-sizing: border-box;
        padding-inline: 2px;
    }

    .single-product-wrapper .gallery-thumbnails__rail {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: visible;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100%;
        padding-block: 1px; /* keep active border from clipping at rail edges */
        box-sizing: border-box;
    }

    .single-product-wrapper .gallery-thumbnails__rail::-webkit-scrollbar {
        display: none;
    }

    .single-product-wrapper .gallery-thumbs-nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        color: #666;
        cursor: pointer;
        line-height: 0;
        border-radius: var(--theme-radius);
        transition: color 0.2s, opacity 0.2s;
    }

    .single-product-wrapper .gallery-thumbs-nav:hover:not(:disabled) {
        color: #111;
    }

    .single-product-wrapper .gallery-thumbs-nav:disabled,
    .single-product-wrapper .gallery-thumbs-nav[hidden] {
        opacity: 0.25;
        cursor: default;
        pointer-events: none;
    }

    .single-product-wrapper .gallery-thumbs-nav svg {
        display: block;
    }

    .single-product-wrapper .gallery-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        flex: 0 0 auto;
        opacity: 1;
        border-width: 1px;
        border-color: transparent;
        border-radius: var(--theme-radius-sm);
    }

    .single-product-wrapper .gallery-thumb:hover {
        border-color: #ccc;
    }

    .single-product-wrapper .gallery-thumb.active {
        border-color: #111;
        opacity: 1;
    }

    .single-product-wrapper .product-gallery {
        position: relative;
        width: 100% !important;
    }
}

/* Ensure product gallery maintains proper aspect ratio */
.single-product-wrapper .product-gallery {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    border-radius: var(--theme-radius-lg);
    background: rgba(248, 248, 248, 0);
}

.single-product-wrapper .product-gallery__track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Counter: mobile-only pill (blurred glass); JS updates current index */
.product-gallery__counter {
    display: none;
}

.product-gallery__counter-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: #1e293b;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

/* Pagination dots — overlay seam between main image & thumbnails (no layout height) */
.product-gallery__dots {
    display: none;
}

.product-gallery__dots-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.65);
}

.product-gallery__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary-color);
    opacity: 0.35;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.product-gallery__dot.is-active {
    opacity: 1;
    transform: scale(1.15);
}

.product-gallery__dot:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Support for browsers without aspect-ratio (4/5 → 125% height) */
@supports not (aspect-ratio: 4 / 5) {
    .single-product-wrapper .product-gallery {
        height: 0 !important;
        padding-bottom: 125% !important;
    }
}

.single-product-wrapper .gallery-slide {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
    z-index: 0;
    pointer-events: none;
}

.single-product-wrapper .gallery-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    pointer-events: auto;
}

.single-product-wrapper .gallery-slide img,
.single-product-wrapper .gallery-slide .product-gallery-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: var(--theme-radius-sm) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    /* removed transition for better zoom responsiveness */
    transition: transform 0.1s ease-out;
}

.gallery-zoom-trigger {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Mobile-only prev/next on main gallery image */
.gallery-nav {
    display: none;
}

.gallery-zoom-trigger:hover {
    transform: scale(1.1);
    background: #f8f8f8;
}

.gallery-zoom-trigger svg {
    width: 20px;
    height: 20px;
}

/* Gallery back control — top logical start (LTR: top-left) */
.qt-gallery-back {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: 14;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    padding-block: 0;
    padding-inline: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #1e293b;
    box-shadow: none;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.qt-gallery-back:hover {
    transform: none;
    background: transparent;
    color: #1e293b;
    opacity: 0.75;
    text-decoration: none;
}

.qt-gallery-back:focus-visible {
    outline: 2px solid var(--primary-color, #FF583C);
    outline-offset: 2px;
}

.qt-gallery-back__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    line-height: 0;
}

.qt-gallery-back__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

[dir="rtl"] .qt-gallery-back__icon svg {
    transform: scaleX(-1);
}

.qt-gallery-back__label {
    white-space: nowrap;
}

/* Gallery wishlist heart — top logical end (LTR: top-right) */
.qt-wishlist {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 14;
}

.qt-wishlist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--theme-radius);
    background: rgba(255, 255, 255, 0.92);
    color: #1e293b;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    line-height: 0;
    appearance: none;
    -webkit-appearance: none;
}

/* PDP only — must not override .product-card-wishlist leave transitions (opacity/transform). */
.qt-wishlist-btn:not(.product-card-wishlist) {
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.qt-wishlist-btn:not(.product-card-wishlist):hover {
    transform: scale(1.06);
    background: #fff;
}

.qt-wishlist-btn:focus-visible {
    outline: 2px solid var(--primary-color, #FF583C);
    outline-offset: 2px;
}

.qt-wishlist-btn svg {
    display: block;
    width: 22px;
    height: 22px;
}

.qt-wishlist-btn .qt-heart-fill {
    display: none;
}

.qt-wishlist-btn .qt-heart-outline {
    display: block;
}

.qt-wishlist-btn.is-active {
    color: #f43f5e; /* rose */
}

.qt-wishlist-btn.is-active .qt-heart-outline {
    display: none;
}

.qt-wishlist-btn.is-active .qt-heart-fill {
    display: block;
}

.qt-wishlist__yith {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

/* Hide YITH’s auto-injected PDP heart — gallery QT heart is the only visible control. */
body.single-product .yith-add-to-wishlist-button-block,
body.single-product .yith-wcwl-add-to-wishlist {
    display: none !important;
}

body.single-product .qt-wishlist .yith-add-to-wishlist-button-block,
body.single-product .qt-wishlist .yith-wcwl-add-to-wishlist {
    display: block !important; /* still clipped by .qt-wishlist__yith */
}

/* Hide YITH’s own feedback/labels — QT toast replaces them. */
.yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button__label,
body.single-product .yith-wcwl-message,
body.single-product .woocommerce-message.yith-wcwl-notice {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

.yith-wcwl-feedback-messages-container {
    display: none !important;
}

/* Favorites toast — top overlay after add */
.qt-wishlist-toast {
    position: fixed;
    top: calc(var(--header-main-height, var(--header-height, 70px)) + 12px);
    left: 50%;
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(360px, calc(100vw - 32px));
    padding: 12px 12px 12px 12px;
    box-sizing: border-box;
    background: #fff;
    border-radius: var(--theme-radius);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
    transform: translate(-50%, -8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.qt-wishlist-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.qt-wishlist-toast__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--theme-radius);
    background: #f1f5f9;
}

.qt-wishlist-toast__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: start;
}

.qt-wishlist-toast__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #1e293b;
}

.qt-wishlist-toast__link {
    font-size: 13px;
    line-height: 1.3;
    color: #334155;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.qt-wishlist-toast__link:hover {
    color: #0f172a;
}

.qt-wishlist-toast__close {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px -4px 0 0;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    line-height: 0;
}

.qt-wishlist-toast__close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* CSS Hover Scale Removed - Handled by JS for "real zoom" feel */

/* Mobile responsiveness */
@media (max-width: 768px) {
    .single-product-wrapper .product-breadcrumb-wrapper {
        margin-bottom: 16px;
    }

    .product-summary-breadcrumb,
    .page-hero__breadcrumb {
        font-size: 12px; /* −1px vs desktop */
    }

    /* Narrow screens: let the trail scroll sideways rather than squeezing the
       crumbs into each other. The row still shows the full path, and the
       scrollbar itself stays hidden. */
    .product-summary-breadcrumb {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .product-summary-breadcrumb::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    /* With a scrolling row the last crumb no longer needs to be the only
       flexible item — show it in full instead of ellipsising it. */
    .product-summary-breadcrumb .breadcrumb-current {
        flex: 0 0 auto;
        overflow: visible;
        text-overflow: clip;
    }

    .product-summary-breadcrumb .breadcrumb-item--current {
        flex: 0 0 auto;
    }

    /* page-hero trail wraps onto a second line instead of colliding. */
    .page-hero__breadcrumb {
        row-gap: 4px;
    }

    .page-hero__crumb {
        flex-shrink: 0;
    }

    .product-breadcrumb {
        font-size: 13px; /* −1px vs desktop */
    }

    /* Remove QuickFORM title dotted divider on mobile */
    .single-product-wrapper .qf-title,
    .single-product-page .qf-title {
        border-top: none;
        padding-top: 0;
    }

    /* FIGS-style stack: breadcrumb (above) → title/reviews/price → gallery → rest */
    .single-product-wrapper .product-content {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
        row-gap: 16px !important;
    }

    /* Unwrap details so intro/summary can reorder around the gallery */
    .single-product-wrapper .product-details {
        display: contents;
    }

    .single-product-wrapper .product-intro {
        order: 1;
        width: 100%;
        gap: 8px;
        margin: 0;
        padding-bottom: 0;
    }

    .single-product-wrapper .product-intro .product-title,
    .single-product-wrapper .product-intro .product_title.entry-title {
        font-size: 22px !important;
        line-height: 1.3;
        font-weight: 600;
    }

    .single-product-wrapper .product-intro .price {
        margin: 0;
    }

    .single-product-wrapper .product-intro .price ins {
        font-size: 18px;
    }

    .single-product-wrapper .product-intro .price .woocommerce-Price-amount,
    .single-product-wrapper .product-intro .price ins .woocommerce-Price-amount {
        font-size: 18px !important;
    }

    .single-product-wrapper .product-images {
        order: 2;
        width: 100% !important;
        flex: 0 0 auto !important;
        position: static !important;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-inline-start: 0 !important;
    }

    /* Main gallery full-bleed; thumbnails stay inside the 20px content padding */
    .single-product-wrapper .product-gallery {
        width: calc(100% + 40px) !important;
        max-width: none !important;
        margin-inline: -20px;
        border-radius: 0;
    }

    .single-product-wrapper .product-gallery__track,
    .single-product-wrapper .gallery-slide img,
    .single-product-wrapper .gallery-slide .product-gallery-image {
        border-radius: 0 !important;
    }

    /* ≤8 images: dots; >8: 1/N counter — both bottom-center on the main image */
    .single-product-wrapper .product-gallery[data-pager="dots"] .product-gallery__dots {
        display: flex;
        position: absolute;
        left: 50%;
        bottom: 12px;
        z-index: 8;
        margin: 0;
        padding: 0;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .single-product-wrapper .product-gallery__dots-inner {
        pointer-events: auto;
    }

    .single-product-wrapper .product-gallery[data-pager="counter"] .product-gallery__counter {
        display: block;
        position: absolute;
        left: 50%;
        bottom: 12px;
        z-index: 8;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .single-product-wrapper .product-summary {
        order: 3;
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    /* Hide category term on mobile */
    .single-product-wrapper .product-category-row {
        display: none !important;
    }

    .single-product-wrapper .gallery-thumbnails {
        position: static;
        inset: auto;
        width: auto;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .single-product-wrapper .gallery-thumbs-nav {
        display: none !important;
    }

    .woocommerce-Price-amount {
        font-size: 23px;
    }

    /* Mobile gallery: horizontal scroll carousel (default) */
    body:not(.product-gallery-mobile-thumbnails) .single-product-wrapper .product-gallery__track {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    body:not(.product-gallery-mobile-thumbnails) .single-product-wrapper .product-gallery__track::-webkit-scrollbar {
        display: none;
    }

    body:not(.product-gallery-mobile-thumbnails) .single-product-wrapper .gallery-slide {
        position: relative !important;
        display: block !important;
        flex: 0 0 calc(100% - 32px);
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px);
        min-height: 100%;
        height: auto;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        /* Horizontal carousel: keep every slide visible (no fade stack) */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto;
        z-index: auto;
        transition: none;
    }

    body:not(.product-gallery-mobile-thumbnails) .single-product-wrapper .product-gallery__track .gallery-slide:only-child {
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100%;
    }

    body:not(.product-gallery-mobile-thumbnails) .single-product-wrapper .gallery-slide img,
    body:not(.product-gallery-mobile-thumbnails) .single-product-wrapper .gallery-slide .product-gallery-image {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100%;
        object-fit: cover !important;
        border-radius: var(--theme-radius-lg) !important;
    }

    body:not(.product-gallery-mobile-thumbnails) .single-product-wrapper .product-images .gallery-thumbnails {
        display: none !important;
    }

    /* Mobile gallery: thumbnails under main image (desktop-like) */
    body.product-gallery-mobile-thumbnails .single-product-wrapper .product-images .gallery-thumbnails {
        --qt-m-thumb-gap: 8px;
        --qt-m-thumb-count: 5; /* full thumbs visible; extra scroll cleanly */
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: var(--qt-m-thumb-gap);
        margin-top: 0;
        order: 2;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-block: 2px; /* room for active border */
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .payment_box.payment_method_cod,
    .woocommerce-terms-and-conditions-wrapper,
    .woocommerce-privacy-policy-text {
        display: none!important;    
    }
    .form-row.place-order {
    padding: 0!important;
    border-top: none!important;
    }
    #add_payment_method #payment ul.payment_methods, .woocommerce-cart #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods

    body.product-gallery-mobile-thumbnails .single-product-wrapper .product-gallery {
        order: 1;
    }

    body.product-gallery-mobile-thumbnails .single-product-wrapper .gallery-thumbnails__rail {
        display: contents;
    }

    body.product-gallery-mobile-thumbnails .single-product-wrapper .product-images .gallery-thumbnails::-webkit-scrollbar {
        display: none;
    }

    /* 4:5 thumbs sized so 5 fit fully — no half-cut thumbs at the edges */
    body.product-gallery-mobile-thumbnails .single-product-wrapper .gallery-thumb {
        --qt-m-thumb-w: calc(
            (100% - (var(--qt-m-thumb-count) - 1) * var(--qt-m-thumb-gap))
            / var(--qt-m-thumb-count)
        );
        width: var(--qt-m-thumb-w);
        height: auto;
        flex: 0 0 var(--qt-m-thumb-w);
        aspect-ratio: 4 / 5;
        max-width: none;
        opacity: 1;
        border-width: 2px;
        border-radius: var(--theme-radius-sm);
        scroll-snap-align: start;
    }

    .single-product-wrapper .gallery-nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 12;
        width: 36px;
        height: 36px;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.85);
        color: #1e293b;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        line-height: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .single-product-wrapper .gallery-nav--prev {
        inset-inline-start: 10px;
    }

    .single-product-wrapper .gallery-nav--next {
        inset-inline-end: 10px;
    }

    .single-product-wrapper .gallery-nav svg {
        display: block;
        flex-shrink: 0;
    }

    [dir="rtl"] .single-product-wrapper .gallery-nav svg {
        transform: scaleX(-1);
    }

    .single-product-wrapper .gallery-zoom-trigger {
        background: rgba(255, 255, 255, 0.45);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.5);
    }

    .single-product-wrapper .qt-gallery-back {
        min-height: 36px;
        font-size: 13px;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
    }

    [dir="rtl"] .single-product-wrapper .gallery-zoom-trigger {
        right: auto;
        left: 15px;
    }
}

/* ============================================
   WooCommerce Thank You Page (Order Received)
   ============================================ */
.woocommerce-order-received {
    --qt-field-border: #E2E8F0;
    --qt-field-border-w: 1.5px;
    --qt-field-radius: var(--theme-radius);
    --qt-field-shadow: -2px 5px 12.9px -9px rgba(157, 157, 157, 0.81);
    --qt-field-bg: #FFFFFF;
    --qt-field-text: #1E293B;
    --qt-label-color: #202020;
}

.woocommerce-order {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.woocommerce-order>* {
    margin: 0;
}

.woocommerce-order-overview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.woocommerce-order-overview li {
    margin: 0;
}

.woocommerce-order-details {
    margin: 0;
}

.woocommerce-order-details__title,
.woocommerce-order-details_title {
    margin: 0 0 12px;
    color: var(--qt-label-color);
}

/* Thank you page: no “Order details” heading above the table */
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-order-details_title {
    display: none;
}

/* Thank you page: hide billing address block if anything still outputs it */
.woocommerce-order-received .woocommerce-customer-details {
    display: none !important;
}

/* WooCommerce shop tables — unified border color */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
    border-color: #E2E8F0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td {
    border-color: #E2E8F0;
    padding: 20px;
}

/* Thank you / order-details table — one border token, taller rows */
.woocommerce-order-details .shop_table {
    --qt-od-border: #E2E8F0;
    --qt-od-border-w: 1px;
    display: table;
    width: 100%;
    margin: 0;
    border: var(--qt-od-border-w) solid var(--qt-od-border);
    border-radius: var(--qt-field-radius);
    background: var(--qt-field-bg, #fff);
    box-shadow: none;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.woocommerce-order-details .shop_table thead,
.woocommerce-order-details .shop_table tbody,
.woocommerce-order-details .shop_table tfoot {
    display: table-row-group;
    border: 0;
}

.woocommerce-order-details .shop_table tr {
    display: table-row;
    border: 0;
    background: transparent;
}

.woocommerce-order-details .shop_table thead tr {
    background: #f8fafc;
}

.woocommerce-order-details .shop_table thead th {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--qt-label-color);
}

.woocommerce-order-details .shop_table th,
.woocommerce-order-details .shop_table td {
    display: table-cell;
    vertical-align: middle;
    margin: 0;
    padding: 28px 20px;
    min-height: 64px;
    border: 0 !important;
    /* Row dividers use tr box-shadow so lines stay full-width (shipping/free rows
       were showing a half-line when only the label cell painted a border). */
    box-shadow: none !important;
    outline: none;
    color: var(--qt-field-text);
    word-wrap: break-word;
    line-height: 1.45;
}

.woocommerce-order-details .shop_table thead th {
    padding: 20px 20px;
}

.woocommerce-order-details .shop_table thead tr,
.woocommerce-order-details .shop_table tbody tr,
.woocommerce-order-details .shop_table tfoot tr:not(:last-child) {
    box-shadow: inset 0 -1px 0 var(--qt-od-border);
}

/* Drop divider on the last row only — outer frame already closes the table */
.woocommerce-order-details .shop_table tfoot tr:last-child {
    box-shadow: none;
}

.woocommerce-order-details .shop_table tfoot tr:last-child th,
.woocommerce-order-details .shop_table tfoot tr:last-child td {
    border-bottom: 0 !important;
}

.woocommerce-order-details .shop_table th:first-child,
.woocommerce-order-details .shop_table td:first-child {
    width: 58%;
    text-align: left;
    font-weight: 500;
}

/* Product rows: thumbnail + name */
.woocommerce-order-details .shop_table tbody td.product-name {
    font-weight: 500;
}

.woocommerce-order-details .qt-order-item {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: start;
}

.woocommerce-order-details .qt-order-item__thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--theme-radius-sm, 8px);
    overflow: hidden;
    background: #f8fafc;
    border: var(--qt-od-border-w, 1px) solid var(--qt-od-border, #E2E8F0);
    box-shadow: none;
}

.woocommerce-order-details .qt-order-item__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.woocommerce-order-details .qt-order-item__info {
    min-width: 0;
    flex: 1;
}

.woocommerce-order-details .qt-order-item__info a {
    color: inherit;
    text-decoration: none;
}

.woocommerce-order-details .qt-order-item__info a:hover {
    text-decoration: underline;
}

.woocommerce-order-details .shop_table th:last-child,
.woocommerce-order-details .shop_table td:last-child {
    width: 42%;
    text-align: right;
    font-weight: 600;
}

/* Isolate currency amounts so RTL currency (د.ج) renders correctly on an LTR page
   and stays right-aligned. `.amount` is WooCommerce's price wrapper. */
.woocommerce-order-details .shop_table td .amount,
.woocommerce-order-details .shop_table td .woocommerce-Price-amount,
.woocommerce-customer-details .amount,
.woocommerce-customer-details .woocommerce-Price-amount {
    /* Override the global 26px product-page price rule that leaks in here. */
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: right;
    text-transform: none;
    color: inherit;
}

/* Total row keeps the emphasis (slightly larger + brand color). */
.woocommerce-order-details .shop_table tfoot tr.order_total .amount,
.woocommerce-order-details .shop_table tfoot tr.order_total .woocommerce-Price-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color, #17a2b8);
}

/* Product name row: let the "× 1" qty sit as muted secondary text. */
.woocommerce-order-details .shop_table td:first-child .product-quantity {
    color: var(--qt-label-color);
    opacity: 0.6;
    font-weight: 500;
}

/* Emphasize the Total row (not payment method). */
.woocommerce-order-details .shop_table tfoot tr.order_total th,
.woocommerce-order-details .shop_table tfoot tr.order_total td {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color, #17a2b8);
}

/* Free shipping value on thank-you / order details */
.woocommerce-order-details .shop_table .qt-shipping-free {
    color: #16a34a;
    font-weight: 600;
}

.woocommerce-order-downloads {
    margin: 0;
}

.woocommerce-order-downloads_title {
    margin: 0 0 12px;
}

.woocommerce-order-downloads ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.woocommerce-order-downloads li {
    margin: 0;
}

.woocommerce-customer-details {
    margin: 0;
}

.woocommerce-customer-details .woocommerce-columns {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.woocommerce-customer-details .woocommerce-column {
    flex: 1 1 320px;
}

.woocommerce-customer-details_title,
.woocommerce-column__title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--qt-label-color);
}

.woocommerce-customer-details address {
    margin: 0;
    padding: 16px 18px;
    border: var(--qt-field-border-w) solid var(--qt-field-border);
    border-radius: var(--qt-field-radius);
    background: var(--qt-field-bg);
    box-shadow: var(--qt-field-shadow);
    color: var(--qt-field-text);
    font-style: normal;
    line-height: 1.7;
    font-size: 14px;
}

/* First line of the address (customer name) stands out. */
.woocommerce-customer-details address {
    display: flex;
    flex-direction: column;
}

.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--qt-label-color);
}

.woocommerce-customer-details .woocommerce-customer-details--phone::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5 10 8l-1.7 3c.3.8.9 1.9 1.9 2.9s2.1 1.6 2.9 1.9L16 13l4.5 3.5c-.9 1.6-2 2.7-3.6 3.6-4.8.2-8.9-2.4-11.7-5.7C3 12 2 8.5 2.7 5.6 3.6 4 4.8 2.9 6.5 3.5z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5 10 8l-1.7 3c.3.8.9 1.9 1.9 2.9s2.1 1.6 2.9 1.9L16 13l4.5 3.5c-.9 1.6-2 2.7-3.6 3.6-4.8.2-8.9-2.4-11.7-5.7C3 12 2 8.5 2.7 5.6 3.6 4 4.8 2.9 6.5 3.5z'/></svg>") no-repeat center / contain;
    flex-shrink: 0;
}

.woocommerce-thankyou-order-received {
    margin: 0;
}

.woocommerce-thankyou-order-received+* {
    margin-top: 0;
}

@media (max-width: 768px) {
    .woocommerce-order-details .shop_table th,
    .woocommerce-order-details .shop_table td {
        padding: 24px 16px;
    }

    .woocommerce-order-details .shop_table thead th {
        padding: 18px 16px;
    }

    .woocommerce-order-details .qt-order-item {
        gap: 12px;
    }

    .woocommerce-order-details .qt-order-item__thumb {
        width: 48px;
        height: 48px;
    }

    .woocommerce-customer-details .woocommerce-columns {
        gap: 12px;
    }

    .woocommerce-customer-details .woocommerce-column {
        flex: 1 1 100%;
    }
}

.acc-checkout-box {
    border: none !important;
}

.product-card .woocommerce-Price-amount.amount {
    font-size: 14px;
}

.product-category-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
}

.product-category-label {
    font-size: 12px;
    color: var(--primary-color);
    text-transform: capitalize;
    letter-spacing: 0px;
    font-weight: 600;
}

.product-category-label::after {
    content: ": ";
}

.product-category {
    font-size: 12px;
    color: #999;
    display: inline-block;
    margin: 0;
    text-transform: capitalize;
    letter-spacing: 0px;
    font-weight: 500;
}

/* ============================================
   WooCommerce Cart Page
   ============================================ */
body.woocommerce-cart {
    --qt-cart-border: color-mix(in srgb, var(--font-body, #333) 12%, transparent);
    --qt-cart-muted: #64748b;
    --qt-cart-heading: #1e293b;
}

.qt-cart-wrapper {
    max-width: var(--qt-layout-max);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.qt-cart-form {
    flex: 1 1 65%;
    min-width: 300px;
}

/* Cart line items reuse mini-cart row layout (.qt-mini-cart-item*). */
.qt-cart-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e5e5e5;
    border-radius: var(--theme-radius);
    background: #fff;
    overflow: hidden;
}

.qt-cart-items .qt-mini-cart-item {
    padding: 16px;
}

.qt-cart-items .qt-mini-cart-item:last-child {
    border-bottom: none;
}

.qt-remove-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--theme-radius-sm);
    background: #f8f8f8;
    color: #666;
    font-size: 24px;
    line-height: 1;
    transition: all 0.2s;
}

.qt-remove-item:hover {
    background: #ff4444;
    color: #fff;
}

.qt-cart-actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
}

.qt-update-cart {
    padding: 0 22px;
    min-height: 48px;
    background: var(--qt-field-bg, #fff);
    color: var(--primary-color);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    border-image: none;
    border-radius: max(var(--qt-field-radius, 8px), 10px);
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.qt-update-cart:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--qt-field-bg, #fff));
    border-color: color-mix(in srgb, var(--primary-color) 55%, var(--qt-field-border, #e2e8f0));
}

.qt-update-cart:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.qt-update-cart:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.qt-cart-collaterals {
    flex: 1 1 30%;
    min-width: 300px;
}

.qt-cart-totals {
    background: #fff;
    border: 1px solid var(--qt-cart-border, #e2e8f0);
    border-radius: var(--theme-radius-lg, 12px);
    padding: 22px 22px 20px;
    position: sticky;
    top: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.qt-cart-totals h2 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-headings, 600);
    margin: 0 0 18px;
    padding-bottom: 14px;
    color: var(--qt-cart-heading, #1e293b);
    letter-spacing: -0.02em;
    border-bottom: 1px solid var(--qt-cart-border, #e2e8f0);
}

.qt-cart-totals-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 18px;
    padding-bottom: 0;
    border-bottom: none;
}

.qt-cart-subtotal,
.qt-cart-discount,
.qt-cart-fee,
.qt-cart-tax {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--qt-cart-border, #e2e8f0);
    font-size: 0.9375rem;
}

.qt-cart-subtotal > span:first-child,
.qt-cart-discount > span:first-child,
.qt-cart-fee > span:first-child,
.qt-cart-tax > span:first-child {
    color: var(--qt-cart-muted, #64748b);
    font-weight: 500;
}

.qt-cart-subtotal > span:last-child,
.qt-cart-discount > span:last-child,
.qt-cart-fee > span:last-child,
.qt-cart-tax > span:last-child {
    color: var(--qt-cart-heading, #1e293b);
    font-weight: 600;
    text-align: end;
    unicode-bidi: isolate;
}

/* Shipping block: full-width below subtotal (not a two-column flex row) */
.qt-cart-shipping-wrap {
    padding: 16px 0;
    border-bottom: 1px solid var(--qt-cart-border, #e2e8f0);
}

.qt-cart-shipping-wrap--calculator-only {
    padding-bottom: 8px;
}

.qt-cart-shipping-wrap .qt-shipping-package + .qt-shipping-package {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--qt-cart-border, #e2e8f0);
}

.qt-shipping-package {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qt-shipping-package__heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--qt-cart-muted, #64748b);
    margin: 0;
}

.qt-shipping-package__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Shipping method cards — cart, order review, shell left-column slot */
.qt-cart-shipping-wrap .woocommerce-shipping-methods,
.qt-order-review .woocommerce-shipping-methods,
#order_review .woocommerce-shipping-methods,
.qt-checkout-shipping-slot .woocommerce-shipping-methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qt-cart-shipping-wrap .woocommerce-shipping-methods li,
.qt-order-review .woocommerce-shipping-methods li,
#order_review .woocommerce-shipping-methods li,
.qt-checkout-shipping-slot .woocommerce-shipping-methods li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--qt-field-border, #e2e8f0);
    border-radius: var(--theme-radius, 8px);
    background: var(--qt-field-bg, #fff);
    box-shadow: var(--qt-field-shadow);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.qt-cart-shipping-wrap .woocommerce-shipping-methods li:has(.shipping_method:checked),
.qt-order-review .woocommerce-shipping-methods li:has(.shipping_method:checked),
#order_review .woocommerce-shipping-methods li:has(.shipping_method:checked),
.qt-checkout-shipping-slot .woocommerce-shipping-methods li:has(.shipping_method:checked) {
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--qt-field-border, #e2e8f0));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary-color) 25%, transparent),
        var(--qt-field-shadow);
}

.qt-cart-shipping-wrap .woocommerce-shipping-methods .shipping_method,
.qt-order-review .woocommerce-shipping-methods .shipping_method,
#order_review .woocommerce-shipping-methods .shipping_method,
.qt-checkout-shipping-slot .woocommerce-shipping-methods .shipping_method {
    margin: 0;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.qt-cart-shipping-wrap .woocommerce-shipping-methods label,
.qt-order-review .woocommerce-shipping-methods label,
#order_review .woocommerce-shipping-methods label,
.qt-checkout-shipping-slot .woocommerce-shipping-methods label {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--qt-field-text, var(--qt-cart-heading, #1e293b));
    cursor: pointer;
    line-height: 1.35;
}

.qt-cart-shipping-wrap .woocommerce-shipping-methods label .woocommerce-Price-amount,
.qt-order-review .woocommerce-shipping-methods label .woocommerce-Price-amount,
#order_review .woocommerce-shipping-methods label .woocommerce-Price-amount,
.qt-checkout-shipping-slot .woocommerce-shipping-methods label .woocommerce-Price-amount,
.qt-cart-shipping-wrap .woocommerce-shipping-methods label .amount,
.qt-order-review .woocommerce-shipping-methods label .amount,
#order_review .woocommerce-shipping-methods label .amount,
.qt-checkout-shipping-slot .woocommerce-shipping-methods label .amount {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--qt-cart-muted, #64748b);
    white-space: nowrap;
    unicode-bidi: isolate;
    margin-inline-start: auto;
}

/* Checkout: >3 shipping methods → select (JS); hide radio list */
body.woocommerce-checkout .qt-order-review .woocommerce-shipping-methods.qt-shipping-as-select,
body.woocommerce-checkout #order_review .woocommerce-shipping-methods.qt-shipping-as-select,
body.woocommerce-checkout .qt-checkout-shipping-slot .woocommerce-shipping-methods.qt-shipping-as-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.woocommerce-checkout .qt-shipping-select-wrap {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--qt-field-height, 47px);
    max-height: var(--qt-field-height, 47px);
    margin: 0 0 10px;
    border: var(--qt-field-border-w, 1.5px) solid var(--qt-field-border, #E2E8F0);
    border-radius: var(--qt-field-radius, var(--theme-radius));
    background: var(--qt-field-bg, #fff);
    box-shadow: var(--qt-field-shadow);
    overflow: hidden;
    box-sizing: border-box;
}

/* Single chevron via background (no extra SVG span — avoids doubled arrows). */
body.woocommerce-checkout .qt-shipping-select-wrap .qt-shipping-select,
body.woocommerce-checkout form.checkout .qt-shipping-select-wrap .qt-shipping-select {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--qt-field-height, 47px);
    min-height: var(--qt-field-height, 47px);
    max-height: var(--qt-field-height, 47px);
    margin: 0;
    padding: 0 36px 0 12px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !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='M19 8.5L15.5 12L14.625 12.875M12 15.5L5 8.5' stroke='%23334155' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    background-position: right 12px center !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--qt-checkout-input-weight, 500);
    color: var(--qt-field-text, #1E293B);
    box-sizing: border-box;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
}

body.woocommerce-checkout .qt-shipping-select-wrap .qt-shipping-select::-ms-expand {
    display: none;
}

[dir="rtl"] body.woocommerce-checkout .qt-shipping-select-wrap .qt-shipping-select,
[dir="rtl"] body.woocommerce-checkout form.checkout .qt-shipping-select-wrap .qt-shipping-select {
    padding: 0 12px 0 36px !important;
    background-position: left 12px center !important;
}

/* Hide legacy chevron span if an older JS build still injects it */
body.woocommerce-checkout .qt-shipping-select-wrap .qt-shipping-select-chevron {
    display: none !important;
}

/* Checkout shipping row: leave table layout so colspan=2 stays full-width.
   display:block on the td was shrinking the select to ~half the card.
   The shared .qt-shipping-package rule sets display:flex (correct for the cart,
   where it's a <div>); on checkout that same class lands on the <tr>, which
   breaks the table so colspan=2 is ignored and the select collapses to a narrow
   box — force the row back to table-row. */
body.woocommerce-checkout .qt-order-review tr.woocommerce-shipping-totals.qt-shipping-package,
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals.qt-shipping-package,
body.woocommerce-checkout .qt-order-review tr.woocommerce-shipping-totals,
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals {
    display: table-row;
}
/* Method picker (left column / full-width package row) */
body.woocommerce-checkout .qt-order-review tr.woocommerce-shipping-totals.qt-shipping-package > td,
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals.qt-shipping-package > td {
    display: table-cell;
    width: 100%;
    padding: 12px 0;
    border-bottom: 0 !important;
    text-align: start !important;
}
/* Summary “Expédition” amount — align with other totals */
body.woocommerce-checkout .qt-order-review tr.woocommerce-shipping-totals.qt-shipping-totals--summary > th,
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals.qt-shipping-totals--summary > th {
    text-align: start;
}
/* Keep border on both cells — zeroing only the <td> left a half-width line under Expédition. */
body.woocommerce-checkout .qt-order-review tr.woocommerce-shipping-totals.qt-shipping-totals--summary > td,
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals.qt-shipping-totals--summary > td {
    display: table-cell;
    padding: 12px 0;
    text-align: end !important;
    white-space: nowrap;
}

body.woocommerce-checkout .qt-order-review tr.woocommerce-shipping-totals .qt-shipping-package__body,
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals .qt-shipping-package__body {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.woocommerce-checkout .qt-order-review tr.woocommerce-shipping-totals .qt-shipping-package__heading,
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals .qt-shipping-package__heading {
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--qt-label-color, #334155);
}

.qt-shipping-destination {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--qt-cart-muted, #64748b);
    background: color-mix(in srgb, var(--font-body, #333) 4%, transparent);
    border-radius: var(--theme-radius-sm, 4px);
    border: 1px solid var(--qt-cart-border, #e2e8f0);
    unicode-bidi: plaintext;
}

.qt-shipping-destination strong {
    color: var(--qt-cart-heading, #1e293b);
    font-weight: 600;
}

.qt-shipping-contents {
    margin: 0;
    color: var(--qt-cart-muted, #64748b);
}

.qt-shipping-calculator-wrap .shipping-calculator-form,
.qt-cart-shipping-wrap .shipping-calculator-form {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--qt-cart-border, #e2e8f0);
}

.qt-cart-shipping-wrap .shipping-calculator-button {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
    margin-top: 4px;
}

.qt-cart-shipping-wrap .shipping-calculator-button:hover {
    text-decoration: underline;
}

body.woocommerce-cart .qt-cart-shipping-wrap .shipping-calculator-form .input-text,
body.woocommerce-cart .qt-cart-shipping-wrap .shipping-calculator-form select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1.5px solid var(--qt-field-border, #e2e8f0);
    border-radius: var(--qt-field-radius, var(--theme-radius));
    background: var(--qt-field-bg, #fff);
    font-size: 0.875rem;
    box-shadow: var(--qt-field-shadow);
}

body.woocommerce-cart .qt-cart-shipping-wrap .shipping-calculator-form .button {
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--qt-field-radius, var(--theme-radius));
    background: var(--primary-color);
    color: #fff;
    border: none;
    font-weight: 600;
    cursor: pointer;
}

.qt-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-top: 4px;
    padding: 16px 0 4px;
    border-top: 2px solid var(--qt-cart-border, #e2e8f0);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--qt-cart-heading, #1e293b);
}

.qt-cart-total > span:last-child {
    text-align: end;
    unicode-bidi: isolate;
}

.qt-proceed-checkout {
    margin-top: 8px;
}

/* Cart proceed — parity with QuickFORM .qf-submit / #place_order */
.qt-proceed-checkout .checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 20px!important;
    border: none;
    border-radius: var(--qf-radius, var(--qt-field-radius, 6px)) !important;
    background: var(--qf-theme, var(--qt-checkout-accent, var(--primary-color))) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: opacity 0.2s;
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
    animation: 5s infinite qt-qf-shake-every-5s;
}

.qt-proceed-checkout .checkout-button::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 80px !important;
    height: 100% !important;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 80%
    ) !important;
    transform: translateX(-120%);
    animation: 2.4s ease-in-out infinite qt-qf-shiny-slide !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.qt-proceed-checkout .checkout-button > * {
    position: relative;
    z-index: 1;
}

.qt-proceed-checkout .checkout-button:hover {
    opacity: 0.9;
}

.qt-proceed-checkout .checkout-button:focus {
    outline: none;
}

.qt-proceed-checkout .checkout-button:focus-visible {
    outline: 2px solid var(--qf-theme, var(--qt-checkout-accent, var(--primary-color)));
    outline-offset: 3px;
}

.qt-proceed-checkout .checkout-button:active {
	opacity: 0.95;
}

/* Remove loader from add-to-cart button */
.qf-add-to-cart .loader,
.qf-add-to-cart.adding-to-cart .loader {
	display: none !important;
}

/* Place-order spinner — same clip-path animation as the add-to-cart loader, theme color */
.qf-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	position: relative;
	border: none;
	background: none;
	animation: qf-atc-loader-rotate 1s linear infinite;
}

.qf-spinner::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid var(--primary-color, #0a0101);
	animation: qf-atc-loader-prixClipFix 2s linear infinite;
}

/* Cart coupon row (injected via woocommerce_cart_actions or plugins) — QuickFORM-style */
body.woocommerce-cart .qt-cart-form .coupon,
body.woocommerce-cart form.woocommerce-cart-form .coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
}

body.woocommerce-cart .qt-cart-form .coupon label,
body.woocommerce-cart form.woocommerce-cart-form .coupon label {
    flex: 1 1 100%;
    font-size: 14px;
    color: #334155;
    cursor: pointer;
}

body.woocommerce-cart .qt-cart-form .coupon .input-text,
body.woocommerce-cart form.woocommerce-cart-form .coupon .input-text {
    flex: 1 1 200px;
    min-width: 0;
    min-height: 48px;
    padding: 8px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--qt-field-radius);
    background: #fff;
    color: #1e293b;
    font-size: 14px;
    box-shadow: var(--qt-field-shadow);
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

body.woocommerce-cart .qt-cart-form .coupon .input-text:focus,
body.woocommerce-cart form.woocommerce-cart-form .coupon .input-text:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.5px var(--primary-color), var(--qt-field-shadow);
    outline: none;
}

body.woocommerce-cart .qt-cart-form .coupon .button,
body.woocommerce-cart .qt-cart-form .coupon button[type="submit"],
body.woocommerce-cart form.woocommerce-cart-form .coupon .button,
body.woocommerce-cart form.woocommerce-cart-form .coupon button[type="submit"] {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 22px;
    margin: 0;
    border: none;
    border-radius: var(--qt-field-radius);
    background: var(--primary-color);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    box-shadow: var(--qt-field-shadow);
    cursor: pointer;
    transition: opacity 0.2s ease, box-shadow 0.1s ease;
}

body.woocommerce-cart .qt-cart-form .coupon .button:hover,
body.woocommerce-cart form.woocommerce-cart-form .coupon .button:hover {
    opacity: 0.9;
}

body.woocommerce-cart .qt-cart-form .coupon .button:focus,
body.woocommerce-cart form.woocommerce-cart-form .coupon .button:focus {
    outline: none;
    box-shadow: 0 0 0 0.5px var(--primary-color), var(--qt-field-shadow);
}

/* Empty Cart */
.qt-empty-cart {
    max-width: 600px;
    margin: 80px auto;
    padding: 60px 20px;
    text-align: center;
}

.qt-empty-cart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    color: #ccc;
    line-height: 0;
}
.qt-empty-cart-icon svg {
    display: block;
    width: 80px;
    height: 80px;
}

.qt-empty-cart-icon .qt-heart-fill {
    display: none;
}

.qt-empty-cart-message {
    font-size: 20px;
    color: #666;
    margin-bottom: 32px;
}

.qt-return-shop {
    display: inline-block;
    padding: 0 40px;
    min-height: 48px;
    line-height: 48px;
    background: var(--primary-color);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: var(--qt-field-radius);
    box-shadow: var(--qt-field-shadow);
    cursor: pointer;
    transition: opacity 0.2s ease, box-shadow 0.1s ease;
    text-decoration: none;
    vertical-align: middle;
}

.qt-return-shop:hover {
    opacity: 0.9;
    color: #fff;
}

.qt-return-shop:focus {
    outline: none;
    box-shadow: 0 0 0 0.5px var(--primary-color), var(--qt-field-shadow);
}

.shop-main .qt-empty-state,
.shop-page-wrapper > .qt-empty-state {
    margin: 48px auto;
    padding: 40px 20px;
}

/* Categories Slider Responsive */
@media (max-width: 1024px) {
    .category-slide {
        flex: 0 0 calc(33.333% - 20px);
        min-width: calc(33.333% - 20px);
    }

    .category-image {
        width: 140px;
        height: 140px;
    }
}

@media (max-width: 768px) {
    .categories-slider-section {
        padding: 30px 15px;
    }

    .categories-title {
        font-size: 28px;
    }

    .categories-slider {
        margin: 0 50px;
    }

    .categories-track {
        gap: 20px;
    }

    .category-slide {
        flex: 0 0 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }

    .category-image {
        width: 120px;
        height: 120px;
        margin-bottom: 12px;
    }

.category-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin: 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.category-name__count {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

    .category-count {
        font-size: 13px;
    }

    .slider-nav {
        width: 36px;
        height: 36px;
    }

    .slider-nav svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .categories-title {
        font-size: 24px;
    }

    .categories-slider {
        margin: 0 45px;
    }

    .category-slide {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .category-image {
        width: 140px;
        height: 140px;
    }

    .slider-nav {
        width: 32px;
        height: 32px;
    }
}

/* Cart Responsive */
@media (max-width: 768px) {
    .qt-cart-wrapper {
        flex-direction: column;
    }

    .qt-cart-form,
    .qt-cart-collaterals {
        flex: 1 1 100%;
    }

    .qt-cart-totals {
        position: static;
    }
}

/* ============================================
   Wishlist / Favoris (YITH) — match cart card UI
   ============================================ */
body.qt-wishlist-page {
    --qt-cart-border: color-mix(in srgb, var(--font-body, #333) 12%, transparent);
    --qt-cart-muted: #64748b;
    --qt-cart-heading: #1e293b;
}

body.qt-wishlist-page .container {
    padding-top: 0;
}

body.qt-wishlist-page .entry-content {
    max-width: 860px;
    margin: 0 auto;
}

body.qt-wishlist-page .yith-wcwl-form {
    margin: 0;
}

body.qt-wishlist-page .wishlist-title-container,
body.qt-wishlist-page .wishlist-title {
    display: none !important;
}

/* Desktop table → card list */
body.qt-wishlist-page table.wishlist_table {
    display: block;
    width: 100%;
    margin: 0;
    border: none !important;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    box-shadow: none;
}

body.qt-wishlist-page table.wishlist_table thead {
    display: none;
}

body.qt-wishlist-page table.wishlist_table tbody,
body.qt-wishlist-page table.wishlist_table tbody.wishlist-items-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.qt-wishlist-page table.wishlist_table tr {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    gap: 12px 16px;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-radius: var(--theme-radius);
    background: #fff;
}

body.qt-wishlist-page table.wishlist_table td {
    display: block;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle;
}

body.qt-wishlist-page table.wishlist_table td.product-checkbox {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 2;
}

body.qt-wishlist-page table.wishlist_table td.product-remove {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    inset-inline-start: auto;
    bottom: auto;
    z-index: 2;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

body.qt-wishlist-page table.wishlist_table td.product-thumbnail {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 80px;
}

body.qt-wishlist-page table.wishlist_table td.product-name {
    grid-column: 2;
    grid-row: 1;
    padding-inline-end: 40px !important;
}

body.qt-wishlist-page table.wishlist_table td.product-price {
    grid-column: 2;
    grid-row: 2;
}

body.qt-wishlist-page table.wishlist_table td.product-quantity,
body.qt-wishlist-page table.wishlist_table td.product-stock-status {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
}

body.qt-wishlist-page table.wishlist_table td.product-add-to-cart,
body.qt-wishlist-page table.wishlist_table td.product-arrange {
    grid-column: 1 / -1;
    grid-row: auto;
}

body.qt-wishlist-page table.wishlist_table td.wishlist-empty,
body.qt-wishlist-page .wishlist-empty {
    /* Fallback only — empty state is rendered by quicktheme_wishlist_empty_state */
    display: none !important;
}

/* Hide YITH empty table / share chrome when our empty state is shown */
body.qt-wishlist-page:has(.qt-empty-state--wishlist) .yith-wcwl-form,
body.qt-wishlist-page:has(.qt-empty-state--wishlist) .yith_wcwl_wishlist_footer,
body.qt-wishlist-page:has(.qt-empty-state--wishlist) .yith-wcwl-share,
body.qt-wishlist-page:has(.wishlist-empty) .yith-wcwl-form,
body.qt-wishlist-page:has(.wishlist-empty) .yith_wcwl_wishlist_footer,
body.qt-wishlist-page:has(.wishlist-empty) .yith-wcwl-share {
    display: none !important;
}

body.qt-wishlist-page .qt-empty-state--wishlist {
    margin-top: 24px;
    margin-bottom: 40px;
}

/* Mobile list → same cards */
body.qt-wishlist-page ul.wishlist_table {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: none;
    background: transparent;
}

body.qt-wishlist-page ul.wishlist_table > li {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 12px 16px;
    position: relative;
    margin: 0;
    padding: 16px;
    border: 1px solid #e5e5e5;
    border-radius: var(--theme-radius);
    background: #fff;
}

body.qt-wishlist-page ul.wishlist_table .item-wrapper {
    display: contents;
}

body.qt-wishlist-page ul.wishlist_table .product-thumbnail {
    grid-column: 1;
    grid-row: 1 / span 2;
}

body.qt-wishlist-page ul.wishlist_table .item-details {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding-inline-end: 36px;
}

body.qt-wishlist-page ul.wishlist_table .additional-info-wrapper {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

body.qt-wishlist-page ul.wishlist_table .product-remove {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    inset-inline-start: auto;
    bottom: auto;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

body.qt-wishlist-page ul.wishlist_table table.item-details-table,
body.qt-wishlist-page ul.wishlist_table table.additional-info {
    width: 100%;
    border: none;
    margin: 0;
}

body.qt-wishlist-page ul.wishlist_table table.item-details-table td,
body.qt-wishlist-page ul.wishlist_table table.additional-info td {
    border: none;
    padding: 0 0 4px;
    background: transparent;
    font-size: 13px;
}

body.qt-wishlist-page ul.wishlist_table table.item-details-table td.label,
body.qt-wishlist-page ul.wishlist_table table.additional-info td.label {
    display: none;
}

/* Shared item chrome */
body.qt-wishlist-page .wishlist_table .product-thumbnail a,
body.qt-wishlist-page .wishlist_table .product-thumbnail {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: var(--theme-radius-sm);
    overflow: hidden;
    background: #f8f8f8;
}

body.qt-wishlist-page .wishlist_table .product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.qt-wishlist-page .wishlist_table .product-name,
body.qt-wishlist-page .wishlist_table .product-name h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--qt-cart-heading);
}

body.qt-wishlist-page .wishlist_table .product-name a {
    color: var(--qt-cart-heading);
    text-decoration: none;
    transition: color 0.2s;
}

body.qt-wishlist-page .wishlist_table .product-name a:hover {
    color: var(--primary-color);
}

body.qt-wishlist-page .wishlist_table .product-price,
body.qt-wishlist-page .wishlist_table .item-details-table .value {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.3;
    color: var(--qt-cart-heading) !important;
}

body.qt-wishlist-page .wishlist_table .product-price > .price,
body.qt-wishlist-page .wishlist_table .item-details-table .value > .price {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    margin: 0;
}

/* Override global .woocommerce-Price-amount { display:flex } that stacks range prices */
body.qt-wishlist-page .wishlist_table .product-price .woocommerce-Price-amount,
body.qt-wishlist-page .wishlist_table .product-price .woocommerce-Price-amount bdi,
body.qt-wishlist-page .wishlist_table .item-details-table .value .woocommerce-Price-amount,
body.qt-wishlist-page .wishlist_table .item-details-table .value .woocommerce-Price-amount bdi {
    display: inline-flex !important;
    align-items: baseline;
    flex-wrap: nowrap;
    font-size: inherit !important;
    font-weight: inherit;
    line-height: inherit;
    text-align: start;
    text-transform: none;
    color: inherit !important;
}

body.qt-wishlist-page .wishlist_table .product-price del,
body.qt-wishlist-page .wishlist_table .item-details-table del {
    display: inline-flex;
    align-items: baseline;
    order: 2;
    font-size: calc(15px + 2px) !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-decoration: line-through;
    opacity: 0.7;
}

body.qt-wishlist-page .wishlist_table .product-price del *,
body.qt-wishlist-page .wishlist_table .item-details-table del * {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    text-decoration: inherit;
}

body.qt-wishlist-page .wishlist_table .product-price ins,
body.qt-wishlist-page .wishlist_table .item-details-table ins {
    display: inline-flex;
    align-items: baseline;
    order: 1;
    text-decoration: none !important;
    color: var(--primary-color) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

body.qt-wishlist-page .wishlist_table .product-price ins *,
body.qt-wishlist-page .wishlist_table .item-details-table ins * {
    text-decoration: none !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

body.qt-wishlist-page .wishlist-in-stock,
body.qt-wishlist-page .wishlist-out-of-stock {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

body.qt-wishlist-page .wishlist-in-stock {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #86efac;
}

body.qt-wishlist-page .wishlist-out-of-stock {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

body.qt-wishlist-page .wishlist_table .remove_from_wishlist,
body.qt-wishlist-page .wishlist_table a.remove {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    margin: 0;
    padding: 0 !important;
    border: none !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    transition: opacity 0.2s;
}

body.qt-wishlist-page .wishlist_table .remove_from_wishlist svg,
body.qt-wishlist-page .wishlist_table a.remove svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    stroke: currentColor !important;
    fill: none !important;
    color: #000;
}

body.qt-wishlist-page .wishlist_table .remove_from_wishlist:hover,
body.qt-wishlist-page .wishlist_table a.remove:hover {
    background: transparent !important;
    border: none !important;
    color: #000 !important;
    opacity: 0.55;
}

body.qt-wishlist-page .wishlist_table .product-add-to-cart {
    margin: 0;
    padding: 0;
    text-align: start;
}

body.qt-wishlist-page .wishlist_table .product-add-to-cart .dateadded {
    display: none;
}

body.qt-wishlist-page .wishlist_table .product-add-to-cart .button,
body.qt-wishlist-page .wishlist_table .product-add-to-cart a.button,
body.qt-wishlist-page .wishlist_table .product-add-to-cart a.add_to_cart_button,
body.qt-wishlist-page .wishlist_table .product-add-to-cart a.product_type_simple,
body.qt-wishlist-page .wishlist_table .product-add-to-cart a.product_type_variable,
body.qt-wishlist-page .wishlist_table .product-add-to-cart > a,
body.qt-wishlist-page .yith_wcwl_footer_additional_action input[type="submit"],
body.qt-wishlist-page .yith_wcwl_wishlist_update .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 18px !important;
    margin: 0;
    border: none !important;
    border-radius: var(--theme-radius);
    background: var(--primary-color) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1 !important;
    text-align: center;
    text-decoration: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    cursor: pointer;
    transition: opacity 0.2s;
    vertical-align: middle;
}

body.qt-wishlist-page .wishlist_table .product-add-to-cart .button::before,
body.qt-wishlist-page .wishlist_table .product-add-to-cart .button::after,
body.qt-wishlist-page .wishlist_table .product-add-to-cart > a::before,
body.qt-wishlist-page .wishlist_table .product-add-to-cart > a::after {
    display: none !important;
}

body.qt-wishlist-page .wishlist_table .product-add-to-cart .button i,
body.qt-wishlist-page .wishlist_table .product-add-to-cart .button .fa,
body.qt-wishlist-page .wishlist_table .product-add-to-cart > a i {
    display: none !important;
}

body.qt-wishlist-page .wishlist_table .product-add-to-cart .button:hover,
body.qt-wishlist-page .wishlist_table .product-add-to-cart > a:hover,
body.qt-wishlist-page .yith_wcwl_footer_additional_action input[type="submit"]:hover {
    opacity: 0.9;
    color: #fff !important;
}

/* Hide YITH “Partager sur” social share row on the wishlist page */
body.qt-wishlist-page .yith-wcwl-share,
body.qt-wishlist-page .yith_wcwl_wishlist_footer .yith-wcwl-share {
    display: none !important;
}

/* Wishlist footer (without share) */
body.qt-wishlist-page .yith_wcwl_wishlist_footer {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

/* Mobile: compact cart-like row + full-width CTA */
@media (max-width: 768px) {
    body.qt-wishlist-page .entry-content {
        max-width: none;
    }

    body.qt-wishlist-page table.wishlist_table tbody,
    body.qt-wishlist-page table.wishlist_table tbody.wishlist-items-wrapper,
    body.qt-wishlist-page ul.wishlist_table {
        gap: 12px;
    }

    body.qt-wishlist-page table.wishlist_table tr,
    body.qt-wishlist-page ul.wishlist_table > li {
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        gap: 6px 12px;
        align-items: start;
        padding: 12px;
        background: #fff;
    }

    body.qt-wishlist-page table.wishlist_table td.product-thumbnail,
    body.qt-wishlist-page ul.wishlist_table .product-thumbnail {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 72px;
        align-self: start;
    }

    body.qt-wishlist-page .wishlist_table .product-thumbnail,
    body.qt-wishlist-page .wishlist_table .product-thumbnail a {
        width: 72px;
        height: 90px;
        border-radius: var(--theme-radius-sm);
    }

    body.qt-wishlist-page table.wishlist_table td.product-name,
    body.qt-wishlist-page ul.wishlist_table .item-details {
        grid-column: 2;
        grid-row: 1;
        padding-inline-end: 36px !important;
        min-width: 0;
    }

    body.qt-wishlist-page .wishlist_table .product-name,
    body.qt-wishlist-page .wishlist_table .product-name h3 {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
    }

    body.qt-wishlist-page table.wishlist_table td.product-price {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }

    body.qt-wishlist-page ul.wishlist_table .item-details-table {
        margin-top: 4px;
    }

    body.qt-wishlist-page .wishlist_table .product-price,
    body.qt-wishlist-page .wishlist_table .item-details-table .value {
        font-size: 14px !important;
    }

    body.qt-wishlist-page .wishlist_table .product-price del,
    body.qt-wishlist-page .wishlist_table .item-details-table del {
        font-size: calc(14px + 2px) !important;
    }

    body.qt-wishlist-page .wishlist_table .product-price ins,
    body.qt-wishlist-page .wishlist_table .item-details-table ins {
        font-size: 14px !important;
    }

    body.qt-wishlist-page table.wishlist_table td.product-quantity,
    body.qt-wishlist-page table.wishlist_table td.product-stock-status {
        grid-column: 2;
        grid-row: 3;
        justify-self: start;
        align-self: start;
    }

    body.qt-wishlist-page ul.wishlist_table .additional-info-wrapper {
        grid-column: 1 / -1;
        grid-row: 4;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        width: 100%;
        margin-top: 4px;
        padding-top: 10px;
        border-top: 1px solid #f1f5f9;
    }

    body.qt-wishlist-page ul.wishlist_table .additional-info {
        order: 1;
    }

    body.qt-wishlist-page ul.wishlist_table .product-add-to-cart {
        order: 2;
        width: 100%;
    }

    body.qt-wishlist-page ul.wishlist_table .move-to-another-wishlist {
        display: none;
    }

    body.qt-wishlist-page table.wishlist_table td.product-add-to-cart,
    body.qt-wishlist-page table.wishlist_table td.product-arrange {
        grid-column: 1 / -1;
        grid-row: 4;
        width: 100%;
        margin-top: 4px;
        padding-top: 10px !important;
        border-top: 1px solid #f1f5f9;
    }

    body.qt-wishlist-page table.wishlist_table td.product-arrange {
        display: none;
    }

    body.qt-wishlist-page .wishlist-in-stock,
    body.qt-wishlist-page .wishlist-out-of-stock {
        padding: 3px 8px;
        font-size: 11px;
    }

    body.qt-wishlist-page .wishlist_table .product-add-to-cart .button,
    body.qt-wishlist-page .wishlist_table .product-add-to-cart a.button,
    body.qt-wishlist-page .wishlist_table .product-add-to-cart a.add_to_cart_button,
    body.qt-wishlist-page .wishlist_table .product-add-to-cart a.product_type_simple,
    body.qt-wishlist-page .wishlist_table .product-add-to-cart a.product_type_variable,
    body.qt-wishlist-page .wishlist_table .product-add-to-cart > a {
        width: 100%;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        font-size: 14px !important;
        padding: 0 16px !important;
        line-height: 1 !important;
    }

    body.qt-wishlist-page .wishlist_table .remove_from_wishlist,
    body.qt-wishlist-page .wishlist_table a.remove {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0;
        background: transparent !important;
        color: #000 !important;
    }

    body.qt-wishlist-page .wishlist_table .remove_from_wishlist svg,
    body.qt-wishlist-page .wishlist_table a.remove svg {
        width: 16px;
        height: 16px;
    }

    body.qt-wishlist-page table.wishlist_table td.product-remove,
    body.qt-wishlist-page ul.wishlist_table .product-remove {
        top: 12px;
        inset-inline-end: 12px;
        inset-inline-start: auto;
        bottom: auto;
        width: 28px;
        height: 28px;
    }

    body.qt-wishlist-page .yith_wcwl_wishlist_footer {
        margin-top: 20px;
        padding-top: 16px;
    }
}

/* ============================================
   WooCommerce Checkout Page
   Matches QuickFORM field shell (qf-public.css): 1.5px #E2E8F0, theme radius (--theme-radius), Figma shadow, 47px min-height.
   --qt-checkout-accent is set on body.woocommerce-checkout in wp_head (QuickFORM theme color or theme primary).
   No PDP icon rails — plain WC labels + inputs only.
   ============================================ */
body.woocommerce-checkout {
    --qt-field-border: #E2E8F0;
    --qt-field-border-w: 1.5px;
    --qt-field-radius: var(--theme-radius);
    --qt-field-shadow: -2px 5px 12.9px -9px rgba(157, 157, 157, 0.81);
    --qt-field-bg: #FFFFFF;
    --qt-field-text: #1E293B;
    --qt-label-color: #334155;
    --qt-placeholder: #94A3B8;
    --qt-checkout-input-weight: 500;
    --qt-field-height: 47px;
}

.qt-checkout-form {
    max-width: var(--qt-layout-max);
}

body.woocommerce-checkout .woocommerce-form-coupon .input-text,
body.woocommerce-checkout form.checkout_coupon .input-text {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--qt-field-height);
    height: var(--qt-field-height);
    max-height: var(--qt-field-height);
    padding: 8px 12px;
    border: var(--qt-field-border-w) solid var(--qt-field-border) !important;
    border-radius: var(--qt-field-radius);
    background: var(--qt-field-bg);
    color: var(--qt-field-text);
    font-size: 14px;
    font-weight: var(--qt-checkout-input-weight);
    box-shadow: var(--qt-field-shadow);
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

body.woocommerce-checkout .woocommerce-form-coupon .input-text:focus,
body.woocommerce-checkout form.checkout_coupon .input-text:focus {
    border-color: var(--qt-checkout-accent, var(--primary-color)) !important;
    box-shadow: 0 0 0 0.5px var(--qt-checkout-accent, var(--primary-color)), var(--qt-field-shadow);
    outline: none;
}

/* Checkout coupon row — QuickFORM-style primary button (#qf-apply-coupon): accent fill, radius, soft shadow */
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout #woocommerce-checkout-form-coupon {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    align-items: stretch;
    max-width: 300px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0;
    border-width: 0;
    height: fit-content;
}

body.woocommerce-checkout form.checkout_coupon .form-row {
    margin: 0;
    padding: 0;
}

body.woocommerce-checkout form.checkout_coupon .form-row.form-row-first {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
}

body.woocommerce-checkout form.checkout_coupon .form-row.form-row-last {
    flex: 0 0 auto;
    width: 100%;
}

body.woocommerce-checkout form.checkout_coupon .clear {
    display: none;
}

body.woocommerce-checkout form.checkout_coupon button.button,
body.woocommerce-checkout form.checkout_coupon button[type="submit"],
body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--qt-field-height);
    height: var(--qt-field-height);
    padding: 0 22px;
    margin: 0;
    border: none;
    border-radius: var(--qt-field-radius);
    background: var(--qt-checkout-accent, var(--primary-color));
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    box-shadow: var(--qt-field-shadow);
    cursor: pointer;
    transition: opacity 0.2s ease, box-shadow 0.1s ease;
}

body.woocommerce-checkout form.checkout_coupon button.button:hover,
body.woocommerce-checkout form.checkout_coupon button[type="submit"]:hover {
    opacity: 0.9;
}

body.woocommerce-checkout form.checkout_coupon button.button:focus,
body.woocommerce-checkout form.checkout_coupon button[type="submit"]:focus {
    outline: none;
    box-shadow: 0 0 0 0.5px var(--qt-checkout-accent, var(--primary-color)), var(--qt-field-shadow);
}

.qt-checkout-wrapper {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.qt-checkout-billing {
    flex: 1 1 55%;
    min-width: 300px;
}

.qt-checkout-billing h3,
.qt-checkout-review h3,
.qt-checkout-form .woocommerce-billing-fields > h3,
.qt-checkout-form #order_review_heading {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #1E293B;
}

/* Stack sections (billing block, shipping block); inside each, rows flow like WooCommerce (first+last side by side) */
.qt-checkout-billing .woocommerce-billing-fields,
.qt-checkout-shipping {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qt-checkout-billing .woocommerce-billing-fields__field-wrapper,
.qt-checkout-form .woocommerce-billing-fields__field-wrapper,
.qt-checkout-billing .woocommerce-shipping-fields__field-wrapper,
.qt-checkout-form .woocommerce-shipping-fields__field-wrapper,
.qt-checkout-shipping .woocommerce-shipping-fields__field-wrapper,
.qt-checkout-form .woocommerce-additional-fields__field-wrapper,
.qt-checkout-shipping .woocommerce-additional-fields__field-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

.qt-checkout-form .woocommerce-billing-fields__field-wrapper > .form-row,
.qt-checkout-form .woocommerce-shipping-fields__field-wrapper > .form-row,
.qt-checkout-form .woocommerce-additional-fields__field-wrapper > .form-row {
    flex: 1 1 100%;
    max-width: 100%;
    margin-bottom: 0;
    margin-top: 0;
}

/* Full-width rows (country, address, etc.) */
.qt-checkout-form .woocommerce-billing-fields__field-wrapper > .form-row.form-row-wide,
.qt-checkout-form .woocommerce-shipping-fields__field-wrapper > .form-row.form-row-wide,
.qt-checkout-form .woocommerce-additional-fields__field-wrapper > .form-row.form-row-wide {
    flex: 1 1 100%;
    max-width: 100%;
}

/* Pair first/last name (and other WC .form-row-first / .form-row-last pairs) on one row */
.qt-checkout-form .woocommerce-billing-fields__field-wrapper > .form-row.form-row-first,
.qt-checkout-form .woocommerce-billing-fields__field-wrapper > .form-row.form-row-last,
.qt-checkout-form .woocommerce-shipping-fields__field-wrapper > .form-row.form-row-first,
.qt-checkout-form .woocommerce-shipping-fields__field-wrapper > .form-row.form-row-last,
.qt-checkout-form .woocommerce-additional-fields__field-wrapper > .form-row.form-row-first,
.qt-checkout-form .woocommerce-additional-fields__field-wrapper > .form-row.form-row-last {
    flex: 1 1 calc(50% - 8px);
    max-width: calc(50% - 8px);
    min-width: 0;
}

@media (max-width: 480px) {
    .qt-checkout-form .woocommerce-billing-fields__field-wrapper > .form-row.form-row-first,
    .qt-checkout-form .woocommerce-billing-fields__field-wrapper > .form-row.form-row-last,
    .qt-checkout-form .woocommerce-shipping-fields__field-wrapper > .form-row.form-row-first,
    .qt-checkout-form .woocommerce-shipping-fields__field-wrapper > .form-row.form-row-last,
    .qt-checkout-form .woocommerce-additional-fields__field-wrapper > .form-row.form-row-first,
    .qt-checkout-form .woocommerce-additional-fields__field-wrapper > .form-row.form-row-last {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* QuickFORM-matched field shells (same metrics as .qf-field inner inputs) */
.qt-checkout-billing input[type="text"],
.qt-checkout-billing input[type="email"],
.qt-checkout-billing input[type="tel"],
.qt-checkout-billing input[type="number"],
.qt-checkout-billing input[type="password"],
.qt-checkout-billing input[type="url"],
.qt-checkout-billing input.input-text,
.qt-checkout-billing select,
.qt-checkout-billing select.select,
.qt-checkout-billing textarea,
.qt-checkout-billing .form-row input[type="text"],
.qt-checkout-billing .form-row input[type="email"],
.qt-checkout-billing .form-row input[type="tel"],
.qt-checkout-billing .form-row input[type="number"],
.qt-checkout-billing .form-row input[type="password"],
.qt-checkout-billing .form-row input[type="url"],
.qt-checkout-billing .form-row input.input-text,
.qt-checkout-billing .form-row select,
.qt-checkout-billing .form-row textarea,
.qt-checkout-billing .woocommerce-input-wrapper input,
.qt-checkout-billing .woocommerce-input-wrapper select,
.qt-checkout-billing .woocommerce-input-wrapper textarea {
    width: 100%;
    min-height: var(--qt-field-height);
    padding: 8px 12px;
    border: var(--qt-field-border-w) solid var(--qt-field-border) !important;
    border-radius: var(--qt-field-radius);
    font-size: 14px;
    font-weight: var(--qt-checkout-input-weight);
    color: var(--qt-field-text);
    background: var(--qt-field-bg);
    box-shadow: var(--qt-field-shadow);
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.qt-checkout-billing input[type="text"],
.qt-checkout-billing input[type="email"],
.qt-checkout-billing input[type="tel"],
.qt-checkout-billing input[type="number"],
.qt-checkout-billing input[type="password"],
.qt-checkout-billing input[type="url"],
.qt-checkout-billing input.input-text,
.qt-checkout-billing select,
.qt-checkout-billing select.select,
.qt-checkout-billing .form-row input[type="text"],
.qt-checkout-billing .form-row input[type="email"],
.qt-checkout-billing .form-row input[type="tel"],
.qt-checkout-billing .form-row input[type="number"],
.qt-checkout-billing .form-row input[type="password"],
.qt-checkout-billing .form-row input[type="url"],
.qt-checkout-billing .form-row input.input-text,
.qt-checkout-billing .form-row select,
.qt-checkout-billing .woocommerce-input-wrapper input,
.qt-checkout-billing .woocommerce-input-wrapper select {
    height: var(--qt-field-height);
    max-height: var(--qt-field-height);
}

/* Checkout native selects: theme chevron-down icon */
.qt-checkout-billing select,
.qt-checkout-billing select.select,
.qt-checkout-billing .form-row select,
.qt-checkout-billing .woocommerce-input-wrapper select,
.qt-checkout-form .form-row select,
.qt-checkout-form .woocommerce-input-wrapper select {
    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='M19 8.5L15.5 12L14.625 12.875M12 15.5L5 8.5' stroke='%23334155' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: right 12px center;
    padding-right: 36px;
}
[dir="rtl"] .qt-checkout-billing select,
[dir="rtl"] .qt-checkout-billing select.select,
[dir="rtl"] .qt-checkout-billing .form-row select,
[dir="rtl"] .qt-checkout-billing .woocommerce-input-wrapper select,
[dir="rtl"] .qt-checkout-form .form-row select,
[dir="rtl"] .qt-checkout-form .woocommerce-input-wrapper select {
    background-position: left 12px center;
    padding-right: 12px;
    padding-left: 36px;
}

/* Native checkout selects: use the control's natural line metric so the
   selected text (incl. RTL/Arabic glyphs) stays vertically centred and is not
   clipped at the bottom of the fixed field height by the inherited body
   line-height (1.6). */
.qt-checkout-billing select,
.qt-checkout-billing select.select,
.qt-checkout-billing .form-row select,
.qt-checkout-billing .woocommerce-input-wrapper select,
.qt-checkout-form .form-row select,
.qt-checkout-form .woocommerce-input-wrapper select,
body.woocommerce-checkout form.checkout select:not(.select2-hidden-accessible) {
    line-height: normal;
}

body.woocommerce-checkout .woocommerce-form-coupon .input-text::placeholder,
body.woocommerce-checkout form.checkout_coupon .input-text::placeholder,
.qt-checkout-billing input::placeholder,
.qt-checkout-billing textarea::placeholder,
.qt-checkout-billing .form-row input::placeholder,
.qt-checkout-billing .form-row textarea::placeholder,
.qt-checkout-billing .woocommerce-input-wrapper input::placeholder,
.qt-checkout-billing .woocommerce-input-wrapper textarea::placeholder {
    color: var(--qt-placeholder);
    opacity: 1;
    font-weight: calc(var(--qt-checkout-input-weight) - 100);
}

.qt-checkout-billing textarea,
.qt-checkout-billing .form-row textarea,
.qt-checkout-billing .woocommerce-input-wrapper textarea,
.qt-checkout-form .form-row textarea,
.qt-checkout-form .woocommerce-input-wrapper textarea {
    min-height: 100px;
    height: auto;
    max-height: none;
    padding: 12px;
}

.qt-checkout-billing input:focus,
.qt-checkout-billing select:focus,
.qt-checkout-billing textarea:focus,
.qt-checkout-billing .form-row input:focus,
.qt-checkout-billing .form-row select:focus,
.qt-checkout-billing .form-row textarea:focus,
.qt-checkout-billing .woocommerce-input-wrapper input:focus,
.qt-checkout-billing .woocommerce-input-wrapper select:focus,
.qt-checkout-billing .woocommerce-input-wrapper textarea:focus {
    border-color: var(--qt-checkout-accent, var(--primary-color)) !important;
    box-shadow: 0 0 0 0.5px var(--qt-checkout-accent, var(--primary-color)), var(--qt-field-shadow);
    outline: none;
}

.qt-checkout-billing label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 13px;
    color: var(--qt-label-color);
}

.qt-checkout-billing .required {
    color: #ff4444;
}

/* Shipping / order notes / any other rows inside checkout form */
.qt-checkout-form .form-row input[type="text"],
.qt-checkout-form .form-row input[type="email"],
.qt-checkout-form .form-row input[type="tel"],
.qt-checkout-form .form-row input[type="number"],
.qt-checkout-form .form-row input[type="password"],
.qt-checkout-form .form-row input[type="url"],
.qt-checkout-form .form-row input.input-text,
.qt-checkout-form .form-row select,
.qt-checkout-form .form-row textarea,
.qt-checkout-form .woocommerce-input-wrapper input,
.qt-checkout-form .woocommerce-input-wrapper select,
.qt-checkout-form .woocommerce-input-wrapper textarea {
    min-height: var(--qt-field-height);
    padding: 8px 12px;
    border: var(--qt-field-border-w) solid var(--qt-field-border) !important;
    border-radius: var(--qt-field-radius);
    background: var(--qt-field-bg);
    color: var(--qt-field-text);
    font-size: 14px;
    font-weight: var(--qt-checkout-input-weight);
    box-shadow: var(--qt-field-shadow);
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.qt-checkout-form .form-row input[type="text"],
.qt-checkout-form .form-row input[type="email"],
.qt-checkout-form .form-row input[type="tel"],
.qt-checkout-form .form-row input[type="number"],
.qt-checkout-form .form-row input[type="password"],
.qt-checkout-form .form-row input[type="url"],
.qt-checkout-form .form-row input.input-text,
.qt-checkout-form .form-row select,
.qt-checkout-form .woocommerce-input-wrapper input,
.qt-checkout-form .woocommerce-input-wrapper select {
    height: var(--qt-field-height);
    max-height: var(--qt-field-height);
}
.qt-checkout-form .form-row input::placeholder,
.qt-checkout-form .woocommerce-input-wrapper input::placeholder,
.qt-checkout-form .form-row textarea::placeholder,
.qt-checkout-form .woocommerce-input-wrapper textarea::placeholder {
    color: var(--qt-placeholder);
    opacity: 1;
    font-weight: calc(var(--qt-checkout-input-weight) - 100);
}
.qt-checkout-form .form-row textarea,
.qt-checkout-form .woocommerce-input-wrapper textarea {
    min-height: 100px;
}
.qt-checkout-form .form-row input:focus,
.qt-checkout-form .form-row select:focus,
.qt-checkout-form .form-row textarea:focus,
.qt-checkout-form .woocommerce-input-wrapper input:focus,
.qt-checkout-form .woocommerce-input-wrapper select:focus,
.qt-checkout-form .woocommerce-input-wrapper textarea:focus {
    border-color: var(--qt-checkout-accent, var(--primary-color)) !important;
    box-shadow: 0 0 0 0.5px var(--qt-checkout-accent, var(--primary-color)), var(--qt-field-shadow);
    outline: none;
}

.qt-checkout-form .form-row label {
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--qt-label-color);
}

/* Select2 — match border-radius. Corner clipping is done by the inner
   .select2-selection--single (it has its own border-radius + overflow:hidden);
   the outer container must stay overflow:visible or it crops the selected
   text at the bottom of the fixed field height. */
body.woocommerce-checkout form.checkout .select2-container.select2-container--default {
    border-radius: var(--qt-field-radius);
    overflow: visible;
}

/* Select2 — fixed 47px total height to match text inputs */
.qt-checkout-billing .select2-container .select2-selection--single,
.qt-checkout-form .select2-container .select2-selection--single {
    height: var(--qt-field-height) !important;
    min-height: var(--qt-field-height) !important;
    max-height: var(--qt-field-height) !important;
    border: var(--qt-field-border-w) solid var(--qt-field-border) !important;
    border-radius: var(--qt-field-radius) !important;
    overflow: hidden;
    padding: 0 32px 0 12px;
    box-sizing: border-box;
    background: var(--qt-field-bg) !important;
    box-shadow: var(--qt-field-shadow);
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
    display: flex;
    align-items: center;
}
.qt-checkout-billing .select2-container--default .select2-selection--single .select2-selection__rendered,
.qt-checkout-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.25;
    color: var(--qt-field-text);
    padding: 0;
    margin: 0;
}
.qt-checkout-billing .select2-container--default .select2-selection--single .select2-selection__arrow,
.qt-checkout-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    min-height: var(--qt-field-height);
    top: 0;
    right: 8px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qt-checkout-billing .select2-container--default .select2-selection--single .select2-selection__arrow b,
.qt-checkout-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}
.qt-checkout-billing .select2-container--default .select2-selection--single .select2-selection__arrow::before,
.qt-checkout-form .select2-container--default .select2-selection--single .select2-selection__arrow::before {
    content: "";
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    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='M19 8.5L15.5 12L14.625 12.875M12 15.5L5 8.5' stroke='%23334155' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Global checkout Select2 fallback (state/city fields) */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 24px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow::before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    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='M19 8.5L15.5 12L14.625 12.875M12 15.5L5 8.5' stroke='%23334155' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Native checkout selects fallback (when city/state is not enhanced by Select2).
   .qt-shipping-select has its own chevron styles above. */
body.woocommerce-checkout .qt-checkout-form select:not(.select2-hidden-accessible):not(.qt-shipping-select),
body.woocommerce-checkout form.checkout select:not(.select2-hidden-accessible):not(.qt-shipping-select) {
    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='M19 8.5L15.5 12L14.625 12.875M12 15.5L5 8.5' stroke='%23334155' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    background-position: right 12px center !important;
    padding-right: 36px !important;
}
[dir="rtl"] body.woocommerce-checkout .qt-checkout-form select:not(.select2-hidden-accessible):not(.qt-shipping-select),
[dir="rtl"] body.woocommerce-checkout form.checkout select:not(.select2-hidden-accessible):not(.qt-shipping-select) {
    background-position: left 12px center !important;
    padding-right: 12px !important;
    padding-left: 36px !important;
}
[dir="rtl"] .qt-checkout-billing .select2-container--default .select2-selection--single .select2-selection__arrow,
[dir="rtl"] .qt-checkout-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: auto;
    left: 8px;
}
.qt-checkout-billing .select2-container--default.select2-container--focus .select2-selection--single,
.qt-checkout-billing .select2-container--default.select2-container--open .select2-selection--single,
.qt-checkout-form .select2-container--default.select2-container--focus .select2-selection--single,
.qt-checkout-form .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--qt-checkout-accent, var(--primary-color)) !important;
    box-shadow: 0 0 0 0.5px var(--qt-checkout-accent, var(--primary-color)), var(--qt-field-shadow);
}

/* Ship-to-different disabled via woocommerce_cart_needs_shipping_address */
.qt-checkout-shipping #ship-to-different-address,
.woocommerce-shipping-fields {
    display: none !important;
}

/* Core WC ship-to-different checkbox (#ship-to-different-address on h3) — one control only */
.qt-checkout-shipping #ship-to-different-address {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: var(--qt-field-bg);
    border: var(--qt-field-border-w) solid var(--qt-field-border);
    border-radius: var(--qt-field-radius);
    box-shadow: none;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--qt-label-color);
}

.qt-checkout-shipping #ship-to-different-address label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
    font-size: 13px;
    color: var(--qt-label-color);
}

.qt-checkout-shipping #ship-to-different-address input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--qt-checkout-accent, var(--primary-color));
}

/* Order notes live in .woocommerce-additional-fields (form-shipping.php); avoid duplicating fields */
.qt-checkout-shipping .woocommerce-additional-fields {
    margin-top: 16px;
}

.qt-checkout-shipping .woocommerce-additional-fields .form-row {
    margin-bottom: 0;
}

.qt-checkout-shipping .woocommerce-additional-fields h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #1E293B;
}

.qt-checkout-review {
    flex: 1 1 40%;
    min-width: 300px;
}

.qt-order-review {
    background: var(--qt-field-bg);
    border: 1px solid #e5e7eb;
    border-radius: var(--qt-field-radius);
    box-shadow: none;
    padding: 20px;
    position: static;
    top: auto;
}

.qt-order-review table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    border: 0 !important;
}

.qt-order-review table.shop_table {
    margin-right: 0;
}

.qt-order-review th,
.qt-order-review td {
    padding: 16px 0;
    text-align: left;
    border-bottom: 1px solid #eceff3;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    font-size: 13px;
    font-weight: 400;
}

.qt-order-review table th:last-child,
.qt-order-review table td:last-child {
    text-align: end;
}

.qt-order-review th {
    font-weight: 500;
    color: var(--qt-label-color);
}

.qt-order-review .product-name {
    font-weight: 500;
    font-size: 13px;
}

/* Checkout order review: same product card as cart drawer */
body.woocommerce-checkout #order_review thead {
    display: none;
}

body.woocommerce-checkout #order_review tbody tr.cart_item > td.product-name {
    padding: 0;
    border-bottom: 1px solid #e5e5e5;
    text-align: start !important;
}

body.woocommerce-checkout #order_review tbody tr.cart_item:last-child > td.product-name {
    border-bottom: 1px solid #eceff3;
}

body.woocommerce-checkout #order_review .qt-mini-cart-item {
    padding: 16px 0;
    border-bottom: none;
    gap: 12px;
}

body.woocommerce-checkout #order_review .qt-mini-cart-item-image {
    width: 64px;
}

body.woocommerce-checkout #order_review .qt-mini-cart-item-name {
    font-size: 14px;
}

body.woocommerce-checkout #order_review .qt-mini-cart-item-price {
    font-size: 14px;
}

body.woocommerce-checkout #order_review .qt-mini-cart-item-price .woocommerce-Price-amount,
body.woocommerce-checkout #order_review .qt-mini-cart-item-price .amount {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    font-size: inherit !important;
    font-weight: inherit;
    color: inherit;
    text-align: start;
}

body.woocommerce-checkout #order_review .qt-mini-cart-item-actions {
    margin-top: 4px;
}

/* Summary prices: keep amount + currency on one line (match Total row) */
.qt-order-review .product-total .woocommerce-Price-amount,
.qt-order-review .product-total .amount,
.qt-order-review td .woocommerce-Price-amount,
.qt-order-review td .amount {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #333;
    text-align: end;
    text-transform: none;
}

.qt-order-review .woocommerce-Price-amount bdi {
    font-weight: 500;
    white-space: nowrap;
}

.qt-order-review .product-total {
    text-align: right;
    font-weight: 500;
}

.qt-order-review tfoot th {
    font-weight: 500;
    font-size: 14px;
}

.qt-order-review tfoot .order-total th,
.qt-order-review tfoot .order-total td {
    font-size: 15px;
    font-weight: 500;
    padding-top: 16px;
    padding-bottom: 16px;
    border-top: 1px solid #dfe4ea;
}

/* Keep checkout review paddings stable against Woo overrides */
body.woocommerce-checkout #order_review table.shop_table thead th.product-name {
    padding-left: 0;
    padding-right: 0;
}

body.woocommerce-checkout #order_review table.shop_table tbody td.product-name,
body.woocommerce-checkout #order_review table.shop_table tbody td.product-total {
    padding-top: 16px;
    padding-bottom: 16px;
    vertical-align: middle;
}

body.woocommerce-checkout #order_review table.shop_table tfoot th {
    padding-top: 16px;
    padding-bottom: 16px;
}

.qt-order-review tfoot .order-total .woocommerce-Price-amount,
.qt-order-review tfoot .order-total .amount {
    font-size: 15px;
    font-weight: 500;
}

/* Shipping summary row — same inline price treatment as Total */
.qt-order-review .woocommerce-shipping-totals.qt-shipping-totals--summary .woocommerce-Price-amount,
.qt-order-review .woocommerce-shipping-totals.qt-shipping-totals--summary .amount {
    font-size: 14px;
    font-weight: 400;
}

/* Keyframes shared with QuickFORM .qf-submit (qf-public.css) — duplicated so checkout matches even if qf-public is not enqueued */
@keyframes qt-qf-shake-every-5s {
    0%,
    90%,
    100% {
        transform: translateX(0);
    }
    92% {
        transform: translateX(-6px);
    }
    94% {
        transform: translateX(6px);
    }
    96% {
        transform: translateX(-4px);
    }
    98% {
        transform: translateX(4px);
    }
}

@keyframes qt-qf-shiny-slide {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }
    10%,
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(520%);
        opacity: 0;
    }
}

/* Place order — parity with QuickFORM .qf-submit */
#place_order {
    width: 100%;
    box-sizing: border-box;
    min-height: 50px;
    padding: 0 20px;
    border: none;
    border-radius: var(--qf-radius, var(--qt-field-radius, 6px)) !important;
    background: var(--qf-theme, var(--qt-checkout-accent, var(--primary-color))) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
    margin-top: 10px;
    animation: 5s infinite qt-qf-shake-every-5s;
}

#place_order::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 80px !important;
    height: 100% !important;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 80%
    ) !important;
    transform: translateX(-120%);
    animation: 2.4s ease-in-out infinite qt-qf-shiny-slide !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

#place_order:hover {
    opacity: 0.9;
}

#place_order:focus {
    outline: none;
}

#place_order:focus-visible {
    outline: 2px solid var(--qf-theme, var(--qt-checkout-accent, var(--primary-color)));
    outline-offset: 3px;
}

#place_order:disabled,
#place_order[disabled] {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    animation: none !important;
}

#place_order:disabled::before,
#place_order[disabled]::before {
    display: none !important;
}

/* Checkout login / register — same primary treatment as .qf-submit */
body.woocommerce-checkout .woocommerce-form-login .button,
body.woocommerce-checkout .woocommerce-form-login button[type="submit"],
body.woocommerce-checkout .woocommerce-form-register .button,
body.woocommerce-checkout .woocommerce-form-register button[type="submit"] {
    min-height: 48px;
    padding: 0 22px;
    border: none;
    border-radius: var(--qt-field-radius);
    background: var(--qt-checkout-accent, var(--primary-color));
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    box-shadow: var(--qt-field-shadow);
    cursor: pointer;
    transition: opacity 0.2s ease, box-shadow 0.1s ease;
}

body.woocommerce-checkout .woocommerce-form-login .button:hover,
body.woocommerce-checkout .woocommerce-form-login button[type="submit"]:hover,
body.woocommerce-checkout .woocommerce-form-register .button:hover,
body.woocommerce-checkout .woocommerce-form-register button[type="submit"]:hover {
    opacity: 0.9;
}

body.woocommerce-checkout .woocommerce-form-login .button:focus,
body.woocommerce-checkout .woocommerce-form-login button[type="submit"]:focus,
body.woocommerce-checkout .woocommerce-form-register .button:focus,
body.woocommerce-checkout .woocommerce-form-register button[type="submit"]:focus {
    outline: none;
    box-shadow: 0 0 0 0.5px var(--qt-checkout-accent, var(--primary-color)), var(--qt-field-shadow);
}

/* ============================================
   WooCommerce My Account
   ============================================ */
body.woocommerce-account .woocommerce {
    max-width: var(--qt-layout-max);
    margin: 0 auto;
}

/* Dashboard: a real two-column grid instead of WooCommerce's legacy 30%/68% floats,
   which left the columns unable to share a baseline or a gap. Matched on the presence
   of the nav so the logged-out login card keeps its own centred single-column layout. */
body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

/* The nav is the first column in both directions — grid order follows the writing mode. */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    position: sticky;
    top: calc(var(--header-main-height, 84px) + 16px);
}

body.woocommerce-account .woocommerce-MyAccount-content {
    min-width: 0;
}

/* Dashboard content sits on the same card surface as the nav so the two columns read
   as one panel rather than a floating list next to bare page text. */
body.woocommerce-account .woocommerce-MyAccount-content {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--theme-radius, var(--qt-field-radius, 8px));
    padding: 24px;
}

/* Field groups (e.g. the password block on Account details) come with the browser's
   default 2px groove fieldset border; give them the theme's own divider instead. */
body.woocommerce-account .woocommerce-MyAccount-content fieldset {
    margin: 24px 0 0;
    padding: 18px 0 0;
    border: none;
    border-top: 1px solid #eceff3;
}

body.woocommerce-account .woocommerce-MyAccount-content legend {
    padding: 0;
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: var(--qt-field-text, #111827);
}

body.woocommerce-account .woocommerce-MyAccount-content > *:first-child {
    margin-top: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation {
        position: static;
    }

    body.woocommerce-account .woocommerce-MyAccount-content {
        padding: 20px 16px;
    }
}

/* My Account uses shared page hero title; hide duplicate template/page title */
body.woocommerce-account h1.entry-title,
body.woocommerce-account .page-title {
    display: none;
}

body.woocommerce-account .woocommerce h2,
body.woocommerce-account .woocommerce h3,
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-size: 22px;
    font-weight: var(--font-weight-headings, 600);
    line-height: 1.25;
    color: var(--qt-field-text);
    margin: 0 0 14px;
}

/* Card treatment for the logged-out auth forms only. Dashboard forms sit inside the
   account content panel, which is already a card — carding them again nests two
   borders a few pixels apart. */
body.woocommerce-account .woocommerce form.woocommerce-form-login,
body.woocommerce-account .woocommerce form.woocommerce-form-register {
    background: var(--qt-field-bg, #fff);
    border: 1px solid #e5e7eb;
    border-radius: var(--theme-radius, var(--qt-field-radius, 8px));
    box-shadow: var(--qt-field-shadow);
    padding: 16px;
}

/* Guest auth: keep login/register boxes compact and centered */
body.woocommerce-account .qt-auth {
    max-width: 420px;
    width: 100%;
    margin: 0 auto 40px;
    box-sizing: border-box;
}

body.woocommerce-account .qt-auth__tabs {
    display: flex;
    gap: 0;
    margin: 0 0 20px;
    border: 1px solid #e5e7eb;
    border-radius: var(--theme-radius, var(--qt-field-radius, 8px));
    overflow: hidden;
    background: #f8fafc;
}

body.woocommerce-account .qt-auth__tab {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    text-align: center;
    background: transparent;
    transition: color 0.15s ease, background 0.15s ease;
}

body.woocommerce-account .qt-auth__tab:hover {
    color: #0f172a;
    background: #fff;
}

body.woocommerce-account .qt-auth__tab.is-active {
    color: #fff;
    background: var(--primary-color);
}

body.woocommerce-account .qt-auth__title {
    max-width: none !important;
    margin: 0 0 14px !important;
    text-align: center;
}

body.woocommerce-account .qt-auth__hint {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: #64748b;
}

body.woocommerce-account .qt-auth__switch {
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
    color: #64748b;
}

body.woocommerce-account .qt-auth__switch a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.woocommerce-account .woocommerce form.woocommerce-form-login,
body.woocommerce-account .woocommerce form.woocommerce-form-register {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

body.woocommerce-account .woocommerce-form-register .woocommerce-form-register__submit {
    width: 100%;
}

/* Keep “Se connecter” / “Register” above the box (same centered column) */
body.woocommerce-account .woocommerce > h2,
body.woocommerce-account #customer_login .u-column1 > h2,
body.woocommerce-account #customer_login .u-column2 > h2 {
    max-width: 420px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    box-sizing: border-box;
}

body.woocommerce-account .u-columns,
body.woocommerce-account .woocommerce .col2-set {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

body.woocommerce-account .u-column1.col-1:only-child,
body.woocommerce-account .u-column1.col-1:only-of-type,
body.woocommerce-account #customer_login > .u-column1:only-child {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    width: 100%;
}

body.woocommerce-account .woocommerce form .form-row,
body.woocommerce-account .woocommerce-MyAccount-content form .form-row {
    margin: 0 0 12px;
}

/* Auth forms: tighter field stack (esp. password → remember me) */
body.woocommerce-account .qt-auth .form-row {
    margin: 0 0 10px;
    padding: 0;
}

body.woocommerce-account .qt-auth .form-row::before,
body.woocommerce-account .qt-auth .form-row::after {
    content: none;
    display: none;
}

body.woocommerce-account .qt-auth .woocommerce-form-row--wide {
    margin-bottom: 10px;
}

body.woocommerce-account .qt-auth .password-input {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 0;
}

body.woocommerce-account .qt-auth .show-password-input {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 12px;
    transform: translateY(-50%);
    margin: 0;
}

body.woocommerce-account .woocommerce form label,
body.woocommerce-account .woocommerce-MyAccount-content form label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--qt-label-color, #334155);
}

body.woocommerce-account .woocommerce form input[type="text"],
body.woocommerce-account .woocommerce form input[type="email"],
body.woocommerce-account .woocommerce form input[type="tel"],
body.woocommerce-account .woocommerce form input[type="password"],
body.woocommerce-account .woocommerce form input.input-text,
body.woocommerce-account .woocommerce form select,
body.woocommerce-account .woocommerce form textarea,
body.woocommerce-account .woocommerce-MyAccount-content form input[type="text"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="email"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="tel"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="password"],
body.woocommerce-account .woocommerce-MyAccount-content form input.input-text,
body.woocommerce-account .woocommerce-MyAccount-content form select,
body.woocommerce-account .woocommerce-MyAccount-content form textarea {
    width: 100%;
    min-height: 46px;
    padding: 8px 12px;
    border: var(--qt-field-border-w, 1.5px) solid var(--qt-field-border, #E2E8F0) !important;
    border-radius: var(--qt-field-radius, 8px);
    background: var(--qt-field-bg, #fff);
    color: var(--qt-field-text, #1E293B);
    font-size: 14px;
    box-shadow: var(--qt-field-shadow);
}

body.woocommerce-account .woocommerce form input:focus,
body.woocommerce-account .woocommerce form select:focus,
body.woocommerce-account .woocommerce form textarea:focus,
body.woocommerce-account .woocommerce-MyAccount-content form input:focus,
body.woocommerce-account .woocommerce-MyAccount-content form select:focus,
body.woocommerce-account .woocommerce-MyAccount-content form textarea:focus {
    outline: none;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.5px var(--primary-color), var(--qt-field-shadow);
}

body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce .button,
body.woocommerce-account .woocommerce input.button,
body.woocommerce-account .woocommerce a.button,
body.woocommerce-account .woocommerce-MyAccount-navigation a {
    cursor: pointer;
}

body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce .button,
body.woocommerce-account .woocommerce input.button,
body.woocommerce-account .woocommerce a.button {
    min-height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: var(--qt-field-radius, 8px);
    background: var(--primary-color);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
}

/* Remember me above the button (not beside it) */
body.woocommerce-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 2px;
    margin-bottom: 10px;
}

body.woocommerce-account .woocommerce .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    order: 1;
}

body.woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit {
    order: 2;
    width: 100%;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 6px;
    border: 1px solid #e5e7eb;
    border-radius: var(--theme-radius, var(--qt-field-radius, 8px));
    background: #fff;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--qt-field-radius, 8px);
    color: #374151;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    transition: background-color 140ms ease, color 140ms ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
    background: rgba(17, 24, 39, 0.04);
    color: #111827;
}

/* Solid accent for the current section: the muted translucent grey read as disabled
   rather than selected, especially next to the panel it belongs to. */
body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
    background: var(--primary-color);
    color: var(--primary-on, #fff);
    font-weight: 600;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--qt-button-focus);
}

/* Sign-out leaves the account rather than navigating inside it — divider, danger red,
   and a trailing icon so it reads as an exit instead of another section. */
body.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #eceff3;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b42318;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: rgba(180, 35, 24, 0.07);
    color: #912018;
}

/* Masked so the glyph inherits the link colour through every state. */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::after {
    content: "";
    flex: none;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask: var(--qt-logout-icon) center / contain no-repeat;
    mask: var(--qt-logout-icon) center / contain no-repeat;
}

/* The arrow points away from the panel, so it flips with the writing direction. */
[dir="rtl"] body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::after {
    transform: scaleX(-1);
}

/* Payment container ("big box"): aligned bg + radius with theme tokens */
.woocommerce-checkout-payment,
body.woocommerce-checkout #payment {
    margin-top: 10px;
    border-top: none;
    padding-top: 0;
    padding: 12px;
    border-radius: var(--qt-field-radius);
    background: var(--qt-checkout-accent-surface, var(--theme-color-surface, rgba(30, 30, 30, 0.1))) !important;
}

.wc_payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
}

/* The <li> stays list-item while the label is a full-width flex box, so with more
   than one gateway the radio and its label stacked instead of sharing a row.
   Making the row itself the flex container keeps them paired at any gateway count,
   and the payment_box panel wraps onto its own line underneath. */
.wc_payment_method {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    border-bottom: none;
    padding: 4px 0;
}

.wc_payment_method > .payment_box,
.wc_payment_method > div:not(.payment_box) {
    flex: 1 0 100%;
}

.wc_payment_method label {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    min-height: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: color 0.1s ease;
}

.wc_payment_method input[type="radio"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.wc_payment_method label:hover {
    color: #111827;
}

.wc_payment_method input[type="radio"]:checked + label {
    color: #111827;
    font-weight: 600;
}

.wc_payment_method:has(input[type="radio"]:checked) label {
    color: #111827;
    font-weight: 600;
}

.payment_box {
    padding: 10px 12px;
    background: #f5f7fa;
    border-radius: 0;
    margin: 4px 0 8px;
    border: 0;
    box-shadow: none;
}

/* COD payment box + its pointers: same icon-surface tone, 10% darker */
body.woocommerce-checkout .payment_method_cod .payment_box {
    background: color-mix(
        in srgb,
        var(--qt-checkout-accent-surface, var(--theme-color-surface, rgba(30, 30, 30, 0.1))) 90%,
        #000 10%
    ) !important;
}

body.woocommerce-checkout .payment_method_cod .payment_box::before,
body.woocommerce-checkout .payment_method_cod .payment_box::after {
    display: none !important;
    content: none !important;
    background-color: color-mix(
        in srgb,
        var(--qt-checkout-accent-surface, var(--theme-color-surface, rgba(30, 30, 30, 0.1))) 90%,
        #000 10%
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--qt-checkout-accent-surface, var(--theme-color-surface, rgba(30, 30, 30, 0.1))) 90%,
        #000 10%
    ) !important;
    color: color-mix(
        in srgb,
        var(--qt-checkout-accent-surface, var(--theme-color-surface, rgba(30, 30, 30, 0.1))) 90%,
        #000 10%
    ) !important;
}

/* Keep only divider before action button area */
body.woocommerce-checkout #order_review .place-order {
    border-top: 1px solid #eceff3;
    padding-top: 10px;
}

.payment_box input.input-text,
.payment_box input[type="text"],
.payment_box input[type="email"],
.payment_box input[type="tel"],
.payment_box select,
.payment_box textarea {
    min-height: var(--qt-field-height, 47px);
    border: var(--qt-field-border-w) solid var(--qt-field-border) !important;
    border-radius: var(--qt-field-radius);
    background: var(--qt-field-bg);
    box-shadow: var(--qt-field-shadow);
    font-size: 14px;
    color: var(--qt-field-text);
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.payment_box input.input-text,
.payment_box input[type="text"],
.payment_box input[type="email"],
.payment_box input[type="tel"],
.payment_box select {
    height: var(--qt-field-height, 47px);
    max-height: var(--qt-field-height, 47px);
}

.payment_box input:focus,
.payment_box select:focus,
.payment_box textarea:focus {
    border-color: var(--qt-checkout-accent, var(--primary-color)) !important;
    box-shadow: 0 0 0 0.5px var(--qt-checkout-accent, var(--primary-color)), var(--qt-field-shadow);
    outline: none;
}

/* ============================================
   Thank You Page
   ============================================ */
.qt-thankyou-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.qt-thankyou-success,
.qt-thankyou-failed {
    text-align: center;
    padding: 40px 20px;
}

.qt-thankyou-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

.qt-thankyou-icon--animated {
    width: 96px;
    height: 96px;
}

.qt-thankyou-icon--animated[hidden] {
    display: none;
}

.qt-thankyou-icon--animated svg {
    display: block;
    width: 100%;
    height: 100%;
}

.qt-thankyou-success .qt-thankyou-icon:not(.qt-thankyou-icon--animated) {
    color: #28a745;
}

.qt-thankyou-failed .qt-thankyou-icon {
    color: #ff4444;
}

.qt-thankyou-success h1,
.qt-thankyou-failed h1 {
    font-size: 32px;
    margin-bottom: 16px;
    color: #333;
}

.qt-thankyou-message {
    font-size: 18px;
    color: #666;
    margin-bottom: 12px;
}

.qt-thankyou-order-no {
    margin: 0 0 8px;
    color: #71717a;
    font-size: 0.95rem;
}

/* Order lines — plain rows, not the default WooCommerce tables. */
.qt-thankyou-items {
    display: grid;
    gap: 12px;
    padding: 20px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 18px;
    background: #fff;
}

.qt-thankyou-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.qt-thankyou-item__media {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 12px;
    background: #fafafa;
}

.qt-thankyou-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qt-thankyou-item__body {
    display: grid;
    gap: 3px;
    flex: 1;
    min-width: 0;
    text-align: start;
}

.qt-thankyou-item__name {
    color: #18181b;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.qt-thankyou-item__meta {
    color: #71717a;
    font-size: 0.88rem;
}

.qt-thankyou-item__price {
    flex-shrink: 0;
    color: #18181b;
    font-weight: 700;
}

.qt-thankyou-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid rgba(17, 24, 39, 0.1);
    color: #18181b;
    font-size: 1.05rem;
}

.qt-thankyou-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.qt-thankyou-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 12px;
    background: #20b038;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.25s ease;
}

.qt-thankyou-whatsapp:hover {
    background: #1a9330;
    color: #fff;
}

.qt-thankyou-whatsapp svg {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .qt-thankyou-items {
        padding: 16px;
        border-radius: 16px;
    }

    .qt-thankyou-item__media {
        width: 48px;
        height: 48px;
    }

    .qt-thankyou-item__price {
        font-size: 0.95rem;
    }

    .qt-thankyou-whatsapp {
        width: 100%;
    }
}

.qt-order-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 32px 0;
    padding: 24px;
    background: #f8f8f8;
    border-radius: var(--theme-radius);
}

.qt-order-overview-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qt-order-label {
    font-size: 14px;
    color: #666;
}

.qt-order-overview-item strong {
    font-size: 16px;
    color: #333;
}

.qt-order-details {
    margin-top: 32px;
}

.qt-order-details h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.qt-pay-button {
    display: inline-block;
    padding: 16px 40px;
    background: var(--primary-color);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--theme-radius-sm);
    transition: background 0.2s;
    margin-top: 20px;
}

.qt-pay-button:hover {
    background: var(--primary-color-hover);
}

.qt-order-actions {
    text-align: center;
    margin-top: 32px;
}

/* Checkout Responsive */
@media (max-width: 768px) {
    .qt-checkout-wrapper {
        flex-direction: column;
    }

    .qt-checkout-billing,
    .qt-checkout-review {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    /* Summary first on mobile */
    .qt-checkout-review {
        order: -1;
    }

    .qt-order-review {
        position: static;
    }

    .qt-order-overview {
        grid-template-columns: 1fr;
    }

    .qt-thankyou-success h1,
    .qt-thankyou-failed h1 {
        font-size: 24px;
    }
}

/* ============================================
   Mini Cart Widget
   ============================================ */
.qt-mini-cart-items {
    max-height: 400px;
    overflow-y: auto;
    padding: 4px 0;
}

.qt-mini-cart-item {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
}

.qt-mini-cart-item:last-child {
    border-bottom: none;
}

.qt-mini-cart-item-image {
    width: 72px;
    aspect-ratio: 4 / 5;
    height: auto;
    flex-shrink: 0;
    border-radius: var(--theme-radius-sm);
    overflow: hidden;
    background: #f8f8f8;
}

.qt-mini-cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qt-mini-cart-item-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qt-mini-cart-item-name {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
}

.qt-mini-cart-item-name a {
    color: #111;
    text-decoration: none;
    transition: color 0.2s;
}

.qt-mini-cart-item-name a:hover {
    color: var(--primary-color);
}

.qt-mini-cart-item-price {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-color);
}

.qt-mini-cart-item-price .woocommerce-Price-amount {
    font-size: inherit !important;
    font-weight: inherit;
    color: inherit;
}

.qt-mini-cart-item-details .variation {
    margin: 0;
    font-size: 13px;
    color: #888;
    line-height: 1.35;
}

.qt-mini-cart-item-details .variation dt,
.qt-mini-cart-item-details .variation dd {
    display: inline;
    margin: 0;
    float: none;
}

.qt-mini-cart-item-details .variation dd {
    margin-inline-end: 0.35em;
}

.qt-mini-cart-item-details .variation dd p {
    display: inline;
    margin: 0;
}

.qt-mini-cart-item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.qt-mini-cart-qty {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 96px;
    height: 30px;
    padding: 0 2px;
    border: 1px solid #d9d9d9;
    border-radius: 999px;
    background: #fff;
    box-sizing: border-box;
}

.qt-mini-cart-qty--locked {
    justify-content: center;
    min-width: 40px;
    padding: 0 10px;
}

.qt-mini-cart-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #222;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.qt-mini-cart-qty__btn:hover:not(:disabled) {
    background: #f3f3f3;
}

.qt-mini-cart-qty__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.qt-mini-cart-qty__value {
    min-width: 1.5em;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    font-variant-numeric: tabular-nums;
}

.qt-mini-cart-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.qt-mini-cart-remove:hover {
    background: #f5f5f5;
    border-color: #cfcfcf;
    color: #111;
}

.qt-mini-cart-item.is-updating {
    opacity: 0.55;
    pointer-events: none;
}

.qt-mini-cart-footer {
    padding: 16px;
    border-top: 1px solid #e5e5e5;
}

.qt-mini-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 700;
}

.qt-mini-cart-total__label {
    color: #333;
}

.qt-mini-cart-total__amount {
    display: inline-flex;
    align-items: center;
}

.qt-mini-cart-total__amount .woocommerce-Price-amount {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* Hide WC default "Subtotal:" if a stale fragment / plugin re-injects it */
.qt-mini-cart-total > strong {
    display: none !important;
}

.qt-mini-cart-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.qt-mini-cart-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    text-align: center;
    font-weight: 500;
    border-radius: 0;
    transition: all 0.2s;
    text-decoration: none;
}

.qt-view-cart {
    background-color: transparent;
    color: #000;
    border: 1px solid #e5e5e5;
}

.qt-view-cart:hover {
    background: #e5e5e5;
}

/* Primary checkout CTA — keep button filled; arrow stays white */
.qt-mini-cart-buttons .qt-mini-cart-checkout,
.qt-mini-cart-buttons .qt-checkout,
.side-cart .qt-mini-cart-checkout,
.side-cart a.qt-checkout {
    background: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
}

.qt-mini-cart-buttons .qt-mini-cart-checkout:hover,
.qt-mini-cart-buttons .qt-checkout:hover,
.side-cart .qt-mini-cart-checkout:hover,
.side-cart a.qt-checkout:hover {
    background: var(--primary-color-hover) !important;
    background-color: var(--primary-color-hover) !important;
    color: #fff !important;
}

.qt-mini-cart-buttons .qt-mini-cart-checkout,
.qt-mini-cart-buttons .qt-checkout,
.side-cart .qt-mini-cart-checkout,
.side-cart a.qt-checkout {
    overflow: visible;
}

.qt-mini-cart-buttons .qt-mini-cart-checkout .qt-mini-cart-button__icon,
.qt-mini-cart-buttons .qt-checkout .qt-mini-cart-button__icon,
.side-cart .qt-mini-cart-checkout .qt-mini-cart-button__icon,
.side-cart a.qt-checkout .qt-mini-cart-button__icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    line-height: 0;
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff !important;
}

/* Dropdown chevron rotated −90° so it points forward (like an arrow) */
.qt-mini-cart-buttons .qt-mini-cart-checkout .qt-mini-cart-button__chevron,
.qt-mini-cart-buttons .qt-checkout .qt-mini-cart-button__chevron,
.side-cart .qt-mini-cart-checkout .qt-mini-cart-button__chevron,
.side-cart a.qt-checkout .qt-mini-cart-button__chevron {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
    transform: rotate(-90deg);
    transform-origin: center center;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible;
}

.qt-mini-cart-buttons .qt-mini-cart-checkout .qt-mini-cart-button__chevron path,
.qt-mini-cart-buttons .qt-checkout .qt-mini-cart-button__chevron path,
.side-cart .qt-mini-cart-checkout .qt-mini-cart-button__chevron path,
.side-cart a.qt-checkout .qt-mini-cart-button__chevron path {
    stroke: #ffffff !important;
    fill: none !important;
}

[dir="rtl"] .qt-mini-cart-buttons .qt-mini-cart-checkout .qt-mini-cart-button__chevron,
[dir="rtl"] .qt-mini-cart-buttons .qt-checkout .qt-mini-cart-button__chevron,
[dir="rtl"] .side-cart .qt-mini-cart-checkout .qt-mini-cart-button__chevron,
[dir="rtl"] .side-cart a.qt-checkout .qt-mini-cart-button__chevron {
    transform: rotate(90deg);
}

.qt-mini-cart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    padding: 32px 20px;
    text-align: center;
    color: #666;
}

.qt-mini-cart-empty .qt-empty-cart {
    max-width: none;
    margin: 0;
    padding: 0;
}

.qt-mini-cart-empty .qt-empty-cart-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
}

.qt-mini-cart-empty .qt-empty-cart-icon svg {
    width: 64px;
    height: 64px;
}

.qt-mini-cart-empty .qt-empty-cart-message {
    font-size: 16px;
    margin-bottom: 24px;
}

.qt-mini-cart-empty .qt-return-shop {
    padding: 0 28px;
    min-height: 44px;
    line-height: 44px;
    font-size: 15px;
}

/* Base shiny animation for sweep effect */
@keyframes shiny {
    0% {
        transform: translate(-150%, -50%) rotate(25deg);
    }

    100% {
        transform: translate(150%, -50%) rotate(25deg);
    }
}

.widget_shopping_cart_content {
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Side cart price styling */
.qt-mini-cart-total .woocommerce-Price-amount bdi {
    font-size: inherit;
    font-weight: inherit;
}

/* Product Breadcrumb Wrapper - above gallery & product info */
.product-breadcrumb-wrapper {
    width: 100%;
    min-width: 0;
    margin-bottom: 20px;
}

/* Woodmart-style Breadcrumbs */
.product-summary-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    font-size: 13px;
    color: #666;
    letter-spacing: 0.2px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-summary-breadcrumb > .breadcrumb-item {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Ancestor crumbs keep their full width; only the current one truncates
       (see .breadcrumb-item--current). Without this the items compress and the
       labels collide with the separators on narrow screens. */
    flex-shrink: 0;
}

.product-summary-breadcrumb a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease, border-bottom 0.2s ease;
    border-bottom: 1px solid transparent;
    flex-shrink: 0;
    white-space: nowrap;
}

.product-summary-breadcrumb a:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.product-summary-breadcrumb .breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    color: #bbb;
    flex-shrink: 0;
    line-height: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-summary-breadcrumb .breadcrumb-separator svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: none;
    overflow: visible;
}

.product-summary-breadcrumb .breadcrumb-separator svg path {
    fill: none;
    stroke: currentColor;
}

/* Match page-hero: flip only in RTL so the chevron follows reading direction. */
[dir="rtl"] .product-summary-breadcrumb .breadcrumb-separator svg {
    transform: scaleX(-1);
}

.product-summary-breadcrumb .breadcrumb-current {
    color: #333;
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-summary-breadcrumb .breadcrumb-item--current {
    flex: 1 1 auto;
    min-width: 0;
}

/* RTL support */
[dir="rtl"] .product-summary-breadcrumb {
    flex-direction: row;
    justify-content: flex-start;
}

[dir="rtl"] .page-hero__sep svg {
    transform: scaleX(-1);
}

/* Hide page title on thank you page */
.woocommerce-order-received .entry-header,
.woocommerce-order-received .page-title,
.woocommerce-order-received h1.entry-title {
    display: none;
}


/* Hide payment instructions in order details */
.woocommerce-order-details .woocommerce-order-details__title+p,
.woocommerce-order-received .woocommerce-order-details p:first-of-type {
    display: none;
}

/* Center confirmation image on thank you page */
.qt-confirmation-image {
    display: block;
    margin: 20px auto 0;
}

/* Mobile: sticky bottom CTA sizing + clearance above mobile nav */
@media (max-width: 768px) {
    .qt-sticky-cta {
        padding: 10px 15px;
    }

    .qt-sticky-cta__buy {
        font-size: 16px;
        padding: 12px 20px;
    }

    .qt-sticky-cta.has-preview .qt-sticky-cta__buy,
    .qt-sticky-cta__preview {
        font-size: 15px;
        padding: 12px 12px;
    }

    /* The bar overlays the page, so the footer reserves its height rather than the
       script hiding the bar on approach — that flickers on short pages. Only where the
       bar actually renders, so cart/checkout keep their normal footer. */
    body.quicktheme-sticky-cta .qform-footer__bottom {
        padding-bottom: calc(16px + var(--qt-sticky-cta-h, 66px));
    }

    /* Sit above fixed mobile bottom bar */
    body.quicktheme-mobile-bottom-nav .qt-sticky-cta.visible {
        bottom: calc(var(--quicktheme-mobile-bar-height, 56px) + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Mobile bottom navigation bar (reference: 4 tabs, icons + caps labels) ── */
.mobile-bottom-bar {
    display: none;
}

@media (max-width: 768px) {
    body.quicktheme-mobile-bottom-nav {
        padding-bottom: calc(var(--quicktheme-mobile-bar-height, 56px) + env(safe-area-inset-bottom, 0px));
    }

    .mobile-bottom-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        justify-content: space-around;
        align-items: stretch;
        gap: 0;
        min-height: var(--quicktheme-mobile-bar-height, 56px);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        background: #fff;
        border-top: none;
        /* Same token as QuickFORM fields (--qf-shadow), flipped on Y for a top edge lift */
        box-shadow: -2px -5px 12.9px -9px rgba(157, 157, 157, 0.81);
        box-sizing: border-box;
    }

    .mobile-bottom-bar__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        padding: 6px 2px;
        margin: 0;
        background: none;
        border: none;
        font: inherit;
        text-decoration: none;
        color: #6b7280;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-bar__item:hover,
    .mobile-bottom-bar__item:focus-visible {
        color: var(--primary-color);
    }

    .mobile-bottom-bar__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
        color: var(--primary-color);
        position: relative;
    }

    .mobile-bottom-bar__icon .cart-count {
        top: -6px;
        right: -8px;
        min-width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .mobile-bottom-bar--labels-hidden .mobile-bottom-bar__label {
        display: none;
    }

    .mobile-bottom-bar--labels-hidden .mobile-bottom-bar__item {
        gap: 0;
    }

    .mobile-bottom-bar__item:hover .mobile-bottom-bar__icon,
    .mobile-bottom-bar__item:focus-visible .mobile-bottom-bar__icon {
        color: var(--primary-color-hover, var(--primary-color));
    }

    .mobile-bottom-bar__icon svg {
        display: block;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        fill: none;
        overflow: visible;
    }

    /* Hugeicons default stroke in assets is often 1–2; lock to 1.5px for bottom bar */
    .mobile-bottom-bar__icon svg :where(path, line, circle, ellipse, polyline, polygon, rect) {
        stroke: currentColor;
        stroke-width: 1.5;
    }

    .mobile-bottom-bar__label {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 1.2;
        text-align: center;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Load more: hide numbered pages when JS active (crawl/screen readers: nav unhidden in HTML) */
body.quicktheme-shop-load-more .shop-page-wrapper .shop-pagination-nav[hidden] {
    display: none;
}

.shop-load-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 32px auto 16px;
    max-width: var(--qt-layout-max);
    padding: 0 20px;
}

.shop-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 28px;
    background: var(--primary-color, #0d9488);
    color: #fff;
    border: none;
    border-radius: var(--theme-radius, 8px);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.shop-load-more-btn:hover:not(:disabled) {
    background: var(--primary-color-hover, #0f766e);
}

.shop-load-more-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.shop-load-more-wrap.is-loading .shop-load-more-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary-color, #0d9488);
    border-radius: 50%;
    animation: quickthemeSpin 0.7s linear infinite;
}

@keyframes quickthemeSpin {
    to {
        transform: rotate(360deg);
    }
}

.woocommerce nav.woocommerce-pagination ul {
    border: none;
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none !important;
}

/* ============================================
   CSS-Only Product Entrance Animations (Shopify-style)
   ============================================ */

/* Keyframe animation */
@keyframes productFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Product grid items — animate home / related / upsell only. Main shop & category
 * grids use .products-grid on ul.products: do NOT start those at opacity:0 (IntersectionObserver
 * can miss above-the-fold items → blank shop). */
.latest-products-grid li,
.related-products-grid li {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animated state - applied by JS.
 * Use transform:none (not translateY(0)) so the li doesn’t keep a transform
 * containing block that can break descendant hover leave transitions. */
.latest-products-grid li.animate-in,
.related-products-grid li.animate-in {
    opacity: 1;
    transform: none;
}

/* Single product page sections - initial hidden state */
.single-product-wrapper .product-intro,
.single-product-wrapper .product-summary,
.single-product-wrapper .product-tabs-section,
.single-product-wrapper .related-products-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Gallery: opacity only — transform breaks position:sticky */
.single-product-wrapper .product-images {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

/* Animated state - applied by JS */
.single-product-wrapper .product-images.animate-in {
    opacity: 1;
}

.single-product-wrapper .product-intro.animate-in,
.single-product-wrapper .product-summary.animate-in,
.single-product-wrapper .product-tabs-section.animate-in,
.single-product-wrapper .related-products-section.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Checkout form - initial hidden state */
.single-product-wrapper .acc-checkout-box {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Checkout form - animated state */
.single-product-wrapper .acc-checkout-box.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Product Tabs & Reviews
   ============================================ */
.product-tabs-section {
    max-width: var(--qt-layout-max);
    margin: 20px auto;
    padding: 64px 0 0;
    clear: both;
    width: 100%;
}

/* Card shell: tab strip + content (radius follows Customizer --theme-radius scale) */
.product-tabs-section .woocommerce-tabs.wc-tabs-wrapper {
    width: 100%;
    border: 1px solid #ececec;
    border-radius: var(--theme-radius-lg, 12px);
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}

.product-tabs-section .woocommerce-tabs .tabs.wc-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    border: none;
    background: #fff;
    border-bottom: 1px solid #ececec;
}

.product-tabs-section .woocommerce-tabs .tabs.wc-tabs li {
    position: relative;
    flex: 0 0 auto;
    min-width: 150px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    list-style: none;
}

.product-tabs-section .woocommerce-tabs .tabs.wc-tabs li a {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 16px 22px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #444;
    text-align: center;
    text-decoration: none;
    border-radius: 0;
    border: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

.product-tabs-section .woocommerce-tabs .tabs.wc-tabs li a:hover {
    color: #111;
    background: transparent;
}

.product-tabs-section .woocommerce-tabs .tabs.wc-tabs li.active a {
    color: var(--primary-color, #1e1e1e);
    font-weight: 700;
    background: #fff;
}

.product-tabs-section .woocommerce-tabs .tabs.wc-tabs li a:focus {
    outline: none;
}

.product-tabs-section .woocommerce-tabs .tabs.wc-tabs li a:focus-visible {
    outline: 2px solid var(--primary-color, #17a2b8);
    outline-offset: 2px;
}

/* Active tab underline — matches Customizer primary */
.product-tabs-section .woocommerce-tabs .tabs li.active::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -1px;
    height: 2px;
    background: var(--primary-color, #1e1e1e);
    display: block;
}

.woocommerce-Tabs-panel {
    display: none;
    margin: 0;
    padding: 28px 22px 30px;
    animation: fadeIn 0.35s ease;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}

.woocommerce-Tabs-panel:target,
.woocommerce-Tabs-panel[style*="block"] {
    display: block !important;
}

#tab-reviews {
    color: #333;
}

/* ── Mobile: product tabs as accordion (JS adds .qt-accordion-mode) ── */
.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode {
    padding: 0;
    border-radius: var(--theme-radius-lg, 12px);
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion {
    width: 100%;
    margin: 0;
    padding: 0;
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-item {
    padding-left: 12px;
    padding-right: 12px;
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    margin: 0;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid #ececec;
    text-align: start;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: #111;
    background: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-item.is-open .qt-accordion-trigger {
    color: var(--primary-color, #1e1e1e);
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-item:last-of-type .qt-accordion-trigger {
    border-bottom: none;
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-trigger:hover,
.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-trigger:focus-visible {
    background: color-mix(in srgb, var(--font-body, #333) 4%, #fff);
    outline: none;
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-trigger:focus-visible {
    box-shadow: inset 0 0 0 2px var(--primary-color, #17a2b8);
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-title {
    flex: 1 1 auto;
    min-width: 0;
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 300;
    color: #555;
    transition: color 480ms cubic-bezier(0.4, 0.05, 0.35, 1);
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-icon::before {
    content: '\002B';
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-item.is-open .qt-accordion-icon {
    color: var(--primary-color, #1e1e1e);
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-item.is-open .qt-accordion-icon::before {
    content: '\2212';
    font-size: 1.1rem;
    font-weight: 400;
}

/* Smooth expand/collapse — same timing curve as side drawers */
.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 480ms cubic-bezier(0.4, 0.05, 0.35, 1);
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-item.is-open .qt-accordion-panel {
    grid-template-rows: 1fr;
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-panel__inner {
    overflow: hidden;
    min-height: 0;
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .woocommerce-Tabs-panel {
    display: block !important;
    margin: 0;
    padding: 12px;
    border: none;
    animation: none;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #333;
    box-shadow: none;
    background: #fafafa;
    opacity: 0;
    transition: opacity 320ms cubic-bezier(0.4, 0.05, 0.35, 1);
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-item.is-open .woocommerce-Tabs-panel {
    opacity: 1;
    transition-delay: 80ms;
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode #tab-description {
    font-size: 14px;
    background: unset;
}

.woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode #tab-reviews {
    padding: 0;
    background-color: rgba(250, 250, 250, 0);
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-panel,
    .woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .woocommerce-Tabs-panel,
    .woocommerce-tabs.wc-tabs-wrapper.qt-accordion-mode .qt-accordion-icon {
        transition: none;
    }
}

/* Shipping tab — clean rows */
.product-shipping-info {
    margin: 0;
}

.product-shipping-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-shipping-info li {
    margin: 0;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--primary-color, #17a2b8) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--primary-color, #17a2b8) 14%, transparent);
    border-radius: var(--theme-radius, 8px);
    line-height: 1.55;
}

.product-shipping-info li strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #555;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide redundant titles at the beginning of tab panels */
.woocommerce-Tabs-panel>h2:first-child,
.woocommerce-Tabs-panel>h3:first-child,
.woocommerce-Tabs-panel .product-shipping-info h3,
.woocommerce-Tabs-panel #comments>h2.woocommerce-Reviews-title {
    display: none !important;
}

/* ——— Customer Reviews (product tab) ——— */
:root {
    --qt-reviews-cta-bg: var(--primary-color, #17a2b8);
    --qt-reviews-cta-hover: var(--primary-color-hover, #138496);
    --qt-reviews-muted: #757575;
    --qt-reviews-divider: #e0e0e0;
    --qt-reviews-star: #eab308;
    --qt-reviews-card-star: #eab308;
    --qt-reviews-card-star-empty: #e0e0e0;
}

#reviews.woocommerce-Reviews {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.qt-reviews-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.qt-reviews-header__main {
    /* auto basis — 240px basis becomes HEIGHT when mobile sets flex-direction:column */
    flex: 1 1 auto;
    min-width: 0;
}

.qt-reviews-header__title {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 500;
    color: #000;
    letter-spacing: -0.02em;
}

.qt-reviews-header__stats {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.qt-reviews-header__score {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: #000;
    letter-spacing: -0.03em;
}

.qt-reviews-header__count {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--qt-reviews-muted);
}

.qt-reviews-write-wrap {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 16px;
}

.qt-reviews-write-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: var(--theme-radius, 8px);
    background: var(--qt-reviews-cta-bg);
    color: #fff !important;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, filter 0.2s ease;
}

.qt-reviews-write-btn:hover,
.qt-reviews-write-btn:focus-visible {
    background: var(--qt-reviews-cta-hover);
    color: #fff !important;
}

.qt-reviews-write-btn[aria-expanded="true"] {
    background: color-mix(in srgb, var(--qt-reviews-cta-bg) 88%, #000);
}

/* Smooth collapsible review form */
.qt-reviews-form-panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.35s ease;
}

.qt-reviews-form-panel.is-collapsed {
    grid-template-rows: 0fr;
}

.qt-reviews-form-panel__inner {
    min-height: 0;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .qt-reviews-form-panel {
        transition: none;
    }
}

.qt-reviews-divider {
    border: none;
    border-top: 1px solid var(--qt-reviews-divider);
    margin: 20px 0;
}

/* Reviews list: FIGS-style cards (stars + date, body, author bottom) */
#reviews #comments ol.commentlist,
.commentlist {
    padding: 0;
    margin: 0 0 20px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

#reviews #comments ol.commentlist > li,
.commentlist > li {
    margin: 0;
    list-style: none;
    width: 100%;
    max-width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
}

.commentlist .children {
    display: none;
}

/* Single card surface — kill WC dual box (.comment_container + .comment-text + avatar offset) */
#reviews #comments ol.commentlist li .comment_container.qt-review-item,
.qt-review-item,
.comment_container.qt-review-item {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 22px 22px 20px;
    border: 1px solid #e8e8e8;
    border-radius: var(--theme-radius, 8px);
    background: #fff;
    box-sizing: border-box;
}

#reviews #comments ol.commentlist li .comment-text,
#reviews #comments ol.commentlist li .comment-text.qt-review,
.qt-review,
.comment-text.qt-review {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
}

.qt-review__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}

.qt-review__stars {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.qt-review__stars .qt-rating-stars,
.qt-review__stars .star-rating,
.qt-review__stars .product-card-stars {
    margin: 0;
}

.qt-review__stars .product-card-star--full path,
.qt-review__stars .product-card-star-fg path {
    fill: var(--qt-reviews-card-star, #eab308);
}

.qt-review__stars .product-card-star--empty path,
.qt-review__stars .product-card-star-bg path {
    fill: var(--qt-reviews-card-star-empty, #e0e0e0);
}

.qt-review__stars .qt-rating-stars svg,
.qt-review__stars .star-rating span::before {
    color: var(--qt-reviews-card-star, #eab308);
}

.qt-review__date {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.3;
    color: #8a8a8a;
    white-space: nowrap;
    flex-shrink: 0;
}

.qt-review__awaiting {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #9a9a9a;
}

.qt-review__awaiting em {
    font-style: italic;
}

.qt-review__body {
    flex: 1 1 auto;
    margin: 0 0 18px;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.65;
    color: #222;
}

.qt-review__body.description,
.comment-text .description.qt-review__body {
    padding-top: 0;
}

.qt-review__body p,
.comment-text .description p {
    margin: 0 0 0.75em;
}

.qt-review__body p:last-child,
.comment-text .description p:last-child {
    margin-bottom: 0;
}

.qt-review__author {
    margin: auto 0 0;
    padding-top: 4px;
    font-size: 0.875rem;
    line-height: 1.35;
    color: #111;
}

.qt-review__author-name {
    font-weight: 700;
}

.qt-review__verified {
    display: inline-block;
    margin-inline-start: 0.4em;
    font-style: italic;
    font-weight: 400;
    font-size: 0.8125rem;
    color: #888;
}

.qt-review__product {
    display: block;
    margin-top: 8px;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    color: #757575;
    text-decoration: none;
    transition: color 0.15s ease;
}

.qt-review__product:hover,
.qt-review__product:focus-visible {
    color: var(--primary-color, #0d9488);
}

/* ——— All Reviews page ——— */
.qt-all-reviews {
    padding-bottom: 64px;
}

.qt-all-reviews .page-hero {
    margin-bottom: 28px;
}

.qt-all-reviews__empty {
    margin: 24px 0 0;
    font-size: 0.9375rem;
    color: #757575;
}

/* Desktop 4-col grid (overrides product-tab .commentlist column layout) */
.qt-all-reviews ol.qt-reviews-grid.commentlist,
ol.qt-reviews-grid.commentlist {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.qt-all-reviews .qt-reviews-grid > li,
ol.qt-reviews-grid > li {
    margin: 0;
    min-width: 0;
    height: 100%;
}

.qt-all-reviews .qt-review-item,
.qt-all-reviews .comment_container.qt-review-item {
    height: 100%;
}

.qt-all-reviews .qt-reviews-load-more-wrap {
    margin-top: 40px;
}

@media (max-width: 1100px) {
    .qt-all-reviews ol.qt-reviews-grid.commentlist,
    ol.qt-reviews-grid.commentlist {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 800px) {
    .qt-all-reviews ol.qt-reviews-grid.commentlist,
    ol.qt-reviews-grid.commentlist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .qt-all-reviews {
        padding-bottom: 48px;
    }
}

@media (max-width: 520px) {
    .qt-all-reviews ol.qt-reviews-grid.commentlist,
    ol.qt-reviews-grid.commentlist {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Hide legacy WC avatar / meta leftovers if plugins re-inject them */
.qt-review-item .avatar,
.qt-review-item .comment-meta,
.qt-review-item .woocommerce-review__author,
.qt-review-item .woocommerce-review__published-date,
.qt-review-item .woocommerce-review__dash {
    display: none !important;
}

@media (max-width: 600px) {
    #reviews #comments ol.commentlist,
    .commentlist {
        gap: 12px;
        margin-bottom: 16px;
    }

    #reviews #comments ol.commentlist li .comment_container.qt-review-item,
    .qt-review-item,
    .comment_container.qt-review-item {
        padding: 18px 16px 16px;
    }

    /* Mobile: reviews slider with side arrows */
    .qt-reviews-slider-wrap {
        position: relative;
        margin-bottom: 16px;
        padding-inline: 0;
    }

    .qt-reviews-slider-btn {
        display: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        width: 34px;
        height: 34px;
        padding: 0;
        margin: 0;
        border: 1.5px solid var(--qt-reviews-divider, #e0e0e0);
        border-radius: 50%;
        background: #fff;
        color: #1a1a1a;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: box-shadow 0.15s ease, opacity 0.15s ease;
    }

    .qt-reviews-slider-wrap--ready .qt-reviews-slider-btn {
        display: inline-flex;
    }

    .qt-reviews-slider-btn:hover:not(:disabled) {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
    }

    .qt-reviews-slider-btn:disabled {
        opacity: 0.35;
        cursor: default;
        pointer-events: none;
    }

    .qt-reviews-slider-btn--prev {
        inset-inline-start: 8px;
    }

    .qt-reviews-slider-btn--next {
        inset-inline-end: 8px;
    }

    [dir="rtl"] .qt-reviews-slider-btn svg {
        transform: scaleX(-1);
    }

    #reviews #comments ol.commentlist.qt-reviews-slider {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
        margin-bottom: 0;
    }

    #reviews #comments ol.commentlist.qt-reviews-slider::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    #reviews #comments ol.commentlist.qt-reviews-slider > li,
    #reviews #comments .qt-reviews-slider-wrap--ready ol.commentlist.qt-reviews-slider > li {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    #reviews #comments ol.commentlist.qt-reviews-slider li .comment_container.qt-review-item,
    #reviews #comments ol.commentlist.qt-reviews-slider .qt-review-item {
        height: 100%;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .qt-reviews-write-wrap {
        margin-bottom: 12px;
    }

    .qt-reviews-write-btn {
        width: 100%;
    }
}

/* Desktop / tablet: hide review slider chrome (stack vertically) */
.qt-reviews-slider-wrap {
    position: relative;
}

.qt-reviews-slider-btn {
    display: none;
}

@media (min-width: 601px) {
    .qt-reviews-slider-wrap {
        padding-inline: 0;
    }
}


.comment-text .description p:last-child {
    margin-bottom: 0;
}

/* Review images (HTML in comment body) */
.comment-text .description img {
    display: inline-block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--theme-radius);
    margin: 12px 8px 0 0;
    vertical-align: top;
}

.star-rating {
    float: none;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 1.125rem;
    width: 5.4em;
    font-family: 'star';
    color: var(--qt-reviews-star) !important;
    margin: 0;
}

.star-rating::before {
    content: '\73\73\73\73\73';
    color: #e5e5e5;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
}

.star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
}

.star-rating span::before {
    content: '\53\53\53\53\53';
    color: var(--qt-reviews-star) !important;
    top: 0;
    left: 0;
    position: absolute;
}

/* Review list stars */
#reviews .commentlist .qt-review__stars .star-rating {
    font-size: 0.875rem;
    margin: 0;
}

#reviews .commentlist .qt-review__stars .star-rating::before {
    color: var(--qt-reviews-card-star-empty, #e0e0e0) !important;
}

#reviews .commentlist .qt-review__stars .star-rating span::before {
    color: var(--qt-reviews-card-star, #eab308) !important;
}

#reviews .woocommerce-pagination {
    margin: 8px 0 32px;
}

#reviews .woocommerce-pagination ul {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

#reviews .woocommerce-pagination a,
#reviews .woocommerce-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 6px 10px;
    border-radius: var(--theme-radius-sm);
    border: 1px solid var(--qt-reviews-divider);
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

#reviews .woocommerce-pagination span.current {
    background: #f5f5f5;
    font-weight: 600;
}

/* Review Form Styling */
#review_form_wrapper {
    background: rgba(255, 255, 255, 0);
    padding: 0;
    border-radius: var(--theme-radius-lg, 12px);
    border: 1px solid color-mix(in srgb, var(--font-body, #333) 10%, transparent);
    margin-top: 4px;
    scroll-margin-top: 24px;
    box-shadow: none;
    overflow: visible;
    box-sizing: content-box;
}

#review_form {
    padding: 20px;
    border-radius: 0;
    box-sizing: border-box;
}

#review_form .comment-reply-title {
    display: block;
    margin: 0 0 20px;
    padding: 0 0 16px;
    font-size: 1.125rem;
    font-weight: var(--font-weight-headings, 600);
    line-height: 1.35;
    color: #1a1a1a;
    border-bottom: 1px solid var(--qt-reviews-divider);
}

#review_form .form-submit {
    margin-top: 16px;
}

/* WooCommerce injects a second star row (p.stars) before #rating; we use Hugeicons only */
#review_form .qt-review-rating-field p.stars {
    display: none !important;
}

#review_form .form-submit input[type="submit"],
#review_form .form-submit input#submit,
#review_form .form-submit input.submit,
#review_form input[type="submit"]#submit,
#review_form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: var(--theme-radius, 8px);
    padding: 12px 32px;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    background: var(--qt-reviews-cta-bg) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition:
        background 0.2s ease,
        filter 0.2s ease,
        transform 0.12s ease,
        box-shadow 0.2s ease;
    cursor: pointer;
}

#review_form .form-submit input[type="submit"]:hover,
#review_form .form-submit input#submit:hover,
#review_form .form-submit input.submit:hover,
#review_form input[type="submit"]#submit:hover,
#review_form button[type="submit"]:hover {
    background: var(--qt-reviews-cta-hover) !important;
    color: #fff !important;
    filter: brightness(0.98);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color, #17a2b8) 28%, transparent);
    transform: translateY(-1px);
}

#review_form .form-submit input[type="submit"]:active,
#review_form .form-submit input#submit:active,
#review_form input[type="submit"]#submit:active,
#review_form button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

#review_form .form-submit input[type="submit"]:focus-visible,
#review_form .form-submit input#submit:focus-visible,
#review_form input[type="submit"]#submit:focus-visible,
#review_form button[type="submit"]:focus-visible {
    outline: 2px solid var(--primary-color, #17a2b8);
    outline-offset: 2px;
}

/* Native select kept for WC; visually hidden */
.qt-rating-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.qt-review-rating-field {
    position: relative;
    margin-bottom: 20px;
}

.qt-review-rating-label {
    margin: 0 0 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.01em;
}

.qt-review-stars-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.qt-review-star-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    margin: 0;
    padding: 2px 3px;
    background: none;
    border: none;
    /* Empty / hover: cool gray; filled uses gold via .is-active */
    color: #d6d3d1;
    line-height: 0;
    border-radius: var(--theme-radius-sm, 4px);
    transition:
        color 0.15s ease,
        transform 0.1s ease,
        background 0.15s ease;
    cursor: pointer;
}

.qt-review-star-btn svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* SVGs use hardcoded fill; tie to button color for empty vs active */
.qt-review-star-btn svg,
.qt-review-star-btn svg path {
    fill: currentColor;
}

/* Hover/focus preview: fill this star and all before it */
.qt-review-stars-input:has(.qt-review-star-btn:hover) .qt-review-star-btn,
.qt-review-stars-input:has(.qt-review-star-btn:focus-visible) .qt-review-star-btn {
    color: #fcd34d;
}

.qt-review-stars-input:has(.qt-review-star-btn:hover) .qt-review-star-btn:hover ~ .qt-review-star-btn,
.qt-review-stars-input:has(.qt-review-star-btn:focus-visible) .qt-review-star-btn:focus-visible ~ .qt-review-star-btn {
    color: #d6d3d1;
}

.qt-review-star-btn:hover,
.qt-review-star-btn:focus-visible {
    transform: scale(1.04);
    outline: none;
}

.qt-review-star-btn:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--primary-color, #17a2b8);
}

.qt-review-star-btn.is-active {
    color: #eab308;
}

.comment-form-comment {
    margin-bottom: 0;
}

.comment-form-comment label {
    display: block;
    margin: 0 0 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
}

.comment-form-comment textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: var(--theme-radius, 8px);
    min-height: 140px;
    font-size: 0.9375rem;
    line-height: 1.55;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: vertical;
    background: #fafafa;
}

.comment-form-comment textarea:hover {
    border-color: #ccc;
}

.comment-form-comment textarea:focus {
    outline: none;
    border-color: var(--primary-color, #17a2b8);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #17a2b8) 18%, transparent);
}

#review_form .comment-form-author,
#review_form .comment-form-email {
    margin-bottom: 16px;
}

#review_form .comment-form-author label,
#review_form .comment-form-email label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
}

#review_form .comment-form-author input,
#review_form .comment-form-email input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: var(--theme-radius, 8px);
    font-size: 0.9375rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#review_form .comment-form-author input:focus,
#review_form .comment-form-email input:focus {
    outline: none;
    border-color: var(--primary-color, #17a2b8);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #17a2b8) 18%, transparent);
}

.submit-review-btn {
    margin-top: 20px;
}

.woocommerce-noreviews {
    margin: 0 0 24px;
    color: var(--qt-reviews-muted);
    font-size: 0.9375rem;
}

@media (max-width: 600px) {
    .qt-reviews-header {
        flex-direction: column;
        align-items: stretch;
    }

    .qt-reviews-header__main {
        flex: 0 0 auto;
        width: 100%;
    }

    .qt-reviews-header__score {
        font-size: 1.75rem;
    }

    #review_form {
        padding: 16px;
        border-radius: 0;
    }

    #review_form .form-submit input[type="submit"],
    #review_form .form-submit input#submit,
    #review_form .form-submit input.submit,
    #review_form .form-submit button[type="submit"] {
        width: 100%;
    }
}

/* Shipping Tab Content */
.product-shipping-info ul {
    list-style: none;
    padding: 0;
}

.product-shipping-info li {
    margin-bottom: 12px;
    display: flex;
    gap: 10px;
}

.product-shipping-info li strong {
    min-width: 120px;
    color: var(--primary-color);
}

/* ============================================
   Footer Styling
   ============================================ */
.footer-top {
    padding: 60px 0;
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 40px;
    align-items: flex-start;
}

.footer-column {
    text-align: start;
}

.footer-column .widget-title {
    color: var(--footer-text, #333);
    margin-bottom: 25px;
    font-size: 18px;
}

.footer-column .widget {
    color: #ccc;
    font-size: 15px;
    line-height: 1.8;
}

.footer-column .widget ul {
    padding: 0;
    list-style: none;
}

.footer-column .widget ul li {
    margin-bottom: 10px;
}

.footer-column .widget ul li a {
    color: var(--footer-link, #666);
    transition: color 0.3s;
}

.footer-column .widget ul li a:hover {
    color: var(--primary-color);
}

.about-column .footer-logo {
    margin-bottom: 25px;
}

/* About column: optional blurb + CTA under the logo (Customizer → Pied de page) */
.footer-about-text {
    margin-bottom: 22px;
    max-width: 34ch;
    font-size: 15px;
    line-height: 1.7;
    /* Muted by blending toward the footer background rather than toward
       transparent: stays readable whether the footer is light or dark. */
    color: color-mix(in srgb, var(--footer-text, #fff) 80%, var(--footer-bg, #2c2c2c));
}

.footer-about-text p {
    margin: 0 0 10px;
}

.footer-about-text p:last-child {
    margin-bottom: 0;
}

.footer-about-button {
    display: inline-block;
    padding: 13px 28px;
    background: var(--footer-btn-bg, #fff);
    color: var(--footer-btn-color, #1a1a1a);
    border-radius: var(--theme-radius, 8px);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.footer-about-button:hover {
    /* Tint-agnostic hover: works whatever colours are configured */
    opacity: 0.88;
    transform: translateY(-1px);
    color: var(--footer-btn-color, #1a1a1a);
}

.footer-about-button:focus-visible {
    outline: 2px solid var(--footer-btn-bg, #fff);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .footer-about-text {
        max-width: none;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-about-button {
        transition: none;
    }

    .footer-about-button:hover {
        transform: none;
    }
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
}

.footer-social a,
.footer-social a.social-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--footer-text, #333) 12%, transparent);
    border-radius: var(--theme-radius-lg, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #ccc;
    cursor: pointer;
}

.footer-social a:hover {
    background: var(--primary-color);
    transform: translateY(-3px);
    color: #fff;
}

.footer-social a svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    display: block;
}

/* Response for Tabs and Footer */
@media (max-width: 768px) {
    .product-tabs-section {
        padding: 0;
        margin: 20px auto;
    }

    .product-tabs-section .woocommerce-tabs .tabs.wc-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0;
    }

    .product-tabs-section .woocommerce-tabs .tabs.wc-tabs::-webkit-scrollbar {
        display: none;
    }

    .product-tabs-section .woocommerce-tabs .tabs.wc-tabs li {
        flex: 0 0 auto;
        min-width: min(48vw, 190px);
    }

    .product-tabs-section .woocommerce-tabs .tabs.wc-tabs li a {
        font-size: 0.875rem;
        white-space: nowrap;
        padding: 14px 16px;
    }

    .footer-widgets-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-main-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
        padding: 0px 20px;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-bottom__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-bottom__copyright {
        margin-left: 0;
        text-align: center;
    }

    [dir="rtl"] .footer-bottom__copyright {
        margin-right: 0;
        text-align: center;
    }

    .footer-column .widget-title {
        text-align: center;
    }

    .footer-column .widget ul li {
        text-align: center;
    }

    /* About column: centre the blurb and CTA with the rest of the footer */
    .about-column {
        text-align: center;
    }

    .footer-about-text {
        margin-inline: auto;
        text-align: center;
    }

    .site-logo {
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .footer-logo {
        text-align: center;
        display: flex;
        justify-content: center;
    }

}

/* Stock Ticker Banner */
.stock-ticker {
    font-size: 15px;
    padding-block: 8px;
    border-block: 1px solid;
    overflow: hidden;
    user-select: none;
    background-color: var(--primary-color, #17a2b8);
    color: #fff;

    --gap: 30px;
    display: flex;
}

.stock-ticker ul {
    list-style: none;
    flex-shrink: 0;
    min-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);

    animation: scroll 50s linear infinite;
}

.stock-ticker:hover ul {
    animation-play-state: paused;
}

@keyframes scroll {
    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

.stock-ticker .company,
.stock-ticker .price {
    font-weight: bold;
}

.stock-ticker .price {
    margin-inline: 4px;
}



.stock-ticker .plus .change,
.stock-ticker .plus::before {
    color: #089981;
}

.stock-ticker .minus .change,
.stock-ticker .minus::before {
    color: #f23645;
}

/* Mobile: Make ticker 3x faster */
@media (max-width: 768px) {
    .stock-ticker ul {
        animation: scroll 16.67s linear infinite;
    }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .stock-ticker ul {
        animation: none;
    }

    .latest-products-grid li,
    .related-products-grid li,
    .single-product-wrapper .product-intro,
    .single-product-wrapper .product-images,
    .single-product-wrapper .product-summary,
    .single-product-wrapper .acc-checkout-box,
    .single-product-wrapper .product-tabs-section,
    .single-product-wrapper .related-products-section {
        opacity: 1;
        animation: none;
        transform: none;
    }

    .single-product-wrapper .gallery-slide {
        transition: none;
    }
}

#comment {
    margin-top: 12px;
}

/* QuickFORM Checkout Icon Color Override */
.acc-checkout-box .acc-input-with-icon svg,
.acc-checkout-box svg:not(:root) {
    stroke: #333 !important;
}

/* QuickFORM availability green pulse dot */
.acc-availability-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #28a745;
    flex-shrink: 0;
    animation: acc-availability-pulse 1.5s ease-in-out infinite;
}

/* Variable products: dot only visible when container has .in-stock */
.acc-availability-info:not(.in-stock) .acc-availability-dot {
    display: none;
}

@keyframes acc-availability-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5);
    }
    50% {
        opacity: 0.9;
        box-shadow: 0 0 0 6px rgba(40, 167, 69, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .acc-availability-dot {
        animation: none;
    }
}
/* ==========================================================================
   PDP Trust / Guarantee badges (rendered after QuickFORM at summary prio 16)
   ========================================================================== */
.qt-trust-badges {
    list-style: none;
    margin: 8px 0 0;
    padding: 14px 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border: 1px solid var(--qt-field-border, #e5e7eb);
    border-radius: var(--qt-field-radius, 12px);
    background: var(--qt-field-bg, #fff);
}
.qt-trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 4px 6px;
}
.qt-trust-badge:not(:last-child) {
    border-right: 1px solid var(--qt-field-border, #eef0f2);
}
.qt-trust-badge__icon {
    display: inline-flex;
    color: var(--primary-color, #17a2b8);
}
.qt-trust-badge__icon svg {
    width: 26px;
    height: 26px;
}
.qt-trust-badge__body {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.qt-trust-badge__title {
    font-weight: 600;
    font-size: 13px;
    color: var(--qt-field-text, #1f2937);
}
.qt-trust-badge__text {
    font-size: 11px;
    color: var(--qt-label-color, #6b7280);
    margin-top: 2px;
}
@media (max-width: 480px) {
    .qt-trust-badges { padding: 12px 4px; gap: 4px; }
    .qt-trust-badge__title { font-size: 12px; }
    .qt-trust-badge__text { font-size: 10px; }
    .qt-trust-badge__icon svg { width: 22px; height: 22px; }
}

/* ==========================================================================
   PDP stock indicator — pulsing dot + label (Disponible / Stock faible / Non disponible)
   ========================================================================== */
.qt-stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
.qt-stock__dot {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.qt-stock__dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: qt-stock-pulse 1.8s ease-out infinite;
}
.qt-stock--in  { color: #15803d; }
.qt-stock--in  .qt-stock__dot { background: #22c55e; }
.qt-stock--low { color: #b45309; }
.qt-stock--low .qt-stock__dot { background: #f59e0b; }
.qt-stock--out { color: #b91c1c; }
.qt-stock--out .qt-stock__dot { background: #ef4444; }
.qt-stock-oos { margin: 4px 0 0; }

@keyframes qt-stock-pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .qt-stock__dot::before { animation: none; }
}

/* Out of stock: QF hides its form and prints its own message — suppress both;
   our "Non disponible" pill stands in its place. */
.qt-product-oos .acc-out-of-stock-message,
.qt-product-oos .acc-checkout-box,
.qt-product-oos .acc-accordion {
    display: none !important;
}

/* Desktop only: swap positions — category term above the title, stock pill below the price.
   (Mobile keeps the pill above the title and hides the category, per the max-width:768px rules.) */
@media (min-width: 769px) {
    .single-product-wrapper .product-intro {
        display: flex;
        flex-direction: column;
    }
    .single-product-wrapper .product-intro .qt-stock {
        order: 5;
        margin: 10px 0 0;
    }
}

/* ==========================================================================
   Side-cart free-shipping progress bar (QuickForm promo threshold)
   ========================================================================== */
.qt-fs-progress {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--qt-field-border, #e5e7eb);
    border-radius: var(--qt-field-radius, 12px);
    background: var(--qt-field-bg, #fff);
}
.qt-fs-progress__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--qt-field-text, #1f2937);
    margin-bottom: 8px;
}
.qt-fs-progress__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--primary-color, #17a2b8);
}
.qt-fs-progress__icon svg {
    width: 20px;
    height: 20px;
}
.qt-fs-progress__text .woocommerce-Price-amount {
    font-weight: 700;
    color: var(--primary-color, #17a2b8);
}
.qt-fs-progress__track {
    height: 6px;
    border-radius: 999px;
    background: #edf0f3;
    overflow: hidden;
}
.qt-fs-progress__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primary-color, #17a2b8);
    transition: width 0.4s ease;
}
.qt-fs-progress--done {
    border-color: #22c55e;
    background: #f0fdf4;
}
.qt-fs-progress--done .qt-fs-progress__icon,
.qt-fs-progress--done .qt-fs-progress__text {
    color: #15803d;
}
.qt-fs-progress--done .qt-fs-progress__fill {
    background: #22c55e;
}

/* ==========================================================================
   Shopify-style checkout shell
   Solid 2-col wrapper grid (no display:contents). Coupon UI lives inside the
   summary column. RTL via logical properties. Thank-you keeps normal chrome.
   ========================================================================== */

:root {
    --qt-co-rail-bg: #f4f5f7;
    --qt-co-border: #e3e6eb;
    /* Match site .container (--qt-layout-max + 20px side padding) */
    --qt-co-pair-max: var(--qt-layout-max);
    --qt-co-gutter: 56px;
    --qt-co-pad-x: 20px;
}

body.qt-checkout-shell #main.site-main,
body.qt-checkout-shell .site-main,
body.qt-checkout-shell #primary,
body.qt-checkout-shell .content-area,
body.qt-checkout-shell .woocommerce,
body.qt-checkout-shell .container {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* overflow-x:hidden on html/body kills position:sticky — use clip on shell */
html:has(body.qt-checkout-shell) {
    overflow-x: clip;
}

body.qt-checkout-shell {
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;
    overflow-y: visible;
}

body.qt-checkout-shell .site-header,
body.qt-checkout-shell .site-footer,
body.qt-checkout-shell .qt-checkout-header,
body.qt-checkout-shell .qt-checkout-footer,
body.qt-checkout-shell .mobile-bottom-bar {
    display: none !important;
}

/* Default WC coupon must never appear above the shell split */
body.qt-checkout-shell .woocommerce-form-coupon-toggle,
body.qt-checkout-shell form.checkout_coupon {
    display: none !important;
}

body.qt-checkout-shell #main.site-main,
body.qt-checkout-shell .site-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

body.qt-checkout-shell .woocommerce {
    overflow: visible;
}


body.qt-checkout-shell .woocommerce-notices-wrapper:empty {
    display: none;
}

/* Emptied checkout: the form is gone, so this stands in for the whole page.
   .qt-empty-cart carries the icon/message/CTA styling it shares with the cart
   page; only the logo above it and the shell's own top spacing are new. */
.qt-checkout-empty {
    padding-block-start: 40px;
    text-align: center;
}

.qt-checkout-empty__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

.qt-checkout-empty__logo img,
.qt-checkout-empty__logo .custom-logo {
    display: block;
    max-height: 40px;
    width: auto;
    height: auto;
}

/* The shared empty state already centres itself; drop its top margin so it
   sits under the logo rather than a screen below it. */
.qt-checkout-empty .qt-empty-cart {
    margin-block: 40px 80px;
}

@media (max-width: 900px) {
    .qt-checkout-empty {
        padding-block-start: 28px;
    }

    .qt-checkout-empty .qt-empty-cart {
        margin-block: 24px 48px;
        padding-block: 32px;
    }
}

/* Notices sit above the split, outside .qt-checkout-wrapper, and the shell
   strips the max-width off every ancestor — so they get the wrapper's own
   centring here, and the tip inside is capped at one column so it lines up
   with the form rather than running the full viewport. */
body.qt-checkout-shell .woocommerce-notices-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--qt-co-pair-max);
    margin-inline: auto;
    padding: 24px var(--qt-co-pad-x) 0;
}

body.qt-checkout-shell .woocommerce-notices-wrapper > * {
    max-width: min(var(--qt-tip-max), calc(50% - (var(--qt-co-gutter) / 2)));
    margin-block: 0;
}

body.qt-checkout-shell .woocommerce-notices-wrapper > * + * {
    margin-block-start: 10px;
}

.qt-checkout-form--shell {
    max-width: none !important;
    width: 100%;
    position: relative;
    flex: 1 0 auto;
    display: block;
    margin: 0;
    padding: 0;
}

.qt-checkout-form--shell .qt-checkout-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--qt-co-gutter);
    max-width: var(--qt-co-pair-max);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--qt-co-pad-x);
    box-sizing: border-box;
    align-items: start;
    overflow: visible;
}

/* Grey rail behind the summary, bleeding to the viewport inline-end.
   Both columns are equal and the wrapper's padding is symmetric, so the gutter's
   midpoint is exactly the wrapper's 50% — no token arithmetic to drift out of sync.
   The wrapper is always centred, so 50% - 50vw is precisely the distance from its
   inline-end edge to the viewport edge. */
.qt-checkout-form--shell .qt-checkout-wrapper::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    inset-inline-end: calc(50% - 50vw);
    background: var(--qt-co-rail-bg);
    border-inline-start: 1px solid var(--qt-co-border);
    z-index: 0;
    pointer-events: none;
}

.qt-checkout-form--shell .qt-checkout-billing,
.qt-checkout-form--shell .qt-checkout-review {
    position: relative;
    z-index: 1;
    flex: none;
    width: auto;
    min-width: 0;
    max-width: none;
}

.qt-checkout-form--shell .qt-checkout-billing {
    padding-block: 40px 64px;
    padding-inline: 0;
}

.qt-checkout-form--shell .qt-checkout-shell-logo {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: 0 0 28px;
}

.qt-checkout-form--shell .qt-checkout-shell-logo a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.qt-checkout-form--shell .qt-checkout-shell-logo img,
.qt-checkout-form--shell .qt-checkout-shell-logo .custom-logo {
    display: block;
    max-height: 40px;
    width: auto;
    height: auto;
}

.qt-checkout-form--shell .qt-checkout-billing .woocommerce-billing-fields > h3 {
    margin-top: 0;
}

/* Shipping + payment moved to left column (below order notes) */
.qt-checkout-form--shell .qt-checkout-shipping-slot {
    margin-top: 24px;
}

.qt-checkout-form--shell .qt-checkout-shipping-slot:empty {
    display: none;
}

.qt-checkout-form--shell .qt-checkout-shipping-slot .qt-shipping-package {
    margin: 0;
}

.qt-checkout-form--shell .qt-checkout-shipping-slot .qt-shipping-package__heading {
    margin: 0 0 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111;
}

.qt-checkout-form--shell .qt-checkout-payment-slot {
    margin-top: 28px;
}

.qt-checkout-form--shell .qt-checkout-payment-slot #payment {
    margin: 0;
}

.qt-checkout-form--shell .qt-checkout-review {
    padding-block: 40px 64px;
    padding-inline: 36px 16px;
    position: sticky;
    top: 24px;
    align-self: start;
    box-sizing: border-box;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.qt-checkout-form--shell .qt-checkout-review::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

@media (min-width: 901px) {
    .qt-checkout-form--shell .qt-checkout-review {
        position: sticky !important;
        top: 24px;
    }
}

.qt-checkout-form--shell .qt-order-review {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    position: relative;
}

/* Expandable summary (right column) */
.qt-summary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: start;
    cursor: pointer;
}

.qt-summary-toggle__label {
    flex: 0 1 auto;
    min-width: 0;
}

.qt-summary-toggle__aside {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-inline-start: auto;
    flex-shrink: 0;
}

.qt-summary-toggle__total {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: #111;
    white-space: nowrap;
    unicode-bidi: isolate;
    direction: ltr;
}

.qt-summary-toggle__total .woocommerce-Price-amount,
.qt-summary-toggle__total .amount {
    display: inline-block !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit;
    white-space: nowrap;
    text-transform: none;
    direction: ltr;
    unicode-bidi: isolate;
}

.qt-summary-toggle__chevron {
    display: inline-flex;
    flex-shrink: 0;
    color: #6b7280;
    transition: transform 0.28s ease;
}

.qt-summary-toggle__chevron svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Expanded = chevron points up (like reference) */
.qt-summary-toggle[aria-expanded="true"] .qt-summary-toggle__chevron {
    transform: rotate(180deg);
}

/* Smooth expand/collapse via grid (animates 0fr ↔ 1fr) */
.qt-summary-panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.35s ease;
}

.qt-summary-panel__inner {
    overflow: hidden;
    min-height: 0;
}

.qt-checkout-review.is-summary-collapsed .qt-summary-panel {
    grid-template-rows: 0fr;
}

@media (prefers-reduced-motion: reduce) {
    .qt-summary-panel,
    .qt-summary-toggle__chevron {
        transition: none;
    }
}

.qt-shell-coupon {
    margin: 0 0 20px;
}

.qt-shell-coupon__prompt {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: #4b5563;
    text-align: start;
}

.qt-shell-coupon__toggle {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--qt-checkout-accent, var(--primary-color, #1e1e1e));
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Smooth reveal — expand/collapse without display-toggle mid-animation.
   Toggle `.is-open`. Keep `[hidden]` off until the close transition ends.
   Timing: --qt-reveal-duration / --qt-reveal-ease / --qt-reveal-distance */
.qt-smooth-reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-block: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
        grid-template-rows var(--qt-reveal-duration, 0.35s) var(--qt-reveal-ease, ease),
        opacity var(--qt-reveal-duration, 0.35s) var(--qt-reveal-ease, ease),
        margin var(--qt-reveal-duration, 0.35s) var(--qt-reveal-ease, ease);
}

.qt-smooth-reveal.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: auto;
}

.qt-smooth-reveal__inner {
    min-height: 0;
    overflow: hidden;
    transform: translateY(calc(var(--qt-reveal-distance, 6px) * -1));
    transition: transform var(--qt-reveal-duration, 0.35s) var(--qt-reveal-ease, ease);
}

.qt-smooth-reveal.is-open .qt-smooth-reveal__inner {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .qt-smooth-reveal,
    .qt-smooth-reveal__inner {
        transition: none;
    }

    .qt-smooth-reveal__inner {
        transform: none;
    }
}

/* Smooth coupon fields expand (0fr ↔ 1fr) */
.qt-shell-coupon__fields {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.qt-shell-coupon.is-open .qt-shell-coupon__fields {
    grid-template-rows: 1fr;
}

.qt-shell-coupon__fields-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
    transition: padding-top 0.3s ease;
}

.qt-shell-coupon.is-open .qt-shell-coupon__fields-inner {
    padding-top: 10px;
}

.qt-shell-coupon__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .qt-shell-coupon__fields,
    .qt-shell-coupon__fields-inner {
        transition: none;
    }
}

.qt-shell-coupon__input,
.qt-checkout-form--shell .qt-shell-coupon__input.input-text {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    min-height: var(--qt-field-height, 47px);
    height: var(--qt-field-height, 47px);
    max-height: var(--qt-field-height, 47px);
    margin: 0;
    padding: 8px 12px;
    border: var(--qt-field-border-w, 1.5px) solid var(--qt-field-border, #e2e8f0) !important;
    border-radius: var(--qt-field-radius, var(--theme-radius, 8px));
    background: var(--qt-field-bg, #fff);
    color: var(--qt-field-text, #1e293b);
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--qt-checkout-input-weight, 500);
    line-height: 1.25;
    box-shadow: var(--qt-field-shadow);
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
    -webkit-appearance: none;
    appearance: none;
}

.qt-shell-coupon__input::placeholder {
    color: var(--qt-placeholder, #94a3b8);
    opacity: 1;
}

.qt-shell-coupon__input:focus,
.qt-checkout-form--shell .qt-shell-coupon__input.input-text:focus {
    border-color: var(--qt-checkout-accent, var(--primary-color)) !important;
    box-shadow: 0 0 0 0.5px var(--qt-checkout-accent, var(--primary-color)), var(--qt-field-shadow);
    outline: none;
}

.qt-shell-coupon.has-error .qt-shell-coupon__input,
.qt-shell-coupon.has-error .qt-shell-coupon__input.is-invalid,
.qt-checkout-form--shell .qt-shell-coupon.has-error .qt-shell-coupon__input.input-text {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 0.5px #dc2626, var(--qt-field-shadow);
}

.qt-shell-coupon.has-error .qt-shell-coupon__input:focus,
.qt-checkout-form--shell .qt-shell-coupon.has-error .qt-shell-coupon__input.input-text:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 0.5px #dc2626, var(--qt-field-shadow);
}

.qt-shell-coupon__error {
    margin: 8px 0 0;
    padding: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: #dc2626;
    text-align: start;
}

.qt-shell-coupon__error[hidden] {
    display: none !important;
}

.qt-shell-coupon__apply,
.qt-checkout-form--shell .qt-shell-coupon__apply.button {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 7.5rem;
    width: auto;
    min-height: var(--qt-field-height, 47px);
    height: var(--qt-field-height, 47px);
    margin: 0;
    padding: 0 16px;
    border: none !important;
    border-radius: var(--qt-field-radius, var(--theme-radius, 8px));
    background: var(--qt-checkout-accent, var(--primary-color)) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: var(--qt-field-shadow);
    cursor: pointer;
    transition: opacity 0.2s ease, box-shadow 0.1s ease;
}

.qt-shell-coupon__apply:hover,
.qt-checkout-form--shell .qt-shell-coupon__apply.button:hover {
    opacity: 0.9;
    color: #fff !important;
}

.qt-shell-coupon__apply:focus,
.qt-checkout-form--shell .qt-shell-coupon__apply.button:focus {
    outline: none;
    box-shadow: 0 0 0 0.5px var(--qt-checkout-accent, var(--primary-color)), var(--qt-field-shadow);
}

.qt-shell-coupon__apply:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 380px) {
    .qt-shell-coupon__row {
        flex-wrap: wrap;
    }

    .qt-shell-coupon__apply,
    .qt-checkout-form--shell .qt-shell-coupon__apply.button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .qt-checkout-form--shell .qt-checkout-wrapper {
        display: flex;
        flex-direction: column;
        max-width: 620px;
        padding-inline: 20px;
    }

    /* Single column below this width: the tip follows the same 620px measure. */
    body.qt-checkout-shell .woocommerce-notices-wrapper {
        max-width: 620px;
        padding-inline: 20px;
    }

    body.qt-checkout-shell .woocommerce-notices-wrapper > * {
        max-width: none;
    }

    .qt-checkout-form--shell .qt-checkout-wrapper::before {
        display: none;
    }

    .qt-checkout-form--shell .qt-checkout-billing {
        order: 2;
        padding: 28px 0 8px;
    }

    /* Full-bleed summary row (break out of wrapper padding) */
    .qt-checkout-form--shell .qt-checkout-review {
        order: 1;
        position: static !important;
        top: auto;
        max-height: none;
        overflow: visible;
        width: calc(100% + 40px);
        max-width: none;
        margin-inline: -20px;
        margin-block: 0 8px;
        padding: 20px;
        box-sizing: border-box;
        background: var(--qt-co-rail-bg);
        border-block: 1px solid var(--qt-co-border);
    }

    .qt-checkout-form--shell .qt-summary-toggle {
        margin-bottom: 0;
        transition: margin-bottom 0.35s ease;
    }

    .qt-checkout-form--shell .qt-checkout-review:not(.is-summary-collapsed) .qt-summary-toggle {
        margin-bottom: 16px;
    }

    .qt-checkout-form--shell .qt-order-review {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
    }
}

/* Desktop: summary panel always visible (toggle is mobile-only) */
@media (min-width: 901px) {
    .qt-checkout-form--shell .qt-summary-panel {
        display: grid !important;
        grid-template-rows: 1fr !important;
    }

    .qt-checkout-form--shell .qt-checkout-review.is-summary-collapsed .qt-summary-panel {
        grid-template-rows: 1fr !important;
    }

    .qt-checkout-form--shell .qt-summary-toggle {
        cursor: default;
        pointer-events: none;
    }

    .qt-checkout-form--shell .qt-summary-toggle__total,
    .qt-checkout-form--shell .qt-summary-toggle__chevron {
        display: none;
    }
}

/* ==========================================================================
   Order-review skeleton loader
   `.qt-checkout-review.is-loading` is toggled by checkout-skeleton.js around
   WooCommerce's update_checkout / updated_checkout events. The skeleton
   overlay lives inside .qt-order-review and shimmers over the stale totals.
   ========================================================================== */

.qt-order-review__skeleton {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 4px 0;
    background: transparent;
    flex-direction: column;
    gap: 16px;
    pointer-events: none;
}
/* Shell rail summary has no padding, so pad the skeleton to line up. */
.qt-checkout-form--shell .qt-order-review {
    position: relative;
}

.qt-checkout-review.is-loading .qt-order-review > *:not(.qt-order-review__skeleton) {
    opacity: 0;
    transition: opacity 0.12s ease;
}
.qt-checkout-review.is-loading .qt-order-review__skeleton {
    display: flex;
}

.qt-sk {
    display: block;
    border-radius: 6px;
    background: linear-gradient(
        100deg,
        rgba(0, 0, 0, 0.06) 30%,
        rgba(0, 0, 0, 0.11) 50%,
        rgba(0, 0, 0, 0.06) 70%
    );
    background-size: 200% 100%;
    animation: qt-sk-shimmer 1.2s ease-in-out infinite;
}
.qt-sk--line {
    height: 14px;
}
.qt-sk--w40 { width: 40%; }
.qt-sk--w50 { width: 50%; }
.qt-sk--w60 { width: 60%; }
.qt-sk--w70 { width: 70%; }
.qt-sk--w80 { width: 80%; }

@keyframes qt-sk-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .qt-sk {
        animation: none;
    }
}

/* ============================================
   Product Carousel Block (quicktheme/product-carousel)
   ============================================ */
.qt-product-carousel {
    --qt-carousel-columns: 4;
    --qt-carousel-gap: 24px;
    max-width: var(--qt-layout-max);
    margin: 48px auto;
    padding: 0 20px;
    position: relative;
}

/* Full/wide alignment opts out of the centred container */
.qt-product-carousel.alignfull {
    max-width: none;
    padding-inline: 48px;
}

.qt-product-carousel.alignwide {
    max-width: 1600px;
}

.qt-product-carousel__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.qt-product-carousel__title {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
}

.qt-product-carousel__view-all {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.qt-product-carousel__view-all:hover {
    opacity: 0.75;
}

.qt-product-carousel__viewport {
    position: relative;
}

/* Native scroll-snap track: touch/trackpad swiping needs no JS */
.qt-product-carousel__track,
.qt-product-carousel .products.qt-product-carousel__track,
.qt-color-filter .products.qt-product-carousel__track {
    display: flex !important;
    gap: var(--qt-carousel-gap);
    list-style: none;
    margin: 0 !important;
    padding: 0 0 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Firefox / IE */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.qt-product-carousel__track::-webkit-scrollbar {
    display: none;
}

/* WooCommerce adds clearfix pseudos to ul.products — they'd become flex items */
.qt-product-carousel__track::before,
.qt-product-carousel__track::after,
.woocommerce .qt-product-carousel__track::before,
.woocommerce .qt-product-carousel__track::after,
.woocommerce-page .qt-product-carousel__track::before,
.woocommerce-page .qt-product-carousel__track::after {
    content: none !important;
    display: none !important;
}

/* Beat WooCommerce's float + percentage width on li.product */
.qt-product-carousel__track > li.product,
.woocommerce .qt-product-carousel__track > li.product,
.woocommerce-page .qt-product-carousel__track > li.product,
ul.qt-product-carousel__track > li.product,
.qt-color-filter .qt-product-carousel__track > li.product {
    flex: 0 0 calc(
        (100% - (var(--qt-carousel-columns) - 1) * var(--qt-carousel-gap))
        / var(--qt-carousel-columns)
    );
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    scroll-snap-align: start;
}

/* Arrow buttons — circular, vertically centred on the image area */
.qt-product-carousel__nav {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #1a1a1a;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.qt-product-carousel__nav:hover {
    background: #f5f5f5;
    transform: translateY(-50%) scale(1.06);
}

.qt-product-carousel__nav[hidden] {
    display: none;
}

.qt-product-carousel__nav--prev {
    left: 4px;
}

.qt-product-carousel__nav--next {
    right: 4px;
}

.qt-product-carousel__nav svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
}

.qt-carousel-empty {
    margin: 0;
    padding: 24px;
    text-align: center;
    color: #777;
    background: #fafafa;
    border: 1px dashed #ddd;
    border-radius: 8px;
}

/* Touch devices scroll natively — hide the arrows */
@media (hover: none) and (pointer: coarse) {
    .qt-product-carousel__nav {
        display: none !important;
    }
}

@media (max-width: 1100px) {
    .qt-product-carousel__track > li.product,
    .woocommerce .qt-product-carousel__track > li.product,
    ul.qt-product-carousel__track > li.product,
    .qt-color-filter .qt-product-carousel__track > li.product {
        flex-basis: calc((100% - 2 * var(--qt-carousel-gap)) / 3);
    }
}

@media (max-width: 768px) {
    .qt-product-carousel {
        margin: 32px auto;
        --qt-carousel-gap: 16px;
    }

    .qt-product-carousel.alignfull {
        padding-inline: 20px;
    }

    .qt-product-carousel__header {
        margin-bottom: 16px;
    }

    .qt-product-carousel__track > li.product,
    .woocommerce .qt-product-carousel__track > li.product,
    ul.qt-product-carousel__track > li.product,
    .qt-color-filter .qt-product-carousel__track > li.product {
        flex-basis: calc((100% - var(--qt-carousel-gap)) / 2);
    }
}

@media (max-width: 480px) {
    .qt-product-carousel__track > li.product,
    .woocommerce .qt-product-carousel__track > li.product,
    ul.qt-product-carousel__track > li.product,
    .qt-color-filter .qt-product-carousel__track > li.product {
        flex-basis: 68%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qt-product-carousel__track {
        scroll-behavior: auto;
    }
}

/* ============================================
   Category Carousel Block (quicktheme/category-carousel)
   Shares the product carousel's shell (header, arrows, viewport); only the
   track and slide sizing differ.
   ============================================ */
.qt-category-carousel {
    --qt-carousel-columns: 4;
    --qt-carousel-gap: 24px;
    max-width: var(--qt-layout-max);
    margin: 48px auto;
    padding: 0 20px;
    position: relative;
}

.qt-category-carousel.alignfull {
    max-width: none;
    padding-inline: 48px;
}

.qt-category-carousel.alignwide {
    max-width: 1600px;
}

.qt-category-carousel__track {
    display: flex;
    gap: var(--qt-carousel-gap);
    list-style: none;
    margin: 0;
    padding: 0 0 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.qt-category-carousel__track::-webkit-scrollbar {
    display: none;
}

/* Override the theme's percentage-based .category-slide sizing (which is tuned
   for the homepage slider) with column-count-driven widths. */
.qt-category-carousel__track > .qt-category-carousel__slide,
.qt-category-carousel__track > .category-slide {
    flex: 0 0 calc(
        (100% - (var(--qt-carousel-columns) - 1) * var(--qt-carousel-gap))
        / var(--qt-carousel-columns)
    );
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.qt-category-carousel__slide .category-image {
    /* Full-width card image, unlike the homepage slider's fixed circle.
       Square to match the other category tiles across the theme. */
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #f5f5f5;
}

.qt-category-carousel__slide .category-image img,
.qt-category-carousel__slide .category-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.qt-category-carousel__slide:hover .category-image img,
.qt-category-carousel__slide:hover .category-image__img {
    transform: scale(1.05);
}

/* The theme's .category-name rules are trapped inside a 768px media query,
   so desktop styling is restated here rather than inherited. */
.qt-category-carousel__slide .category-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: center;
}

.qt-category-carousel__slide .category-name__count {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

@media (hover: none) and (pointer: coarse) {
    .qt-category-carousel .qt-product-carousel__nav {
        display: none !important;
    }
}

@media (max-width: 1100px) {
    .qt-category-carousel__track > .qt-category-carousel__slide,
    .qt-category-carousel__track > .category-slide {
        flex-basis: calc((100% - 2 * var(--qt-carousel-gap)) / 3);
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .qt-category-carousel {
        margin: 32px auto;
        --qt-carousel-gap: 16px;
    }

    .qt-category-carousel.alignfull {
        padding-inline: 20px;
    }

    .qt-category-carousel__track > .qt-category-carousel__slide,
    .qt-category-carousel__track > .category-slide {
        flex-basis: calc((100% - var(--qt-carousel-gap)) / 2);
        min-width: 0;
    }

    .qt-category-carousel__slide .category-image {
        width: 100%;
        height: auto;
    }

    .qt-category-carousel__slide .category-name {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .qt-category-carousel__track > .qt-category-carousel__slide,
    .qt-category-carousel__track > .category-slide {
        flex-basis: 68%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qt-category-carousel__track {
        scroll-behavior: auto;
    }

    .qt-category-carousel__slide:hover .category-image img {
        transform: none;
    }
}

/* ============================================
   Colour Filter Block (quicktheme/color-filter)
   Intro column + swatch row that swaps the product track.
   Reuses the product carousel's viewport/track/arrow classes.
   ============================================ */
.qt-color-filter {
    --qt-carousel-columns: 4;
    --qt-carousel-gap: 24px;
    --qt-swatch-size: 48px;
    max-width: var(--qt-layout-max);
    margin: 48px auto;
    padding: 0 20px;
    position: relative;
}

.qt-color-filter.alignfull {
    max-width: none;
    padding-inline: 48px;
}

.qt-color-filter.alignwide {
    max-width: 1600px;
}

.qt-color-filter__intro {
    max-width: 620px;
    margin-bottom: 32px;
}

.qt-color-filter__title {
    margin: 0 0 16px;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
}

.qt-color-filter__description {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.6;
    color: #4a4a4a;
}

.qt-color-filter__link {
    display: inline-block;
    margin-bottom: 28px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
}

.qt-color-filter__link:hover {
    opacity: 0.65;
}

/* Swatch row — wraps onto as many lines as it needs */
.qt-color-filter__swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.qt-color-filter__swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--qt-swatch-size);
    height: var(--qt-swatch-size);
    padding: 0;
    border-radius: 50%;
    background: var(--qt-swatch-color, #e5e5e5);
    /* Ring sits outside the dot so the colour stays a full circle. Strong
       enough that white/pale swatches still read against a white page. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.qt-color-filter__swatch:hover {
    transform: scale(1.08);
}

.qt-color-filter__swatch:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

/* Active: outer ring with a gap, plus a checkmark drawn in CSS */
.qt-color-filter__swatch.is-active {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px #1a1a1a;
}

.qt-color-filter__swatch.is-active::after {
    content: '';
    position: absolute;
    top: 46%;
    left: 50%;
    width: 8px;
    height: 15px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: translate(-50%, -50%) rotate(45deg);
    /* Keeps the white tick legible on pale swatches */
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.7));
}

/* White and near-white swatches: the white tick would vanish, so darken it.
   Set per-term in render.php, which knows the actual hex. */
.qt-color-filter__swatch--light.is-active::after {
    border-color: #1a1a1a;
    filter: none;
}

/* Terms with no colour set fall back to a readable pill */
.qt-color-filter__swatch--noColor {
    width: auto;
    height: auto;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    background: #f2f2f2;
    color: #1a1a1a;
}

.qt-color-filter__swatch--noColor.is-active::after {
    content: none;
}

.qt-color-filter__swatch-label {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.qt-color-filter__current {
    margin-left: 8px;
    font-size: 19px;
    font-style: italic;
    font-weight: 600;
    color: #1a1a1a;
}

/* Track fades slightly while new cards are fetched */
.qt-color-filter.is-loading .qt-product-carousel__track {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.qt-color-filter__empty {
    margin: 0;
    padding: 32px 24px;
    text-align: center;
    color: #777;
    background: #fafafa;
    border: 1px dashed #ddd;
    border-radius: var(--theme-radius, 8px);
}

@media (max-width: 768px) {
    .qt-color-filter {
        margin: 32px auto;
        --qt-carousel-gap: 16px;
        --qt-swatch-size: 42px;
    }

    .qt-color-filter.alignfull {
        padding-inline: 20px;
    }

    .qt-color-filter__intro {
        margin-bottom: 24px;
    }

    .qt-color-filter__description {
        font-size: 15px;
    }

    .qt-color-filter__swatches {
        gap: 12px;
    }

    .qt-color-filter__current {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qt-color-filter__swatch {
        transition: none;
    }

    .qt-color-filter__swatch:hover {
        transform: none;
    }
}

/* ============================================
   Shop sidebar: colour swatches & attribute pills
   ============================================ */
.sf-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sf-swatches__item {
    margin: 0;
}

.sf-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    text-decoration: none;
    /* Ring sits outside the dot so the colour stays true */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.sf-swatch:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.32);
}

.sf-swatch.is-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary-color, #111);
}

.sf-swatch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary-color, #111);
}

.sf-swatch__dot {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e9e9e9;
}

/* Terms with no swatch colour fall back to a readable text chip */
.sf-swatch--nocolor {
    border-radius: 999px;
    padding: 6px 12px;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.16);
    font-size: 13px;
    color: #333;
}

.sf-swatch--nocolor .sf-swatch__dot {
    display: none;
}

.sf-swatch--nocolor.is-active {
    border-color: var(--primary-color, #111);
    background: var(--primary-color, #111);
    color: #fff;
    box-shadow: none;
}

/* ---- Generic attribute pills (sizes etc.) ---- */
.sf-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sf-pills__item {
    margin: 0;
}

.sf-attr-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 40px;
    padding: 7px 12px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    justify-content: center;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.sf-attr-pill:hover {
    border-color: rgba(0, 0, 0, 0.4);
}

.sf-attr-pill.is-active {
    border-color: var(--primary-color, #111);
    background: var(--primary-color, #111);
    color: #fff;
}

.sf-attr-pill__count {
    font-size: 11px;
    opacity: 0.6;
}

.sf-attr-pill.is-active .sf-attr-pill__count {
    opacity: 0.85;
}

@media (max-width: 768px) {
    .sf-swatch__dot {
        width: 32px;
        height: 32px;
    }

    .sf-attr-pill {
        padding: 9px 14px;
    }
}

/* ============================================
   Product imagery: anchor crops to the top
   ----------------------------------------------------------------
   Product shots are square/portrait photos of a model wearing the item. When
   `object-fit: cover` crops them into a differently-shaped box it defaults to
   centring, which slices off the head. Anchoring to the top keeps the face and
   the garment's neckline — the part shoppers actually scan.

   Applies everywhere a product photo is cropped: shop/archive grids, the
   Gutenberg + Elementor carousels (both reuse content-product.php), related and
   upsell rows, the PDP gallery and its thumbnails, and cart/wishlist rows.
   Deliberately excluded: category tiles and tiny UI thumbnails, where the
   subject is a flat-lay or the image is too small for the anchor to matter.
   ============================================ */

/* Product cards — every context that renders content-product.php */
.product-card .product-image-wrapper img,
.product-card .product-image-wrapper .product-image,
.product-image-wrapper img,
.product-image-wrapper .product-image,
.woocommerce ul.products li.product .product-image-wrapper img,
.woocommerce-page ul.products li.product .product-image-wrapper img,
ul.products-grid li.product .product-image-wrapper img,
.latest-products-grid li.product .product-image-wrapper img,
.related-products-grid li.product .product-image-wrapper img,
.qt-product-carousel__track li.product .product-image-wrapper img,
.woocommerce ul.products li.product a.product-image-link img,
ul.products-grid li.product a.product-image-link img {
    object-position: top center !important;
}

/* PDP gallery: main slides and the thumbnail rail */
.gallery-slide img,
.gallery-slide .product-gallery-image,
.single-product-wrapper .gallery-slide img,
.single-product-wrapper .gallery-slide .product-gallery-image,
.gallery-thumb img,
.product-gallery__track img {
    object-position: top center !important;
}

/* WooCommerce's own product image markup (e.g. blocks that bypass the theme card) */
.woocommerce div.product div.images img,
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-image img,
.wc-block-components-product-image img {
    object-position: top center;
}

/* Cart, mini-cart, wishlist and order rows still show the garment on a model */
.qt-mini-cart-item-image img,
.qt-order-item__thumb img,
.woocommerce-order-details .qt-order-item__thumb img,
body.qt-wishlist-page .wishlist_table .product-thumbnail img,
.qt-wishlist-toast__thumb,
.header-search-results__thumb {
    object-position: top center;
}

/* Category tiles stay square (1:1) but crop from the top too — their thumbnails
   are the same model shots, so centring cost them the same heads. */
.category-grid-image img,
.category-grid-image .category-image__img,
.subcat-slide-image img,
.product-categories-grid img,
.category-image img,
.category-image .category-image__img,
.qt-category-carousel__slide .category-image img,
.qt-category-carousel__slide .category-image .category-image__img {
    object-fit: cover;
    object-position: top center !important;
}

/* ============================================
   QForm Action Button
   QForm primary treatment: a compact solid surface, a fine inset
   highlight, subtle edge definition, and deliberate hover/pressed/focus states.
   Add .qt-button to new primary calls to action; the selectors below bring the
   existing theme and WooCommerce primary actions into the same system.
   ============================================ */
.qt-button,
.shop-button,
.more-products-button,
.qt-sticky-cta__buy,
.single-product-wrapper .product-summary form.cart .single_add_to_cart_button,
.qf-add-to-cart,
.qf-submit,
#place_order,
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce input.button,
body.woocommerce-account .woocommerce a.button,
body.woocommerce-checkout .woocommerce-form-login .button,
body.woocommerce-checkout .woocommerce-form-login button[type="submit"],
body.woocommerce-checkout .woocommerce-form-register .button,
body.woocommerce-checkout .woocommerce-form-register button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--qt-button-edge) !important;
    border-radius: var(--theme-radius) !important;
    background: var(--qt-button-bg) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    box-shadow:
        inset 0 0.75px 0 rgb(255 255 255 / 0.2),
        0 1px 2px rgb(0 0 0 / 0.16),
        0 0 0 1px color-mix(in srgb, var(--qt-button-edge) 70%, transparent);
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.qt-button:hover,
.shop-button:hover,
.more-products-button:hover,
.qt-sticky-cta__buy:hover,
.single-product-wrapper .product-summary form.cart .single_add_to_cart_button:hover,
.qf-add-to-cart:hover,
.qf-submit:hover,
#place_order:hover,
body.woocommerce-account .woocommerce button.button:hover,
body.woocommerce-account .woocommerce input.button:hover,
body.woocommerce-account .woocommerce a.button:hover,
body.woocommerce-checkout .woocommerce-form-login .button:hover,
body.woocommerce-checkout .woocommerce-form-login button[type="submit"]:hover,
body.woocommerce-checkout .woocommerce-form-register .button:hover,
body.woocommerce-checkout .woocommerce-form-register button[type="submit"]:hover {
    background: var(--qt-button-bg-hover) !important;
    border-color: var(--qt-button-bg-hover) !important;
    box-shadow:
        inset 0 0.75px 0 rgb(255 255 255 / 0.2),
        0 1px 2px rgb(0 0 0 / 0.2),
        0 0 0 1px color-mix(in srgb, var(--qt-button-bg-hover) 74%, transparent);
    transform: none;
}

.qt-button:active,
.shop-button:active,
.more-products-button:active,
.qt-sticky-cta__buy:active,
.single-product-wrapper .product-summary form.cart .single_add_to_cart_button:active,
.qf-add-to-cart:active,
.qf-submit:active,
#place_order:active,
body.woocommerce-account .woocommerce button.button:active,
body.woocommerce-account .woocommerce input.button:active,
body.woocommerce-account .woocommerce a.button:active,
body.woocommerce-checkout .woocommerce-form-login .button:active,
body.woocommerce-checkout .woocommerce-form-login button[type="submit"]:active,
body.woocommerce-checkout .woocommerce-form-register .button:active,
body.woocommerce-checkout .woocommerce-form-register button[type="submit"]:active {
    background: var(--qt-button-bg-pressed) !important;
    border-color: var(--qt-button-bg-pressed) !important;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18);
}

.qt-button:focus-visible,
.shop-button:focus-visible,
.more-products-button:focus-visible,
.qt-sticky-cta__buy:focus-visible,
.single-product-wrapper .product-summary form.cart .single_add_to_cart_button:focus-visible,
.qf-add-to-cart:focus-visible,
.qf-submit:focus-visible,
#place_order:focus-visible,
body.woocommerce-account .woocommerce button.button:focus-visible,
body.woocommerce-account .woocommerce input.button:focus-visible,
body.woocommerce-account .woocommerce a.button:focus-visible,
body.woocommerce-checkout .woocommerce-form-login .button:focus-visible,
body.woocommerce-checkout .woocommerce-form-login button[type="submit"]:focus-visible,
body.woocommerce-checkout .woocommerce-form-register .button:focus-visible,
body.woocommerce-checkout .woocommerce-form-register button[type="submit"]:focus-visible {
    outline: none;
    box-shadow:
        inset 0 0.75px 0 rgb(255 255 255 / 0.2),
        0 1px 2px rgb(0 0 0 / 0.16),
        0 0 0 2px #fff,
        0 0 0 4px var(--qt-button-focus);
}

.qt-button:disabled,
.single-product-wrapper .product-summary form.cart .single_add_to_cart_button:disabled,
.qf-add-to-cart:disabled,
.qf-submit:disabled,
#place_order:disabled,
body.woocommerce-account .woocommerce button.button:disabled,
body.woocommerce-checkout .woocommerce-form-login .button:disabled,
body.woocommerce-checkout .woocommerce-form-register .button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .qt-button,
    .shop-button,
    .more-products-button,
    .qt-sticky-cta__buy,
    .single-product-wrapper .product-summary form.cart .single_add_to_cart_button,
    .qf-add-to-cart,
    .qf-submit,
    #place_order {
        transition: none;
    }
}

/* ============================================
   Legal Pages (terms, privacy)
   ============================================ */
/* Long-form reading column: the measure is capped well under .home-shell so the
   lines stay readable, with a jump-link index above the sections. */
/* The page body is an <article>, so it misses the `.home-page > section` rule
   that gives every other section its vertical rhythm — apply the same token. */
.legal-page > .legal-page__section {
    padding-block: 48px;
}

.legal-page__shell {
    max-width: 820px;
}

.legal-page__heading {
    max-width: none;
    margin-bottom: 40px;
}

.legal-page__updated {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
}

.legal-page__toc {
    padding: 24px 28px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
}

.legal-page__toc-title {
    margin: 0 0 16px;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
}

.legal-page__toc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    /* Numbered for the reader; the marker sits inside so it never hangs into
       the card padding. */
    list-style: decimal inside;
    color: #6b7280;
}

.legal-page__toc-list li {
    margin: 0;
}

.legal-page__toc-list a {
    color: #4b5563;
    font-size: 0.98rem;
    text-decoration: none;
    transition: color 160ms ease;
}

.legal-page__toc-list a:hover,
.legal-page__toc-list a:focus-visible {
    color: var(--primary-color);
}

.legal-page__body {
    display: grid;
    gap: 32px;
    margin-top: 32px;
}

.legal-page__block {
    display: grid;
    gap: 14px;
    margin: 0;
    padding-block: 0 !important;
    /* Anchor links from the index land clear of the fixed header bar. */
    scroll-margin-top: calc(var(--header-height, 0px) + 24px);
}

.legal-page__block-title {
    margin: 0;
    color: #111827;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.5;
}

.legal-page__block p {
    margin: 0;
    color: #4b5563;
    font-size: 1.02rem;
    line-height: 1.95;
}

.legal-page__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-inline-start: 22px;
    list-style: disc;
    color: #4b5563;
}

.legal-page__list li {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.9;
}

@media (max-width: 768px) {
    .legal-page > .legal-page__section {
        padding-block: 32px;
    }

    .legal-page__heading {
        margin-bottom: 28px;
    }

    .legal-page__toc {
        padding: 20px;
        border-radius: 16px;
    }

    .legal-page__toc-list {
        grid-template-columns: 1fr;
    }

    .legal-page__body {
        gap: 32px;
        margin-top: 32px;
    }

    .legal-page__block-title {
        font-size: 1.2rem;
    }
}

/* ============================================
   Contact Page
   ============================================ */
/* Split layout: a copy column with the contact methods beside a single raised
   form card. The card is the only elevated surface on the page, so the fields
   inside it sit on a tinted grey field instead of white-on-white. Everything
   uses logical properties — the column order and the icon/label side flip with
   the document direction on their own. */
.home-contact__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    align-items: start;
    gap: 64px;
}

.home-contact__intro {
    display: grid;
    gap: 36px;
    padding-block-start: 8px;
}

/* The heading already sits in a gap-driven column here. */
.home-contact__heading {
    margin-bottom: 0;
}

.home-contact__methods {
    display: grid;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-contact__method {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
}

.home-contact__method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
    color: #18181b;
}

/* justify-items keeps the value shrink-wrapped: the anchor carries dir="ltr"
   for the phone/email, and a stretched grid item would flip its text-align to
   the left inside the RTL column. */
.home-contact__method-body {
    display: grid;
    justify-items: start;
    gap: 2px;
    min-width: 0;
}

.home-contact__method-label {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
}

.home-contact__method-value {
    max-width: 100%;
    color: #111827;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color 160ms ease;
}

.home-contact__method-value:hover,
.home-contact__method-value:focus-visible {
    color: var(--primary-color);
}

.home-contact__socials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.home-contact__socials-label {
    color: #6b7280;
    font-size: 0.95rem;
}

.home-contact__socials-links {
    display: flex;
    gap: 10px;
}

.home-contact__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 12px;
    background: #fff;
    color: #4b5563;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
    transition: color 160ms ease, border-color 160ms ease;
}

.home-contact__social svg {
    width: 18px;
    height: 18px;
}

.home-contact__social:hover,
.home-contact__social:focus-visible {
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
}

.home-contact__form-card {
    padding: 40px;
    border: 1px solid rgba(17, 24, 39, 0.07);
    border-radius: 28px;
    background: #fff;
    box-shadow:
        0 1px 2px rgb(16 24 40 / 0.04),
        0 24px 48px -32px rgb(16 24 40 / 0.18);
}

/* Baseline field styling for whatever form lands in the card — the theme's own
   contact form or a third-party shortcode: tinted, borderless pills on the
   white surface. */
.home-contact__form-slot input[type="text"],
.home-contact__form-slot input[type="email"],
.home-contact__form-slot input[type="tel"],
.home-contact__form-slot input[type="url"],
.home-contact__form-slot input[type="number"],
.home-contact__form-slot select,
.home-contact__form-slot textarea {
    width: 100%;
    min-height: 52px;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: var(--theme-radius, 8px);
    background: #f6f7f9;
    color: #111827;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.home-contact__form-slot textarea {
    min-height: 168px;
    resize: vertical;
}

.home-contact__form-slot input::placeholder,
.home-contact__form-slot textarea::placeholder {
    color: #9aa1ad;
}

.home-contact__form-slot input:focus,
.home-contact__form-slot select:focus,
.home-contact__form-slot textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--qt-button-focus);
}

.home-contact__form-slot label {
    display: block;
    margin-bottom: 8px;
    color: var(--qt-label-color, #202020);
    font-size: 0.95rem;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .home-contact__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .home-contact__intro {
        padding-block-start: 0;
    }
}

@media (max-width: 768px) {
    .home-contact__layout {
        gap: 32px;
    }

    .home-contact__intro {
        gap: 28px;
    }

    .home-contact__methods {
        gap: 20px;
    }

    .home-contact__method-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .home-contact__form-card {
        padding: 24px;
        border-radius: 20px;
    }
}

/* ============================================
   Contact Form (QuickTheme_Contact)
   The fields inherit the card's baseline styling above; what follows is the
   form's own rhythm, its alert/error states and the character counter.
   ============================================ */
.qt-contact-form {
    display: grid;
    gap: 20px;
}

.qt-contact-form__field {
    display: block;
}

.qt-contact-form__required {
    color: #b42318;
}

.qt-contact-form__field-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.qt-contact-form__counter {
    flex-shrink: 0;
    color: #9aa1ad;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.qt-contact-form__counter.is-full {
    color: #b42318;
}

.qt-contact-form__error {
    display: block;
    color: #b42318;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* The foot already owns the spacing for the message field. */
.qt-contact-form__field > .qt-contact-form__error {
    margin-top: 6px;
}

.qt-contact-form__field input[aria-invalid="true"],
.qt-contact-form__field textarea[aria-invalid="true"] {
    border-color: #f0a3a0;
    background: #fef4f3;
}

.qt-contact-form__alert {
    margin: 0;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: var(--theme-radius, 8px);
    font-size: 0.95rem;
    line-height: 1.6;
}

.qt-contact-form__alert--success {
    border-color: rgba(18, 128, 92, 0.22);
    background: #edfbf5;
    color: #12805c;
}

.qt-contact-form__alert--error {
    border-color: rgba(180, 35, 24, 0.22);
    background: #fef4f3;
    color: #b42318;
}

/* Honeypot: out of sight for people, still in the DOM for bots. Kept off
   display:none so scripts that skip hidden fields still fill it in. */
.qt-contact-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.qt-contact-form__submit {
    justify-self: start;
    min-height: 52px;
    padding-inline: 28px;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .qt-contact-form__submit {
        justify-self: stretch;
        width: 100%;
    }
}

/* Final mobile canvas gutter: all page layouts align to 24px side padding. */
@media (max-width: 768px) {
    .site-main > .container,
    .site-main > .shop-page-wrapper,
    .site-main > .single-product-wrapper,
    .site-main > .landing-page-wrapper,
    .site-main > .page-hero,
    .site-main > .categories-grid-section,
    .site-main > .info-boxes-row,
    .site-main > .subcat-slider-section,
    .site-main > .qt-reviews-page {
        padding-inline: 24px;
    }

    .home-shell {
        width: calc(100% - 48px);
        padding-inline: 0;
    }

    .container {
        width: auto;
        max-width: none;
        margin-inline: 0;
        padding-inline: 24px;
    }

    .categories-grid-section,
    .info-boxes-row,
    .subcat-slider-wrapper {
        padding-inline: 24px;
    }
}

/* ============================================
   Homepage campaign offer
   Gold treatment for the hero and the two lifetime licences it sells.
   One palette drives every gold surface so the badges, the ribbon and the
   plan tags stay the same metal.
   ============================================ */
:root {
    --qt-gold-line: #e6bd57;
    --qt-gold-soft: #fff7d6;
    --qt-gold-deep: #f4cf70;
    --qt-gold-ink: #6f4900;
    --qt-gold-shadow: rgba(174, 119, 12, 0.16);
    --qt-price-ink: #118b21;
}

/* --- Hero: gold offer badge ------------------------------------------- */
.home-hero__badge--gold {
    border-color: var(--qt-gold-line);
    background: linear-gradient(135deg, #fffdf5 0%, var(--qt-gold-soft) 100%);
    color: var(--qt-gold-ink);
    box-shadow: 0 6px 18px var(--qt-gold-shadow);
}

.home-hero__badge--gold .home-hero__badge-chip {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #b8860b 0%, #e0aa2b 45%, #b8860b 100%);
    color: #fff;
}

/* Slow sheen across the chip. Purely decorative — the badge reads fine
   without it, which is why reduced-motion simply switches it off. */
.home-hero__badge--gold .home-hero__badge-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.65) 50%, transparent 65%);
    background-size: 260% 100%;
    animation: qt-gold-sheen 3.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes qt-gold-sheen {
    0%, 60% { background-position: 140% 0; }
    100% { background-position: -40% 0; }
}

.home-hero__badge--gold .home-hero__badge-text {
    font-weight: 700;
}

/* --- Hero: headline offer line ---------------------------------------- */
.home-hero__offer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--qt-gold-line);
    border-radius: 16px;
    background: linear-gradient(135deg, #fffdf5 0%, var(--qt-gold-soft) 100%);
    color: #3f3f46;
    font-size: 1.05rem;
    line-height: 1.7;
    box-shadow: 0 8px 22px -14px var(--qt-gold-shadow);
}

.home-hero__offer-icon {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--qt-gold-ink);
}

.home-hero__offer-icon svg {
    width: 18px;
    height: 18px;
}

.home-hero__offer-price {
    color: var(--qt-price-ink);
    font-size: 1.22rem;
    font-weight: 800;
}

.home-hero__offer-was {
    color: #8b8b95;
    font-weight: 600;
    text-decoration-thickness: 2px;
}

/* --- Hero: detail bullets --------------------------------------------- */
.home-hero__points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-hero__points li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #3f3f46;
    font-size: 0.98rem;
    line-height: 1.65;
}

.home-hero__point-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 50%;
    background: rgba(17, 139, 33, 0.12);
    color: var(--qt-price-ink);
}

.home-hero__point-mark svg {
    width: 14px;
    height: 14px;
}

/* --- Purchase card: offer treatment ----------------------------------- */
.home-purchase-card--offer {
    position: relative;
    border-color: var(--qt-gold-line);
    box-shadow:
        0 0 0 4px rgba(230, 189, 87, 0.14),
        0 18px 44px -22px rgba(15, 23, 42, 0.35);
}

.home-purchase-card__ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    margin: -8px 0 20px;
    padding: 9px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #b8860b 0%, #e0aa2b 45%, #b8860b 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 8px 20px -10px rgba(174, 119, 12, 0.75);
}

.home-purchase-card__ribbon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
    background-size: 260% 100%;
    animation: qt-gold-sheen 3.6s ease-in-out infinite;
    pointer-events: none;
}

/* display:flex above would otherwise beat the hidden attribute the switcher sets
   when an offer carries no saving. */
.home-purchase-card__ribbon[hidden] {
    display: none;
}

.home-purchase-card__ribbon-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.home-purchase-card__ribbon-icon svg {
    width: 16px;
    height: 16px;
}

.home-purchase-card--offer .home-purchase-card__header {
    flex-wrap: wrap;
    align-items: flex-start;
}

.home-purchase-card--offer .home-purchase-card__price {
    text-align: end;
}

/* The anchor and the offer sit on one line at close sizes: a "was" price that is
   nearly as large as the new one keeps the drop readable at a glance, which a tiny
   struck caption above the price does not. */
.home-purchase-card__was {
    margin-inline-end: 10px;
    color: #9ca3af;
    font-size: 1.45rem;
    font-weight: 600;
    text-decoration-thickness: 2px;
}

.home-purchase-card__price strong {
    font-size: 1.7rem;
}

.home-purchase-card__once {
    display: block;
    margin-top: 4px;
    color: var(--qt-gold-ink);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: normal;
}

/* --- Purchase card: plan rows ----------------------------------------- */
.home-purchase-card__tag {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    vertical-align: middle;
}

.home-purchase-card__tag--gold {
    border: 1px solid var(--qt-gold-line);
    background: linear-gradient(135deg, var(--qt-gold-soft) 0%, var(--qt-gold-deep) 100%);
    color: var(--qt-gold-ink);
    box-shadow: 0 4px 10px -4px var(--qt-gold-shadow);
}

.home-purchase-card__plan b {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-align: end;
}

.home-purchase-card__plan b s {
    color: #9ca3af;
    font-size: 1rem;
    font-weight: 600;
    text-decoration-thickness: 2px;
}

.home-purchase-card__plan b bdi {
    color: var(--qt-price-ink);
    font-size: 1.08rem;
}

.home-purchase-card__plan b small {
    flex-basis: 100%;
}

/* Detail lists sit one per offer; only the selected one is unhidden. */
.home-purchase-card__benefits[hidden] {
    display: none;
}

.home-purchase-card__assurance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
    color: #52525b;
    font-size: 0.88rem;
    line-height: 1.6;
    text-align: center;
}

.home-purchase-card__assurance svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--qt-price-ink);
}

/* --- Pricing section: two-offer layout -------------------------------- */
.home-pricing__grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 940px;
    margin-inline: auto;
}

.home-plan-card__was {
    margin-inline-end: 10px;
    color: #9ca3af;
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration-thickness: 2px;
}

.home-plan-card__save {
    width: fit-content;
    margin: 0;
    padding: 5px 12px;
    border: 1px solid var(--qt-gold-line);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--qt-gold-soft) 0%, var(--qt-gold-deep) 100%);
    color: var(--qt-gold-ink);
    font-size: 0.85rem;
    font-weight: 800;
}

/* --- Closing CTA badge ------------------------------------------------- */
.home-cta__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto 14px;
    padding: 6px 16px;
    border: 1px solid var(--qt-gold-line);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--qt-gold-soft) 0%, var(--qt-gold-deep) 100%);
    color: var(--qt-gold-ink);
    font-size: 0.92rem;
    font-weight: 800;
    box-shadow: 0 8px 20px -12px var(--qt-gold-shadow);
}

.home-cta__badge s {
    color: rgba(111, 73, 0, 0.6);
    font-weight: 600;
}

@media (max-width: 900px) {
    .home-pricing__grid--duo {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .home-hero__points {
        grid-template-columns: 1fr;
    }

    .home-hero__offer {
        font-size: 1rem;
    }

    .home-purchase-card--offer .home-purchase-card__header {
        gap: 8px;
    }

    .home-purchase-card--offer .home-purchase-card__price {
        text-align: start;
    }
}

/* The sheen is decoration on top of an already-legible badge, so it is the
   first thing to go when the visitor asks for less movement. */
@media (prefers-reduced-motion: reduce) {
    .home-hero__badge--gold .home-hero__badge-chip::after,
    .home-purchase-card__ribbon::after {
        animation: none;
        opacity: 0;
    }
}