/* ════════════════════════════════════════════════════════════════
   PRODUCT.CSS — Product Detail Page + Sub-component Styles
   Covers: hero, page layout, gallery, info, variants,
           add-to-cart, tabs (all extracted from Blade files)
   Prefixes: pdh, psp, psg, psi, psv, psatc, pstabs
════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   PRODUCT DETAIL HERO (.pdh)
   Luxury maroon / gold — mirrors .cat-hero background system
══════════════════════════════════════════════════════════════ */

.pdh {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: clamp(2.8rem, 6vw, 5rem) 0 clamp(2.2rem, 5vw, 4rem);
}

.pdh__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to left,
        var(--color-primary-active) 0%,
        var(--color-primary)      50%,
        var(--color-primary-hover)  100%
    );
    z-index: 0;
}

.pdh__radial {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 130% at 85% 40%,
            rgba(var(--color-accent-rgb), .12) 0%, transparent 65%),
        radial-gradient(ellipse 45% 90% at 15% 75%,
            rgba(var(--color-accent-rgb), .07) 0%, transparent 55%);
    z-index: 1;
}

.pdh__texture {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent               0px,
        transparent               32px,
        rgba(255,255,255,.022)    32px,
        rgba(255,255,255,.022)    33px
    );
    z-index: 2;
}

.pdh__line-t {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(
        to right,
        transparent             0%,
        rgba(var(--color-accent-rgb), .25)    12%,
        var(--color-accent)    42%,
        rgba(var(--color-accent-rgb), .35)    72%,
        transparent             100%
    );
    z-index: 3;
}

.pdh__line-b {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(
        to right,
        transparent             0%,
        rgba(var(--color-accent-rgb), .18)    20%,
        rgba(var(--color-accent-rgb), .32)    50%,
        rgba(var(--color-accent-rgb), .18)    80%,
        transparent             100%
    );
    z-index: 3;
}

.pdh__inner {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4, 1rem);
}

.pdh__nav .breadcrumb {
    padding: 0;
    background: transparent;
    font-size: var(--fs-sm, .8125rem);
    flex-wrap: wrap;
    align-items: center;
    gap: .05rem;
}

.pdh__nav .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.28);
    font-size: .7rem;
}

html[dir="rtl"] .pdh__nav .breadcrumb-item + .breadcrumb-item::before {
    content: "\5C";
    display: inline-block;
    transform: scaleX(-1);
}

.pdh__crumb-link {
    color: rgba(255,255,255,.55);
    text-decoration: none;
    font-weight: var(--fw-normal, 400);
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    transition: color var(--t, 150ms);
}
.pdh__crumb-link:hover,
.pdh__crumb-link:focus-visible {
    color: var(--color-accent-light);
    text-decoration: none;
    outline-offset: 3px;
}

.pdh__crumb-active {
    color: rgba(255,255,255,.82);
    font-weight: var(--fw-medium, 500);
}

.pdh__title {
    margin: 0 0 .35rem;
    color: var(--color-accent);
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 600;
    line-height: var(--lh-tight, 1.15);
    letter-spacing: -0.01em;
    text-shadow: 0 0 48px rgba(var(--color-accent-rgb), .28);
}

html[dir="rtl"] .pdh__title {
    font-family: var(--font-arabic);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.22;
}

.pdh__title-line {
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--color-accent), rgba(var(--color-accent-rgb), .3));
    margin-top: calc(var(--sp-2, .5rem) * -1);
}

html[dir="rtl"] .pdh__title-line {
    background: linear-gradient(to left, var(--color-accent), rgba(var(--color-accent-rgb), .3));
}

@media (max-width: 767.98px) {
    .pdh { padding: clamp(2rem, 7vw, 3rem) 0 clamp(1.8rem, 6vw, 2.5rem); }
    .pdh__title { font-size: clamp(1.7rem, 7vw, 2.3rem); }
    .pdh__title-line { width: 44px; }
}

@media (max-width: 575px) {
    .pdh__inner { gap: var(--sp-3, .75rem); }
    .pdh__nav .breadcrumb { font-size: var(--fs-xs, .75rem); }
}

@media (prefers-reduced-motion: reduce) {
    .pdh__crumb-link { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT SHOW PAGE LAYOUT (.psp)
══════════════════════════════════════════════════════════════ */

.psp-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 32px 96px;
    background: #ffffff;
}

.psp-main {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 64px;
    align-items: start;
    margin-bottom: 0;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--border, var(--color-border));
}

.psp-info-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Grid cells must be able to shrink below their content size — without
   min-width:0 the grid item stays as wide as its content and overflows
   on narrow viewports. */
.psp-gallery-col,
.psp-info-col {
    min-width: 0;
}

.psp-action-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--border, var(--color-border));
}

.psp-wrap > .pstabs { padding-top: 48px; }

.psp-wrap .psi-breadcrumb { display: none; }

@media (max-width: 1200px) {
    .psp-wrap { padding: 40px 24px 80px; }
    .psp-main  { gap: 48px; }
}

@media (max-width: 991px) {
    .psp-wrap  { padding: 32px 20px 64px; }
    .psp-main  { grid-template-columns: 1fr; gap: 28px; padding-bottom: 48px; }
    .psp-info-col { gap: 20px; }
    .psp-wrap > .pstabs { padding-top: 40px; }
}

@media (max-width: 576px) {
    .psp-wrap  { padding: 20px 16px 56px; }
    .psp-info-col  { gap: 16px; }
    .psp-action-stack { padding-top: 16px; }
    .psp-wrap > .pstabs { padding-top: 32px; }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT GALLERY (.psg)
   Shopify-style: main image on top, horizontal thumbnails below
══════════════════════════════════════════════════════════════ */

.psg {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    /* Match fixed header: topbar (36px) + nav (72px) + breathing room */
    top: calc(var(--topbar-h) + var(--nav-h) + 16px);
}

.psg-main {
    position: relative;
    background: #ffffff;
    border-radius: var(--r-xl, 20px);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(229, 231, 235, .9);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, .06),
        0 2px  8px rgba(0, 0, 0, .04),
        inset 0 1px 0 rgba(255, 255, 255, .8);
}

.psg-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transform-origin: var(--psg-ox, 50%) var(--psg-oy, 50%);
    transition: transform 380ms cubic-bezier(.25,.46,.45,.94), opacity 220ms ease;
    will-change: transform, opacity;
}
.psg-main.is-transitioning .psg-main-img { opacity: 0; }

.psg-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
    color: var(--text-muted, #6B7280);
    font-size: var(--fs-sm, .8125rem);
}

.psg-zoom-hint {
    position: absolute;
    bottom: 14px;
    inset-inline-end: 14px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(229, 231, 235, .8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    display: flex;
    align-items: center; justify-content: center;
    color: var(--text-muted, #6B7280);
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
}
.psg-main:hover .psg-zoom-hint { opacity: 1; }

.psg-thumbs {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border, var(--color-border)) transparent;
}
.psg-thumbs::-webkit-scrollbar        { height: 3px; }
.psg-thumbs::-webkit-scrollbar-thumb  { background: rgba(var(--color-primary-rgb), .35); border-radius: 2px; }
.psg-thumbs::-webkit-scrollbar-track  { background: transparent; }

.psg-thumb {
    flex-shrink: 0;
    width: 80px; height: 80px;
    border-radius: var(--r-sm, 10px);
    overflow: hidden;
    border: 1.5px solid var(--border, var(--color-border));
    background: #ffffff;
    padding: 5px;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        box-shadow   160ms ease,
        transform    140ms ease;
    touch-action: manipulation;
}
.psg-thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}
.psg-thumb-ph {
    width: 100%; height: 100%;
    background: var(--border, var(--color-border));
    border-radius: 6px;
}

.psg-thumb:hover:not(.is-active) {
    border-color: rgba(var(--color-primary-rgb), .55);
    transform: translateY(-3px);
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), .14);
}

.psg-thumb.is-active {
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 1.5px var(--color-primary),
        0 4px 14px rgba(var(--color-primary-rgb), .22);
    background: rgba(var(--color-primary-rgb), .05);
    transform: translateY(-2px);
}
.psg-thumb:active        { transform: scale(.95) !important; box-shadow: none; }
.psg-thumb:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
    .psg-main                       { cursor: zoom-in; }
    .psg-main.psg-zoom-active       { cursor: crosshair; }
    .psg-main.psg-zoom-active .psg-main-img {
        transform: scale(2.2);
        transition: transform 280ms cubic-bezier(.25,.46,.45,.94), opacity 220ms ease;
    }
    .psg-zoom-hint { display: none; }
}

@media (min-width: 1200px) {
    .psg-thumb { width: 86px; height: 86px; }
}

@media (max-width: 991px) {
    .psg { position: static; top: auto; gap: 10px; }
    .psg-main { border-radius: var(--r-md, 14px); }
    .psg-thumb { width: 68px; height: 68px; }
}

@media (max-width: 480px) {
    .psg-thumb { width: 58px; height: 58px; padding: 4px; }
    .psg-main  { border-radius: var(--r-sm, 10px); }
    .psg-thumbs { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .psg-main-img, .psg-thumb { transition: none !important; transform: none !important; }
    .psg-main.psg-zoom-active .psg-main-img { transform: none; }
    .psg-thumb.is-active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT INFO (.psi)
   Badges, name, price, meta, stock indicators
══════════════════════════════════════════════════════════════ */

.psi { display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }
.psi-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs, .75rem); flex-wrap: wrap; }
.psi-bc-link { color: var(--text-muted, #6B7280); text-decoration: none; transition: color 140ms; }
.psi-bc-link:hover { color: var(--color-primary); }
.psi-bc-sep { color: var(--border-dark, var(--color-border-strong)); }
.psi-bc-cur { color: var(--text-2, var(--color-text-2)); font-weight: 500; }
.psi-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.psi-badge { display: inline-block; padding: .2rem .75rem; font-size: var(--fs-2xs, .68rem); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-radius: 999px; line-height: 1.7; }
.psi-badge--new         { background: rgba(var(--color-accent-rgb), .1);  color: var(--color-accent-text); border: 1px solid rgba(var(--color-accent-rgb), .22); }
.psi-badge--sale        { background: rgba(220,38,38,.07);  color: #dc2626; border: 1px solid rgba(220,38,38,.18); }
.psi-badge--feat        { background: rgba(var(--color-primary-rgb), .07);   color: var(--color-primary); border: 1px solid rgba(var(--color-primary-rgb), .15); }
.psi-badge--featured    { background: rgba(var(--color-accent-rgb), .1);  color: var(--color-accent-text); border: 1px solid rgba(var(--color-accent-rgb), .28); }
.psi-badge--best-seller { background: rgba(234,88,12,.08);  color: #c2580a; border: 1px solid rgba(234,88,12,.22); }
.psi-badge--new-arrival { background: rgba(var(--color-accent-rgb), .1);  color: var(--color-accent-text); border: 1px solid rgba(var(--color-accent-rgb), .22); }
.psi-name { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; color: var(--text, var(--color-text)); line-height: 1.2; letter-spacing: -.025em; margin: 0; overflow-wrap: break-word; word-break: break-word; }
html[dir="rtl"] .psi-name { font-family: var(--font-arabic); letter-spacing: 0; line-height: 1.35; }
.psi-price-block { padding: 18px 20px; background: #ffffff; border: 1px solid var(--border); border-inline-start: 3px solid var(--color-accent); border-radius: var(--r-md); box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.psi-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.psi-price__now { font-size: clamp(1.85rem, 3.2vw, 2.3rem); font-weight: 700; color: var(--color-primary); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.025em; transition: color 200ms; }
.psi-price__was { font-size: 1rem; color: var(--text-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.psi-short-desc { font-size: var(--fs-base, 1rem); color: var(--text-2); line-height: 1.75; margin: 0; }
.psi-meta { display: flex; flex-direction: column; }
.psi-meta-row { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-sm); padding: 9px 0; border-bottom: 1px solid rgba(229,231,235,.7); }
.psi-meta-row:last-child { border-bottom: none; }
.psi-meta-label { color: var(--text); min-width: 90px; font-weight: bold; flex-shrink: 0; padding-top: 1px; }
.psi-meta-val { color: var(--text); font-weight: 500; flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.psi-stock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; padding: .25rem .7rem; border-radius: 999px; }
.psi-stock--in  { background: rgba(34,197,94,.08);  color: #16a34a; }
.psi-stock--out { background: rgba(107,114,128,.08); color: var(--text-muted); }
.psi-stock--low { background: rgba(245,158,11,.08);  color: #d97706; }

@media (max-width: 991px) {
    .psi { gap: 18px; }
    .psi-name { font-size: clamp(1.35rem, 5vw, 1.75rem); }
    .psi-price__now { font-size: clamp(1.6rem, 5vw, 2rem); }
    .psi-price-block { padding: 14px 16px; }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT VARIANT SELECTORS (.psv)
   Selected: solid maroon fill (pills) / maroon ring (swatches)
══════════════════════════════════════════════════════════════ */

.psv { display: flex; flex-direction: column; gap: 28px; padding: 20px 0 12px; }

.psv-group { display: flex; flex-direction: column; gap: 14px; }

.psv-label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.psv-label-name {
    font-size: .7rem;
    font-weight: 700;
    color: var(--text, var(--color-text));
    text-transform: uppercase;
    letter-spacing: .1em;
}
.psv-label-name::after {
    content: ':';
    color: var(--border-dark, var(--color-border-strong));
    font-weight: 400;
    margin-inline-start: 1px;
}
.psv-label-sel {
    font-size: var(--fs-sm, .8125rem);
    font-weight: 600;
    color: var(--color-primary);
    text-transform: none;
    letter-spacing: 0;
}

.psv-options { display: flex; flex-wrap: wrap; gap: 10px; }

.psv-opt {
    cursor: pointer;
    border: 1.5px solid var(--border, var(--color-border));
    border-radius: var(--r-sm, 8px);
    background: #ffffff;
    transition:
        border-color 150ms ease,
        background   150ms ease,
        color        150ms ease,
        box-shadow   160ms ease,
        transform    130ms ease;
    touch-action: manipulation;
}
.psv-opt.is-unavailable {
    opacity: .3;
    cursor: not-allowed;
    text-decoration: line-through;
}
.psv-opt:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.psv-opt:active:not(.is-unavailable) { transform: scale(.95); }

.psv-opt--pill {
    padding: .5rem 1.2rem;
    font-size: var(--fs-sm, .8125rem);
    font-weight: 500;
    color: var(--text-2, #374151);
    min-width: 52px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .01em;
    background: rgba(var(--color-primary-rgb), .07);
    border-color: var(--color-primary);
}

.psv-opt--pill:hover:not(.is-selected):not(.is-unavailable) {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--white, #ffffff);
}

.psv-opt--pill.is-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), .22);
}
.psv-opt--pill.is-selected:hover:not(.is-unavailable) {
    background: var(--color-primary-active);
    border-color: var(--color-primary-active);
}

.psv-opt--color {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
}
.psv-color-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: block;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.psv-opt--color:hover:not(.is-selected):not(.is-unavailable) {
    border-color: var(--color-primary);
    transform: scale(1.1);
}

.psv-opt--color.is-selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1.5px rgba(var(--color-primary-rgb), .25),
                0 4px 12px rgba(var(--color-primary-rgb), .16);
}

.psv-unavail {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-xs, .75rem);
    color: #dc2626;
    padding: 9px 14px;
    background: rgba(220, 38, 38, .04);
    border: 1px solid rgba(220, 38, 38, .14);
    border-radius: var(--r-sm, 8px);
}

/* ══════════════════════════════════════════════════════════════
   ADD TO CART (.psatc)
   Quantity stepper + maroon CTA + wishlist + loading states
══════════════════════════════════════════════════════════════ */

.psatc { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }

.psatc-row { display: flex; align-items: stretch; gap: 10px; }

.psatc-qty {
    display: flex; align-items: center;
    border: 1.5px solid var(--border, var(--color-border));
    border-radius: var(--r-sm, 8px);
    overflow: hidden; background: #ffffff; flex-shrink: 0;
    transition: border-color 150ms;
}
.psatc-qty:focus-within { border-color: var(--color-primary); }
.psatc-qty-btn {
    width: 44px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted, #6B7280); transition: background 140ms, color 140ms;
    touch-action: manipulation;
}
.psatc-qty-btn:hover  { background: rgba(var(--color-primary-rgb), .08); color: var(--color-primary); }
.psatc-qty-btn:active { background: rgba(var(--color-primary-rgb), .14); }
.psatc-qty-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.psatc-qty-inp {
    width: 44px; text-align: center; border: none; outline: none;
    font-size: .95rem; font-weight: 600; color: var(--text, var(--color-text));
    background: transparent; padding: 0;
    -moz-appearance: textfield;
}
.psatc-qty-inp::-webkit-inner-spin-button,
.psatc-qty-inp::-webkit-outer-spin-button { -webkit-appearance: none; }

.psatc-btn {
    flex: 1; min-height: 52px;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--color-primary); color: #fff;
    border: none; border-radius: var(--r-sm, 8px);
    font-size: .92rem; font-weight: 600; letter-spacing: .04em;
    cursor: pointer; position: relative; overflow: hidden;
    transition: background 220ms ease, transform 140ms ease, box-shadow 220ms ease;
    touch-action: manipulation;
}
.psatc-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(105deg,
        transparent 35%,
        rgba(var(--color-primary-rgb), .2) 50%,
        transparent 65%);
    transform: translateX(-100%);
    transition: transform 500ms ease;
    pointer-events: none;
}
.psatc-btn:hover:not(:disabled):not(.psatc-btn--oos)::before {
    transform: translateX(100%);
}
.psatc-btn:hover:not(:disabled):not(.psatc-btn--oos) {
    background: var(--color-primary-active);
    box-shadow: 0 8px 28px rgba(var(--color-primary-rgb), .38);
    transform: translateY(-1px);
}
.psatc-btn:active:not(:disabled) { transform: translateY(0) scale(.98); box-shadow: none; }
.psatc-btn--oos,
.psatc-btn:disabled {
    background: var(--border-dark, var(--color-border-strong)); cursor: not-allowed;
    box-shadow: none; transform: none; color: var(--text-muted, #6B7280);
}
.psatc-btn--oos::before,
.psatc-btn:disabled::before { display: none; }
.psatc-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.psatc-wish {
    flex-shrink: 0;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--r-sm, 8px);
    background: #ffffff;
    color: var(--color-primary);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease,
                box-shadow 200ms ease, transform 140ms ease;
    touch-action: manipulation;
}
.psatc-wish:hover:not(.is-wishlisted) {
    background: rgba(var(--color-primary-rgb), .06);
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), .16);
    transform: translateY(-1px);
}
.psatc-wish.is-wishlisted {
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), .28);
}
.psatc-wish.is-wishlisted .psatc-wish-ico {
    fill: currentColor;
    stroke: none;
}
.psatc-wish.is-wishlisted:hover {
    background: var(--color-primary-active);
    transform: translateY(-1px);
}
.psatc-wish:active { transform: scale(.93) !important; box-shadow: none !important; }
.psatc-wish:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.psatc-btn.is-loading { pointer-events: none; }
.psatc-btn.is-loading .psatc-btn-lbl,
.psatc-btn.is-loading .psatc-btn-ico { opacity: 0; }
.psatc-btn.is-loading .psatc-btn-spin { opacity: 1; }
.psatc-btn.is-done  { background: #16a34a; }
.psatc-btn.is-done:hover  { background: #15803d; }
.psatc-btn.is-error { background: #dc2626; }

.psatc-btn-spin {
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff; border-radius: 50%;
    opacity: 0; transition: opacity 140ms;
    animation: psatc-spin .7s linear infinite;
}
@keyframes psatc-spin { to { transform: rotate(360deg); } }

.psatc-hint {
    display: flex; align-items: center; gap: 7px;
    font-size: var(--fs-xs, .75rem); color: var(--color-primary);
    padding: 9px 14px;
    background: rgba(var(--color-primary-rgb), .06);
    border: 1px solid rgba(var(--color-primary-rgb), .18);
    border-radius: var(--r-sm, 8px);
}

.psatc-toast {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: var(--r-sm, 8px);
    font-size: var(--fs-sm, .8125rem); font-weight: 500;
    transition: opacity 200ms ease;
}
.psatc-toast.is-ok  { background: rgba(34,197,94,.08);  color: #16a34a; border: 1px solid rgba(34,197,94,.18); }
.psatc-toast.is-err { background: rgba(220,38,38,.06); color: #dc2626; border: 1px solid rgba(220,38,38,.15); }
.psatc-toast-ico { flex-shrink: 0; }
.psatc-toast-ico--ok  { display: none; }
.psatc-toast-ico--err { display: none; }
.psatc-toast.is-ok  .psatc-toast-ico--ok  { display: block; }
.psatc-toast.is-err .psatc-toast-ico--err { display: block; }

@media (max-width: 480px) {
    .psatc-btn { font-size: .85rem; min-height: 50px; }
    .psatc-qty-btn { height: 50px; }
    .psatc-wish { width: 50px; height: 50px; }
}

/* Very small phones (≤ 360px): tighten qty stepper to give cart
   button enough room for 2-line text in any language. */
@media (max-width: 360px) {
    .psatc-qty-btn { width: 38px; }
    .psatc-qty-inp { width: 32px; font-size: .88rem; }
    .psatc-wish { width: 44px; height: 44px; }
    .psatc-btn { min-height: 44px; font-size: .8rem; }
    .psatc-row { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .psatc-btn, .psatc-qty-btn { transition: none !important; }
    .psatc-btn::before { display: none; }
    .psatc-btn-spin { animation-duration: 1500ms; }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT TABS (.pstabs)
   Description / shipping / reviews
══════════════════════════════════════════════════════════════ */

.pstabs { margin-top: 0; }

.pstabs-nav {
    display: flex; align-items: stretch;
    border-bottom: 2px solid var(--border, var(--color-border));
    gap: 0; overflow-x: auto;
    scrollbar-width: none;
}
.pstabs-nav::-webkit-scrollbar { display: none; }

.pstabs-tab {
    padding: .85rem 1.5rem; background: none; border: none;
    font-size: .875rem; font-weight: 500;
    color: var(--text-muted, #6B7280);
    cursor: pointer; position: relative;
    white-space: nowrap; transition: color 150ms ease;
    touch-action: manipulation;
    flex-shrink: 0; min-height: 52px;
    display: inline-flex; align-items: center;
}
.pstabs-tab::after {
    content: ''; position: absolute;
    bottom: -2px; left: 0; right: 0; height: 2px;
    background: var(--color-primary); transform: scaleX(0);
    transition: transform 200ms ease;
}
.pstabs-tab:hover { color: var(--text-2, var(--color-text-2)); }
.pstabs-tab.is-active { color: var(--color-primary); font-weight: 600; }
.pstabs-tab.is-active::after { transform: scaleX(1); }
.pstabs-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.pstabs-panels { padding: 36px 0; }
.pstabs-panel { display: none; }
.pstabs-panel.is-active { display: block; animation: pstabs-fade 220ms ease; }
@keyframes pstabs-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pstabs-prose {
    font-size: var(--fs-base, 1rem); color: var(--text-2, var(--color-text-2));
    line-height: 1.8;
    max-width: 72ch;
    /* Prevent any text node from overflowing on narrow screens */
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}
.pstabs-prose p  { margin-bottom: 1rem; }
.pstabs-prose h2 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 .75rem; color: var(--text, var(--color-text)); }
.pstabs-prose h3 { font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 .6rem;  color: var(--text, var(--color-text)); }
.pstabs-prose ul,
.pstabs-prose ol { padding-inline-start: 1.5rem; margin-bottom: 1rem; }
.pstabs-prose li { margin-bottom: .35rem; }
.pstabs-prose a  { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.pstabs-prose a:hover { color: var(--color-primary-hover); }
.pstabs-prose strong  { font-weight: 700; color: var(--text, var(--color-text)); }
.pstabs-prose em      { font-style: italic; }
.pstabs-prose u       { text-underline-offset: 3px; }

/* ── Rich-HTML overflow protection ──────────────────────────────
   WYSIWYG editors (TinyMCE, CKEditor, etc.) output images, tables,
   iframes, and embeds that may have fixed px widths set inline.
   These rules ensure nothing bleeds past the prose container on
   any viewport. The table rule keeps <table> scrollable (rather
   than scaling unreadably small) while images/video scale down. */
.pstabs-prose img,
.pstabs-prose video,
.pstabs-prose iframe,
.pstabs-prose embed,
.pstabs-prose object {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-sm, 8px);
}

/* Tables: block + overflow-x:auto creates an inner scroll region
   so the prose container never widens beyond its parent. */
.pstabs-prose table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    font-size: .875rem;
    margin-bottom: 1rem;
}
.pstabs-prose th,
.pstabs-prose td {
    padding: .5rem .75rem;
    border: 1px solid var(--border, var(--color-border));
    white-space: normal;
    word-break: break-word;
    min-width: 80px;
}
.pstabs-prose thead th {
    background: var(--bg, #F5F6F8);
    font-weight: 600;
}

/* Pre / code: pre-wrap so long lines soft-wrap on mobile */
.pstabs-prose pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--bg, #F5F6F8);
    padding: 1rem;
    border-radius: var(--r-sm, 8px);
    font-size: .875rem;
    margin-bottom: 1rem;
}
.pstabs-prose code {
    background: var(--bg, #F5F6F8);
    padding: .15em .35em;
    border-radius: 4px;
    font-size: .875em;
    word-break: break-all;
}
.pstabs-prose pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
}

/* Figure / figcaption */
.pstabs-prose figure {
    max-width: 100%;
    margin: 1rem 0;
}
.pstabs-prose figcaption {
    font-size: var(--fs-xs, .75rem);
    color: var(--text-muted, #6B7280);
    margin-top: .4rem;
    text-align: center;
}

/* Blockquote */
.pstabs-prose blockquote {
    border-inline-start: 3px solid var(--color-accent);
    margin-inline-start: 0;
    padding-inline-start: 1rem;
    color: var(--text-2, var(--color-text-2));
    font-style: italic;
    margin-bottom: 1rem;
}

.pstabs-empty { color: var(--text-muted, #6B7280); font-size: var(--fs-sm, .8125rem); }

.pstabs-ship-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px; margin-bottom: 20px;
}
.pstabs-ship-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px; border-radius: var(--r-md, 12px);
    background: #ffffff; border: 1px solid var(--border, var(--color-border));
    transition: border-color 180ms, box-shadow 180ms;
}
.pstabs-ship-item:hover {
    border-color: rgba(var(--color-primary-rgb), .35);
    box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), .1);
}
.pstabs-ship-ico {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: var(--r-sm, 8px); background: rgba(var(--color-accent-rgb), .08);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-accent-dark);
}
.pstabs-ship-body { display: flex; flex-direction: column; gap: 4px; }
.pstabs-ship-body strong { font-size: var(--fs-sm, .8125rem); font-weight: 600; color: var(--text, var(--color-text)); }
.pstabs-ship-body span   { font-size: var(--fs-xs, .75rem); color: var(--text-muted, #6B7280); }

.pstabs-ship-note {
    font-size: var(--fs-sm, .8125rem); color: var(--text-2, var(--color-text-2));
    line-height: 1.8;
    padding: 12px 16px; background: #ffffff;
    border-radius: var(--r-sm, 8px);
    border: 1px solid var(--border, var(--color-border));
    border-inline-start: 3px solid var(--color-accent);
    margin: 0;
}

.pstabs-rev-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px; padding: 48px 20px; text-align: center;
    color: var(--text-muted, #6B7280); font-size: var(--fs-sm, .8125rem);
}
.pstabs-rev-btn {
    padding: .55rem 1.4rem; border-radius: var(--r-sm, 8px);
    background: none; border: 1.5px solid var(--color-primary);
    color: var(--color-primary); font-size: var(--fs-sm, .8125rem); font-weight: 600;
    cursor: pointer; min-height: 44px;
    transition: background 150ms ease, color 150ms ease,
                box-shadow 180ms ease, transform 140ms ease;
}
.pstabs-rev-btn:hover {
    background: var(--color-primary); color: #fff;
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), .2);
    transform: translateY(-1px);
}
.pstabs-rev-btn:active { transform: translateY(0) scale(.98); }
.pstabs-rev-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .pstabs-tab::after, .pstabs-tab, .pstabs-rev-btn { transition: none !important; transform: none !important; }
    .pstabs-panel.is-active { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   RELATED PRODUCTS (.psr)
   Explicit breakpoint grid — 4 cols desktop, 2 cols tablet/mobile.
   Styles formerly inline in related.blade.php moved here so the
   cascade is traceable and the Blade file stays markup-only.
══════════════════════════════════════════════════════════════ */

.psr {
    margin-top: 72px;
    padding-top: 56px;
    border-top: 1px solid var(--border, var(--color-border));
}

.psr-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}

.psr-title {
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    font-weight: 700;
    color: var(--color-primary);
    font-family: var(--font-serif);
    letter-spacing: -.01em;
    white-space: nowrap;
    margin: 0;
    line-height: 1.2;
}

html[dir="rtl"] .psr-title {
    font-family: var(--font-arabic);
    letter-spacing: 0;
}

.psr-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(var(--color-accent-rgb), .4), transparent);
}

[dir="rtl"] .psr-line {
    background: linear-gradient(to left, rgba(var(--color-accent-rgb), .4), transparent);
}

/* Desktop: 4 explicit columns — cards always fill the full row */
.psr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.psr-item { display: flex; flex-direction: column; }

/* Tablet (993px – 768px): 2 columns, comfortable card width */
@media (max-width: 992px) {
    .psr { margin-top: 56px; padding-top: 40px; }
    .psr-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* Mobile (≤ 576px): 2 columns still work; tighten gap */
@media (max-width: 576px) {
    .psr { margin-top: 40px; padding-top: 28px; }
    .psr-title { font-size: 1.15rem; }
    .psr-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .psr-header { margin-bottom: 20px; }
}

/* Very small phones (≤ 300px): single column so cards aren't squished */
@media (max-width: 300px) {
    .psr-grid { grid-template-columns: 1fr; }
}