/* Product page styles (was an inline <style> in store/show.blade.php). */
.sticky-icon { display: none; }
.pd-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem 0 1.2rem; }
.pd-crumb { display: flex; align-items: center; gap: 6px; font-size: .9rem; color: #7F878D; }
.pd-crumb a { color: #7F878D; text-decoration: none; }
.pd-crumb strong { color: #660099; font-weight: 700; }

/* Gallery */
.pd-gallery { position: relative; }
.pd-gal-nav { position: absolute; top: 45%; width: 38px; height: 38px; border-radius: 50%; border: none; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); color: #2b2b2b; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.pd-gal-nav:focus-visible { outline: 2px solid #660099; }
.pd-gal-prev { inset-inline-start: 12px; }
.pd-gal-next { inset-inline-end: 12px; }

.lg__image { position: relative; }

/* Design-customization popup — the interior (stage/tools/panes) is the embedded
   Revinn Designer tool's own scoped styles (see the #rv block below); only the
   outer shell (backdrop/panel/header/footer chrome) is styled here. */
/* The panel itself no longer caps its own height/scrolls internally (see below) — this
   outer overlay is the actual scroll container now, so a panel taller than the
   viewport just scrolls with the page instead of being boxed into an inner scrollbar. */
.pd-mockup-modal { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.pd-mockup-modal__backdrop { position: absolute; inset: 0; background: rgba(20,16,24,.55); }
.pd-mockup-modal__panel { position: relative; z-index: 1; width: 100%; max-width: min(1220px, 94vw); margin-block: auto; background: #fff; border-radius: 16px; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.pd-mockup-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #eee; flex: 0 0 auto; }
.pd-mockup-modal__header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.pd-mockup-modal__close { width: 32px; height: 32px; border: none; background: #f3f1f6; border-radius: 50%; font-size: 1.2rem; line-height: 1; color: #5f5f66; cursor: pointer; }
.pd-mockup-modal__close:hover { background: #efe0f7; color: #660099; }
.pd-mockup-modal__body { flex: 1 1 auto; }
/* Sticky to the bottom of the viewport (not just the panel) — with the panel no longer
   height-capped, "تم" would otherwise end up wherever the last control happens to land,
   possibly a long scroll away. */
.pd-mockup-modal__footer { flex: 0 0 auto; position: sticky; bottom: 0; padding: 12px 18px; border-top: 1px solid #eee; background: #fff; border-radius: 0 0 16px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-mockup-modal__note { margin: 0; font-size: .74rem; color: #8a8a90; flex: 1 1 220px; }
.pd-mockup-modal__footer .btn { min-width: 140px; flex: 0 0 auto; }
.product__images .small__images .image.active { border: 2px solid #660099 !important; }

/* ===== Embedded Revinn Designer — every selector below is scoped under #rv so it
   can't leak into (or be overridden by) the rest of the page's CSS. Custom
   properties are namespaced --rv-* for the same reason. Font: reuses the site's
   own hosted DinNextLTArabic (main.css) instead of the tool's original embedded
   base64 copy. ===== */
#rv {
    --rv-purple: #660099; --rv-pink: #e8177a; --rv-ink: #1d1d1f; --rv-muted: #8a8590;
    --rv-line: #ececef; --rv-soft: #f6f6f8;
    --rv-font: "DinNextLTArabic", Tahoma, Arial, sans-serif;
    max-width: 820px; margin: 0 auto; padding: 12px 12px 24px;
    background: #fff; color: var(--rv-ink); font-family: var(--rv-font); font-size: 16px; line-height: 1.5;
}
#rv, #rv *, #rv *::before, #rv *::after { box-sizing: border-box; }
#rv button, #rv input { font: inherit; }
#rv button { cursor: pointer; }

#rv .board { position: relative; background: var(--rv-soft); border-radius: 16px; padding: clamp(10px,2.5vw,22px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
#rv #cv { display: block; max-width: 100%; max-height: min(46vh,440px); height: auto; touch-action: none; cursor: grab; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
#rv #cv.drag { cursor: grabbing; }
#rv .board.clear #cv { background: repeating-conic-gradient(#fff 0 25%,#eeeef1 0 50%) 0 0/16px 16px; }
#rv .tag { font-size: .8rem; color: var(--rv-muted); font-variant-numeric: tabular-nums; }

#rv .resize { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
#rv .resize[hidden] { display: none; }
#rv .resize input { flex: 1; accent-color: var(--rv-pink); }
#rv .round { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rv-line); background: #fff; color: var(--rv-ink); font-size: 1.1rem; line-height: 1; padding: 0; flex: none; }
#rv .link { border: 0; background: none; color: var(--rv-pink); font-weight: 500; padding: 6px; }

#rv .tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(0,1fr)); gap: 4px; margin-top: 10px; border-top: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line); padding: 6px 0; }
#rv .tools[data-locked] .t-tpl { display: none; }
#rv .tool { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; color: var(--rv-muted); padding: 6px 2px; border-radius: 10px; font-size: .78rem; font-weight: 500; }
#rv .tool svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#rv .tool[aria-selected="true"] { color: var(--rv-purple); background: var(--rv-soft); }

#rv .pane { padding: 12px 2px 4px; }
#rv .pane[hidden] { display: none; }
#rv .row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
#rv .row::-webkit-scrollbar { display: none; }
#rv .row + .row { margin-top: 8px; }
/* Bootstrap's own .row (bundled in dist/app.css for the grid elsewhere on
   this page) sets width:100% on every direct child by default, expecting
   .col-* to override it — these chip rows have no .col-* classes, so
   every chip was silently stretched to the full row width and stacked
   one per line instead of sitting side by side. */
#rv .row > * { width: auto; max-width: none; flex-shrink: 0; }
#rv .chip { flex: none; border: 1px solid var(--rv-line); background: #fff; color: var(--rv-ink); border-radius: 999px; padding: 7px 14px; font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
#rv .chip[aria-pressed="true"] { background: var(--rv-purple); border-color: var(--rv-purple); color: #fff; }
#rv .chip--icon { display: inline-flex; align-items: center; gap: 6px; }
#rv .chip--icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
#rv .chip--icon img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
#rv .chip-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
#rv .chip[aria-pressed="true"] .chip-dot { border-color: rgba(255,255,255,.6); }
#rv .in { width: 100%; border: 1px solid var(--rv-line); background: var(--rv-soft); color: var(--rv-ink); border-radius: 10px; padding: 10px 12px; }
#rv .in:focus { outline: 2px solid var(--rv-pink); outline-offset: 1px; border-color: transparent; }
#rv .ltr { direction: ltr; text-align: left; }
#rv .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#rv .color { display: flex; align-items: center; gap: 8px; }
#rv .color input[type=color] { width: 40px; height: 40px; border: 1px solid var(--rv-line); border-radius: 10px; padding: 0; background: none; flex: none; cursor: pointer; }
#rv .color .in { direction: ltr; text-align: left; text-transform: uppercase; font-variant-numeric: tabular-nums; }
#rv .color span { font-size: .85rem; color: var(--rv-muted); min-width: 44px; }
#rv .in.bad { outline: 2px solid #d33; }
#rv .file { position: absolute; width: 1px; height: 1px; opacity: 0; }
#rv .upload { display: block; text-align: center; border: 1.5px dashed #d8d3dd; border-radius: 12px; padding: 14px; color: var(--rv-purple); font-weight: 500; cursor: pointer; }

#rv .chip:focus-visible, #rv .tool:focus-visible, #rv .round:focus-visible, #rv .link:focus-visible, #rv .upload:focus-visible, #rv .btn:focus-visible { outline: 2px solid var(--rv-pink); outline-offset: 2px; }

#rv .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
#rv .top .toast { flex: 1; text-align: center; }
#rv .sides { display: flex; background: var(--rv-soft); border-radius: 12px; padding: 3px; flex: none; }
#rv .sides[hidden] { display: none; }
/* No design template on the product: show only the notice, none of the tool UI. */
#rv[data-shape=""] > :not(.pd-tpl-unset) { display: none !important; }
#rv .pd-tpl-unset { margin: 0; padding: 28px 18px; text-align: center; color: #c0392b; background: #fdf2f1; border: 1px dashed #e6b4ae; border-radius: 12px; font-weight: 600; }
#rv .side { border: 0; background: none; color: var(--rv-muted); padding: 7px 14px; border-radius: 9px; font-size: .88rem; font-weight: 500; }
#rv .side[aria-selected="true"] { background: #fff; color: var(--rv-purple); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
#rv .side:focus-visible { outline: 2px solid var(--rv-pink); outline-offset: 2px; }
/* Icon-only buttons weren't self-explanatory (download vs. 3D preview look
   identical at a glance) — labelled the same way the tabs below already
   are: icon above a short caption, in a proper tap-sized bordered button
   instead of a bare 40x40 square. */
#rv .icon { min-width: 64px; height: 52px; border-radius: 12px; border: 1px solid var(--rv-line); background: #fff; color: var(--rv-purple); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 10px; flex: none; }
#rv .icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#rv .icon span { font-size: .68rem; font-weight: 600; white-space: nowrap; }
#rv .icon:hover { border-color: var(--rv-purple); }
#rv .icon[aria-pressed="true"] { background: var(--rv-purple); border-color: var(--rv-purple); color: #fff; }
#rv .top .icon + .icon { margin-inline-start: -2px; }
#rv #v3d { width: 100%; height: min(46vh,420px); touch-action: none; cursor: grab; border-radius: 10px; overflow: hidden; }
#rv #v3d[hidden] { display: none; }
#rv #v3d canvas { display: block; width: 100% !important; height: 100% !important; }
#rv #v3ui { padding: 12px 2px 0; }
#rv #v3ui[hidden], #rv #v3surf[hidden], #rv #v3ref[hidden] { display: none; }
#rv.is3d #cv, #rv.is3d .tools, #rv.is3d .pane, #rv.is3d #sides { display: none !important; }
#rv .icon:focus-visible { outline: 2px solid var(--rv-pink); outline-offset: 2px; }
#rv .toast { margin: 0; font-size: .82rem; color: var(--rv-muted); }
#rv .soc { display: flex; gap: 8px; margin-top: 8px; }
#rv .soc input[type=color] { width: 44px; height: 44px; border: 1px solid var(--rv-line); border-radius: 10px; padding: 0; background: none; flex: none; cursor: pointer; }
#rv .chip.plat { display: flex; align-items: center; gap: 6px; }
#rv .chip.plat svg { width: 16px; height: 16px; fill: currentColor; }
#rv .crow { display: flex; align-items: center; gap: 8px; }
#rv .crow + .crow { margin-top: 10px; }
#rv .crow > span { font-size: .85rem; color: var(--rv-muted); width: 42px; flex: none; }
#rv .sws { display: flex; gap: 7px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px; }
#rv .sw { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #dcd8e0; padding: 0; flex: none; }
#rv .sw[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rv-purple); }
#rv .sw:focus-visible { outline: 2px solid var(--rv-pink); outline-offset: 3px; }
#rv .crow input[type=color] { width: 34px; height: 34px; border: 1px solid var(--rv-line); border-radius: 50%; padding: 0; background: none; flex: none; cursor: pointer; overflow: hidden; }
#rv .crow input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
#rv .crow input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
#rv .crow .hex { width: 86px; flex: none; direction: ltr; text-align: left; text-transform: uppercase; font-variant-numeric: tabular-nums; padding: 7px 9px; }
#rv .crow .eyedrop { width: 34px; height: 34px; flex: none; border: 1px solid var(--rv-line); border-radius: 50%; background: var(--rv-soft); color: var(--rv-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .9rem; transition: color .15s, border-color .15s; }
#rv .crow .eyedrop:hover, #rv .crow .eyedrop.is-active { color: #660099; border-color: #660099; }
#rv .frs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
#rv .frs[hidden] { display: none; }
#rv .frs label { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--rv-muted); }
#rv .frs input { accent-color: var(--rv-pink); width: 100%; }
#rv .curve { margin-top: 8px; }
#rv .curve[hidden] { display: none; }
#rv .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
#rv .btn { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; padding: 12px; font-weight: 700; color: #fff; text-decoration: none; }
#rv .btn.p { background: var(--rv-purple); }
#rv .btn.k { background: var(--rv-pink); }
#rv .toast { min-height: 1.2em; margin: 6px 0 0; font-size: .82rem; color: var(--rv-muted); text-align: center; }

/* Header */
.pd-col .product__header { inline-size: 100%; margin-block-end: .5rem; margin-block-start: .25rem; }
.pd-col .product__header .title { align-items: flex-start; gap: .85rem; }
.pd-col .product__header h1 { font-size: 1.6rem; margin-block-end: .1rem; line-height: 1.25; }
/* A short keyword/subtitle line under the title — was an inline style with no
   spacing of its own, so on narrower columns it visually collided with the
   price block floating beside it (two unrelated pieces of text landing on
   the same row by coincidence). The margin-top clears that reliably. */
.pd-footnote { color: #767676; font-size: .86rem; line-height: 1.5; margin-top: 6px; }
/* The price reads as a distinct, self-contained badge now (soft tint, its
   own rounded box) instead of two lines of plain text floating at the start
   side of the title — that's what made it look disconnected/misaligned
   next to the title and subtitle. */
.pd-hprice { text-align: end; flex-shrink: 0; background: #f9f5fc; border-radius: 12px; padding: .5rem .9rem; }
.pd-hprice__total { font-size: 1.7rem; font-weight: 800; color: #660099; line-height: 1.1; white-space: nowrap; transition: color .3s ease; }
.pd-hprice__total.is-updating { color: #b87cd6; }
.pd-hprice__total small { font-size: .9rem; font-weight: 700; }
.pd-hprice__note { font-size: .72rem; color: #767676; white-space: nowrap; margin-top: 2px; }
@media (max-width: 575.98px) {
    .pd-col .product__header .title { flex-wrap: wrap; }
    .pd-hprice { text-align: start; padding: .4rem .7rem; }
}
.pd-bnpl-trigger { display: flex; align-items: center; gap: 10px; width: 100%; margin: .5rem 0; padding: 10px 14px; border: 1px solid #e6d6ef; border-radius: 12px; background: #faf7fc; cursor: pointer; text-align: start; transition: border-color .15s, background .15s; }
.pd-bnpl-trigger:hover { border-color: #b87cd6; background: #f6eefc; }
.pd-bnpl-trigger[hidden] { display: none; }
.pd-bnpl-trigger__badges { display: flex; gap: 4px; flex-shrink: 0; }
.pd-bnpl-trigger__text { flex: 1; font-size: .84rem; color: #2b2b2b; }
.pd-bnpl-trigger__text b { color: #660099; font-weight: 800; }
.pd-bnpl-trigger > .fa-chevron-left { color: #b3a0c2; font-size: .8rem; }
.pd-bnpl-logo { height: 22px; width: auto; display: inline-block; vertical-align: middle; }
.pd-bnpl-modal .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pd-bnpl-modal .modal-header .btn-close { margin: 0; flex-shrink: 0; }
.pd-bnpl-modal .modal-title { font-weight: 800; color: #2b2b2b; font-size: 1.05rem; }
.pd-bnpl-accordion .accordion-button { gap: 10px; font-weight: 700; font-size: .88rem; color: #2b2b2b; }
.pd-bnpl-accordion .accordion-button:not(.collapsed) { background: #faf7fc; color: #660099; box-shadow: none; }
.pd-bnpl-accordion .accordion-button:focus { box-shadow: none; border-color: rgba(102,0,153,.25); }
.pd-bnpl-acc-label { flex: 1; }
.pd-bnpl-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.pd-bnpl-table th { color: #767676; font-weight: 600; text-align: start; padding: 4px 6px 8px; border-bottom: 1px solid #ececec; }
.pd-bnpl-table td { padding: 8px 6px; color: #2b2b2b; }
.pd-bnpl-table td b { color: #660099; }
.pd-meta { display: flex; align-items: center; gap: 16px; row-gap: 8px; flex-wrap: wrap; margin: .6rem 0 .9rem; padding-top: .6rem; border-top: 1px solid #f0f0f0; font-size: .84rem; color: #555; }
.pd-rating { display: inline-flex; align-items: center; gap: 6px; color: #2b2b2b; text-decoration: none; font-weight: 600; line-height: 1; }
.pd-rating:hover, .pd-rating:focus-visible { color: #660099; text-decoration: underline; }
.pd-rating i { color: #FFD522; font-size: .85rem; }
.pd-rating i.off { color: #e0e0e0; }
.pd-time { display: inline-flex; align-items: center; gap: 7px; line-height: 1.3; padding-inline-start: 16px; border-inline-start: 1px solid #e6e6e6; }
.pd-time i { color: #660099; font-size: 1rem; flex-shrink: 0; }
.pd-time b { color: #2b2b2b; font-weight: 700; }
.pd-express i { color: #e08a00; }
.pd-express-note { font-style: normal; color: #767676; font-size: .76rem; }

/* Option rows: label on the start side, controls beside it */
.pd-options, .pd-summary-box { border: 1px solid #dbdbdb; border-radius: 1rem; padding: .25rem 1rem; margin-block-end: .9rem; }
.pd-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; padding: .7rem 0; border-bottom: 1px solid #f0f0f0; }
.pd-row:last-child { border-bottom: none; }
.pd-row__label { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: .9rem; color: #2b2b2b; margin: 0; align-self: start; padding-top: .35rem; }
.pd-row__body { min-width: 0; }
.pd-i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #b9b3c1; color: #767676; font-size: .58rem; display: inline-flex; align-items: center; justify-content: center; font-style: normal; cursor: help; flex-shrink: 0; }
/* Grid, not flex-wrap: every chip in a row becomes the same width as its
   column (same technique already used for .qty-tiers below, which already
   looked right) instead of each chip sizing to its own label/icon — "مربع"
   and "دائري" and "قص مخصص" used to be three visibly different widths in
   the same row. minmax's floor keeps the old 7.5rem baseline size; auto-fit
   collapses unused columns so 2-3 short chips don't get stretched edge to
   edge on a wide panel. */
.opt-chips { display: grid; grid-template-columns: repeat(auto-fill, 8rem); gap: 8px; }
/* Uniform chips: same height, width now comes from the grid column above;
   the selected state uses an inset ring instead of a thicker border so
   nothing resizes. */
.opt-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 2.75rem; padding: .35rem .6rem; text-align: center; line-height: 1.2; border: 1px solid #dbdbdb; border-radius: 10px; background: #fff; color: #2b2b2b; font-size: .86rem; cursor: pointer; margin: 0; transition: border-color .15s, background .15s, box-shadow .15s; }
.opt-chip input, .qty-tier input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.opt-chip:hover { border-color: #b87cd6; }
.opt-chip:has(input:checked) { border-color: #660099; box-shadow: inset 0 0 0 1px #660099; background: #f6f1fa; color: #660099; font-weight: 600; }
.opt-chip:has(input:focus-visible), .qty-tier:has(input:focus-visible) { outline: 2px solid #660099; outline-offset: 2px; }
.swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; }
.sw-matte { background: #d9d9d9; } .sw-glossy { background: linear-gradient(135deg, #f7f7f7 0%, #bfbfbf 45%, #ffffff 60%, #a9a9a9 100%); } .sw-transparent { background: repeating-conic-gradient(#cfcfcf 0% 25%, #ffffff 0% 50%) 50% / 8px 8px; } .sw-kraft { background: #c8a97e; } .sw-default { background: #eaeaea; }
.shape-chip svg { width: 20px; height: 20px; fill: none; stroke: #2b2b2b; stroke-width: 1.7; flex-shrink: 0; }
.shape-chip:has(input:checked) svg { stroke: #660099; }

/* A spec with only one entered value: plain text, not a one-item chip/dropdown
   the customer has nothing real to choose from — see store/show.blade.php's
   feature_categories/otherFeatures/size+weight loops ($options->count() === 1). */
.pd-fixed-value { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 600; color: #2b2b2b; }
.pd-fixed-value svg { width: 18px; height: 18px; fill: none; stroke: #660099; stroke-width: 1.7; flex-shrink: 0; }

.pd-select { max-width: 220px; width: 100%; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; background-position: left 14px center; border: 1px solid #dbdbdb; border-radius: 10px; padding: .45rem .9rem; padding-inline-end: .9rem; padding-inline-start: 2.2rem; font-size: .9rem; color: #2b2b2b; }
[dir="ltr"] .pd-select { background-position: right 14px center; }
/* size | paper weight on one row */
.pd-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.pd-pair .pd-select { max-width: none; }
.pd-pair__label { margin: 0; font-weight: 600; font-size: .9rem; color: #2b2b2b; white-space: nowrap; padding-inline-start: 4px; }
@media (max-width: 575.98px) { .pd-pair { grid-template-columns: minmax(0, 1fr); gap: 8px; } .pd-pair__label { padding: 4px 0 0; } }
.pd-select:focus-visible { outline: 2px solid #660099; border-color: #660099; }

.qty-tiers { display: grid; grid-template-columns: repeat(auto-fill, 8rem); gap: 8px; }
.qty-tier { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; min-height: 5.4rem; padding: .5rem .4rem .45rem; border: 1px solid #dbdbdb; border-radius: 10px; background: #fff; cursor: pointer; margin: 0; transition: border-color .15s, background .15s, box-shadow .15s; }
.qty-tier:hover { border-color: #b87cd6; }
.qty-tier:has(input:checked) { border-color: #660099; box-shadow: inset 0 0 0 1px #660099; background: #f6f1fa; }
.qty-tier__qty { font-weight: 700; font-size: .9rem; color: #2b2b2b; line-height: 1.2; }
.qty-tier:has(input:checked) .qty-tier__qty { color: #660099; }
.qty-tier__unit-label { font-size: .66rem; font-weight: 500; color: #767676; }
.qty-tier__total { font-size: .78rem; font-weight: 600; color: #444; min-height: 1.2em; }
.qty-tier__unit { display: none; }
/* saving as a quiet green line inside the card: no floating badges, no overlap */
.qty-tier__save { font-size: .62rem; font-weight: 700; color: #1C9A0C; line-height: 1; min-height: .62rem; }
.qty-tier__save:empty { visibility: hidden; }
.qty-tier:has(input:checked) .qty-tier__save { color: #660099; }

.pd-dbody { margin-top: 8px; }
/* Express delivery toggle */

/* Segmented control for "upload a file / share a link", same width as the drop zone below it */
.pd-subtoggle { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; width: 100%; padding: 4px; background: #f3f1f6; border: 1px solid #e9e5ee; border-radius: 12px; margin-bottom: 10px; }
.pd-subtoggle label { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: .5rem .8rem; border-radius: 9px; font-size: .85rem; font-weight: 600; color: #5f5f66; cursor: pointer; margin: 0; white-space: nowrap; transition: background .18s, color .18s, box-shadow .18s; }
.pd-subtoggle label i { font-size: .95rem; color: #9a93a6; transition: color .18s; }
.pd-subtoggle label:hover { color: #660099; }
.pd-subtoggle label:hover i { color: #660099; }
.pd-subtoggle label:has(input:checked) { background: #fff; color: #660099; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px #e3d6ee; }
.pd-subtoggle label:has(input:checked) i { color: #660099; }
.pd-subtoggle label:has(input:focus-visible) { outline: 2px solid #660099; outline-offset: 1px; }
.pd-subtoggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
/* Spotlight for the AI logo-upload option — solid fill regardless of the
   checked state (it's promoted as a new feature, not just "selected"),
   unlike the other two tabs' plain light-background checked state.
   Matches (rather than exceeds) the specificity of the plain
   label:has(input:checked) rule above, so source order — this comes
   after — is what makes it win when this tab is also checked. */
.pd-subtoggle label.pd-subtoggle__featured,
.pd-subtoggle label.pd-subtoggle__featured:has(input:checked) { background: #660099; color: #fff; box-shadow: none; }
.pd-subtoggle label.pd-subtoggle__featured i,
.pd-subtoggle label.pd-subtoggle__featured:has(input:checked) i { color: #fff; }
.pd-subtoggle label.pd-subtoggle__featured:has(input:checked) { box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 0 0 1px #4d0073; }
.pd-upload { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; border: 1px dashed #b87cd6; border-radius: 10px; padding: .55rem .9rem; text-align: start; background: #faf7fc; cursor: pointer; margin: 0; transition: border-color .15s, background .15s; }
.pd-upload:hover, .pd-upload:has(input:focus-visible) { border-color: #660099; background: #f6f1fa; }
.pd-upload input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pd-upload__icon { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid #efe7f5; color: #660099; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
.pd-upload__title { font-weight: 600; color: #660099; font-size: .88rem; line-height: 1.25; }
.pd-upload__hint { font-size: .72rem; color: #767676; margin-top: 2px; }
.pd-files { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pd-file { display: flex; align-items: center; gap: 10px; background: #f5f5f5; border-radius: 10px; padding: 6px 10px; font-size: .82rem; }
.pd-file__thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #fff; border: 1px solid #e6e6e6; display: flex; align-items: center; justify-content: center; color: #660099; flex-shrink: 0; }
.pd-file__meta { flex: 1; min-width: 0; }
.pd-file__name { font-weight: 600; color: #2b2b2b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-file__size { color: #767676; }
.pd-file__remove { background: none; border: none; color: #c0392b; font-size: .8rem; cursor: pointer; padding: 4px 6px; }
.pd-link-input { width: 100%; background: #fff; border: 1px solid #dbdbdb; border-radius: 10px; padding: .55rem .9rem; font-size: .9rem; min-height: 2.6rem; }
#designLink .pd-link-input { min-height: 64px; }
.pd-link-input:focus-visible { outline: 2px solid #660099; }

/* Logo subtoggle "New" badge */
.pd-badge-new { display: inline-flex; align-items: center; font-size: .62rem; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 20px; background: #1C9A0C; color: #fff; margin-inline-start: 2px; }

/* Compact success line, replaces the upload box once a logo is on the product */
.pd-logo-success { display: flex; align-items: center; gap: 10px; background: #f0faf0; border: 1px solid #c9ecc9; border-radius: 10px; padding: .5rem .8rem; }
.pd-logo-success img { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid #e6e6e6; flex-shrink: 0; }
.pd-logo-success__text { flex: 1; font-weight: 600; color: #1C9A0C; font-size: .86rem; }
.pd-logo-success__change { background: none; border: none; color: #660099; font-weight: 600; font-size: .82rem; cursor: pointer; text-decoration: underline; padding: 4px 6px; }
.pd-logo-success__remove { color: #c0392b; }

.pd-error { color: #c0392b; font-size: .8rem; margin-top: 6px; font-weight: 600; }

/* Step 1 (have a design?) sits alone with breathing room; step 2 (how to
   share it) + its content panel are boxed together so they read as one
   connected unit instead of a flat list of unrelated buttons. */
.pd-design-gate { margin-bottom: 10px; }
.pd-design-panel { border: 1px solid #ece7f2; border-radius: 14px; padding: 10px; background: #fcfbfe; margin-bottom: 10px; }
.pd-design-panel .pd-subtoggle { background: #fff; }
.pd-design-none { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 10px; }
.pd-design-none .btn { width: 100%; }
.pd-design-none__whatsapp { display: inline-flex; align-items: center; gap: 6px; color: #767676; font-size: .8rem; font-weight: 600; text-decoration: none; padding: 4px; }
.pd-design-none__whatsapp i { color: #1C9A0C; }
.pd-design-none__whatsapp:hover { color: #660099; text-decoration: underline; }

/* Three parallel entry points for mockup-capable products (logo/stamp) —
   each just opens a focused popup (reusing .pd-mockup-modal, the same
   overlay pattern as the full designer) instead of revealing an inline
   panel. */
.pd-design-choice { display: flex; gap: 10px; margin-bottom: 10px; }
.pd-design-choice__btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 1rem .5rem; border: 1px solid #ece7f2; border-radius: 14px; background: #fcfbfe; cursor: pointer; font-weight: 700; font-size: .82rem; color: #3a3540; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pd-design-choice__btn i { font-size: 1.25rem; color: #660099; }
.pd-design-choice__btn:hover, .pd-design-choice__btn:focus-visible { border-color: #660099; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102,0,153,.12); outline: none; }
@media (max-width: 480px) { .pd-design-choice { flex-wrap: wrap; } .pd-design-choice__btn { flex: 1 1 calc(50% - 5px); font-size: .74rem; padding: .8rem .35rem; } .pd-design-choice__btn i { font-size: 1.1rem; } }
/* "Skip the design upload" picked: amber, not green — the design step is deferred, not done.
   (Doubled selector: this sits above the base .pd-design-status rule below, so it needs the
   higher specificity to win.) */
.pd-design-status.pd-design-status--pending { background: #fff8e8; border-color: #f3dfa3; }
.pd-design-status--pending i, .pd-design-status--pending .pd-design-status__text { color: #8a5a00; }
.pd-popup-panel { max-width: min(440px, 94vw); }
.pd-popup-body { padding: 18px; }
.pd-popup-choices { display: flex; flex-direction: column; gap: 10px; }
.pd-popup-choices .btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pd-design-status { display: flex; align-items: center; gap: 10px; background: #f0faf0; border: 1px solid #c9ecc9; border-radius: 10px; padding: .55rem .8rem; margin-bottom: 10px; }
.pd-design-status i { color: #1C9A0C; font-size: 1.1rem; flex-shrink: 0; }
.pd-design-status__text { flex: 1; font-weight: 600; color: #1C9A0C; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-design-status__edit { background: none; border: none; color: #660099; font-weight: 600; font-size: .82rem; cursor: pointer; text-decoration: underline; padding: 4px 6px; flex-shrink: 0; }
.pd-design-status__preview { background: none; border: none; color: #1C9A0C; font-weight: 600; font-size: .82rem; cursor: pointer; text-decoration: underline; padding: 4px 6px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; }
.pd-design-status__preview svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.pd-complete { display: flex; align-items: flex-start; gap: 10px; background: #eafaf1; border: 1px solid #b7ecd0; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.pd-complete i { color: #1C9A0C; font-size: 1.3rem; line-height: 1.3; flex-shrink: 0; }
.pd-complete b { display: block; color: #157a09; font-size: .92rem; margin-bottom: 2px; }
.pd-complete span { display: block; color: #2f6b28; font-size: .8rem; line-height: 1.5; }
.pd-form-errors { background: #fdecea; border: 1px solid #f3c1bb; color: #c0392b; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: .88rem; }
.pd-form-errors strong { display: block; margin-bottom: 4px; }
.pd-form-errors ul { margin: 0; padding-inline-start: 1.1rem; }

/* Summary box */
.pd-summary-box { background: #f6f1fa; border-color: #efe7f5; display: flex; align-items: center; gap: 12px; padding: .6rem .8rem; margin: 0 0 .6rem; border-radius: 12px; }
.pd-summary-box__thumb { width: 44px; height: 44px; border-radius: 10px; background: #fff; object-fit: contain; border: 1px solid #efe7f5; flex-shrink: 0; }
.pd-summary-box__body { flex: 1; min-width: 0; }
.pd-summary-box__title { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .82rem; color: #2b2b2b; }
.pd-summary-box__title i { color: #660099; }
.pd-summary-box__text { font-size: .8rem; color: #444; margin-top: 2px; line-height: 1.45; }
.pd-summary-box__price { flex-shrink: 0; text-align: center; padding-inline-start: 14px; border-inline-start: 1px solid #e6dcef; min-width: 6.5rem; }
.pd-price__total.is-updating { color: #b87cd6 !important; }
.pd-summary-box__price .pd-price__total { transition: color .3s ease; font-size: 2rem; font-weight: 800; color: #660099; line-height: 1.1; white-space: nowrap; }
.pd-summary-box__price .pd-price__cur { font-size: .95rem; font-weight: 700; margin-inline-start: 3px; }
.pd-summary-box__price .pd-price__note { font-size: .64rem; color: #767676; white-space: nowrap; }
.pd-summary-box__price .pd-price__unit { font-size: .66rem; color: #767676; min-height: 0; }
.pd-summary-box__price .pd-price__unit:empty, .pd-summary-box__price .pd-save:empty { display: none; }

/* Price + actions (under the gallery on desktop) */
.pd-actions { margin-top: 1.25rem; }
@media (min-width: 992px) {
    /* Keep image + price + buttons + WhatsApp inside one viewport: the hero scales with screen height. */
    .product__details-container form .start__content { position: sticky; top: 86px; align-self: flex-start; margin-block-end: 0; }
    .product__details-container form .start__content .product__images .lg__image { margin-block-end: .6rem; height: var(--pd-hero, clamp(220px, calc(100vh - 405px), 660px)) !important; width: 100% !important; max-width: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    /* Show the uploaded photo whole (no cropping/zooming) inside the full-width landscape hero. */
    .product__details-container form .start__content .product__images .lg__image { max-width: 100%; max-height: 800px; background: #faf8fc; border-radius: 16px; overflow: hidden; }
    .product__details-container form .start__content .product__images .lg__image img { width: 100%; height: 100%; object-fit: contain; }
    .product__details-container form .start__content .small__images { justify-content: flex-start; }
    .product__details-container form .start__content .small__images .image { inline-size: 3.75rem; block-size: 3.75rem; margin-block-end: .35rem; flex-shrink: 0; }
    .pd-actions { margin-top: .5rem; border: 1px solid #dbdbdb; border-radius: .8rem; padding: .45rem .75rem .55rem; }
    .pd-summary-box__price .pd-price__total { font-size: 1.9rem; }
    .pd-summary-box__thumb { width: 40px; height: 40px; }
    .pd-summary-box__title { font-size: .78rem; }
    .pd-summary-box__text { font-size: .76rem; }
    .pd-actions .pd-btns { gap: 6px; }
    .pd-actions .btn { height: 2.25rem; font-size: .8rem; gap: 5px; border-width: 1px; }
    .pd-actions .btn i { font-size: .85rem; }
}
.pd-save { display: inline-block; margin-top: 2px; background: #e8f6e5; color: #1C9A0C; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.pd-save:empty { display: none; }
.pd-actions .pd-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pd-actions .btn { width: 100%; margin: 0; gap: 7px; height: 2.9rem; font-size: .9rem; white-space: nowrap; padding: 0 .5rem; }
.pd-actions .btn.default_btn:hover { background: #660099; color: #fff; filter: brightness(1.15); }
.pd-actions .btn:focus-visible { outline: 2px solid #660099; outline-offset: 2px; }
.pd-whatsapp { display: inline-flex; align-items: center; justify-content: center; background: #178308; color: #fff; border: 1px solid #178308; border-radius: 30px; text-decoration: none; }
.pd-whatsapp:hover, .pd-whatsapp:focus-visible { color: #fff; background: #146c06; }
.pd-whatsapp i { font-size: 1.2rem; }
.pd-resolution-warning { margin-top: 8px; padding: 6px 10px; border-radius: 6px; background: #fff3cd; color: #664d03; font-size: .82rem; }

/* Trust bar */

.pd-desc { margin-block-end: 1rem; }
.pd-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #ececec; }
.pd-trust:empty { display: none; }
.pd-trust a { display: flex; align-items: center; gap: 10px; padding: .5rem .75rem; border: 1px solid #e6e6e6; border-radius: 10px; color: #2b2b2b; text-decoration: none; font-size: .8rem; line-height: 1.2; transition: border-color .15s, background .15s; }
.pd-trust a:hover { border-color: #b87cd6; background: #faf7fc; }
.pd-trust a:focus-visible { outline: 2px solid #660099; outline-offset: 2px; }
.pd-trust__icon { width: 32px; height: 32px; border-radius: 50%; background: #f6f1fa; color: #660099; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.pd-trust a > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-trust b { font-weight: 700; color: #660099; }
.pd-trust small { color: #767676; font-size: .68rem; }
.pd-desc { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #ececec; }
.pd-desc__title { font-size: .95rem; font-weight: 700; color: #2b2b2b; margin: 0 0 .4rem; }
.pd-desc .about_product { color: #555; font-size: .9rem; line-height: 1.75; max-height: calc(1.75em * 3); overflow: hidden; position: relative; }
.pd-desc .about_product::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1.6em; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); }
.pd-desc .about_product.is-open::after { display: none; }
.pd-desc .showMoreBtn { display: inline-block; margin-top: .3rem; font-size: .82rem; color: #660099; font-weight: 600; text-decoration: none; }
.pd-desc .showMoreBtn::after { content: ' \2304'; font-size: .7rem; }
.pd-desc .showMoreBtn:hover { text-decoration: underline; }
/* Admin-written description HTML: clear headings, short paragraphs, tidy bullet lists */
.pd-desc .about_product { font-size: .92rem; line-height: 1.85; }
.pd-desc .about_product h1, .pd-desc .about_product h2, .pd-desc .about_product h3, .pd-desc .about_product h4 { font-size: 1rem; font-weight: 700; color: #2b2b2b; margin: 1rem 0 .4rem; line-height: 1.5; }
.pd-desc .about_product h1:first-child, .pd-desc .about_product h2:first-child, .pd-desc .about_product h3:first-child { margin-top: 0; }
.pd-desc .about_product p { margin: 0 0 .75rem; }
.pd-desc .about_product ul, .pd-desc .about_product ol { margin: 0 0 .9rem; padding-inline-start: 1.25rem; }
.pd-desc .about_product li { margin-bottom: .35rem; padding-inline-start: .15rem; }
.pd-desc .about_product li::marker { color: #660099; font-weight: 700; }
.pd-desc .about_product strong, .pd-desc .about_product b { color: #2b2b2b; font-weight: 700; }
.pd-desc .about_product table { width: 100%; border-collapse: collapse; margin: 0 0 .9rem; font-size: .88rem; }
.pd-desc .about_product td, .pd-desc .about_product th { border: 1px solid #ececec; padding: .45rem .6rem; text-align: start; }
.pd-note .btn:focus-visible, .pd-sticky .btn:focus-visible, .showMoreBtn:focus-visible { outline: 2px solid #660099; outline-offset: 2px; }

/* Sticky mobile buy bar */
.pd-sticky { position: fixed; bottom: 0; inset-inline: 0; z-index: 111; background: #fff; border-top: 1px solid #e6e6e6; box-shadow: 0 -4px 16px rgba(0,0,0,.06); padding: 10px 16px; display: none; align-items: center; gap: 12px; transform: translateY(100%); transition: transform .25s ease; }
.pd-sticky.is-visible { transform: translateY(0); }
.pd-sticky__price { font-weight: 700; color: #660099; font-size: 1.15rem; white-space: nowrap; }
.pd-sticky__price small { font-size: .75rem; font-weight: 500; }
.pd-sticky .btn { flex: 1; margin: 0; }

@media (max-width: 991.98px) {
    /* The whole buy panel (summary + price + buttons) is pinned to the bottom of the screen. */
    .pd-sticky { display: none; }
    #pdActions { position: fixed; bottom: 0; inset-inline: 0; z-index: 111; margin: 0; background: #fff; border: 1px solid #e6e6e6; border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 22px rgba(0,0,0,.09); padding: .5rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px)); }
    #pdActions .pd-summary-box { margin-bottom: .5rem; padding: .45rem .6rem; gap: 9px; }
    #pdActions .pd-summary-box__thumb { width: 36px; height: 36px; }
    #pdActions .pd-summary-box__title { font-size: .76rem; }
    #pdActions .pd-summary-box__text { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #pdActions .pd-summary-box__price .pd-price__total { font-size: 1.5rem; }
    #pdActions .pd-summary-box__price { min-width: 5.5rem; }
    #pdActions .btn { height: 2.75rem; }
    .product__details-container { overflow-x: hidden; }
    .pd-col { padding-inline: 12px; }
        .product__details-container form .start__content .product__images .lg__image { height: auto !important; aspect-ratio: 1 / 1; display: flex; overflow: hidden; background: #faf8fc; border-radius: 14px; }
    .product__details-container form .start__content .product__images .lg__image img { width: 100%; height: 100%; object-fit: contain; }
    .product__details-container form .start__content .product__images .small__images .image { inline-size: 3.25rem; block-size: 3.25rem; }
    .product__details-container form .start__content { margin-block-end: 1rem; }
    /* App-like option rows: label on top, options in a tidy uniform grid */
    .pd-row { grid-template-columns: 1fr; gap: 8px; padding: .8rem 0; }
    .pd-row__label { padding-top: 0; font-size: .92rem; }
    .pd-select { max-width: 220px; }
    /* chips size to their text and share each row evenly; labels never wrap */
    .opt-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .opt-chip { padding: .35rem .5rem; }
    .qty-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {

    .opt-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .opt-chip { min-height: 2.6rem; font-size: .8rem; gap: 5px; padding: .3rem .45rem; }
    .shape-chip svg { width: 16px; height: 16px; }
    .swatch { width: 14px; height: 14px; }

    .pd-actions .pd-btns { gap: 6px; }
    .pd-actions .btn { font-size: .78rem; gap: 5px; padding: 0 .3rem; height: 2.7rem; }
    .pd-actions .btn i { font-size: .85rem; }

    /* Three equal grid columns with nowrap labels never fit this Arabic copy on a
       narrow phone — text ran outside the card. Stack the options instead. */
    .pd-subtoggle { grid-auto-flow: row; grid-auto-columns: initial; }
    .pd-subtoggle label { white-space: normal; text-align: center; justify-content: center; padding: .55rem .6rem; }
}
/* Designer: notebook inner-page count (top bar) */
#rv .pd-pages { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: #3a3540; background: var(--rv-soft, #f3eef7); border-radius: 12px; padding: 4px 10px; flex: none; }
#rv .pd-pages[hidden] { display: none; }
#rv .pd-pages input { width: 64px; border: 1px solid #ddd3e6; border-radius: 8px; padding: 3px 6px; font-size: .8rem; text-align: center; background: #fff; }
/* Share button in the product top bar */
.pd-share { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #e6e6e6; border-radius: 999px; background: #fff; color: #660099; font-size: .82rem; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.pd-share:hover { border-color: #b87cd6; background: #faf7fc; }
/* Desktop buy row: all three buttons on one line. The two purchase buttons share the width
   (filled "add to cart" at the start, outlined "buy now"); WhatsApp is a smaller outlined pill
   that only takes the room its label needs. */
/* The theme's `.start__content .btn.default_btn` adds a bottom margin that pushed the first button
   out of line with the other two — zero it here (higher-specificity theme rule, hence !important). */
.pd-actions .pd-btns .btn { margin: 0 !important; }
@media (min-width: 992px) {
    .pd-actions .pd-btns { grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: stretch; }
    .pd-actions .btn { height: 2.9rem; font-size: .95rem; border-width: 1.5px; }
    .pd-actions .pd-btns .pd-whatsapp { width: auto; height: 2.9rem; padding: 0 1.1rem; gap: 7px; font-size: .88rem; background: #fff; color: #178308; border: 1.5px solid #178308; }
    .pd-actions .pd-btns .pd-whatsapp i { font-size: 1.1rem; }
    .pd-actions .pd-btns .pd-whatsapp:hover, .pd-actions .pd-btns .pd-whatsapp:focus-visible { background: #f0faf0; color: #146c06; }
    .pd-summary-box { padding: .75rem .9rem; gap: 14px; }
    .pd-summary-box__thumb { width: 52px; height: 52px; }
}

/* Description text: a bold product name line, small sub-headings ("المزايا:"), tidy bullets. */
.pd-desc .about_product { max-height: none; }
.pd-desc .about_product .pd-desc__name { font-size: 1.2rem; font-weight: 700; color: #660099; margin: 0 0 .45rem; line-height: 1.4; }
.pd-desc .about_product h4 { font-size: .9rem; font-weight: 700; color: #660099; margin: .85rem 0 .3rem; }
.pd-desc .about_product p { margin: 0 0 .5rem; }
.pd-desc .about_product ul { list-style: disc; margin: 0 0 .5rem; padding-inline-start: 1.2rem; }
.pd-desc .about_product li { display: list-item; list-style: disc; margin-bottom: .2rem; }

/* "label: value" description lines render as a tidy spec list */
.pd-desc .about_product .pd-desc__specs { margin: 0 0 .6rem; padding: 0; }
.pd-desc .about_product .pd-desc__specs > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; padding: .5rem 0; border-bottom: 1px dashed #e6e6e6; }
.pd-desc .about_product .pd-desc__specs > div:last-child { border-bottom: 0; }
.pd-desc .about_product .pd-desc__specs dt { font-weight: 700; color: #660099; font-size: .88rem; }
.pd-desc .about_product .pd-desc__specs dd { margin: 0; color: #444; font-size: .9rem; line-height: 1.7; }
@media (max-width: 575px) { .pd-desc .about_product .pd-desc__specs > div { grid-template-columns: 6rem minmax(0, 1fr); gap: .5rem; } }

/* Template tab: wording + colours of the picked (vector) template */
#rv .tpled { margin-top: 14px; display: grid; gap: 14px; }
#rv .tpled__sec > b { display: block; font-size: .85rem; color: var(--rv-muted); margin-bottom: 8px; font-weight: 600; }
#rv .tpled__rows { display: grid; gap: 8px; }
#rv .tpled__row { display: flex; align-items: center; gap: 8px; }
#rv .tpled__row .in { flex: 1; min-width: 0; }
#rv .tpled input[type=color] { width: 34px; height: 34px; border: 1px solid var(--rv-line); border-radius: 50%; padding: 0; background: none; flex: none; cursor: pointer; overflow: hidden; }
#rv .tpled input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
#rv .tpled input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
#rv .tpled__sw { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#rv .tpled__reset { margin-top: 8px; background: none; border: 0; padding: 0; font-size: .8rem; color: #660099; cursor: pointer; text-decoration: underline; }
#rv #tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
#rv .chip.tplcard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 6px 8px; height: auto; border-radius: 12px; font-size: .78rem; }
#rv .chip.tplcard img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #f3f3f6; }
#rv .chip.tplcard span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#rv .tpled__hint { margin: 4px 0 8px; font-size: .8rem; color: var(--rv-muted, #7a7385); }
#rv .piecebar { width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.18); z-index: 3; }
#rv .piecebar[hidden] { display: none; }
#rv .piecebar__lbl { font-size: .82rem; font-weight: 600; }
#rv .piecebar input[type=color] { width: 36px; height: 30px; padding: 0; border: 1px solid #d9d3df; border-radius: 8px; background: none; cursor: pointer; }
#rv .piecebar__sws { display: inline-flex; gap: 5px; flex-wrap: wrap; }
#rv .piecebar__sw { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); padding: 0; cursor: pointer; }
#rv .piecebar__btn { margin-inline-start: auto; background: none; border: 0; padding: 0 4px; font-size: .8rem; color: #660099; cursor: pointer; text-decoration: underline; }
#rv .piecebar__x { background: none; border: 0; font-size: 1.4rem; line-height: 1; padding: 0 4px; cursor: pointer; color: #7a7385; }

/* Interactive hero preview (sticker trial): shape / finish / size vs. a familiar object */
.pd-fx { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 30%, #f7f5f2 0%, #ebe7e2 65%, #ddd7d0 100%); border-radius: inherit; }
.pd-fx[hidden] { display: none; }
.pd-fx__svg { flex: 1 1 auto; min-height: 0; width: 100%; display: block; }
.pd-fx__bar { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 0 .75rem .7rem; }
.pd-fx__cap { margin: 0; font-size: .85rem; font-weight: 700; color: #3a2a52; text-align: center; }
.pd-fx__refs { display: flex; gap: .4rem .6rem; flex-wrap: wrap; justify-content: center; }
.pd-fx__refs button { direction: rtl; display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; padding: 0; font: inherit; font-size: .76rem; font-weight: 700; color: #1d1442; cursor: pointer; }
.pd-fx__refs button span { display: inline-flex; align-items: center; justify-content: center; block-size: 1.7rem; padding: 0 .8rem; background: #fff; border: 1.5px solid #d6c2ee; border-radius: .6rem; transition: background .2s, color .2s, border-color .2s; }
.pd-fx__refs button svg { flex: none; box-sizing: content-box; inline-size: .95rem; block-size: .95rem; padding: .38rem; background: #fff; border: 1.5px solid #d6c2ee; border-radius: 50%; color: #1d1442; opacity: 1; transition: background .2s, color .2s, border-color .2s; }
@media (min-width: 992px) { .pd-fx__refs { position: absolute; right: .8rem; top: .9rem; align-items: stretch; flex-direction: column; flex-wrap: nowrap; gap: .4rem; } .pd-fx__refs button span { flex: 1; } }
.pd-fx__refs button[aria-pressed="true"] span, .pd-fx__refs button[aria-pressed="true"] svg { background: #5a0fa8; border-color: #5a0fa8; color: #fff; }
.pd-fx__refs button:focus-visible { outline: 2px solid #660099; outline-offset: 2px; }
.pd-fx__sticker { transition: transform .5s cubic-bezier(.34,1.3,.5,1); transform-origin: 0 0; }
.pd-fx__ref { animation: pd-fx-in .35s ease both; }
.pd-fx__shine { opacity: 0; }
.pd-fx.is-shining .pd-fx__shine { animation: pd-fx-shine 1.1s ease .1s 1 both; }
@keyframes pd-fx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pd-fx-shine { 0% { opacity: 0; transform: translateX(-120px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(120px); } }
@media (prefers-reduced-motion: reduce) { .pd-fx__sticker, .pd-fx__ref, .pd-fx.is-shining .pd-fx__shine { animation: none; transition: none; } }
.small__images .pd-fx-thumb { inline-size: 3.75rem; block-size: 3.75rem; flex-shrink: 0; margin-block-end: .35rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid #dccbe9; border-radius: 8px; background: linear-gradient(160deg, #f6f1fa, #ead9f5); color: #660099; font: inherit; font-size: .62rem; font-weight: 700; cursor: pointer; padding: 0; }
.small__images .pd-fx-thumb[hidden] { display: none; }
.small__images .pd-fx-thumb { position: relative; overflow: hidden; background: #efebe6; }
.small__images .pd-fx-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.small__images .pd-fx-thumb__lbl { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; background: rgba(102,0,153,.9); color: #fff; font-size: .55rem; line-height: 1.6; text-align: center; white-space: nowrap; }
.small__images .pd-fx-thumb__badge { position: absolute; z-index: 1; inset-block-start: 3px; inset-inline-end: 3px; inline-size: 1.35rem; block-size: 1.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #660099; color: #fff; border: 1.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.small__images .pd-fx-thumb__badge svg { inline-size: .8rem; block-size: .8rem; }
.small__images .pd-fx-thumb.active { border: 2px solid #660099; }
@media (max-width: 991px) { .small__images .pd-fx-thumb { inline-size: 3.25rem; block-size: 3.25rem; } }