/*
 * The only stylesheet written for the new storefront. Everything else on these pages is the legacy theme's own
 * CSS, carried over unchanged so the two sites look alike.
 *
 * What lives here is strictly what the legacy markup has no class for: controls the old site did not have (the
 * language switch, the header search) and the handful of places where a legacy anchor became a form button
 * because the action now changes state and needs a POST.
 */

/* A button that has to look like the anchor it replaced (log out, add to wishlist).
   Written as `button.sf-linkbutton` on purpose: the old stylesheet gives `button[type="submit"]` a border, a
   radius and padding, and an attribute selector outranks a bare class however late this file loads. Matching its
   weight — an element plus a class — lets the later file win, so these stay links rather than boxes. */
button.sf-linkbutton,
.sf-linkbutton,
.sf-icon-form .btn {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.sf-icon-form {
    display: inline-block;
    margin: 0;
}

/* The announcement bar the new CMS can switch on; the legacy site had no equivalent. */
.sf-announcement {
    background: #1a1a1a;
    color: #fff;
    text-align: center;
    font-size: 13px;
    padding: 8px 15px;
}

/* Search and the language switch live inside the collapsed menu so the legacy header bar keeps its shape. */
.sf-navsearch {
    display: inline-block;
    position: relative;
    margin: 18px 15px 0;
    vertical-align: top;
}

.sf-navsearch input {
    height: 34px;
    width: 190px;
    border: 1px solid #e5e5e5;
    background: #fff;
    padding: 0 34px 0 12px;
    font-size: 13px;
    border-radius: 17px;
}

.sf-navsearch button {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    height: 34px;
    width: 34px;
    border: 0;
    background: none;
    color: #888;
    cursor: pointer;
}

.sf-locale {
    display: inline-block;
    margin-top: 22px;
    font-size: 13px;
    border: 1px solid #e5e5e5;
    border-radius: 15px;
    padding: 3px 12px;
}

/* A slide that is a link: the legacy caption sits above it, so the cover goes underneath. */
.sf-slide-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* The builder's per-breakpoint visibility, in the theme's own idiom rather than utility classes. */
@media (max-width: 767px) {
    .sf-desktop-only { display: none; }
}

@media (min-width: 768px) {
    .sf-mobile-only { display: none; }
}

/* Footer link row, when the CMS footer menu has entries. */
.sf-footer-links .footer-link {
    list-style: none;
    margin: 0;
    padding: 12px 0 0;
    text-align: center;
}

.sf-footer-links .footer-link li {
    display: inline-block;
    margin: 0 10px;
}

/* ── Listing page: the filter row, empty state and pagination ─────────────────────────────────── */

.pb-section-intro {
    margin: 8px 0 0;
    color: #6b6257;
    font-size: 14px;
}

.pb-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin: 0 0 26px;
    padding: 16px 18px;
    background: #faf7f2;
    border: 1px solid #ece5da;
    border-radius: 14px;
}

.pb-filters label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #6b6257;
}

.pb-filters select,
.pb-filters input[type="number"] {
    height: 38px;
    min-width: 132px;
    border: 1px solid #ded5c8;
    border-radius: 9px;
    background: #fff;
    padding: 0 10px;
    font-size: 14px;
    color: #2b2620;
}

.pb-filters input[type="number"] { min-width: 96px; }

.pb-filters-check {
    flex-direction: row;
    align-items: center;
    gap: 7px;
    height: 38px;
}

.pb-filters-submit {
    height: 38px;
    padding: 0 26px;
    border: 0;
    border-radius: 9px;
    background: #2b2620;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.pb-filters-submit:hover { background: #453d33; }

.pb-empty {
    padding: 44px 0;
    text-align: center;
    color: #8b8175;
}

.pb-pagination {
    margin-top: 28px;
    display: flex;
    justify-content: center;
}

.pb-pagination svg { width: 16px; height: 16px; }

/* A section tile whose picture has not been set yet: it keeps its place in the row rather than shortening it. */
.pb-maincat-blank {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    background: linear-gradient(135deg, #efe7dc 0%, #ded2c2 100%);
}

/* ---------------------------------------------------------------------------
   Builder sections the shop never had.

   The hero, call-to-action, countdown, FAQ, contact block and campaign banner
   are ours: `modern-theme.css` has no class for them, because the legacy site
   offered no such block. They are written in the theme's own variables so they
   sit beside its sections rather than beside them, and they are the only
   storefront styling that is not the shop's.
   --------------------------------------------------------------------------- */

.sf-hero { position: relative; overflow: hidden; border-radius: var(--pb-radius); }
.sf-hero-image { width: 100%; height: auto; display: block; object-fit: cover; }
.sf-hero-body { position: absolute; inset-inline: 0; bottom: 0; padding: 24px;
    background: linear-gradient(to top, rgba(0,0,0,.6), transparent); color: #fff; }
.sf-hero-body h2 { color: #fff; margin: 0 0 6px; font-size: 26px; font-weight: 700; }
.sf-hero-body p { color: rgba(255,255,255,.9); margin: 0 0 12px; }
.sf-hero--split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
.sf-hero--split .sf-hero-body { position: static; padding: 0; background: none; color: var(--pb-text); }
.sf-hero--split .sf-hero-body h2 { color: var(--pb-text); }
.sf-hero--split .sf-hero-body p { color: var(--pb-text-muted); }

.sf-cta { text-align: center; padding: 32px; border-radius: var(--pb-radius); background: var(--pb-bg-alt); }
.sf-cta h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.sf-cta p { margin: 0 0 16px; color: var(--pb-text-muted); }
.sf-cta--highlight { background: var(--pb-gold-dark); color: #fff; }
.sf-cta--highlight h2, .sf-cta--highlight p { color: #fff; }

.sf-countdown { text-align: center; padding: 28px; border-radius: var(--pb-radius); background: var(--pb-accent, #3f3a36); color: #fff; }
.sf-countdown h2 { color: #fff; margin: 0 0 10px; font-size: 20px; font-weight: 700; }
.sf-countdown-clock { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 14px; }

.sf-faq details { border-bottom: 1px solid var(--pb-border); padding: 14px 0; }
.sf-faq summary { cursor: pointer; font-weight: 600; }
.sf-faq p { margin: 10px 0 0; color: var(--pb-text-muted); white-space: pre-line; }

.sf-contact p { margin: 0 0 8px; }
.sf-contact .fa { color: var(--pb-gold-dark); margin-inline-end: 6px; }

.sf-campaign { display: block; overflow: hidden; border-radius: var(--pb-radius); background: var(--pb-gold-dark); color: #fff; }
.sf-campaign img { width: 100%; height: auto; display: block; object-fit: cover; }
.sf-campaign-body { display: block; padding: 14px 18px; }
.sf-campaign-body strong { font-weight: 700; }
.sf-campaign-body span { margin-inline-start: 8px; opacity: .9; }

.pb-page-body { line-height: 1.9; }
.pb-page-body h2, .pb-page-body h3 { margin: 22px 0 10px; font-weight: 700; }
.pb-page-body p { margin: 0 0 12px; }

@media (max-width: 767px) {
    .sf-hero--split { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Product detail and quick view — rebuilt (owner brief, 2026-09-21).

   The shop's own layout was reproduced first and rejected, then patched and
   rejected again; this is a composition of its own. It is written entirely in
   `modern-theme.css`'s variables — the warm ivory ground, the restrained gold,
   the soft shadow, the 14px radius — so the pages read as the same shop and
   not as something bolted on.

   Two rules the brief set, kept throughout: borders are used sparingly (tone
   separates instead), and no control is blue unless blue means something.
   =========================================================================== */

/* --- Shared controls ------------------------------------------------------ */

/* One coherent stepper: a single bordered group, not three loose boxes. */
.pb-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--pb-border);
    border-radius: 999px; overflow: hidden; background: var(--pb-surface); height: 48px; }
button.pb-stepper-btn, .pb-stepper-btn { width: 44px; border: 0; background: transparent; color: var(--pb-text-muted);
    font-size: 18px; line-height: 1; cursor: pointer; transition: color .15s, background .15s; }
button.pb-stepper-btn:hover, .pb-stepper-btn:hover { background: var(--pb-bg-alt); color: var(--pb-gold-dark); }
.pb-stepper input { width: 46px; border: 0; background: transparent; text-align: center;
    font-weight: 700; font-size: 15px; color: var(--pb-text); padding: 0; }
.pb-stepper input::-webkit-outer-spin-button,
.pb-stepper input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.pb-stepper input[type=number] { -moz-appearance: textfield; }

/* The dominant call to action. */
button.pb-cta, a.pb-cta, .pb-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--pb-gold-dark); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700;
    letter-spacing: .01em; box-shadow: 0 6px 18px rgba(140, 111, 60, .25); transition: transform .15s, box-shadow .15s, background .15s; }
button.pb-cta:hover, a.pb-cta:hover, .pb-cta:hover { background: var(--pb-gold); color: #fff; box-shadow: 0 8px 22px rgba(140, 111, 60, .32); transform: translateY(-1px); }
button.pb-cta:active, .pb-cta:active { transform: none; }
button.pb-cta:disabled, .pb-cta:disabled { background: var(--pb-border); color: var(--pb-text-muted); box-shadow: none; cursor: not-allowed; transform: none; }

/* Secondary: quiet, no box. */
button.pb-ghost, .pb-ghost { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0;
    cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--pb-text-muted); transition: color .15s; }
button.pb-ghost:hover, .pb-ghost:hover { color: var(--pb-gold-dark); }
.pb-ghost .fa { font-size: 15px; }

.pb-textlink { font-size: 13.5px; font-weight: 600; color: var(--pb-gold-dark); }
.pb-textlink:hover { color: var(--pb-gold); }
.pb-textlink .fa { font-size: 12px; margin-inline-start: 3px; }

/* --- Product detail ------------------------------------------------------- */

.pdp { background: var(--pb-bg); padding: 26px 0 64px; }

.pdp-crumbs { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 0 22px; padding: 0; font-size: 12.5px; color: var(--pb-text-muted); }
.pdp-crumbs li + li::before { content: '\203A'; margin-inline-end: 8px; color: var(--pb-border); }
.pdp-crumbs a { color: var(--pb-text-muted); }
.pdp-crumbs a:hover { color: var(--pb-gold-dark); }
.pdp-crumbs li:last-child span { color: var(--pb-text); font-weight: 600; }

/* 58 / 42, as the brief asks. */
.pdp-main { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 46px; align-items: start; }

/* Gallery: thumbnails beside a framed stage, no drifting whitespace. */
.pdp-gallery { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; }
/* One picture means no thumbnail column; without this the stage sits in the 84px track and the picture
   shrinks to a stamp in the corner (owner, 2026-09-22). */
.pdp-gallery.is-single { grid-template-columns: minmax(0, 1fr); }
.pdp-thumbs { display: flex; flex-direction: column; gap: 10px; }
button.pdp-thumb, .pdp-thumb { width: 84px; height: 84px; padding: 0; border: 0; border-radius: var(--pb-radius-sm); overflow: hidden;
    background: var(--pb-bg-alt); cursor: pointer; position: relative; opacity: .72; transition: opacity .15s; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover { opacity: 1; }
.pdp-thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--pb-gold-dark); }

.pdp-stage { position: relative; margin: 0; border-radius: var(--pb-radius); overflow: hidden;
    background: var(--pb-surface); box-shadow: var(--pb-shadow); aspect-ratio: 1 / 1; cursor: zoom-in; }
.pdp-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-badge { position: absolute; inset-inline-start: 16px; top: 16px; z-index: 2; }
button.pdp-zoom, .pdp-zoom { position: absolute; inset-inline-end: 14px; bottom: 14px; z-index: 2; width: 40px; height: 40px;
    border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--pb-text); cursor: zoom-in;
    box-shadow: var(--pb-shadow); transition: background .15s, color .15s; }
.pdp-zoom:hover { background: var(--pb-gold-dark); color: #fff; }

/* Information panel. Tone, not borders, sets it apart from the ivory ground. */
.pdp-panel { position: sticky; top: 92px; }
.pdp-panel-inner { background: var(--pb-surface); border-radius: var(--pb-radius); box-shadow: var(--pb-shadow); padding: 32px 30px; }

.pdp-title { font-size: 27px; line-height: 1.45; font-weight: 700; color: var(--pb-text); margin: 0 0 6px; }
.pdp-sku { font-size: 11.5px; letter-spacing: .08em; color: var(--pb-text-muted); margin: 0 0 18px; }

.pdp-price { margin: 0 0 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pdp-price ins { text-decoration: none; font-size: 32px; font-weight: 700; color: var(--pb-gold-dark); letter-spacing: -.01em; }
.pdp-price del { font-size: 17px; color: var(--pb-text-muted); }

.pdp-stock { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px;
    font-size: 13px; font-weight: 600; color: var(--pb-success); }
.pdp-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pdp-stock.is-out { color: var(--pb-danger); }

.pdp-summary { font-size: 13.5px; line-height: 2; color: var(--pb-text-muted); margin: 0 0 20px; }

.pdp-facts { margin: 0 0 24px; padding: 18px 0; border-top: 1px solid var(--pb-border); border-bottom: 1px solid var(--pb-border);
    display: grid; gap: 10px; }
.pdp-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.pdp-facts dt { font-size: 12.5px; color: var(--pb-text-muted); margin: 0; font-weight: 500; }
.pdp-facts dd { font-size: 13px; color: var(--pb-text); margin: 0; font-weight: 600; }

.pdp-note { border-radius: var(--pb-radius-sm); padding: 11px 14px; font-size: 13px; font-weight: 600; margin: 0 0 16px; }
.pdp-note.is-ok { background: rgba(63, 143, 93, .1); color: var(--pb-success); }
.pdp-note.is-out { background: rgba(178, 58, 58, .08); color: var(--pb-danger); }

.pdp-field { margin-bottom: 18px; }
.pdp-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--pb-text-muted); margin-bottom: 8px; }
.pdp-chosen { display: inline-block; font-size: 14px; font-weight: 700; color: var(--pb-text); }
.pdp-select { width: 100%; height: 48px; border: 1px solid var(--pb-border); border-radius: var(--pb-radius-sm);
    background: var(--pb-surface); padding: 0 14px; font-family: inherit; font-size: 14px; color: var(--pb-text); }
.pdp-select:focus { outline: 0; border-color: var(--pb-gold); box-shadow: 0 0 0 3px var(--pb-gold-light); }

/* Quantity and the call to action share one row, so the CTA reads as the end of the decision. */
.pdp-buy { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.pdp-field--qty { margin-bottom: 0; flex: 0 0 auto; }
.pdp-cta { flex: 1 1 200px; }

.pdp-wish { margin-top: 18px; }

.pdp-share { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--pb-border); }
.pdp-share > span { font-size: 12px; font-weight: 600; color: var(--pb-text-muted); }
.pdp-share .social-icons { margin: 0; display: flex; gap: 8px; }
.pdp-share .social-icons li { list-style: none; }
.pdp-share .social-icons a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--pb-bg-alt); color: var(--pb-text-muted); font-size: 14px; transition: background .15s, color .15s; }
.pdp-share .social-icons a:hover { background: var(--pb-gold-dark); color: #fff; }

.pdp-details { margin-top: 56px; }
.pdp-details h2 { font-size: 19px; font-weight: 700; margin: 0 0 16px; }
.pdp-details-body { background: var(--pb-surface); border-radius: var(--pb-radius); box-shadow: var(--pb-shadow); padding: 28px 30px; }
.pdp-video { margin-top: 22px; max-width: 560px; aspect-ratio: 16 / 9; }
.pdp-video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--pb-radius-sm); }

/* The recommendations belong to the page: a measured gap, not a gulf. */
.pdp-related { margin-top: 44px; }
.pdp-related-head { margin-bottom: 18px; }
.pdp-related-head h2 { font-size: 19px; font-weight: 700; margin: 0; }
.pdp-related .products { margin: 0; padding: 0; }

.pdp-lightbox { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center;
    padding: 36px; background: rgba(26, 22, 20, .86); cursor: zoom-out; }
.pdp-lightbox[hidden] { display: none; }
.pdp-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--pb-radius-sm); }
button.pdp-lightbox-close, .pdp-lightbox-close { position: absolute; inset-inline-end: 22px; top: 22px; width: 42px; height: 42px; border: 0;
    border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 17px; cursor: pointer; }
.pdp-lightbox-close:hover { background: rgba(255,255,255,.26); }

@media (max-width: 991px) {
    .pdp-main { grid-template-columns: 1fr; gap: 28px; }
    .pdp-panel { position: static; }
    .pdp-panel-inner { padding: 26px 22px; }
    .pdp-title { font-size: 23px; }
    .pdp-price ins { font-size: 28px; }
}
@media (max-width: 575px) {
    .pdp { padding: 18px 0 44px; }
    .pdp-gallery { grid-template-columns: 1fr; }
    .pdp-thumbs { flex-direction: row; overflow-x: auto; order: 2; padding-bottom: 4px; }
    .pdp-thumb { width: 66px; height: 66px; flex: 0 0 auto; }
    .pdp-panel-inner { padding: 22px 18px; }
    .pdp-title { font-size: 20px; }
    .pdp-price ins { font-size: 25px; }
    .pdp-buy { flex-direction: column; align-items: stretch; }
    .pdp-cta { width: 100%; }
    .pdp-details-body { padding: 20px 18px; }
    .pdp-lightbox { padding: 16px; }
}

/* --- Quick view ----------------------------------------------------------- */

body.pbqv-open { overflow: hidden; }

.pbqv { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 28px; }
.pbqv[hidden] { display: none; }
.pbqv-veil { position: absolute; inset: 0; background: rgba(26, 22, 20, .58); }

.pbqv-dialog { position: relative; width: 100%; max-width: 880px; max-height: 88vh; overflow: auto;
    background: var(--pb-surface); border-radius: var(--pb-radius-lg); box-shadow: var(--pb-shadow-lg); }

/* The close control belongs to the panel's chrome, not floating over the picture. */
.pbqv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 24px; border-bottom: 1px solid var(--pb-border); }
.pbqv-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pb-text-muted); }
button.pbqv-close, .pbqv-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--pb-bg-alt);
    color: var(--pb-text-muted); font-size: 14px; cursor: pointer; transition: background .15s, color .15s; }
button.pbqv-close:hover, .pbqv-close:hover { background: var(--pb-gold-dark); color: #fff; }

.pbqv-grid { display: grid; grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); gap: 32px; padding: 28px 30px 32px; align-items: start; }

.pbqv-stage { position: relative; display: block; border-radius: var(--pb-radius); overflow: hidden;
    background: var(--pb-bg-alt); aspect-ratio: 1 / 1; }
.pbqv-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbqv-badge { position: absolute; inset-inline-start: 12px; top: 12px; z-index: 2; }
.pbqv-thumbs { display: flex; gap: 8px; margin-top: 10px; }
button.pbqv-thumb, .pbqv-thumb { width: 58px; height: 58px; padding: 0; border: 0; border-radius: var(--pb-radius-sm); overflow: hidden;
    background: var(--pb-bg-alt); cursor: pointer; opacity: .7; transition: opacity .15s; }
.pbqv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbqv-thumb:hover { opacity: 1; }
.pbqv-thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--pb-gold-dark); }

.pbqv-title { font-size: 22px; line-height: 1.5; font-weight: 700; color: var(--pb-text); margin: 0 0 6px; }
.pbqv-sku { font-size: 11.5px; letter-spacing: .08em; color: var(--pb-text-muted); margin: 0 0 16px; }
.pbqv-price { margin: 0 0 12px; display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.pbqv-price ins { text-decoration: none; font-size: 27px; font-weight: 700; color: var(--pb-gold-dark); }
.pbqv-price del { font-size: 15px; color: var(--pb-text-muted); }
.pbqv-stock { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 13px; font-weight: 600; color: var(--pb-success); }
.pbqv-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pbqv-stock.is-out { color: var(--pb-danger); }
.pbqv-summary { font-size: 13px; line-height: 1.95; color: var(--pb-text-muted); margin: 0 0 20px; }

.pbqv-field { margin-bottom: 16px; }
.pbqv-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--pb-text-muted); margin-bottom: 8px; }
.pbqv-chosen { display: inline-block; font-size: 14px; font-weight: 700; color: var(--pb-text); }
.pbqv-select { width: 100%; height: 48px; border: 1px solid var(--pb-border); border-radius: var(--pb-radius-sm);
    background: var(--pb-surface); padding: 0 14px; font-family: inherit; font-size: 14px; color: var(--pb-text); }
.pbqv-select:focus { outline: 0; border-color: var(--pb-gold); box-shadow: 0 0 0 3px var(--pb-gold-light); }
.pbqv-form .pb-cta { width: 100%; margin-top: 4px; }

.pbqv-secondary { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px;
    padding-top: 16px; border-top: 1px solid var(--pb-border); flex-wrap: wrap; }

@media (max-width: 767px) {
    .pbqv { padding: 0; align-items: flex-end; }
    .pbqv-dialog { max-width: none; max-height: 94vh; border-radius: var(--pb-radius-lg) var(--pb-radius-lg) 0 0; }
    .pbqv-grid { grid-template-columns: 1fr; gap: 20px; padding: 20px 20px 26px; }
    .pbqv-stage { aspect-ratio: 4 / 3; }
    .pbqv-title { font-size: 19px; }
    .pbqv-price ins { font-size: 24px; }
}

/* Focus: visible for the keyboard, invisible to the mouse. Opening the panel moves focus to its close button,
   and the browser's dotted ring on that button read as a defect. */
.pbqv-close:focus, .pdp-zoom:focus, .pdp-thumb:focus, .pbqv-thumb:focus,
.pb-stepper-btn:focus, .pb-cta:focus, .pb-ghost:focus, .pdp-lightbox-close:focus { outline: none; }
.pbqv-close:focus-visible, .pdp-zoom:focus-visible, .pdp-thumb:focus-visible, .pbqv-thumb:focus-visible,
.pb-stepper-btn:focus-visible, .pb-cta:focus-visible, .pb-ghost:focus-visible, .pdp-lightbox-close:focus-visible {
    outline: 2px solid var(--pb-gold); outline-offset: 2px; }
/* The colour rail's way back to "any colour" (owner, 2026-09-22). The shop had none: clicking the chosen
   swatch again cleared it, but nothing said so. It sits with the swatches and is the same height as them, wide
   enough for the word, and the theme's `button { background-color: #fff }` rule is beaten on specificity. */
a.pb-color-swatch--all, button.pb-color-swatch--all {
    width: auto;
    min-width: 40px;
    padding: 0 10px;
    border-radius: 999px;
    box-shadow: none;
    background-color: var(--pb-surface);
    color: var(--pb-text-muted);
    font-family: inherit;
    font-size: 12px;
    line-height: 26px;
}
a.pb-color-swatch--all:hover, button.pb-color-swatch--all:hover { color: var(--pb-gold-dark); }
a.pb-color-swatch--all.active, button.pb-color-swatch--all.active {
    background-color: var(--pb-text);
    border-color: var(--pb-text);
    box-shadow: none;
    color: #fff;
}

/* ------------------------------------------------------------------------------------------------------------
   Notifications (owner brief, 2026-09-22)

   Two components, deliberately different in weight:

   `.pb-toast`  — lightweight feedback. A compact card on the shop's own ivory, a hairline border, a soft
                  shadow and a small tinted icon disc. The state is carried by the icon and a single accent
                  line, never by flooding the card with colour: a solid green rectangle is the thing this
                  replaces. It floats, so nothing on the page moves when one appears.
   `.pb-alert`  — anything the shopper must notice or act on. It stays in the page, in the flow, and does not
                  time out. Same family, more presence.

   RTL-first: the stack sits in the inline-start bottom corner, which is the right on an Arabic page and the
   left on an English one, without a direction-specific rule.
   ------------------------------------------------------------------------------------------------------------ */

.pb-toasts {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-start: 24px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.pb-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px;
    background: var(--pb-surface);
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius);
    box-shadow: var(--pb-shadow-lg);
    /* The accent is one edge, not a fill. */
    border-inline-start: 3px solid var(--pb-gold);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
}
.pb-toast.is-in { opacity: 1; transform: translateY(0); }
.pb-toast.is-leaving { opacity: 0; transform: translateY(6px); }

.pb-toast-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--pb-gold-light);
    color: var(--pb-gold-dark);
}

.pb-toast-body { flex: 1; min-width: 0; }
.pb-toast-msg {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--pb-text);
}
.pb-toast-action {
    display: inline-block;
    margin-top: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pb-gold-dark);
    border-bottom: 1px solid var(--pb-gold-light);
    padding-bottom: 1px;
}
.pb-toast-action:hover, .pb-toast-action:focus { color: var(--pb-text); border-bottom-color: var(--pb-text); }

button.pb-toast-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--pb-text-muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}
button.pb-toast-close:hover { background-color: var(--pb-bg-alt); color: var(--pb-text); }

/* Only the accent edge and the icon disc change between states. */
.pb-toast--success { border-inline-start-color: var(--pb-success); }
.pb-toast--success .pb-toast-icon { background: rgba(63, 143, 93, .12); color: var(--pb-success); }
.pb-toast--info { border-inline-start-color: var(--pb-gold); }
.pb-toast--warning { border-inline-start-color: #C98A2E; }
.pb-toast--warning .pb-toast-icon { background: rgba(201, 138, 46, .14); color: #A56B1C; }
.pb-toast--error { border-inline-start-color: var(--pb-danger); }
.pb-toast--error .pb-toast-icon { background: rgba(178, 58, 58, .12); color: var(--pb-danger); }

@media (max-width: 767px) {
    .pb-toasts {
        inset-inline: 16px;
        width: auto;
        /* Clear of the home indicator, and of anything the shop pins to the bottom of a phone screen. */
        inset-block-end: calc(18px + env(safe-area-inset-bottom, 0px));
    }
    .pb-toast { padding: 12px 13px; }
    .pb-toast-msg { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .pb-toast { transition: opacity .15s ease; transform: none; }
    .pb-toast.is-leaving, .pb-toast.is-in { transform: none; }
}

/* The in-page alert: what must not time out. */
.pb-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    margin-bottom: 16px;
    background: var(--pb-surface);
    border: 1px solid var(--pb-border);
    border-inline-start: 3px solid var(--pb-danger);
    border-radius: var(--pb-radius-sm);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--pb-text);
}
.pb-alert > i { flex-shrink: 0; margin-top: 3px; color: var(--pb-danger); }
.pb-alert--success { border-inline-start-color: var(--pb-success); }
.pb-alert--success > i { color: var(--pb-success); }
.pb-alert--warning { border-inline-start-color: #C98A2E; }
.pb-alert--warning > i { color: #A56B1C; }
.pb-alert--info { border-inline-start-color: var(--pb-gold); }
.pb-alert--info > i { color: var(--pb-gold-dark); }

/* ------------------------------------------------------------------------------------------------------------
   Search: active-filter chips, the loading state, and the rail on a phone (owner brief, 2026-09-22).
   ------------------------------------------------------------------------------------------------------------ */

.pb-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* One line saying what is in force. Each chip removes its own filter; the last one removes them all. */
.pb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
a.pb-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--pb-border);
    border-radius: 999px;
    background: var(--pb-surface);
    color: var(--pb-text);
    font-size: 12.5px;
    line-height: 1.6;
}
a.pb-chip:hover, a.pb-chip:focus { border-color: var(--pb-gold); color: var(--pb-gold-dark); }
a.pb-chip i { font-size: 10px; color: var(--pb-text-muted); }
a.pb-chip:hover i { color: var(--pb-gold-dark); }
a.pb-chip--clear { background: var(--pb-bg-alt); border-style: dashed; color: var(--pb-text-muted); }
a.pb-chip--clear:hover { color: var(--pb-danger); border-color: var(--pb-danger); }

/* While new results are on their way: the old ones dim and stop responding, and the page does not move. Only
   the opacity changes, so nothing reflows and there is no flash between one set of results and the next. */
#pb_search_panel { transition: opacity .15s ease; }
#pb_search_panel.is-loading { opacity: .45; pointer-events: none; }
#pb_search_panel.is-loading .pb-search-main { position: relative; }
#pb_search_panel.is-loading .pb-search-main::after {
    content: '';
    position: absolute;
    inset-inline-start: 50%;
    top: 90px;
    width: 26px;
    height: 26px;
    margin-inline-start: -13px;
    border: 2px solid var(--pb-border);
    border-top-color: var(--pb-gold-dark);
    border-radius: 50%;
    animation: pbSpin .7s linear infinite;
}
@keyframes pbSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    #pb_search_panel.is-loading .pb-search-main::after { animation-duration: 2s; }
}

/* The rail is a column beside the results on a desktop, and behind a button on a phone. */
button.pb-filter-open, button.pb-filter-done { display: none; }

@media (max-width: 991px) {
    /* Floating rather than sitting at the top of the page (owner, 2026-09-22): the rail has to be reachable
       from wherever the shopper has scrolled to, not only from the first screen. It takes the inline-start
       bottom corner — the right on an Arabic page — because the theme already parks its back-to-top button
       in the physical left one. */
    button.pb-filter-open {
        position: fixed;
        inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
        inset-inline-start: 16px;
        z-index: 1000;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* The same 42px circle, 20px up, as the theme's back-to-top button in the opposite corner. */
        width: 42px;
        height: 42px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background-color: var(--pb-text);
        color: #fff;
        box-shadow: var(--pb-shadow-lg);
        font-size: 15px;
        line-height: 1;
    }
    /* It would only show through the dim while the sheet it opens is covering the page. */
    body.pb-filters-open button.pb-filter-open { display: none; }
    /* On the corner of the circle, the way the header badges its own icon buttons. */
    .pb-filter-open-count {
        position: absolute;
        top: -2px;
        inset-inline-end: -2px;
        min-width: 19px;
        height: 19px;
        padding: 0 5px;
        /* A ring in the button's own colour, so the badge reads as sitting on it rather than behind it. */
        border: 2px solid var(--pb-text);
        border-radius: 999px;
        background: var(--pb-gold);
        color: #fff;
        font-family: inherit;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 15px;
        text-align: center;
    }
    /* A toast is full-width on a phone and would land on top of the floating button, so on this page the
       stack starts above it. */
    body.pb-page-search .pb-toasts { inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px)); }

    /* Off-canvas, the same way the navigation drawer works, so the two behave alike. */
    .pb-search-filters {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 1200;
        width: min(340px, 88vw);
        margin: 0;
        /* Clear of the sticky header, which sits above the drawer and would otherwise hide its first rows. */
        padding: 16px 18px calc(28px + env(safe-area-inset-bottom, 0px));
        padding-top: calc(16px + var(--pb-header-h, 91px));
        background: var(--pb-surface);
        box-shadow: var(--pb-shadow-lg);
        overflow-y: auto;
        transform: translateX(-110%);
        transition: transform .22s ease;
    }
    [dir="rtl"] .pb-search-filters { transform: translateX(110%); }
    body.pb-filters-open .pb-search-filters,
    [dir="rtl"] body.pb-filters-open .pb-search-filters { transform: translateX(0); }
    body.pb-filters-open { overflow: hidden; }
    /* The dim behind the sheet has to be a sibling of it, not `body::after`: `main` carries
       `position: relative; z-index: 10`, so it opens a stacking context that the sheet cannot escape.
       An overlay on `body` therefore painted OVER the sheet and swallowed every tap on it. */
    body.pb-filters-open .pb-search-layout::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 1100;
        background: rgba(42, 36, 32, .45);
    }
    /* The shop's Apply button is the no-JavaScript path and is not needed here, where every control has
       already applied itself. What a phone needs instead is a way out of the sheet. */
    body.pb-filters-open .pb-search-filters .button[type="submit"] { display: none; }

    button.pb-filter-done {
        position: sticky;
        bottom: 0;
        display: block;
        width: 100%;
        margin-top: 16px;
        padding: 13px 16px;
        border: 0;
        border-radius: 999px;
        background-color: var(--pb-gold-dark);
        color: #fff;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
    }
}

/* The colour swatches are links now (they carry their own state), so the box the theme gives the button
   has to be given to the anchor as well. */
a.pb-color-swatch { display: block; box-sizing: border-box; }
a.pb-color-swatch--all { display: inline-block; text-align: center; text-decoration: none; }

/* ------------------------------------------------------------------------------------------------------------
   The header drop-panels' pointer (owner, 2026-09-22).

   It is a square rotated into a diamond with half of it tucked under the panel, so only a triangle shows and the
   panel's own top border is covered where the two meet. The theme outlines it with `border-inline-start` plus
   `border-top`. That is right in English and wrong in Arabic: in RTL `inline-start` is the RIGHT edge, so after
   the 45° turn both outlined edges end up on the right and draw a ">" floating beside the panel instead of a
   "∧" merging into it — which is the extra shape that was visible behind the triangle.

   Physical sides are correct in both directions: turned 45° clockwise, `left` becomes the upper-left face of the
   triangle and `top` the upper-right one. Everything else is removed so nothing but the triangle is drawn — no
   second border under it, no block, no shadow of its own.
   ------------------------------------------------------------------------------------------------------------ */
.wish_items::before,
.cart_items::before,
.account-menu::before {
    border: 0;
    border-left: 1px solid var(--pb-border);
    border-top: 1px solid var(--pb-border);
    /* Softens the tip by the same hair the panel's own corners are softened by, so it reads as part of it. */
    border-top-left-radius: 3px;
    background: var(--pb-surface);
    box-shadow: none;
    /* Above the panel's top border, which is what lets the two become one surface. */
    z-index: 1;
}

/* The wrapper the drop-panels hang in is a hover bridge, nothing more — the card itself is `.wish_items` /
   `.cart_items` / `.account-menu`. But it is a `.dropdown-menu`, and Bootstrap dresses that class with its own
   white background, grey border, 4px radius and shadow. None of it was ever turned off, so every panel sat on a
   second, slightly larger grey card: the block visible behind and around the pointer (owner, 2026-09-22).

   Only the padding survives, because that is the bridge that keeps :hover alive between the icon and the card.

   The account panel used to be the exception — its card class sat on the `.dropdown-menu` element itself — so
   this reset stripped it and it went transparent (owner, 2026-09-22). Rather than carve out an exception, the
   header now builds it like the other two, with the card on an inner element. All three are one thing again. */
.icon-btn-wrap .dropdown-menu {
    background: transparent;
    background-clip: border-box;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding-bottom: 0;
    float: none;
    /* Bootstrap also pins `left: 0`. With the theme's `inset-inline-end` that over-constrains the box:
       in RTL the browser drops `left` and it lands correctly, but in LTR it drops `right` instead, so the
       panel hung off the icon's left edge and the pointer ended up 288px away from the icon it belongs to. */
    inset-inline-start: auto;
}


/* ------------------------------------------------------------------------------------------------------------
   The price filter: a two-handle range slider (owner brief, 2026-09-22).

   It replaces six full-width bracket buttons that took about 250px of a rail whose whole job is being scanned.
   Two native `input[type=range]` elements share one track — native so that a keyboard, a screen reader and a
   thumb on glass all work without a line of our own code — and the track they sit on is drawn beneath them.

   The inputs themselves are invisible apart from their handles, and `pointer-events` is handed to the handles
   only, so the two stacked inputs do not swallow each other's drags.
   ------------------------------------------------------------------------------------------------------------ */
a.pb-price-reset { font-size: 11.5px; font-weight: 600; color: var(--pb-text-muted); }
a.pb-price-reset:hover { color: var(--pb-danger); }
a.pb-price-reset[hidden] { display: none; }

/* Geometry, stated once and derived from one number (owner, 2026-09-22).

   A native range input's thumb centre travels from half a thumb in to half a thumb from the end — never to the
   very edge of the input. So the visible track must be inset by exactly that half-thumb at both ends, and then
   a percentage along the track is the same percentage along the thumb's travel. Get this wrong by a pixel and a
   stub of track pokes out past a handle sitting at its limit, which is what it was doing.

   `--pb-thumb` is that number. Everything else is calculated from it, including the mobile size, so the two can
   never drift apart. The thumb is `border-box`, or its 2px border would make it wider than the inset allows. */
.pb-price-slider {
    --pb-thumb: 18px;
    position: relative;
    height: 30px;
    /* No side margin: the handles are the outermost thing, and they may reach the rail's own edges. */
    margin: 2px 0 0;
}

.pb-price-track {
    position: absolute;
    inset-block-start: 13px;
    /* Exactly the span the thumb's CENTRE can occupy. */
    inset-inline-start: calc(var(--pb-thumb) / 2);
    inset-inline-end: calc(var(--pb-thumb) / 2);
    height: 4px;
    border-radius: 999px;
    background: var(--pb-bg-alt);
    box-shadow: inset 0 0 0 1px var(--pb-border);
}
.pb-price-fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--pb-gold-dark);
}

input[type="range"].pb-price-handle {
    position: absolute;
    inset-block-start: 0;
    /* Full width, so the thumb's travel matches the inset track exactly. */
    inset-inline: 0;
    height: 30px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    /* The track belongs to the div beneath; only the handles take the pointer, or the input on top would
       swallow every drag meant for the one below it. */
    pointer-events: none;
}
input[type="range"].pb-price-handle:focus { outline: none; }

input[type="range"].pb-price-handle::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-sizing: border-box;
    pointer-events: auto;
    width: var(--pb-thumb);
    height: var(--pb-thumb);
    border: 2px solid var(--pb-gold-dark);
    border-radius: 50%;
    background: var(--pb-surface);
    box-shadow: var(--pb-shadow);
    cursor: grab;
}
input[type="range"].pb-price-handle::-moz-range-thumb {
    box-sizing: border-box;
    pointer-events: auto;
    width: var(--pb-thumb);
    height: var(--pb-thumb);
    border: 2px solid var(--pb-gold-dark);
    border-radius: 50%;
    background: var(--pb-surface);
    box-shadow: var(--pb-shadow);
    cursor: grab;
}
input[type="range"].pb-price-handle::-webkit-slider-thumb:active { cursor: grabbing; }
input[type="range"].pb-price-handle::-moz-range-thumb:active { cursor: grabbing; }

/* Visible to the keyboard, invisible to the mouse — the same rule the rest of the storefront follows. */
input[type="range"].pb-price-handle:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--pb-gold-light); }
input[type="range"].pb-price-handle:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--pb-gold-light); }

.pb-price-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pb-price-head h6 { margin: 0; }

/* What is selected, in words. */
.pb-price-readout {
    margin: 6px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pb-text);
}
.pb-price-readout bdi { color: var(--pb-gold-dark); }

/* The two ends of what is available, under the handles that reach them. Quiet, because they are a reference
   rather than a control — the shopper reads them once to know how far the slider goes. */
.pb-price-bounds {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 11px;
    color: var(--pb-text-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 991px) {
    /* A bigger target for a thumb. The track re-inserts itself from the same number, so the ends stay aligned. */
    .pb-price-slider { --pb-thumb: 22px; height: 34px; }
    .pb-price-track { inset-block-start: 15px; }
    input[type="range"].pb-price-handle { height: 34px; }
}

/* =========================================================================
   ACCOUNT SCREENS — log in, register, forgot, set a new password
   -------------------------------------------------------------------------
   The legacy shop had no account at all, so these pages have no old markup to
   inherit. They are therefore built out of what the rest of the site already
   uses — `pb-page-header` for the heading, `pb-checkout-card` for the card,
   `pb-form-row` for every field, the theme's own `.button` — and all that is
   added here is the narrow column that centres them. Everything is logical
   (`margin-inline`, `text-align: start`), so Arabic and English both read
   correctly without a second rule.
   ========================================================================= */
.pb-auth { max-width: 440px; margin-inline: auto; }
.pb-auth .pb-checkout-card { padding: 24px; margin-bottom: 0; }
.pb-auth .pb-checkout-card > h2 { font-size: 15px; }

/* What the page is for, under the heading: one quiet line, never a second heading. */
.pb-auth__intro {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--pb-text-muted);
}

/* The primary action fills the card, as it does in the cart summary.
   It also has to restate the theme's own button look, because the old stylesheet styles
   `button[type="submit"]` — an attribute selector, which outranks the `.button` class however late it is loaded,
   leaving a white-on-white square. The checkout escapes the same trap through `form.checkout .button`; this is that
   trick, scoped to these screens. Values are the theme's, not new ones. */
.pb-auth .button {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 4px;
    background: var(--pb-text);
    color: #fff;
    border: 1px solid var(--pb-text);
    border-radius: 999px;
    padding: 13px 28px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    transition: all .15s ease;
}
.pb-auth .button:hover,
.pb-auth .button:focus {
    background: var(--pb-gold-dark);
    border-color: var(--pb-gold-dark);
    color: #fff;
}

/* «Remember me»: a checkbox keeps its own size — the global rule stretches text inputs, not boxes. */
.pb-auth__check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--pb-text);
    font-weight: 500;
}
.pb-auth__check input[type="checkbox"] { width: auto; margin: 0; }

/* Where else the shopper can go from here. Two links, at the two ends, wrapping on a narrow screen. */
.pb-auth__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--pb-border);
    font-size: 13px;
}
.pb-auth__links a { color: var(--pb-gold-dark); font-weight: 600; }
.pb-auth__links a:hover { text-decoration: underline; }

/* A field that was refused, said under the field it belongs to. Used by the checkout as well. */
.pb-field-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pb-danger);
}

@media (max-width: 575px) {
    /* On a phone the card is the page: full width, and the padding the rest of the site uses. */
    .pb-auth { max-width: none; }
    .pb-auth .pb-checkout-card { padding: 18px; }
}

/* =========================================================================
   THE ACCOUNT ITSELF — my orders, one order, my points
   -------------------------------------------------------------------------
   The cards are the theme's own (`pb-orders-list`, `pb-order-card`, written
   for this very page and until now unused); what is added here is the row of
   account links above them, the figures inside them, and a table that can be
   scrolled sideways on a phone instead of stretching the page.
   ========================================================================= */
.pb-account-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 18px;
    font-size: 13px;
    font-weight: 600;
}
.pb-account-bar a,
.pb-account-bar .sf-linkbutton { color: var(--pb-text-muted); }
.pb-account-bar a:hover,
.pb-account-bar .sf-linkbutton:hover { color: var(--pb-gold-dark); }
.pb-account-bar i { margin-inline-end: 5px; }

/* The order number is the way into the order. */
a.pb-order-number { color: var(--pb-text); }
a.pb-order-number:hover { color: var(--pb-gold-dark); }

/* Cancelled or returned: finished, but not an achievement — the theme had only «pending» and «done». */
.pb-order-badge.is-off { background: var(--pb-bg-alt); color: var(--pb-text-muted); }

.pb-account-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.pb-account-total { font-weight: 700; }
.pb-account-total bdi { color: var(--pb-gold-dark); }

.pb-account-empty { text-align: center; padding: 34px 20px; }
.pb-account-empty p { color: var(--pb-text-muted); margin: 0 0 18px; }
.pb-account-empty .button { display: inline-block; }

/* Points: one figure, read at a glance. */
.pb-points-card { text-align: start; }
.pb-points-label { margin: 0; font-size: 13px; color: var(--pb-text-muted); }
.pb-points-value { margin: 2px 0 0; font-size: 34px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pb-points-tier { margin: 6px 0 0; font-size: 13px; color: var(--pb-text); }
.pb-points-up { color: var(--pb-success); font-weight: 700; }
.pb-points-down { color: var(--pb-danger); font-weight: 700; }

/* A table on a phone scrolls inside its own card rather than widening the page. */
.pb-table-wrap { margin-top: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pb-table-wrap table.shop_table { min-width: 460px; }
.pb-table-wrap td, .pb-table-wrap th { white-space: nowrap; }
.pb-table-wrap td:first-child { white-space: normal; }
.pb-num { text-align: end; font-variant-numeric: tabular-nums; }
.pb-order-qty { color: var(--pb-text-muted); margin-inline-start: 6px; font-size: 12.5px; }

/* The order card holds the table flush with its own edges. */
.pb-order-card .pb-table-wrap table.shop_table { border: 0; border-radius: 0; }
.pb-order-card .pb-table-wrap { margin-bottom: -6px; }

/* On a phone the theme turns `shop_table` into one labelled block per cell — the right answer for the cart, whose
   rows are products with a picture and a name, and the wrong one for a five-column points ledger, which would
   become five lines per movement. Inside `.pb-table-wrap` the table stays a table and scrolls sideways instead. */
@media (max-width: 767px) {
    .pb-table-wrap table.shop_table thead { display: table-header-group; }
    .pb-table-wrap table.shop_table tr { display: table-row; border: 0; margin: 0; }
    .pb-table-wrap table.shop_table th,
    .pb-table-wrap table.shop_table td {
        display: table-cell;
        width: auto;
        position: static;
        padding: 12px 10px;
    }
    .pb-table-wrap table.shop_table td::before { content: none; }
}

/* The announcement bar with a link and a close control (owner, 2026-10-02). The plain `.sf-announcement` above
   is unchanged, so a shop using only the one-line setting sees exactly what it saw before. */
.sf-announcement[data-announcement] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    padding-inline-end: 34px;
}
.sf-announcement[data-announcement] a {
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
}
.sf-announcement--highlight { background: #AD8A4E; }
.sf-announcement--urgent { background: #a4262c; }
.sf-announcement-close {
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    opacity: .7;
    cursor: pointer;
}
.sf-announcement-close:hover { opacity: 1; }

@media (max-width: 575px) {
    .sf-announcement[data-announcement] { font-size: 12px; gap: 6px; padding-inline-end: 30px; }
}