/* ── Ìyánífá's Wardrobe — the product card (spec §1–§2) ──────────────
   One card for blanks and relay pieces. Eight fixed-height slots so every
   card in a row is the same height; nothing grows, nothing shifts. */

:root {
	--wig-cta:   #c98a1b;   /* amber      — primary action only        */
	--wig-save:  #b3541e;   /* terracotta — savings, urgency, sale      */
	--wig-ok:    #1e6b52;   /* emerald    — in stock, US warehouse       */
	--wig-link:  #2b3a67;   /* indigo     — links, +N, see all           */
	--wig-ink:   #1f1a17;
	--wig-muted: #7a716a;
	--wig-bg:    #faf6ef;
	--wig-card:  #ffffff;
	--wig-line:  #e8e1d6;
	--wig-ui:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* collection tints (image background) */
	--wig-tint-whites:      #faf6ef;
	--wig-tint-colored:     #e6e9f2;
	--wig-tint-african:     #f4e3d6;
	--wig-tint-calligraphy: #e2efe9;
	--wig-tint-plus:        #f7ecd7;
	--wig-tint-accessories: #ece7de;
}

/* ── Frame ── */
.iyanifas-product-card.wig-card {
	display: grid;
	grid-template-rows: auto 22px 40px 18px 32px 18px 40px; /* image · swatches · title · proof · price · delivery · CTA (kicker row removed, Batch 3) */
	row-gap: 4px;
	padding: 0 0 12px;
	margin: 0;
	background: var(--wig-card);
	border: 1px solid var(--wig-line);
	border-radius: 6px;
	overflow: hidden;
	color: var(--wig-ink);
	font-family: var(--wig-ui);
	text-decoration: none;
	box-shadow: none;
	transition: box-shadow .15s, border-color .15s;
}
.iyanifas-product-card.wig-card:hover { border-color: #d9d0c2; box-shadow: 0 4px 16px rgba(31,26,23,.08); }
.wig-card > * { margin: 0 12px; min-width: 0; }

/* ── 1. Image ── */
.wig-card__media { position: relative; display: block; margin: 0; aspect-ratio: 3 / 4; background: var(--wig-bg); overflow: hidden; }
.wig-card--tint-whites      .wig-card__media { background: var(--wig-tint-whites); }
.wig-card--tint-colored     .wig-card__media { background: var(--wig-tint-colored); }
.wig-card--tint-african     .wig-card__media { background: var(--wig-tint-african); }
.wig-card--tint-calligraphy .wig-card__media { background: var(--wig-tint-calligraphy); }
.wig-card--tint-plus        .wig-card__media { background: var(--wig-tint-plus); }
.wig-card--tint-accessories .wig-card__media { background: var(--wig-tint-accessories); }
.wig-card__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .25s; }
.wig-card:hover .wig-card__img { transform: scale(1.02); }

.wig-card__badge {
	position: absolute; top: 8px; left: 8px; z-index: 2;
	padding: 4px 7px; border-radius: 4px;
	font: 700 11px/1 var(--wig-ui); letter-spacing: .04em; text-transform: uppercase;
	background: #fff; color: var(--wig-ink);
	box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.wig-card__badge--save { color: var(--wig-save); }
.wig-card__badge--ok   { color: var(--wig-ok); }
.wig-card__badge--link { color: var(--wig-link); }
.wig-card__badge--ink  { background: var(--wig-bg); color: var(--wig-ink); }

/* Slots never inherit theme spacing */
.iyanifas-product-card.wig-card > .wig-card__swatches,
.iyanifas-product-card.wig-card > .wig-card__kicker,
.iyanifas-product-card.wig-card > .wig-card__proof,
.iyanifas-product-card.wig-card > .wig-card__price,
.iyanifas-product-card.wig-card > .wig-card__delivery,
.iyanifas-product-card.wig-card > .wig-card__cta { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.iyanifas-product-card.wig-card > .wig-card__swatches { margin-top: 10px !important; }
.iyanifas-product-card.wig-card > .wig-card__cta { margin-top: 4px !important; }
.iyanifas-product-card.wig-card p, .iyanifas-product-card.wig-card span, .iyanifas-product-card.wig-card small { line-height: inherit; }

/* ── 2. Swatches ── */
.wig-card__swatches { display: flex; align-items: center; gap: 5px; margin-top: 10px; height: 22px; overflow: hidden; }
.wig-card__dotlink { display: inline-flex; line-height: 0; }
.wig-card__dot {
	display: inline-block; width: 16px; height: 16px; border-radius: 50%;
	background: var(--dot, #bdb5aa);
	box-shadow: inset 0 0 0 1px rgba(31,26,23,.18);
}
.wig-card__dotlink:hover .wig-card__dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--wig-ink); }
.wig-card__dot--img { display: block; object-fit: cover; object-position: center top; background: #efe9df; }
.wig-card__more { font: 600 12px/1 var(--wig-ui); color: var(--wig-link); text-decoration: none; margin-left: 2px; }
.wig-card__more:hover { text-decoration: underline; }

/* ── 3. Kicker ── */
.wig-card__kicker { display: block; height: 16px; font: 600 11px/16px var(--wig-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--wig-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 4. Title: two lines, never more (beats theme h3 rules) ── */
.iyanifas-product-card.wig-card .wig-card__title,
.iyanifas-product-card.wig-card h3.wig-card__title {
	margin: 0 12px !important; padding: 0 !important; height: 40px; max-height: 40px; overflow: hidden;
	font-family: var(--wig-ui) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.3 !important;
	letter-spacing: 0 !important; text-transform: none !important; color: var(--wig-ink) !important;
}
.iyanifas-product-card.wig-card .wig-card__title a { color: inherit; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: inherit; }
.iyanifas-product-card.wig-card .wig-card__title a:hover { text-decoration: underline; text-decoration-color: var(--wig-muted); }

/* ── 5. Proof ── */
.wig-card__proof { display: block; height: 18px; font: 500 12px/18px var(--wig-ui); color: var(--wig-ok); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* When size is the card's only decision, the size range opens the sheet too. */
.wig-card:has([data-wig-size]) .wig-card__proof { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: rgba(30,107,82,.5); }
.wig-card:has([data-wig-size]) .wig-card__proof:hover { text-decoration-color: var(--wig-ok); }

/* ── 6. Price ── */
.wig-card__price { display: flex; align-items: baseline; gap: 6px; height: 32px; white-space: nowrap; overflow: hidden; }
.wig-card__from { font: 500 12px/1 var(--wig-ui); color: var(--wig-muted); }
.wig-card__amount { font: 600 24px/1 var(--wig-ui); color: var(--wig-ink); letter-spacing: -.01em; }
.wig-card__amount sup { font-size: 12px; font-weight: 600; vertical-align: top; position: relative; top: 1px; margin: 0 1px; }
.wig-card__amount.is-sale { color: var(--wig-save); }
.wig-card__was { font: 400 13px/1 var(--wig-ui); color: var(--wig-muted); }
.wig-card__note { font: 400 11px/1 var(--wig-ui); color: var(--wig-muted); overflow: hidden; text-overflow: ellipsis; }

/* ── 7. Delivery ── */
.wig-card__delivery { display: block; height: 18px; font: 400 13px/18px var(--wig-ui); color: var(--wig-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wig-card__delivery b { font-weight: 600; }
.wig-card__delivery:empty::before { content: '\00a0'; }

/* ── 8. CTA ── */
/* The theme uppercases <button>; the card and sheet use buttons and links interchangeably, so pin them to sentence case. */
.iyanifas-product-card.wig-card button.wig-card__cta,
.wig-sheet button { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--wig-ui) !important; box-shadow: none; }
.wig-card__cta {
	display: flex; align-items: center; justify-content: center;
	height: 40px; margin-top: 4px; padding: 0 14px;
	border: 1px solid transparent; border-radius: 20px;
	font: 600 14px/1 var(--wig-ui); text-decoration: none; cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.wig-card__cta--add       { background: var(--wig-cta); color: #1f1a17; }
.wig-card__cta--add:hover { background: #b87b13; }
.wig-card__cta--size, .wig-card__cta--options, .wig-card__cta--customise, .wig-card__cta--view {
	background: #fff; color: var(--wig-ink); border-color: #cfc6b8;
}
.wig-card__cta--size:hover, .wig-card__cta--options:hover, .wig-card__cta--customise:hover, .wig-card__cta--view:hover { border-color: var(--wig-ink); }
.wig-card__cta--customise { border-color: var(--wig-cta); }
.wig-card__cta.is-busy { opacity: .6; pointer-events: none; }
.wig-card__cta.is-done { background: var(--wig-ok); color: #fff; border-color: var(--wig-ok); }

/* Row tracks: cards fill the track column; no legacy overlay/hover chrome. */
.wig-row__track > .wig-card { scroll-snap-align: start; width: auto; min-width: 0; }
.wig-card .iyanifas-product-card__hover { display: none; }

/* Toast for tier-0 adds */
.wig-toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 9999; transform: translateX(-50%) translateY(20px);
	padding: 12px 18px; border-radius: 8px; background: var(--wig-ink); color: #fff;
	font: 500 14px/1.3 var(--wig-ui); box-shadow: 0 8px 24px rgba(0,0,0,.2); opacity: 0; transition: opacity .2s, transform .2s;
}
.wig-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.wig-toast a { color: #fff; text-decoration: underline; margin-left: 10px; }

/* ── Choose-size sheet (spec §3, tier 1): centred dialog on desktop, bottom sheet on phones ── */
html.wig-sheet-open { overflow: hidden; }
.wig-sheet { position: fixed; inset: 0; z-index: 10000; font-family: var(--wig-ui); color: var(--wig-ink); }
.wig-sheet[hidden] { display: none; }
.wig-sheet__backdrop { position: absolute; inset: 0; background: rgba(31,26,23,.45); opacity: 0; transition: opacity .2s; }
.wig-sheet__panel {
	position: absolute; left: 50%; top: 50%; width: min(420px, calc(100vw - 32px));
	transform: translate(-50%, -46%); opacity: 0; transition: transform .2s, opacity .2s;
	background: var(--wig-card); border-radius: 12px; padding: 20px 20px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.wig-sheet.is-on .wig-sheet__backdrop { opacity: 1; }
.wig-sheet.is-on .wig-sheet__panel { transform: translate(-50%, -50%); opacity: 1; }
.wig-sheet__close {
	position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%;
	background: transparent; color: var(--wig-muted); font: 400 24px/32px var(--wig-ui); cursor: pointer;
}
.wig-sheet__close:hover { background: var(--wig-bg); color: var(--wig-ink); }
.wig-sheet__head { display: flex; gap: 14px; align-items: flex-start; margin: 0 28px 16px 0; }
.wig-sheet__img { flex: 0 0 72px; width: 72px; height: 96px; object-fit: cover; object-position: center top; border-radius: 6px; background: var(--wig-bg); }
.wig-sheet__meta { min-width: 0; }
.wig-sheet .wig-sheet__title { margin: 0 0 6px !important; padding: 0; font: 500 15px/1.3 var(--wig-ui) !important; color: var(--wig-ink) !important; text-transform: none !important; letter-spacing: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wig-sheet__price { font: 600 18px/1 var(--wig-ui); color: var(--wig-ink); }
.wig-sheet__label { font: 600 11px/1 var(--wig-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--wig-muted); margin: 0 0 8px; }
.wig-sheet__sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.wig-sheet__size {
	min-width: 46px; height: 40px; padding: 0 12px; border: 1px solid #cfc6b8; border-radius: 6px;
	background: #fff; color: var(--wig-ink); font: 500 14px/1 var(--wig-ui); cursor: pointer;
	transition: border-color .12s, background .12s, color .12s;
}
/* Theme paints button:focus/hover gold; the chip has exactly three states — plain, hovered, selected. */
.wig-sheet__size, .wig-sheet__size:focus, .wig-sheet__size:active { background: #fff !important; color: var(--wig-ink) !important; border-color: #cfc6b8 !important; outline: none; box-shadow: none !important; }
.wig-sheet__size:hover { border-color: var(--wig-ink) !important; }
.wig-sheet__size:focus-visible { outline: 2px solid var(--wig-link); outline-offset: 2px; }
.wig-sheet__size.is-on, .wig-sheet__size.is-on:focus, .wig-sheet__size.is-on:hover { background: var(--wig-ink) !important; color: #fff !important; border-color: var(--wig-ink) !important; }
.wig-sheet__size.is-out { color: var(--wig-muted); border-style: dashed; cursor: not-allowed; text-decoration: line-through; background: var(--wig-bg); }
.wig-sheet__add {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 44px;
	border: 1px solid transparent; border-radius: 22px; background: var(--wig-cta); color: #1f1a17;
	font: 600 15px/1 var(--wig-ui); cursor: pointer; transition: background .15s;
}
.wig-sheet__add:hover { background: #b87b13; }
.wig-sheet__add:focus, .wig-sheet__add:active { outline: none; box-shadow: none !important; }
.wig-sheet__add:focus-visible { outline: 2px solid var(--wig-link); outline-offset: 2px; }
.wig-sheet__close:focus { outline: none; box-shadow: none !important; background: transparent !important; color: var(--wig-muted) !important; }
.wig-sheet__close:focus-visible { outline: 2px solid var(--wig-link); }
.wig-sheet__add:disabled { background: var(--wig-line); color: var(--wig-muted); cursor: default; }
.wig-sheet__add.is-busy { opacity: .6; pointer-events: none; }
.wig-sheet__add.is-done, .wig-sheet__add.is-done:focus { background: var(--wig-ok) !important; color: #fff !important; border-color: var(--wig-ok) !important; }
.wig-sheet__link { display: block; margin: 12px 0 0; text-align: center; font: 500 13px/1 var(--wig-ui); color: var(--wig-link); text-decoration: none; }
.wig-sheet__link:hover { text-decoration: underline; }

@media (max-width: 560px) {
	.wig-sheet__panel { top: auto; bottom: 0; left: 0; width: 100%; transform: translateY(24px); border-radius: 14px 14px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
	.wig-sheet.is-on .wig-sheet__panel { transform: none; }
	.wig-sheet__size { flex: 1 1 calc(25% - 8px); }
}

@media (max-width: 560px) {
	.iyanifas-product-card.wig-card { grid-template-rows: auto 20px 36px 16px 28px 16px 36px; padding-bottom: 10px; }
	.wig-card > * { margin: 0 8px; }
	.iyanifas-product-card.wig-card .wig-card__title { margin: 0 8px !important; height: 36px; max-height: 36px; font-size: 13.5px !important; }
	.wig-card__amount { font-size: 20px; }
	.wig-card__cta { height: 36px; font-size: 13px; }
	.wig-card__dot { width: 14px; height: 14px; }
}

/* ── Sheet: colour chips (tier 1b) ── */
.wig-sheet__size--swatch { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px !important; }
.wig-sheet__dot { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(31,26,23,.15); object-fit: cover; object-position: center top; }
.wig-sheet__size.is-on .wig-sheet__dot { border-color: rgba(255,255,255,.6); }
.wig-sheet--colour .wig-sheet__size { text-decoration: none !important; }
@media (max-width: 560px) { .wig-sheet--colour .wig-sheet__size { flex: 1 1 calc(50% - 8px); justify-content: flex-start; } }

/* Chip children are inert: the button takes every hover and click, whole face. */
.wig-sheet__size { cursor: pointer; }
.wig-sheet__size > * { pointer-events: none; }


/* ── Batch 3 (15 Sept 2026): one button style, Quick view ─────────────────── */
.iyanifas-product-card.wig-card { position: relative; }
.wig-card__medialink { display: block; width: 100%; height: 100%; }

/* Every card button looks the same: white, hairline, ink text; amber on hover. The amber fill is kept for the
   one decisive action inside the sheet ("Add to cart — M"). */
.wig-card__cta--add, .wig-card__cta--size, .wig-card__cta--options, .wig-card__cta--customise, .wig-card__cta--view, .wig-card__cta--colour {
	background: #fff; color: var(--wig-ink); border-color: #cfc6b8;
}
.wig-card__cta--add:hover, .wig-card__cta--size:hover, .wig-card__cta--options:hover, .wig-card__cta--customise:hover, .wig-card__cta--view:hover, .wig-card__cta--colour:hover {
	background: var(--wig-cta); border-color: var(--wig-cta); color: #1f1a17;
}

.wig-card__quick {
	position: absolute; left: 50%; bottom: 12px; z-index: 3; transform: translate(-50%, 6px);
	padding: 8px 16px; border: 0; border-radius: 18px; background: rgba(255,255,255,.95); color: var(--wig-ink);
	font: 600 13px/1 var(--wig-ui) !important; text-transform: none !important; letter-spacing: 0 !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.15); cursor: pointer; opacity: 0; transition: opacity .15s, transform .15s;
}
.wig-card:hover .wig-card__quick, .wig-card:focus-within .wig-card__quick { opacity: 1; transform: translate(-50%, 0); }
.wig-card__quick:hover { background: #fff; }
@media (hover: none) { .wig-card__quick { display: none; } } /* phones: a tap opens the product */

/* Quick view uses the size sheet, wider, with a large photo and the delivery line */
.wig-sheet--quick .wig-sheet__panel { width: min(640px, calc(100vw - 32px)); }
.wig-sheet--quick .wig-sheet__head { gap: 20px; }
.wig-sheet--quick .wig-sheet__img { flex: 0 0 220px; width: 220px; height: 293px; }
.wig-sheet--quick .wig-sheet__title { -webkit-line-clamp: 4 !important; font-size: 17px !important; }
.wig-sheet--quick .wig-sheet__price { font-size: 22px; margin-bottom: 10px; }
.wig-sheet__extra { font: 400 13px/1.5 var(--wig-ui); color: var(--wig-ink); }
.wig-sheet__extra b { font-weight: 600; }
.wig-sheet__extra .is-proof { color: var(--wig-ok); font-weight: 500; }
.wig-sheet:not(.wig-sheet--quick) .wig-sheet__extra { display: none; }
.wig-sheet__add.wig-sheet__add--link { text-decoration: none; }
@media (max-width: 560px) {
	.wig-sheet--quick .wig-sheet__img { flex-basis: 110px; width: 110px; height: 147px; }
}

.wig-sheet [hidden] { display: none !important; } /* .wig-sheet__add is display:flex, which would beat the hidden attribute */