/* ── Title product mockups: pins, stickers, patches, tags (shared by home + shop) ── */
.shop-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 24px;
}
.fmt-tabs {
    display: flex; gap: 4px;
    padding: 4px;
    border: 1px solid rgba(228,228,228,0.12);
    border-radius: 999px;
    background: rgba(0,0,0,0.2);
}
.fmt-tabs button {
    font-family: var(--sans);
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--silver-mid);
    background: none; border: 0;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: var(--cur-hand, pointer);
    transition: color 0.25s, background 0.25s;
}
.fmt-tabs button:hover { color: var(--white); }
.fmt-tabs button.on { color: #2a0907; background: linear-gradient(135deg, #a57c2a, var(--gold-hi) 50%, var(--gold)); }

.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 44px;
}
.product { text-decoration: none; color: inherit; }
.p-stage {
    position: relative;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(228,228,228,0.08);
    background:
        radial-gradient(ellipse 60% 55% at 50% 38%, rgba(255,220,170,0.10), transparent 70%),
        linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.38));
    display: flex; align-items: center; justify-content: center;
    perspective: 900px;
    transition: border-color 0.3s;
}
.product:hover .p-stage { border-color: rgba(233,201,106,0.3); }
.p-stage::after {
    content: '';
    position: absolute; left: 20%; right: 20%; bottom: 9%;
    height: 8%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%);
    filter: blur(3px);
    transition: transform 0.4s, opacity 0.4s;
}
.product:hover .p-stage::after { transform: scale(0.85); opacity: 0.7; }
.mock {
    position: relative;
    z-index: 1;
    transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--lift, 0px));
    transition: transform 0.35s ease-out;
    transform-style: preserve-3d;
    animation: pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.product:hover .mock { --lift: -8px; }
@keyframes pop { from { opacity: 0; transform: scale(0.8); } }

/* shared: glossy sweep masked to the artwork */
.art { position: relative; display: block; }
.art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.art .gloss {
    position: absolute; inset: 0;
    -webkit-mask: var(--img) center / contain no-repeat;
    mask: var(--img) center / contain no-repeat;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.55) 48%, rgba(255,255,255,0.1) 54%, transparent 62%);
    background-size: 300% 100%;
    background-position: 120% 0;
    transition: background-position 0.9s ease;
    pointer-events: none;
}
.product:hover .art .gloss { background-position: -20% 0; }

/* Pin on a backing card */
.m-pin {
    width: clamp(150px, 16vw, 200px);
    aspect-ratio: 3 / 4;
    background:
        radial-gradient(ellipse at 50% 30%, #f7efdd, #e9dcc0 70%),
        #e9dcc0;
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 30px rgba(0,0,0,0.55);
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 12px 12px;
    transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--lift, 0px)) rotate(-3deg);
}
.m-pin .hole {
    width: 18px; height: 6px; border-radius: 6px;
    background: #2a0a08;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}
.m-pin .brand {
    margin-top: 8px;
    font-family: var(--serif); font-weight: 600;
    font-size: 0.5rem; letter-spacing: 0.34em;
    color: #7a1a15;
}
.m-pin .art { width: 62%; aspect-ratio: 1; margin: auto 0; }
.m-pin .art img {
    filter:
        drop-shadow(1.2px 0 0 #d9b75c) drop-shadow(-1.2px 0 0 #d9b75c)
        drop-shadow(0 1.2px 0 #9c7426) drop-shadow(0 -1.2px 0 #f3dc8e)
        drop-shadow(0 3px 2px rgba(60,20,10,0.45));
}
.m-pin .nation {
    font-family: var(--sans); font-weight: 600;
    font-size: 0.5rem; letter-spacing: 0.26em; text-transform: uppercase;
    color: #5a4a36;
    border-top: 1px solid rgba(122,26,21,0.25);
    padding-top: 6px; width: 100%; text-align: center;
}

/* Die-cut sticker */
.m-sticker { width: clamp(150px, 17vw, 210px); aspect-ratio: 1; }
.m-sticker .art { width: 100%; height: 100%; transform: rotate(-6deg); }
/* The white die-cut border is BAKED INTO the images in titles/cut/ by
   `manage.py build_title_assets` — it is not drawn here.
   It used to be four chained drop-shadow() passes per sticker. Four
   axis-aligned offsets sum to a square, so the border measured 3px on the
   axes and 4.2px on the diagonals and traced into every notch between a
   sun's rays; and the filter stack was heavy enough that catalogue cards
   regularly failed to paint until something forced a repaint. The baked
   version is a true distance-transform offset and costs nothing at runtime.
   Only the two depth shadows are left. */
.m-sticker .art img {
    filter:
        drop-shadow(0 1px 1px rgba(0,0,0,0.25))
        drop-shadow(0 12px 10px rgba(0,0,0,0.5));
}
.m-sticker .gloss { opacity: 0.7; }

/* Embroidered patch */
.m-patch {
    width: clamp(150px, 16vw, 196px);
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 2px, rgba(120,90,50,0.10) 2px 4px),
        radial-gradient(circle at 40% 35%, #f3ead6, #d9c9a6 80%);
    box-shadow:
        0 0 0 7px #a8843a,
        0 0 0 8px #6e5220,
        0 16px 28px rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
}
/* The merrow edge: the stitching around the rim.
   The mask MUST be sized `closest-side`. A percentage in a radial-gradient
   colour stop resolves against the gradient line, and the default sizing is
   farthest-corner — on this 210px square that line is 148px, not 105px, so
   `50%` cleared a hole of only 67px and the stitching painted across most of
   the patch instead of the outer 7px. With closest-side the gradient line IS
   half the box, so 100% - 7px lands exactly on the merrow border. */
.m-patch::before {
    content: '';
    position: absolute; inset: -7px;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(0,0,0,0.28) 0 1.5deg, rgba(255,240,200,0.12) 1.5deg 3deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
    mask: radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
}
.m-patch::after {
    content: '';
    position: absolute; inset: 6px;
    border-radius: 50%;
    border: 1.5px dashed rgba(233,201,106,0.45);
}
.m-patch .art { width: 66%; aspect-ratio: 1; }
.m-patch .art img { filter: saturate(1.15) contrast(1.05) drop-shadow(0 1px 0 rgba(0,0,0,0.6)); }
.m-patch .gloss {
    background: repeating-linear-gradient(60deg, rgba(255,255,255,0.14) 0 1px, transparent 1px 3px);
    background-size: auto;
    mix-blend-mode: overlay;
    transition: none;
}

/* Leather bag tag */
.m-tag {
    width: clamp(118px, 12.5vw, 150px);
    aspect-ratio: 3 / 5;
    border-radius: 14px 14px 18px 18px;
    background:
        radial-gradient(ellipse at 40% 30%, rgba(255,200,160,0.14), transparent 60%),
        repeating-linear-gradient(8deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px),
        linear-gradient(160deg, #6e1c16, #3a0d0a);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 18px 30px rgba(0,0,0,0.6);
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    padding: 16px 12px 16px;
    transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--lift, 0px)) rotate(4deg);
    transform-origin: 50% 0;
}
.m-tag::before {
    content: '';
    position: absolute; inset: 7px;
    border-radius: 10px 10px 13px 13px;
    border: 1.5px dashed rgba(233,201,106,0.5);
    pointer-events: none;
}
.m-tag .grommet {
    width: 16px; height: 16px; border-radius: 50%;
    background: radial-gradient(circle, #170504 0 4px, #f3dc8e 4.5px, #a57c2a 6px, #6e5220 8px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.m-tag .art {
    width: 80%; aspect-ratio: 1; margin: auto 0;
    padding: 9%;
    border-radius: 6px;
    background: radial-gradient(ellipse at 50% 40%, #f7efdd, #e2d3b2 85%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.12);
}
.m-tag .art .gloss { inset: 9%; }
.m-tag .art img { filter: drop-shadow(0 -1px 0 rgba(255,255,255,0.25)) drop-shadow(0 2px 1px rgba(0,0,0,0.6)); }
.m-tag .nation {
    font-family: var(--serif); font-weight: 600;
    font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
    background: linear-gradient(180deg, #f5e090, #b98f35);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.m-tag::after {
    content: '';
    position: absolute; left: 50%; top: -34px;
    width: 12px; height: 58px;
    transform: translateX(-50%);
    border: 3px solid #2a0a08;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    z-index: -1;
}

.p-info {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    padding: 14px 2px 0;
}
.p-name { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: var(--white); }
.p-fmt {
    font-family: var(--sans);
    font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--silver-dim);
    margin-top: 3px;
}
.p-notify {
    font-family: var(--sans);
    font-size: 0.56rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold-hi);
    border: 1px solid rgba(233,201,106,0.35);
    background: none;
    padding: 8px 12px;
    cursor: var(--cur-hand, pointer);
    white-space: nowrap;
    transition: background 0.25s, color 0.25s;
}
.p-notify:hover { background: var(--gold-hi); color: #2a0907; }
.p-notify.on { background: rgba(233,201,106,0.16); border-color: var(--gold-hi); }
.p-notify.on:hover { background: var(--gold-hi); }
.shop-foot {
    margin-top: 34px;
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 24px;
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--silver-dim);
}

@media (max-width: 860px) {
    .products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .p-info { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .fmt-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .fmt-tabs::-webkit-scrollbar { display: none; }
    .fmt-tabs button { flex: none; padding: 9px 11px; }
    .products { grid-template-columns: 1fr; }
}