/* Jewellery demo skin. Loaded after app.css only while the Jewellery demo is active (see DemoManager::headTags).
   Colours and fonts come from the theme variables (Admin > Appearance), so they can still be changed. */
body.demo-jewellery {
  --c-nav-bg: var(--c-text); --c-nav-bg-2: var(--c-text); --c-nav-hover: var(--c-gold-deep); --c-nav-text: var(--c-text);
  --c-accent-text: var(--c-gold-deep); --c-red: var(--c-gold-deep);
  --jw-ink: var(--c-text); --jw-line: var(--c-border); --jw-gold: var(--c-gold); --jw-gold-deep: var(--c-gold-deep);
  --jw-track: .14em;
  font-weight: 400; letter-spacing: .01em;
}
.demo-jewellery h1, .demo-jewellery h2, .demo-jewellery h3 { font-weight: 500; letter-spacing: .01em; }
.demo-jewellery .section-head h2, .demo-jewellery .section-head-row h2, .demo-jewellery .jw-section-title, .demo-jewellery .jw-story h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.demo-jewellery .qv-title { font-size: 1.6rem; line-height: 1.2; }
.demo-jewellery a { text-decoration-color: var(--jw-gold); }

/* ---- buttons: square, quiet, letter-spaced */
.demo-jewellery .btn { border-radius: 0; text-transform: uppercase; letter-spacing: var(--jw-track); font-size: .8rem; font-weight: 500; padding: .95rem 1.8rem; background: var(--c-button-bg); border-color: var(--c-button-bg); color: var(--c-button-text); }
.demo-jewellery .btn:hover { background: var(--jw-gold-deep); border-color: var(--jw-gold-deep); color: var(--c-bg); }
.demo-jewellery .btn-outline, .demo-jewellery .jw-btn-line { background: transparent; color: var(--jw-ink); border: 1px solid var(--jw-ink); }
.demo-jewellery .btn-outline:hover, .demo-jewellery .jw-btn-line:hover { background: var(--jw-ink); border-color: var(--jw-ink); color: var(--c-bg); }
.demo-jewellery .jw-btn-line { display: inline-block; text-decoration: none; }

/* ---- announcement */
.demo-jewellery .announce { font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; padding: .6rem var(--space-2); }

/* ---- header: search left, logo centred, tools right, one quiet menu row */
.demo-jewellery .site-header { box-shadow: none; border-bottom: 1px solid var(--jw-line); }
.demo-jewellery .jw-logo { text-decoration: none; }
.demo-jewellery .jw-logo .logo-word { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 500; text-transform: uppercase; letter-spacing: .32em; padding-left: .32em; white-space: nowrap; }
.demo-jewellery .hd-main-row { min-height: 68px; }
.demo-jewellery .header-tools .hd-account span, .demo-jewellery .hd-track span { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; }
@media (min-width: 960px) {
  .demo-jewellery .jw-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 104px; gap: var(--space-3); }
  .demo-jewellery .jw-search { max-width: 280px; justify-self: start; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--jw-ink); border-radius: 0; }
  .demo-jewellery .jw-search:focus-within { outline: 0; border-bottom-color: var(--jw-gold-deep); }
  .demo-jewellery .jw-search input[type="search"] { padding-left: 0; font-size: .9rem; letter-spacing: .04em; }
  .demo-jewellery .hd-search-btn { background: transparent; color: var(--jw-ink); width: 40px; }
  .demo-jewellery .hd-search-btn:hover { background: transparent; color: var(--jw-gold-deep); }
  .demo-jewellery .jw-tools { gap: .4rem; }
  .demo-jewellery .hd-account { color: var(--jw-ink); border: 0; padding: 0 .6rem 0 0; }
  .demo-jewellery .hd-account:hover { text-decoration: none; color: var(--jw-gold-deep); }
  .demo-jewellery .hd-track { margin-right: .4rem; }
  .demo-jewellery .jw-nav { background: var(--c-bg); color: var(--jw-ink); border-top: 1px solid var(--jw-line); }
  .demo-jewellery .jw-nav .hd-nav-row { justify-content: center; min-height: 54px; }
  .demo-jewellery .jw-menu { flex: 0 1 auto; }
  .demo-jewellery .jw-menu ul { gap: clamp(1rem, 2.4vw, 2.4rem); }
  .demo-jewellery .jw-menu li { position: relative; }
  .demo-jewellery .jw-menu a { color: var(--jw-ink); font-size: .74rem; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; padding: 0 .1rem; border-top: 0; border-bottom: 1px solid transparent; }
  .demo-jewellery .jw-menu a:hover, .demo-jewellery .jw-menu a:focus-visible { color: var(--jw-gold-deep); border-bottom-color: var(--jw-gold); }
  .demo-jewellery .jw-sub { display: none; position: absolute; top: 100%; left: -1rem; min-width: 210px; background: var(--c-bg); border: 1px solid var(--jw-line); padding: .6rem 0; z-index: 50; box-shadow: 0 18px 40px color-mix(in srgb, var(--c-text) 12%, transparent); }
  .demo-jewellery .jw-has-sub:hover > .jw-sub, .demo-jewellery .jw-has-sub:focus-within > .jw-sub { display: block; }
  .demo-jewellery .jw-sub li { display: block; }
  .demo-jewellery .jw-sub a { display: block; padding: .55rem 1.2rem; letter-spacing: .1em; border: 0; }
}
.demo-jewellery .cart-count { background: var(--jw-ink); color: var(--c-bg); }
.demo-jewellery .mobile-nav-panel li a { font-family: var(--font-heading); font-weight: 500; }

/* ---- hero: bright slides, dark type, thin controls */
.demo-jewellery .hero-full { background: var(--c-bg-alt); }
.demo-jewellery .hero-full .hero-slide-bleed { color: var(--jw-ink); background: var(--c-bg-alt); }
.demo-jewellery .hero-full .hero-slide { min-height: clamp(380px, 62vh, 620px); }
.demo-jewellery .hero-full .hero-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--c-bg) 92%, transparent) 0%, color-mix(in srgb, var(--c-bg) 60%, transparent) 38%, color-mix(in srgb, var(--c-bg) 0%, transparent) 68%); }
.demo-jewellery .hero-full .hero-slide-bleed .hero-title { color: var(--jw-ink); text-shadow: none; font-weight: 500; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.08; }
.demo-jewellery .hero-full .hero-slide-bleed .lead { color: var(--c-muted); }
.demo-jewellery .hero-full .hero-grid { padding-bottom: 4.5rem; }
.demo-jewellery .hero-ui { background: color-mix(in srgb, var(--c-bg) 86%, transparent); color: var(--jw-ink); border: 1px solid var(--jw-line); }
.demo-jewellery .hero-bar::before { background: color-mix(in srgb, var(--c-text) 22%, transparent); }
.demo-jewellery .hero-bar-fill { background: var(--jw-ink); }

/* ---- section headings: centred with a small gold rule */
.demo-jewellery .section-head, .demo-jewellery .section-head-row { text-align: center; }
.demo-jewellery .section-head-row { flex-direction: column; align-items: center; border: 0; gap: .6rem; }
.demo-jewellery .section-products { border-top: 0; }
.demo-jewellery .section-products .section-head h2 { padding-left: 0; font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 500; }
.demo-jewellery .section-products .section-head h2::before { display: none; }
.demo-jewellery .section-products .section-head p { padding-left: 0; margin-inline: auto; }
.demo-jewellery .section-products .section-head::after, .demo-jewellery .jw-section-title::after { content: ""; display: block; width: 42px; height: 1px; background: var(--jw-gold); margin: 1rem auto 0; }
.demo-jewellery .section-all { border-radius: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; }
.demo-jewellery .jw-section-title, .demo-jewellery .jw-section-sub { text-align: center; margin-inline: auto; }
.demo-jewellery .jw-eyebrow { text-transform: uppercase; letter-spacing: .24em; font-size: .72rem; color: var(--jw-gold-deep); margin-bottom: .8rem; }

/* ---- shop by category: tall tiles, no box, no coloured backgrounds */
.demo-jewellery .shopcat-head::before, .demo-jewellery .shopcat-head::after { display: none; }
.demo-jewellery .shopcat-head { justify-content: center; }
.demo-jewellery .shopcat-head h2 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.8rem, 3.2vw, 2.6rem); white-space: normal; }
.demo-jewellery .shopcat-box { background: transparent; border: 0; box-shadow: none; padding: var(--space-2) 0; }
.demo-jewellery .shopcat-item { width: clamp(150px, 15.5vw, 200px); }
.demo-jewellery .shopcat-item .shopcat-media, .demo-jewellery .shopcat-item[class*="c"] .shopcat-media { aspect-ratio: 4 / 5; border-radius: 0; background: var(--c-bg-alt); }
.demo-jewellery .shopcat-name { font-family: var(--font-heading); font-size: 1.25rem; color: var(--jw-ink); letter-spacing: .02em; margin-top: .7rem; }
.demo-jewellery .shopcat-link:hover .shopcat-name { color: var(--jw-gold-deep); }
.demo-jewellery .shopcat-arrow { background: var(--c-bg); color: var(--jw-ink); border: 1px solid var(--jw-line); border-radius: 50%; width: 40px; height: 40px; }
.demo-jewellery .shopcat-arrow:hover { background: var(--jw-ink); color: var(--c-bg); }

/* ---- product cards: borderless, serif names, gold prices, actions appear on hover */
.demo-jewellery .product-media { aspect-ratio: 1; background: var(--c-bg-alt); }
.demo-jewellery .product-media img { transition: transform .7s cubic-bezier(.2, .6, .2, 1); }
.demo-jewellery .product-card:hover .product-media img { transform: scale(1.05); }
.demo-jewellery .product-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 500; margin: 1rem 0 .2rem; }
.demo-jewellery .product-card .product-price { justify-content: center; font-size: 1rem; letter-spacing: .04em; }
.demo-jewellery .product-price-lg, .demo-jewellery .qv-info .product-price { justify-content: flex-start; text-align: left; margin-left: 0; padding-left: 0; }
.demo-jewellery .price-now { color: var(--jw-ink); font-weight: 500; }
.demo-jewellery .price-was { color: var(--c-muted); }
.demo-jewellery .badge { border-radius: 0; top: .8rem; left: .8rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; background: var(--c-bg); color: var(--jw-ink); padding: .3rem .6rem; }
.demo-jewellery .badge-sale { background: var(--c-red); color: var(--c-bg); }
.demo-jewellery .badge-new { background: var(--jw-ink); color: var(--c-bg); }
.demo-jewellery .act-btn { border-radius: 0; background: var(--c-bg); color: var(--jw-ink); border: 1px solid var(--jw-line); }
.demo-jewellery .act-btn:hover, .demo-jewellery .act-btn:focus-visible { background: var(--jw-ink); border-color: var(--jw-ink); color: var(--c-bg); }
.demo-jewellery .act-main { border-radius: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; }
@media (hover: hover) {
  .demo-jewellery .product-card .product-actions { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
  .demo-jewellery .product-card:hover .product-actions, .demo-jewellery .product-card:focus-within .product-actions { opacity: 1; transform: none; }
}
.demo-jewellery .slider-arrow { border-radius: 50%; }

/* ---- promo banners: three framed pictures */
.demo-jewellery .section-promo { border-top: 0; background: var(--c-bg-alt); }
.demo-jewellery .promo-card { border-radius: 0; border: 0; background: transparent; position: relative; }
.demo-jewellery .promo-media { aspect-ratio: 10 / 7; }
.demo-jewellery .promo-body { text-align: center; padding: var(--space-2) var(--space-2) var(--space-3); }
.demo-jewellery .promo-body h3 { font-size: 1.6rem; }
.demo-jewellery .promo-body .btn { padding: .7rem 1.3rem; }

/* ---- brand story */
.demo-jewellery .jw-story { background: var(--c-bg); }
.demo-jewellery .jw-story-grid { display: grid; gap: var(--space-4); align-items: center; }
.demo-jewellery .jw-story-media img { width: 100%; max-height: 640px; object-fit: cover; }
.demo-jewellery .jw-story-text p { color: var(--c-muted); font-size: 1.05rem; max-width: 52ch; }
.demo-jewellery .jw-story-text h2 { margin-bottom: 1.2rem; }
@media (min-width: 860px) { .demo-jewellery .jw-story-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }

/* ---- shop by budget */
.demo-jewellery .jw-budget { background: var(--c-bg-alt); }
.demo-jewellery .jw-budget-grid { display: grid; gap: var(--space-2); grid-template-columns: 1fr 1fr; margin-top: var(--space-3); }
.demo-jewellery .jw-budget-grid a { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: 1.4rem 1.2rem; border: 1px solid var(--jw-line); background: var(--c-bg); text-decoration: none; font-family: var(--font-heading); font-size: 1.25rem; transition: border-color .2s, color .2s; }
.demo-jewellery .jw-budget-grid a:hover { border-color: var(--jw-gold); color: var(--jw-gold-deep); }
@media (min-width: 860px) { .demo-jewellery .jw-budget-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- promise strip */
.demo-jewellery .promise { border-top: 1px solid var(--jw-line); text-align: center; }
.demo-jewellery .promise-list h3 { font-size: 1.35rem; }
.demo-jewellery .promise-list p { color: var(--c-muted); margin-inline: auto; }

/* ---- footer: uses the announcement-bar colours of Admin > Appearance, so it always matches your theme */
.demo-jewellery .site-footer { --ft-bg: var(--c-announce-bg); --ft-fg: var(--c-announce-text); background: var(--ft-bg); color: color-mix(in srgb, var(--ft-fg) 82%, var(--ft-bg)); margin-top: 0; }
.demo-jewellery .site-footer a { color: var(--ft-fg); text-decoration: none; }
.demo-jewellery .site-footer a:hover { text-decoration: underline; }
.demo-jewellery .jw-footer-brand { text-align: center; padding: var(--space-5) var(--space-2) var(--space-3); border-bottom: 1px solid color-mix(in srgb, var(--ft-fg) 22%, transparent); }
.demo-jewellery .jw-footer-logo { font-family: var(--font-heading); font-size: 2rem; text-transform: uppercase; letter-spacing: .32em; color: var(--ft-fg); margin: 0 0 .8rem; max-width: none; }
.demo-jewellery .jw-footer-about { margin: 0 auto 1rem; color: color-mix(in srgb, var(--ft-fg) 72%, var(--ft-bg)); }
.demo-jewellery .site-footer .social { display: flex; justify-content: center; gap: 1.4rem; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; }
.demo-jewellery .jw-footer-grid { grid-template-columns: 1fr 1fr; padding-top: var(--space-4); }
.demo-jewellery .jw-footer-grid section:first-child { grid-column: auto; }
.demo-jewellery .site-footer .footer-title { font-family: var(--font-body); font-size: .72rem; text-transform: uppercase; letter-spacing: .22em; color: var(--ft-fg); margin-bottom: 1rem; }
.demo-jewellery .site-footer li { margin-bottom: .45rem; }
.demo-jewellery .site-footer address { font-style: normal; line-height: 1.9; }
.demo-jewellery .footer-base { border-top: 1px solid color-mix(in srgb, var(--ft-fg) 22%, transparent); padding-top: var(--space-2); font-size: .82rem; color: color-mix(in srgb, var(--ft-fg) 62%, var(--ft-bg)); }
@media (min-width: 860px) { .demo-jewellery .jw-footer-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- product page, cart, checkout: the shop's own pages, in the same palette */
.demo-jewellery .product-price-lg .price-now { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 500; }
.demo-jewellery input, .demo-jewellery select, .demo-jewellery textarea { border-radius: 0; }
.demo-jewellery .chip { border-radius: 0; }
.demo-jewellery .breadcrumb, .demo-jewellery .breadcrumbs { font-size: .78rem; letter-spacing: .06em; }

/* ---- refinements */
.demo-jewellery .product-card { border: 0; box-shadow: none; background: transparent; border-radius: 0; padding: 0; }
.demo-jewellery .product-media { border-radius: 0; }
.demo-jewellery .shopcat-track { justify-content: safe center; }
.demo-jewellery .jw-story-media img { aspect-ratio: 4 / 5; }
@media (max-width: 959px) {
  .demo-jewellery .jw-logo .logo-word { font-size: 1.15rem; letter-spacing: .2em; padding-left: .2em; }
  .demo-jewellery .hd-main-row > * { min-width: 0; }
}
/* on phones the hero is tall: keep the photo's subject (right side) in view and put the heading over a light wash */
@media (max-width: 700px) {
  .demo-jewellery .hero-full .hero-bg { object-position: 84% 50%; }
  .demo-jewellery .hero-full .hero-shade { background: linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 5%, transparent) 0%, color-mix(in srgb, var(--c-bg) 88%, transparent) 62%); }
}

/* ---- lookbook: four tall pictures */
.demo-jewellery .jw-look { background: var(--c-bg); }
.demo-jewellery .jw-look-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.demo-jewellery .jw-look-grid a { display: block; text-decoration: none; color: var(--jw-ink); }
.demo-jewellery .jw-look-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-bg-alt); }
.demo-jewellery .jw-look-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .6, .2, 1); }
.demo-jewellery .jw-look-grid a:hover .jw-look-media img, .demo-jewellery .jw-look-grid a:focus-visible .jw-look-media img { transform: scale(1.05); }
.demo-jewellery .jw-look-label { display: block; margin-top: .8rem; text-align: center; font-family: var(--font-heading); font-size: 1.3rem; }
.demo-jewellery .jw-look-grid a:hover .jw-look-label { color: var(--jw-gold-deep); }
@media (min-width: 860px) { .demo-jewellery .jw-look-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }

/* =====================================================================================================
   Muse by Anum - lilac palette. Everything below derives from the theme colours (Admin > Appearance), so
   changing a colour there still changes these too. It replaces the shop's built-in orange / yellow glows
   (which suit the general store) so no stray warm colour shows up on a lilac site.
   ===================================================================================================== */
body.demo-jewellery { --jw-glow: color-mix(in srgb, var(--c-gold-deep) 22%, transparent); --jw-glow-strong: color-mix(in srgb, var(--c-gold-deep) 36%, transparent); }

/* ---- logo picture (square badge): clear size on computers, smaller on phones and in the mobile menu */
.demo-jewellery .jw-logo .logo-img { height: var(--logo-height, 80px); width: auto; max-width: none; object-fit: contain; }
.demo-jewellery .mobile-nav-head .logo-img { height: 44px; width: auto; }
@media (max-width: 959px) { .demo-jewellery .jw-logo .logo-img { height: min(var(--logo-height, 80px), 54px); } }

/* ---- buttons, cards and highlights: lilac glow instead of orange */
.demo-jewellery .btn-add { box-shadow: 0 6px 16px var(--jw-glow); }
.demo-jewellery .btn-add:not([disabled]):hover { box-shadow: 0 9px 22px var(--jw-glow-strong); }
.demo-jewellery .fbt-total .btn-add { box-shadow: 0 4px 12px var(--jw-glow); }
.demo-jewellery .fbt-pic:first-child { box-shadow: 0 0 0 3px var(--jw-glow); }
.demo-jewellery .fbt-item:not(.fbt-main):hover { box-shadow: 0 2px 10px var(--jw-glow); }
.demo-jewellery .fact-tiles > div:hover, .demo-jewellery .content-page.has-hero .info-cards li:hover { box-shadow: 0 10px 24px var(--jw-glow); }
.demo-jewellery .faq-list details[open] { box-shadow: 0 8px 20px var(--jw-glow); }
.demo-jewellery .cp-hero::after { background: radial-gradient(circle, color-mix(in srgb, var(--c-gold) 40%, transparent), transparent 68%); }
.demo-jewellery .cp-hero-ico { box-shadow: 0 8px 20px var(--jw-glow); }
.demo-jewellery .callout { background: linear-gradient(135deg, var(--c-bg-alt), color-mix(in srgb, var(--c-gold) 22%, var(--c-bg))); }
.demo-jewellery .order-track li.is-current .ot-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-gold) 45%, transparent); }
.demo-jewellery .sold-indicator { background: var(--c-bg-alt); border-color: var(--c-border); color: var(--c-gold-deep); }
.demo-jewellery .ds-grid .deal-meta { background: var(--c-bg-alt); border-top-color: var(--c-gold); }
.demo-jewellery .deal-progress, .demo-jewellery .deal-progress::-webkit-progress-bar { background: var(--c-border); }
.demo-jewellery .deal-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--c-gold), var(--c-gold-deep)); }
.demo-jewellery .deal-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--c-gold), var(--c-gold-deep)); }

/* ---- shop banner, daily sale hero and the sale button pulse */
.demo-jewellery .shop-banner { background: radial-gradient(900px 260px at 100% 0%, color-mix(in srgb, var(--c-gold) 32%, transparent), transparent 60%), linear-gradient(135deg, var(--c-announce-bg) 0%, color-mix(in srgb, var(--c-announce-bg) 80%, var(--c-gold-deep)) 100%); }
.demo-jewellery .shop-perk-ico { border-color: color-mix(in srgb, var(--c-gold) 55%, transparent); }
.demo-jewellery .ds-hero { background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--c-gold) 38%, transparent), transparent 45%), linear-gradient(135deg, var(--c-announce-bg) 0%, color-mix(in srgb, var(--c-announce-bg) 72%, var(--c-gold-deep)) 100%); box-shadow: 0 10px 28px var(--jw-glow); }
.demo-jewellery .ds-sub, .demo-jewellery .ds-stats span { color: var(--c-announce-text); }
@keyframes ds-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-gold) 60%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-gold) 0%, transparent); } }

/* ---- sales notifications and sponsored banners */
.demo-jewellery .sn-promo::before, .demo-jewellery .sn-activity:not(:has(.sn-img))::before, .demo-jewellery .sn-best:not(:has(.sn-img))::before { background: linear-gradient(135deg, color-mix(in srgb, var(--c-gold) 45%, var(--c-bg)), var(--c-gold)); box-shadow: 0 3px 8px var(--jw-glow); }
.demo-jewellery .sn-card.sn-promo .sn-link { background: var(--c-gold); color: var(--c-text); box-shadow: 0 2px 6px var(--jw-glow); }
.demo-jewellery .sn-card.sn-promo .sn-link:hover, .demo-jewellery .sn-card.sn-promo .sn-link:focus-visible { box-shadow: 0 5px 12px var(--jw-glow-strong); }
.demo-jewellery .sp-banner, .demo-jewellery .sp-slider { background: linear-gradient(160deg, color-mix(in srgb, var(--c-gold) 40%, var(--c-bg)) 0%, color-mix(in srgb, var(--c-gold) 85%, var(--c-bg)) 55%, var(--c-gold) 100%); box-shadow: 0 8px 24px var(--jw-glow); color: var(--c-text); }
.demo-jewellery .sp-banner-img { background: var(--c-bg); }
.demo-jewellery .sp-banner h3, .demo-jewellery .sp-slide h3, .demo-jewellery .sp-ico { color: var(--c-text); }
.demo-jewellery .sp-tag { color: var(--c-gold-deep); }
.demo-jewellery .sp-badge, .demo-jewellery .sp-kicker, .demo-jewellery .sp-slide h3 b, .demo-jewellery .sp-points li::before { color: var(--c-gold-deep); }
.demo-jewellery .sp-btn { background: var(--c-button-bg); color: var(--c-button-text); }
.demo-jewellery .sp-btn:hover, .demo-jewellery .sp-btn:focus-visible { background: var(--c-gold-deep); color: var(--c-bg); }
.demo-jewellery .sp-dots i { background: color-mix(in srgb, var(--c-text) 30%, transparent); }

/* ---- welcome popup */
.demo-jewellery .leadpop-backdrop { background: color-mix(in srgb, var(--c-text) 62%, transparent); }
.demo-jewellery .lp-visual { background: radial-gradient(ellipse 85% 55% at 50% 84%, var(--c-bg) 0, color-mix(in srgb, var(--c-bg) 90%, transparent) 40%, transparent 100%), radial-gradient(color-mix(in srgb, var(--c-gold-deep) 12%, transparent) 1px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(180deg, var(--c-bg-alt) 0%, color-mix(in srgb, var(--c-gold) 38%, var(--c-bg)) 100%); }
.demo-jewellery .lp-offer-top { color: var(--c-announce-text); background: var(--c-announce-bg); }
.demo-jewellery .lp-offer-sub, .demo-jewellery .lp-field label { color: var(--c-muted); }
.demo-jewellery .lp-offer-bar { background: linear-gradient(90deg, var(--c-gold), var(--c-gold-deep)); }
.demo-jewellery .lp-input svg, .demo-jewellery .lp-or { color: var(--c-muted); }
.demo-jewellery .lp-input input { background: var(--c-bg-alt); border-color: var(--c-border); border-radius: 0; }
.demo-jewellery .lp-input input:focus { background: var(--c-bg); border-color: var(--c-gold-deep); box-shadow: 0 0 0 4px var(--jw-glow); }
.demo-jewellery .lp-or::before, .demo-jewellery .lp-or::after { background: var(--c-border); }
.demo-jewellery .lp-btn { color: var(--c-button-text); background: var(--c-button-bg); border-radius: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; box-shadow: 0 8px 20px var(--jw-glow); }
.demo-jewellery .lp-btn:hover { background: var(--c-gold-deep); color: var(--c-bg); box-shadow: 0 12px 26px var(--jw-glow-strong); }
.demo-jewellery .lp-btn:focus-visible { outline-color: var(--c-gold-deep); }
@media (max-width: 720px) { .demo-jewellery .lp-visual { background: linear-gradient(120deg, var(--c-bg-alt) 0%, color-mix(in srgb, var(--c-gold) 38%, var(--c-bg)) 100%); } }

/* ---- product page badges in the theme palette (sold counter, viewing counter, low-stock pill + bar, viewed pill).
   These replace the orange / yellow / amber the general store uses. They follow Admin > Appearance, so changing the theme colours changes these too. */
.demo-jewellery .sc-counter,
.demo-jewellery .vc-counter { color: var(--c-gold-deep); background: var(--c-bg-alt); border-color: var(--c-border); }
.demo-jewellery .sc-counter strong,
.demo-jewellery .vc-counter strong { color: var(--c-text); }
.demo-jewellery .vc-counter .vc-icon { color: var(--c-gold-deep); }
.demo-jewellery .product-info .stock.low { color: var(--c-gold-deep); background: var(--c-bg-alt); border-color: var(--c-border); }
.demo-jewellery .stock-bar, .demo-jewellery .stock-bar::-webkit-progress-bar { background: var(--c-border); }
.demo-jewellery .stock-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--c-gold), var(--c-gold-deep)); }
.demo-jewellery .stock-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--c-gold), var(--c-gold-deep)); }
.demo-jewellery .activity li { background: var(--c-bg-alt); border-color: var(--c-border); color: var(--c-muted); }
.demo-jewellery .activity li strong { color: var(--c-text); }
.demo-jewellery .stock.low { color: var(--c-gold-deep); }

/* ---- search suggestions in the theme palette */
.demo-jewellery .sg-item:hover, .demo-jewellery .sg-item.is-active,
.demo-jewellery .sg-cat:hover, .demo-jewellery .sg-cat.is-active,
.demo-jewellery .sg-all:hover, .demo-jewellery .sg-all.is-active { background: var(--c-bg-alt); }
.demo-jewellery .sg mark { background: var(--c-border); }
.demo-jewellery .sg-all { color: var(--c-gold-deep); }
.demo-jewellery .sg-cat { border-radius: 0; }
.demo-jewellery .sg-cat .sg-go { color: var(--c-gold-deep); letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; }

/* ---- category / search page header: centred, calm, in the theme palette.
   (Written here, not in app.css, so it works with the compressed app.min.css as it is.) */
.demo-jewellery .listing-head { position: relative; text-align: center; margin: var(--space-2) 0 var(--space-3); padding: clamp(2rem, 5vw, 3.4rem) var(--space-2) clamp(1.6rem, 4vw, 2.6rem); background: var(--c-bg-alt); border: 0; border-radius: 0; overflow: visible; }
.demo-jewellery .listing-head::before { display: none; }
.demo-jewellery .listing-head h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); font-weight: 500; letter-spacing: .04em; margin: 0 0 .9rem; padding-bottom: 1rem; position: relative; }
.demo-jewellery .listing-head h1::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 56px; height: 1px; background: var(--c-gold-deep); transform: translateX(-50%); }
.demo-jewellery .listing-head .lead { max-width: 62ch; margin: 0 auto; font-size: 1.02rem; line-height: 1.75; color: var(--c-muted); }
/* the toolbar below already shows the live "N items" count, so the second one in the header is not repeated */
.demo-jewellery .listing-head .listing-count { display: none; }
.demo-jewellery .listing-head .subcats { justify-content: center; margin-top: var(--space-2); }
.demo-jewellery .listing-head .chip { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; padding: .5rem 1.1rem; }
.demo-jewellery .listing-head .chip:hover, .demo-jewellery .listing-head .chip:focus-visible { background: var(--c-button-bg); border-color: var(--c-button-bg); color: var(--c-button-text); }

/* toolbar: count on the left, sort on the right, one thin line under it */
.demo-jewellery .toolbar { align-items: center; padding-bottom: .9rem; margin-bottom: var(--space-3); border-bottom: 1px solid var(--c-border); }
.demo-jewellery .toolbar .result-count { font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--c-muted); }
.demo-jewellery .sort-field label { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-muted); font-weight: 500; }
.demo-jewellery .sort-field select { border: 1px solid var(--c-border); background: var(--c-bg); padding-block: .6rem; }
.demo-jewellery .sort-field select:focus { border-color: var(--c-gold-deep); outline: 0; box-shadow: 0 0 0 3px var(--jw-glow); }
.demo-jewellery .filters-box { border-color: var(--c-border); }
.demo-jewellery .filters-box summary { font-weight: 500; letter-spacing: .02em; }
.demo-jewellery .filter-group legend, .demo-jewellery .filter-title { font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: var(--c-muted); font-weight: 600; }
.demo-jewellery .check input { accent-color: var(--c-gold-deep); border-radius: 0; }
@media (max-width: 600px) { .demo-jewellery .listing-head { margin-inline: calc(var(--space-2) * -1); } }