/* ──────────────────────────────────────────────────────────────
   Coin storefront — festive treatment.

   Loaded ONLY on /gold-coins, so the rest of the site keeps its
   normal calm. Everything is built from the existing public-ui
   tokens (wine / gold / cream) rather than new colours, so the
   page reads as the same brand wearing festive clothes.

   The arc motif deliberately echoes the artwork printed on the
   coin packaging, which is black with gold concentric arcs.
   ────────────────────────────────────────────────────────────── */

/* ══ Festive hero ══ */
.pub .shop-hero {
    position: relative;
    overflow: hidden;
    background: #170610;
    border-bottom: 1px solid rgba(255, 224, 130, .22);
}

/* Real photography under the type. A flat CSS wash read as a template; a
   genuine out-of-focus diya frame gives the page depth that gradients
   cannot fake. It stays decorative — every word is real HTML above it. */
.pub .shop-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 78%;
    opacity: .58;
}

/* Two washes: one darkens the top so white type keeps its contrast no
   matter how the photo crops, the other warms the wine back in. */
.pub .shop-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(23, 6, 16, .94) 0%, rgba(23, 6, 16, .62) 46%, rgba(23, 6, 16, .82) 100%),
        linear-gradient(160deg, rgba(92, 14, 41, .55) 0%, transparent 60%);
    pointer-events: none;
}

.pub .shop-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem);
}

/* Eyebrow in the packaging's own language: small caps between two hairline
   rules, the way the pack sets "A MARK OF PURITY". The previous version was
   a filled capsule around a drawn lamp, which looked like stock clip-art. */
.pub .shop-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    color: var(--gold-bright);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(.74rem, .68rem + .25vw, .88rem);
    font-weight: 700;
    letter-spacing: .34em;
    text-indent: .34em;   /* balances the trailing letter-space */
    text-transform: uppercase;
}
.pub .shop-eyebrow::before,
.pub .shop-eyebrow::after {
    content: "";
    width: clamp(1.75rem, 4vw, 3.5rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 224, 130, .75));
}
.pub .shop-eyebrow::after { transform: scaleX(-1); }

.pub .shop-title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    line-height: 1.1;
    font-size: clamp(2.1rem, 1.2rem + 4vw, 3.75rem);
    color: #FFF6DC;
    margin-top: 1.4rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}
.pub .shop-foil {
    background: linear-gradient(100deg, #FFE9A8 0%, #FFD24A 28%, #FFF6D6 48%, #E9B93C 70%, #FFE9A8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pub .shop-lead {
    margin: 1.25rem auto 0;
    max-width: 34rem;
    color: rgba(255, 246, 220, .8);
    font-size: clamp(.95rem, .9rem + .2vw, 1.06rem);
    line-height: 1.75;
}

/* Trust line, set the way the pack sets TRUST | TRANSPARENCY | TRUE VALUE:
   one quiet row of small caps divided by hairlines. Four filled pills were
   doing the shouting instead. */
.pub .shop-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .55rem 1.35rem;
    margin-top: 2.1rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 224, 130, .16);
}
.pub .shop-trust li {
    position: relative;
    color: rgba(255, 246, 220, .74);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .19em;
    text-transform: uppercase;
    white-space: nowrap;
}
@media (max-width: 719px) {
    .pub .shop-trust { gap: .5rem 1rem; }
    .pub .shop-trust li + li::before { display: none; }
}
.pub .shop-trust li + li::before {
    content: "";
    position: absolute;
    left: -.72rem;
    top: 50%;
    width: 1px;
    height: .78rem;
    transform: translateY(-50%);
    background: rgba(255, 224, 130, .3);
}

/* ══ Offer strip ══ */
.pub .shop-strip {
    position: relative;
    overflow: hidden;
    background: #3D0A1C;
    border-bottom: 1px solid rgba(255, 224, 130, .2);
}
.pub .shop-strip-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .42;
}
.pub .shop-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(23,6,16,.9), rgba(23,6,16,.55) 50%, rgba(23,6,16,.9));
    pointer-events: none;
}
.pub .shop-strip-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1.4rem;
    padding: .95rem 1.25rem;
    text-align: center;
}
.pub .shop-strip-inner span {
    color: rgba(255, 246, 220, .9);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.pub .shop-strip-inner .em { color: var(--gold-bright); }
.pub .shop-strip .dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(255, 224, 130, .5);
}

/* ══ Product card ══ */
.pub .shop-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--line-2);
    background: #fff;
    box-shadow: var(--sh-2);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
@media (hover: hover) {
    .pub .shop-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 38px rgba(121, 18, 54, .16), 0 3px 10px rgba(0, 0, 0, .06);
    }
}
/* A hairline of gold along the top edge — cheap, and it reads as premium. */
.pub .shop-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--gold-grad);
    z-index: 2;
}

/* Offer tag. A horizontal badge overlaid on the photo rather than the
   usual diagonal corner ribbon: rotated ribbons clip their own text at
   both ends, and a half-readable offer is worse than none. Kept out of
   assistive tech in the markup — the same offer is stated in real text
   beside the price. */
.pub .shop-tag {
    position: absolute;
    top: .95rem;
    left: .95rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 224, 130, .45);
    background: linear-gradient(135deg, rgba(121, 18, 54, .96), rgba(92, 14, 41, .96));
    color: var(--gold-bright);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    backdrop-filter: blur(3px);
}

.pub .shop-media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--bg-warm);
}
.pub .shop-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.pub .shop-media-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: var(--wash);
}

.pub .shop-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem; }

/* Price row: big sale price, struck list price, saving chip. */
.pub .shop-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .75rem;
}
.pub .shop-price-now {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 800;
    font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.25rem);
    line-height: 1;
    color: var(--wine);
    font-variant-numeric: tabular-nums;
}
.pub .shop-price-was {
    font-size: 1.02rem;
    color: var(--text-3);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
.pub .shop-off {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 6px;
    background: #E9F8EF;
    color: #10693F;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
}
.pub .shop-save {
    margin-top: .5rem;
    font-size: .84rem;
    font-weight: 700;
    color: #10693F;
}

.pub .shop-feats { margin-top: 1.1rem; display: grid; gap: .55rem; }
.pub .shop-feat {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .86rem;
    color: var(--text-2);
}
.pub .shop-feat svg { flex: none; margin-top: .12rem; color: var(--gold-rich); }

/* ══ Assurance band ══ */
.pub .shop-assure {
    border-radius: var(--r-lg);
    border: 1px solid var(--line-2);
    background: var(--wash-2);
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}
.pub .shop-assure-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
/* Two up on a tablet, then all four on one line from the desktop
   breakpoint — an auto-fit track was leaving the fourth item stranded
   on a row of its own, which read like an afterthought. */
@media (min-width: 640px) {
    .pub .shop-assure-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .pub .shop-assure-grid { grid-template-columns: repeat(4, 1fr); gap: 1.35rem; }
}
.pub .shop-assure-item { display: flex; gap: .75rem; }
.pub .shop-assure-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.35rem; height: 2.35rem;
    border-radius: 11px;
    background: var(--gold-grad);
    color: #4A3A08;
    box-shadow: var(--sh-gold);
}

/* ══ Step cards ══ */
.pub .shop-step {
    position: relative;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: #fff;
    padding: 1.5rem;
    box-shadow: var(--sh-1);
}
.pub .shop-step-num {
    display: grid;
    place-items: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    background: var(--gold-grad);
    color: #4A3A08;
    font-weight: 800;
    font-size: .95rem;
}

/* A faint diya glow that breathes. Motion is decorative, so it is
   switched off entirely when the visitor has asked for less. */
@media (prefers-reduced-motion: no-preference) {
    .pub .shop-glow { animation: shop-glow 3.4s var(--ease) infinite; }
    @keyframes shop-glow {
        0%, 100% { opacity: .55; transform: scale(1); }
        50%      { opacity: 1;   transform: scale(1.06); }
    }
}