@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');

/* ================================================================
   LibreCOD — Website Templates (shop archive / product)
   Everything lives under .wt-shop / .wt-product so it can never bleed
   into the active theme's own chrome — only the WC template slot
   itself is swapped, header/footer are untouched. These wrappers are
   rendered by the override templates INSIDE the active theme's own
   woocommerce_before_main_content/after_main_content container (e.g.
   Astra's .ast-container), so they deliberately set no max-width of
   their own — width:100% always means "the theme's content width".
   ================================================================ */
/* Astra's own .ast-container (opened unconditionally in its header.php,
   independent of any WC hook — see this file's other docblocks) adds its
   own 20px side padding around everything it wraps, on top of whatever
   .wt-shop/.wt-product/the page content already set — double-padding the
   content and shrinking the form below full width on mobile. This file
   only loads when LibreCOD's own header/footer/shop/product render (see
   Libre_Website_Templates::header_footer_applies()), so it's safe to take
   over that role entirely whenever it's active. */
.ast-container, .ast-container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Astra's own vertical rhythm for #primary (4em top/bottom) is meant for
   blog/page content with a sidebar gap to fill — redundant once this
   plugin's own templates own the page's vertical spacing too. */
#primary {
    margin: 0 !important;
}

.wt-shop, .wt-product {
    font-family: 'Cairo', sans-serif;
    color: #1e293b;
}
.wt-shop *, .wt-shop *::before, .wt-shop *::after,
.wt-product *, .wt-product *::before, .wt-product *::after {
    box-sizing: border-box;
    font-family: inherit;
}

/* ── Hero — a single contained image, optional overlay text ─────── */
.wt-hero {
    position: relative;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    margin: 24px 0 8px;
}
.wt-hero picture,
.wt-hero img {
    display: block;
    width: 100%;
    height: auto;
}
.wt-hero-overlay-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 28px 36px;
    background: linear-gradient(to top, rgba(0, 0, 0, .5), transparent 65%);
    color: #fff;
}
.wt-hero-overlay-content.wt-hero-pos-left   { align-items: flex-start; text-align: left; }
.wt-hero-overlay-content.wt-hero-pos-center { align-items: center; text-align: center; }
.wt-hero-overlay-content.wt-hero-pos-right  { align-items: flex-end; text-align: right; }
.wt-hero-overlay-content h1 {
    font-size: 2rem;
    font-weight: 900;
    margin: 0 0 10px;
    color: #fff;
    line-height: 1.25;
    max-width: 560px;
}
.wt-hero-overlay-content p {
    font-size: 1.05rem;
    margin: 0 0 18px;
    opacity: .95;
    max-width: 560px;
}
.wt-hero-cta {
    display: inline-block;
    padding: var(--ast-primary-padding, 14px 36px);
    background: var(--ast-primary-bg, var(--wt-primary, #EF4444));
    color: var(--ast-primary-color, #fff) !important;
    font-weight: 700;
    border: var(--ast-primary-border-width, 0) solid var(--ast-primary-border, transparent);
    border-radius: var(--ast-primary-radius, 50px);
    text-decoration: none !important;
    transition: transform .2s ease, filter .15s, background .15s, color .15s;
}
.wt-hero-cta:hover {
    transform: translateY(-2px);
    filter: brightness(.94);
    background: var(--ast-primary-hover-bg, var(--ast-primary-bg, var(--wt-primary, #EF4444)));
    color: var(--ast-primary-hover-color, #fff) !important;
    border-color: var(--ast-primary-hover-border, var(--ast-primary-border, transparent));
}

/* ── Extra Banners — optional 4-slot asymmetric grid below the hero ──
   Plain source order (1,2,3,4) with no explicit column placement, so
   CSS Grid's direction-aware flow mirrors correctly under dir="rtl"
   without any extra rules. ─────────────────────────────────────── */
.wt-extra-banners {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    margin: 8px 0 32px;
}
.wt-extra-banner {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
}
.wt-extra-banner-1, .wt-extra-banner-4 { grid-row: span 2; }
.wt-extra-banner-2, .wt-extra-banner-3 { aspect-ratio: 3 / 2; }
.wt-extra-banner picture,
.wt-extra-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wt-extra-banner-label {
    position: absolute;
    inset-inline-start: 16px;
    bottom: 14px;
    z-index: 1;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* ── Trust strip ──────────────────────────────────────────────── */
.wt-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    padding: 22px 16px;
    background: #fff7ed;
    border-bottom: 1px solid #fde8da;
}
.wt-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .92rem;
    color: #7c2d12;
}
.wt-trust-icon { font-size: 1.2rem; }

.wt-section-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 28px;
    color: #1e293b;
}

/* ── Product grid (shop archive) ──────────────────────────────────── */
.wt-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* ── Infinite-scroll loading indicator ────────────────────────────── */
.wt-load-more {
    display: flex;
    justify-content: center;
    padding: 36px 0 8px;
}
.wt-load-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #f1e4d8;
    border-top-color: var(--wt-primary, #EF4444);
    border-radius: 50%;
    animation: wt-spin .7s linear infinite;
    visibility: hidden;
}
@keyframes wt-spin {
    to { transform: rotate(360deg); }
}

.wt-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #f1e4d8;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none !important;
    color: #1e293b !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    transition: box-shadow .2s ease, transform .2s ease;
}
.wt-product-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}
.wt-product-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.wt-product-name {
    padding: 12px 14px 0;
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.4;
}
.wt-product-price {
    padding: 6px 14px 14px;
    font-weight: 700;
    color: var(--wt-theme, #EF4444);
}
.wt-product-price del {
    color: #94a3b8;
    text-decoration: line-through;
    font-weight: 600;
}
.wt-product-price ins {
    color: #EF4444;
    text-decoration: none;
}

/* ── Template-1 ("Bayt") product card link + actions ─────────────────
   The card itself (.wt-product-card) is a non-link <div> so the
   add-to-cart button below is never nested inside an <a> — the link
   wraps just the image/name/price, click-through to the product. ──── */
.wt-product-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none !important;
    color: inherit !important;
}
.wt-discount-ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    background: var(--wt-primary, #EF4444);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 4px;
}
.wt-product-card-actions {
    padding: 0 14px 14px;
}
.wt-product-card-actions .add_to_cart_button,
.wt-product-card-actions .product_type_simple,
.wt-product-card-actions .button {
    display: block;
    width: 100%;
    text-align: center;
    padding: var(--ast-secondary-padding, 10px 14px) !important;
    background: var(--ast-secondary-bg, transparent) !important;
    color: var(--ast-secondary-color, var(--wt-primary, #EF4444)) !important;
    font-weight: 700;
    font-size: .85rem;
    border: var(--ast-secondary-border-width, 1.5px) solid var(--ast-secondary-border, var(--wt-primary, #EF4444)) !important;
    border-radius: var(--ast-secondary-radius, 8px);
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.wt-product-card-actions a.button:hover,
.wt-product-card-actions a.button:focus,
.wt-product-card-actions a.button:active {
    background: var(--ast-secondary-hover-bg, var(--wt-primary, #EF4444)) !important;
    color: var(--ast-secondary-hover-color, #fff) !important;
    border-color: var(--ast-secondary-hover-border, var(--ast-secondary-border, var(--wt-primary, #EF4444))) !important;
}
.wt-product-card-actions a.added {
    display: none;
}
.wt-product-card-actions a.added_to_cart {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 8px;
    font-size: .8rem;
    font-weight: 700;
}

/* ── Shop archive — width:100% inherits the theme's own container ──── */
.wt-shop {
    width: 100%;
    padding: 0 20px 0;
}
.wt-shop-title {
    margin: 20px 0 8px;
}
.wt-shop-grid {
    margin-top: 16px;
}
.wt-shop .woocommerce-result-count,
.wt-shop .woocommerce-ordering {
    margin-bottom: 16px;
}
.wt-shop .woocommerce-pagination {
    margin-top: 36px;
    text-align: center;
}

/* ── Single product — width:100% inherits the theme's own container ──
   No side padding of its own on PC/tablet — .ast-container's own max-
   width:1240px centering above 921px is the only "gutter" at that size;
   mobile gets its own explicit 20px sides below (.ast-container has no
   max-width under Astra's own mobile breakpoint, so without this the
   content would sit flush against the literal screen edge). */
.wt-product {
    width: 100%;
    padding: 32px 0 0;
}
.wt-product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
.woocommerce-js div.product div.images {
    margin-bottom: 0 !important;
}
.woocommerce-js div.product .woocommerce-tabs {
    padding-top: 2em;
    margin-bottom: 0 !important;
    width: 100%;
}
.wt-product-gallery,
.wt-product-gallery .woocommerce-product-gallery {
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
.wt-product-gallery img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    border-radius: 16px;
}
/* WooCommerce's native gallery zoom-magnifier trigger icon (added via the
   wc-product-gallery-zoom theme support flag) and its own onsale flash badge —
   both removed for this simplified gallery. */
.wt-product-gallery .woocommerce-product-gallery__trigger,
.wt-product-gallery span.onsale {
    display: none !important;
}
.wt-trust-strip--buybox {
    margin-top: 22px;
    padding: 16px;
    background: #fff7ed;
    border-radius: 14px;
    justify-content: flex-start;
    border-bottom: none;
}

.wt-product-buybox .product_title { font-weight: 700 !important; }

/* Sale price red / regular-price strikethrough gray — matches the shop card */
.wt-product-buybox .price del { color: #94a3b8; text-decoration: line-through; }
.wt-product-buybox .price ins { color: #EF4444; text-decoration: none; }
.wt-pdp-discount-badge {
    display: inline-block;
    background: var(--wt-primary, #EF4444);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    margin-inline-start: 8px;
    vertical-align: middle;
}

/* Tighten the gap left by WooCommerce's default short-description spacing */
.wt-product-buybox .woocommerce-product-details__short-description {
    margin-bottom: 4px;
    max-width: 100%;
    overflow-wrap: break-word;
}
.wt-product-buybox .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;
}
/* Defensive — a merchant's short-description content can contain an
   unconstrained image/table; without this it can force the whole card
   wider than the viewport on mobile regardless of any other fix. */
.wt-product-buybox .woocommerce-product-details__short-description img,
.wt-product-buybox .woocommerce-product-details__short-description table {
    max-width: 100%;
}

/* Defensive — same reasoning, for the full description/reviews tab content
   below the gallery+buybox grid. Pasted CKEditor content (.ck-content)
   commonly wraps images in <figure style="width:NNNpx"> with no wp-image-*
   class on the <img> itself, so neither the inline style nor WordPress's
   own responsive-image CSS (which only targets img[class*=wp-image-])
   catches it — without this, those images blow the column past the
   viewport on mobile regardless of any other fix here. max-width always
   clips a conflicting inline width (it's a separate property, resolved
   after width is computed), so !important isn't load-bearing for that —
   it's here only to out-rank any theme rule that sets max-width itself. */
.wt-product-below .woocommerce-tabs img,
.wt-product-below .woocommerce-tabs figure {
    max-width: 100% !important;
    height: auto !important;
}
.wt-product-below .woocommerce-tabs table {
    max-width: 100% !important;
}

/* Now the first thing inside .wt-product-info (above the title, not below
   the short description as before) — only rendered at all when the
   product has a non-"Uncategorized" category (see Libre_Website_
   Templates::render_category_line()). A leading divider made sense below
   the description; as the first element it just needs space below it
   before the title. */
.wt-product-category-line {
    margin-bottom: 8px;
}
.wt-product-category {
    font-size: .85rem;
    color: #64748b;
}
.wt-product-category a {
    color: inherit;
    text-decoration: none;
}
.wt-product-category a:hover {
    color: var(--wt-theme, #EF4444);
    text-decoration: underline;
}

.wt-product-below {
    margin-top: 0;
}
.wt-product-below .woocommerce-tabs {
    margin: 0 0 40px;
}
.wt-product-below .upsells.products > h2 {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 24px;
}
.wt-product-below .upsells.products ul.products {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    scroll-snap-type: x mandatory;
}
.wt-product-below .upsells.products ul.products li.product {
    flex: 0 0 220px;
    scroll-snap-align: start;
}
.woocommerce-js ul.products li.product, .woocommerce-page ul.products li.product {
    text-align: right;
    margin-bottom: 0 !important;
}

/* ================================================================
   Template-2 — "Souk" (سوق): bolder, sharper corners, brand color as
   solid blocks rather than accents. Scoped under .wt-souk so it never
   touches "Bayt" (template-1) styling above.
   ================================================================ */
.wt-souk .wt-hero-cta,
.wt-souk .wt-product-card,
.wt-souk .wt-cat-tile,
.wt-souk .wt-pill {
    border-radius: 4px;
}

/* Trust strip up top, bolder */
.wt-trust-strip--souk {
    background: var(--wt-primary, #EF4444);
    border-bottom: none;
}
.wt-trust-strip--souk .wt-trust-item { color: #fff; }

/* Split hero + pure-CSS auto-fading carousel */
.wt-souk-hero {
    width: 100%;
    padding: 48px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.wt-souk-hero-text h1 {
    font-size: 2.3rem;
    font-weight: 900;
    margin: 0 0 12px;
    line-height: 1.25;
}
.wt-souk-hero-text p {
    font-size: 1.05rem;
    margin: 0 0 22px;
    color: #475569;
}
.wt-souk-hero .wt-hero-cta {
    background: var(--wt-primary, #EF4444);
}
.wt-souk-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    background: #f1e4d8;
}
.wt-souk-carousel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: wt-carousel-fade 16s infinite;
}
@keyframes wt-carousel-fade {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    25%  { opacity: 1; }
    30%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Category pill filter bar */
.wt-pill-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.wt-pill-bar--shop {
    margin: 24px 0 8px;
}
.wt-pill {
    display: inline-block;
    padding: 9px 20px;
    background: #f1f5f9;
    color: #1e293b !important;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none !important;
    border: 1px solid #e2e8f0;
}
.wt-pill--active,
.wt-pill:hover {
    background: var(--wt-primary, #EF4444);
    color: #fff !important;
    border-color: transparent;
}

/* Dense grid + ribbons */
.wt-product-grid--dense {
    grid-template-columns: repeat(4, 1fr);
}
.wt-ribbon {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 1;
    background: var(--wt-primary, #EF4444);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 3px;
}
.wt-ribbon--bestseller {
    background: #1e293b;
}
.wt-final-cta--souk .wt-hero-cta {
    background: var(--wt-primary, #EF4444);
}

/* Single product — stacked gallery-then-buybox + sticky CTA */
.wt-souk .wt-product-stack {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.wt-souk .wt-product-gallery img { border-radius: 4px; }
.wt-souk .wt-product-below { padding-bottom: 64px; }
.wt-souk .wt-trust-strip--buybox {
    border-radius: 4px;
}

.wt-sticky-cta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    background: #fff;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .12);
    transform: translateY(100%);
    transition: transform .25s ease;
}
.wt-sticky-cta--visible {
    transform: translateY(0);
}
.wt-sticky-cta-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.wt-sticky-cta-name {
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wt-sticky-cta-price {
    font-weight: 700;
    color: var(--wt-theme, #EF4444);
    font-size: .85rem;
}
.wt-sticky-cta-btn {
    flex-shrink: 0;
    padding: 12px 28px;
    background: var(--wt-primary, #EF4444);
    color: #fff !important;
    font-weight: 700;
    border-radius: 4px;
    text-decoration: none !important;
}

/* Tabs restyled into a single-open accordion — same ul.tabs/.panel markup
   WC renders by default, its own tabs.js already shows one panel/hides the
   rest on click, so this is pure CSS restacking, no behavior change. */
.wt-souk .wt-product-below .woocommerce-tabs { max-width: 800px; margin: 0 auto 40px; }
.wt-souk .wt-product-below .woocommerce-tabs ul.tabs {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
    border: none;
}
.wt-souk .wt-product-below .woocommerce-tabs ul.tabs li {
    margin: 0 0 -1px;
    border: 1px solid #e2e8f0;
}
.wt-souk .wt-product-below .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 14px 18px;
    font-weight: 700;
    text-decoration: none !important;
}
.wt-souk .wt-product-below .woocommerce-tabs .panel {
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-top: none;
    margin: 0 0 16px;
}

/* Related products — 2-column grid (vs. Bayt's horizontal row) */
.wt-souk .wt-product-below .related.products ul.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: visible;
}

@media (max-width: 900px) {
    .wt-product-grid { grid-template-columns: repeat(2, 1fr); }
    .wt-product-grid--dense { grid-template-columns: repeat(2, 1fr); }
    .wt-product-layout { grid-template-columns: 1fr; gap: 0; }
    .wt-souk-hero { grid-template-columns: 1fr; }
    .wt-extra-banners { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
    .wt-extra-banner-1, .wt-extra-banner-4 { grid-row: span 1; aspect-ratio: 3 / 2; }

    /* Astra's configured Secondary button padding (--ast-secondary-padding,
       pulled in to theme this button) is sized for full-width desktop
       buttons — on a narrow card the LEFT/RIGHT padding specifically is what
       eats the available width, wrapping the Arabic label one word per
       line. Zero out the sides only; keep vertical padding for a comfortable
       tap target. !important because Astra's own customizer-generated CSS
       for these same selectors is itself !important in places, and would
       otherwise win on source order alone. */
    .wt-product-card-actions .add_to_cart_button,
    .wt-product-card-actions .product_type_simple,
    .wt-product-card-actions .button {
        padding: 9px 0 !important;
        font-size: .78rem;
    }
}
/* Tablet only — 3-per-row instead of jumping straight from 4 (desktop) to 2
   (the max-width:900px bucket above, which still governs phones below
   541px). Must come after the 900px block so it wins the cascade in this
   541-900px overlap range. */
@media (min-width: 541px) and (max-width: 900px) {
    .wt-product-grid { grid-template-columns: repeat(3, 1fr); }
    .wt-product-grid--dense { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
    .wt-hero-overlay-content h1 { font-size: 1.5rem; }
    .wt-hero-overlay-content { padding: 20px 22px; }
    .wt-product-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .wt-product-grid--dense { grid-template-columns: 1fr 1fr; }
    .wt-extra-banners { grid-template-columns: 1fr; grid-template-rows: none; }
    .wt-extra-banner-1, .wt-extra-banner-4 { grid-row: auto; aspect-ratio: 3 / 2; }
    .wt-souk .wt-product-below .related.products ul.products { grid-template-columns: 1fr; }

    /* Removing .ast-container's own 20px side padding (above) means this
       plugin is now the sole source of side spacing — zeroing these too
       would leave content flush against the literal screen edge on
       mobile (.ast-container has no max-width centering below Astra's
       own ~921px breakpoint, unlike PC/tablet). 20px sides restored. */
    .wt-shop { padding: 0 20px; }
    .wt-product { padding: 32px 20px 0; }

    /* Mobile-only reorder: title/price/category/short-description (wrapped
       in .wt-product-info, see Libre_Website_Templates::maybe_simplify_
       single_product()) move above the gallery; the buy form stays below it.
       display:contents on the buybox lifts its children up to be direct
       siblings of the gallery inside .wt-product-layout, so `order` can
       interleave them — .wt-product-buybox itself carries no box styling
       of its own (only descendant selectors), so this is visually a no-op
       beyond the reorder. Tablet (541-900px) keeps the existing stacked-but-
       gallery-first layout untouched. align-items:stretch overrides the
       base rule's align-items:start (meant for the desktop grid, keeping
       gallery/buybox top-aligned when they differ in height) — in this
       flex-column context that same property controls the CROSS axis
       (width), and "start" was the actual reason the form (and every
       other child here) was sizing to its own content instead of
       stretching to the full row width, despite every padding fix above. */
    .wt-product-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .wt-product-buybox { display: contents; }
    .wt-product-gallery { order: 2; }
    .wt-product-info    { order: 1; padding-bottom: 24px;}
    #lc-form-root        { order: 3; }
}

/* ─── Thank You page (templates/wt-thankyou-override.php) ─────────────── */
.wt-thankyou {
    display: flex;
    justify-content: center;
    padding: 40px 16px 64px;
}
.wt-thankyou-ticket {
    width: 100%;
    /* 80% of the theme's own configured content width — this lives inside
       Astra's .ast-container/.ast-woocommerce-container, so a percentage
       here is relative to whatever max-width the merchant has set in the
       theme customizer, not a hardcoded px value. */
    max-width: 80%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 36px 32px 32px;
    text-align: center;
    position: relative;
}
/* Scalloped ticket-notch edges, top and bottom */
.wt-thankyou-ticket::before,
.wt-thankyou-ticket::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 22px;
    background-image: radial-gradient(circle 11px, transparent 11px, #fff 11.5px);
    background-size: 44px 22px;
    background-repeat: repeat-x;
}
.wt-thankyou-ticket::before { top: -11px; background-position: 0 -11px; }
.wt-thankyou-ticket::after  { bottom: -11px; background-position: 0 11px; }

.wt-thankyou-check {
    color: #16a34a;
    margin: 0 auto 12px;
    width: 64px;
}
.wt-thankyou-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; }
.wt-thankyou-sub   { color: #64748b; margin: 0 0 28px; }

.wt-thankyou-customer,
.wt-thankyou-items {
    text-align: right;
    border-top: 1px dashed #e2e8f0;
    padding-top: 20px;
    margin-top: 10px;
}
.wt-thankyou-customer h2,
.wt-thankyou-items h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 12px;
}
.wt-thankyou-customer p { margin: 0 0 4px; color: #334155; }

.wt-thankyou-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.wt-thankyou-table th {
    text-align: center;
    color: #94a3b8;
    font-weight: 600;
    padding: 6px 8px;
    font-size: .78rem;
}
.wt-thankyou-table td {
    text-align: center;
    padding: 10px 8px;
    border-top: 1px solid #f1f5f9;
}
.wt-thankyou-prod {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right !important;
}
.wt-thankyou-prod img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.wt-thankyou-totals { margin-top: 14px; }
.wt-thankyou-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: #475569;
}
.wt-thankyou-total-grand {
    font-weight: 800;
    color: #EF4444;
    font-size: 1.05rem;
    border-top: 1px solid #e2e8f0;
    margin-top: 4px;
    padding-top: 12px;
}

.wt-thankyou-home-btn {
    display: inline-block;
    margin-top: 28px;
    background: #16a34a;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}
.wt-thankyou-home-btn:hover { background: #15803d; color: #fff; }
.wt-thankyou-support {
    display: block;
    margin-top: 14px;
    color: #16a34a;
    text-decoration: none;
    font-size: .9rem;
}

/* ─── Site-wide header (templates/parts/wt-header.php) ─────────────────
   Built in one fixed logical DOM order (logo, then search+categories,
   then cart); dir="rtl"/"ltr" on .wt-header mirrors it for free via
   flexbox's own direction-aware row layout — no per-direction CSS here. */
.wt-header {
    background: var(--wt-header-bg, #0f172a);
    color: var(--wt-header-text, #fff);
    position: relative;
    z-index: 100;
}
.wt-header--sticky {
    position: sticky;
    top: 0;
}
.wt-header-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 20px;
}
.wt-header-logo {
    color: var(--wt-header-text, #fff);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.15rem;
    flex-shrink: 0;
}
/* Fixed height (not max-height) — the brief asked for an exact 50px logo
   height with width following the image's own aspect ratio; max-width is
   just a safety net against an extreme landscape asset forcing the header
   to wrap, not the primary constraint. */
.wt-header-logo img { height: 50px; width: auto; max-width: 180px; display: block; }
.wt-header-inner { justify-content: space-between; }
.wt-header-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.wt-header-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    /* Astra's parent-theme CSS sets a bare `button{padding:15px 45px...}`
       rule (uppercase-text 8px-radius buttons, sized for full-width text
       CTAs) site-wide. Every other property here already wins against it
       on class-vs-type specificity, but padding was never declared at all
       — an unset property has nothing to win against, so Astra's filled
       the gap, ballooning this into a 128x68 oval (content-box default
       sizing adds padding on top of width/height) with the icon shoved off
       to one side. !important is defensive, matching .lf-qty-btn's
       identical fix elsewhere, against any future Astra customizer CSS
       that might add !important of its own. */
    padding: 0 !important;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.08);
    color: var(--wt-header-text, #fff);
    cursor: pointer;
    text-decoration: none;
}
.wt-header-icon-btn:hover { background: rgba(255,255,255,.18); }

/* Categories button — a labeled pill, not a round icon-only button like
   cart/search, so it gets its own class instead of .wt-header-icon-btn.
   Label first, icon second in DOM: under this header's dir="rtl", first-
   child sits at the reading start (right), so the icon naturally lands to
   its left, matching the brief — and still mirrors correctly for a
   hypothetical ltr site via the same fixed-DOM-order convention used
   throughout this file. */
.wt-header-cat-wrap { position: relative; flex-shrink: 0; }
.wt-header-cat-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    /* Same Astra button{padding:...} collision as .wt-header-icon-btn —
       see its comment above. */
    padding: 0 14px !important;
    border-radius: 19px;
    border: none;
    background: rgba(255,255,255,.08);
    color: var(--wt-header-text, #fff);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-transform: none !important;
}
.wt-header-cat-btn:hover { background: rgba(255,255,255,.18); }
.wt-header-cart-count {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    background: #EF4444;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* Collapsible panels — each is hidden until its icon is tapped (assets/
   frontend/wt-templates.js), only one open at a time. The search bar is
   a full-width in-flow block (intentionally pushes the header taller
   while open); the categories menu is the opposite by design — a small
   dropdown positioned absolute against .wt-header-cat-wrap (its nearest
   positioned ancestor), anchored just under the button itself, never
   affecting the header's own height. */
.wt-header-search-bar {
    display: none;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px 14px;
}
.wt-header-search-bar--open {
    display: block;
}
.wt-header-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 0;
    width: 230px;
    max-height: 320px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 200;
}
.wt-header-menu--open {
    display: block;
}
.wt-header-search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}
.wt-header-search input[type="search"] {
    flex: 1;
    min-width: 0;
    border: none;
    padding: 10px 12px;
    font-size: .85rem;
    color: #1e293b;
    background: transparent;
}
.wt-header-search input[type="search"]:focus { outline: none; }
.wt-header-search button {
    border: none;
    background: transparent;
    color: #64748b;
    padding: 0 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.wt-header-menu {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.wt-header-menu a {
    display: block;
    padding: 11px 16px;
    color: #1e293b;
    text-decoration: none;
    font-size: .88rem;
    border-bottom: 1px solid #f1f5f9;
}
.wt-header-menu a:last-child { border-bottom: none; }
.wt-header-menu a:hover { background: #f8fafc; }

/* ─── Site-wide footer (templates/parts/wt-footer.php) ──────────────── */
.wt-footer {
    background: var(--wt-footer-bg, #0f172a);
    color: var(--wt-footer-text, #cbd5e1);
    margin-top: 48px;
}
.wt-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.wt-footer-col h3 {
    color: var(--wt-footer-text, #fff);
    font-size: .85rem;
    font-weight: 700;
    margin: 0;
}
.wt-footer-col a {
    display: block;
    color: var(--wt-footer-link, #94a3b8);
    text-decoration: none;
    font-size: .82rem;
    margin-bottom: 8px;
}
.wt-footer-col a:hover { color: var(--wt-footer-text, #fff); }

/* Collapsible accordion (mobile only — see the min-width override below).
   The toggle button just wraps the heading + chevron; visually identical
   to a plain heading until the mobile breakpoint kicks in. */
.wt-footer-col-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 12px;
    cursor: pointer;
}
.wt-footer-col-toggle h3 { margin: 0; }
.wt-footer-col-chevron {
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform .2s;
}
.wt-footer-col--open .wt-footer-col-chevron { transform: rotate(180deg); }
.wt-footer-col-body { display: none; }
.wt-footer-col--open .wt-footer-col-body { display: block; }
@media (min-width: 701px) {
    .wt-footer-col-toggle { cursor: default; pointer-events: none; }
    .wt-footer-col-chevron { display: none; }
    .wt-footer-col-body { display: block !important; }
}
/* All top-level footer columns (brand + however many of cats/links/social
   are actually present) get an equal flex-basis share of the row — with
   flex-basis:0 this naturally divides into quarters with 4 present and
   thirds with 3 (e.g. categories hidden when the store's only term is
   "Uncategorized" — see Libre_Website_Templates::get_categories()), with
   no conditional CSS needed for the column-count change. */
.wt-footer-col { flex: 1 1 0; min-width: 0; }
.wt-footer-brand { display: flex; flex-direction: column; gap: 10px; flex: 1 1 0; min-width: 0; }
.wt-footer-logo { color: var(--wt-footer-text, #fff); font-weight: 800; text-decoration: none; }
/* Fixed height (not max-height) — see .wt-header-logo img's comment;
   max-width is just a safety net against an extreme landscape asset, same
   reasoning as the header logo (.wt-footer-brand no longer caps its own
   width now that all footer columns share the row equally — see
   .wt-footer-col above). */
.wt-footer-logo img { height: 80px; width: auto; max-width: 200px; display: block; }
.wt-footer-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--wt-footer-text, #fff) !important;
    font-weight: 600;
}
.wt-footer-social-icons { display: flex; gap: 10px; }
.wt-footer-social-icons a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}
.wt-footer-social-icons a:hover { background: rgba(255,255,255,.18); }
/* Brand colors, not the configurable footer text/link/bg settings above —
   per-platform classes (templates/parts/wt-footer.php) needed enough
   specificity (class+type+class) to beat the translucent default just
   above, regardless of source order. */
.wt-footer-social-icons a.wt-social-whatsapp  { background: #25D366; }
.wt-footer-social-icons a.wt-social-facebook  { background: #1877F2; }
.wt-footer-social-icons a.wt-social-instagram { background: #E1306C; }
.wt-footer-social-icons a.wt-social-tiktok    { background: #000000; }
.wt-footer-social-icons a.wt-social-whatsapp:hover  { filter: brightness(.88); }
.wt-footer-social-icons a.wt-social-facebook:hover  { filter: brightness(.88); }
.wt-footer-social-icons a.wt-social-instagram:hover { filter: brightness(.88); }
.wt-footer-social-icons a.wt-social-tiktok:hover    { filter: brightness(1.3); }
.wt-footer-bottom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 20px;
    text-align: center;
    font-size: .78rem;
    color: #64748b;
}
/* Fixed physical `right`, not a logical inset-inline-* property — explicitly
   the screen-right corner regardless of dir, per the brief. */
.wt-sticky-whatsapp {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    z-index: 200;
}
/* The order form's own sticky CTA bar (lc-form-templates.css's
   .lf-sticky-bar) is also fixed-bottom-left and can appear on the same
   single-product page once the user scrolls past the buy box — raising
   the z-index alone isn't enough, since the actual complaint is the two
   occupying the same physical space, not which one paints on top. Raised
   clear of it instead: .lf-sticky-bar is ~100px tall at most (mobile,
   worst-case safe-area-inset included) or ~90px from its own bottom:24px
   offset on desktop — 75px comfortably clears either case. Scoped to
   body.single-product (WP/WC's own body class) since no other page type
   ever renders that bar at all, so elsewhere the bubble stays at its
   normal, more reachable 22px. */
body.single-product .wt-sticky-whatsapp {
    bottom: 75px;
}
/* Hidden until the user scrolls past the order form, matching
   .lf-sticky-bar's own reveal behavior exactly (assets/frontend/
   wt-templates.js toggles this class via the same "form's bottom edge is
   above the viewport" check lc-form-templates.js uses for the bar) — kept
   here instead of in the form's own script since the bubble is this
   file's element, not the form's. Scoped to body.single-product only;
   elsewhere the bubble has no form to scroll past, so it stays visible
   immediately. */
body.single-product .wt-sticky-whatsapp {
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    transition: opacity .25s ease, transform .25s ease;
}
body.single-product .wt-sticky-whatsapp--visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

/* Mobile footer: stack the brand block above the (now-collapsible)
   accordion columns instead of side-by-side flex-wrap, matching the
   reference design — logo + phone centered, then each section full-width. */
@media (max-width: 700px) {
    .wt-footer-inner { flex-direction: column; gap: 22px; }
    .wt-footer-brand { align-items: center; text-align: center; max-width: none; }
    .wt-footer-col { width: 100%; }
}

/* ─── Generic page (templates/wt-page-override.php) ────────────────────
   About/Contact/Refund/Privacy/Terms/Shipping/FAQ/Payment/etc. */
.wt-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 20px 64px;
}
.wt-page-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 22px;
}
.wt-page-content {
    color: #334155;
    line-height: 1.9;
}
.wt-page-content p { margin: 0 0 16px; }