/* ── Ìyánífá's Wardrobe — slider rows & chip strip ─────────────────
   Loaded after customizer.css on every shop page. Cards keep their own
   styles (.iyanifas-product-card); this file only lays them out in rows. */

:root {
	--wig-row-gap: 16px;
	--wig-row-cols: 6;
}
@media (max-width: 1400px) { :root { --wig-row-cols: 5; } }
@media (max-width: 1100px) { :root { --wig-row-cols: 4; } }
@media (max-width: 820px)  { :root { --wig-row-cols: 3; --wig-row-gap: 12px; } }
@media (max-width: 560px)  { :root { --wig-row-cols: 2.25; --wig-row-gap: 10px; } }

/* The rail grid is gone: one column, full width. */
.wig-rows-page .wig-cz-shop { display: block; }
.wig-rows-page .wig-rail, .wig-rows-page .wig-rail__drawer { display: none !important; }

/* Search bar + chips travel with the page top. */
/* Sub-pages carry the same chrome as the home page: nav in flow, then the
   search bar, then the chips — nothing fixed, nothing overlapping. */
.wig-rows-page .iyanifas-nav--shop, .wig-rows-page .iyanifas-nav--shop.scrolled { position: relative; top: auto; transform: none; box-shadow: none; }
body.wig-rows-page { padding-top: 0 !important; }
.wig-rows-page .wig-shopbar { position: static; }
.wig-rows-page .wig-topbar { margin-top: 8px; }

/* Compact title line — replaces the old full-width header band. */
.wig-rows__intro { padding: 18px 0 0; }
.wig-rows__intro .iyanifas-container { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wig-rows__crumb { font: 500 12px/1 var(--font-body, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--warm-gray, #8C7E6F); text-decoration: none; }
.wig-rows__crumb:hover { color: var(--terracotta, #C0502E); }
.wig-rows__title { margin: 0; font-family: var(--font-display, serif); font-weight: 400; font-size: 26px; color: var(--espresso, #2C2018); }
.wig-rows__meta { font: 500 12px/1 var(--font-body, sans-serif); color: var(--warm-gray, #8C7E6F); }

/* ── Chips ── */
.wig-chips { background: var(--ivory, #FDF8F0); }
.wig-chips__inner { padding-top: 10px; padding-bottom: 10px; }
.wig-chips__row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; }
.wig-chips__row::-webkit-scrollbar { display: none; }
.wig-chips__row--leaves { margin-top: 6px; }
.wig-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--gold, #C5A55A); border-radius: 999px; background: #fff; font: 600 11px/1 var(--font-body, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--espresso, #2C2018); text-decoration: none; white-space: nowrap; }
.wig-chip span { font-weight: 500; letter-spacing: 0; color: var(--warm-gray, #8C7E6F); }
.wig-chip:hover { border-color: var(--terracotta, #C0502E); color: var(--terracotta, #C0502E); }
.wig-chip.is-active { background: var(--espresso, #2C2018); border-color: var(--espresso, #2C2018); color: #fff; }
.wig-chip.is-active span { color: rgba(255,255,255,.7); }
.wig-chip--collection { border-color: var(--terracotta, #C0502E); color: var(--terracotta, #C0502E); }
.wig-chip--collection.is-active { background: var(--terracotta, #C0502E); border-color: var(--terracotta, #C0502E); color: #fff; }
.wig-chip--leaf { padding: 6px 12px; font-size: 10px; letter-spacing: .1em; border-color: rgba(44,32,24,.2); }

/* ── Rows ── */
.wig-rows { padding: 4px 0 48px; }
.wig-rows__empty { color: var(--warm-gray, #8C7E6F); padding: 40px 0; }

.wig-row { margin: 0 0 8px; padding: 22px 0 10px; border-bottom: 1px solid rgba(197,165,90,.2); }
.wig-row:last-child { border-bottom: 0; }
.wig-row__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.wig-row__context { font: 600 10px/1 var(--font-body, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--warm-gray, #8C7E6F); }
.wig-row__context::before { content: '·'; margin-right: 8px; color: var(--gold, #C5A55A); }
.wig-row__title { margin: 0; font-family: var(--font-display, serif); font-size: 22px; font-weight: 400; color: var(--espresso, #2C2018); }
.wig-row__title a { color: inherit; text-decoration: none; }
.wig-row__title a:hover { color: var(--terracotta, #C0502E); }
.wig-row__count { font: 500 12px/1 var(--font-body, sans-serif); color: var(--warm-gray, #8C7E6F); margin-left: 6px; }
.wig-row__lead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; min-width: 0; }
.wig-row__leaves { display: flex; gap: 4px 14px; flex-wrap: wrap; }
.wig-row__leaves a { font: 500 13px/1.4 var(--font-body, sans-serif); color: var(--warm-gray, #8C7E6F); text-decoration: none; }
.wig-row__leaves a:hover { color: var(--terracotta, #C0502E); }
.wig-row__all { flex: 0 0 auto; font: 500 13px/1 var(--font-body, sans-serif); color: var(--terracotta, #C0502E); text-decoration: none; white-space: nowrap; }
.wig-row__all:hover { text-decoration: underline; }
.wig-row__arrow { position: absolute; top: 50%; z-index: 3; width: 44px; height: 64px; margin-top: -32px; border: 1px solid var(--gold, #C5A55A); border-radius: 6px; background: rgba(255,255,255,.94); color: var(--espresso, #2C2018); font-size: 30px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 4px; box-shadow: 0 2px 10px rgba(44,32,24,.14); opacity: 0; transition: background .15s, color .15s, opacity .15s; }
.wig-row__arrow--prev { left: -6px; }
.wig-row__arrow--next { right: -6px; }
.wig-row__viewport:hover .wig-row__arrow:not([disabled]), .wig-row__arrow:focus-visible { opacity: 1; }
.wig-row__arrow:hover:not([disabled]) { background: var(--espresso, #2C2018); color: #fff; border-color: var(--espresso, #2C2018); }
.wig-row__arrow[disabled] { opacity: 0; pointer-events: none; }

.wig-row__viewport { position: relative; margin: 0 calc(-1 * var(--wig-row-gap) / 2); }
.wig-row__track {
	--wig-card-w: calc((100% - (var(--wig-row-cols) - 1) * var(--wig-row-gap)) / var(--wig-row-cols));
	display: grid; grid-auto-flow: column;
	grid-template-rows: repeat(var(--wig-rows, 1), auto);
	grid-auto-columns: var(--wig-card-w);
	gap: var(--wig-row-gap);
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
	padding: 4px calc(var(--wig-row-gap) / 2) 12px;
}
.wig-row__track::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
	.wig-row__track { cursor: grab; }
	.wig-row__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
	.wig-row__track.is-dragging * { pointer-events: none; }
}
.wig-row__track > .iyanifas-product-card { scroll-snap-align: start; min-width: 0; width: auto; }
.wig-row__sentinel { grid-row: 1 / -1; width: 1px; }
.wig-row.is-loading .wig-row__track::after { content: ''; grid-row: 1 / -1; width: 60px; background: radial-gradient(circle, var(--gold, #C5A55A) 4px, transparent 5px) center / 12px 12px no-repeat; opacity: .6; }

/* Fade at the right edge hints there's more. */
.wig-row__viewport::after { content: ''; position: absolute; top: 0; right: 0; bottom: 12px; width: 48px; pointer-events: none; background: linear-gradient(to right, transparent, var(--ivory, #FDF8F0)); opacity: 1; transition: opacity .2s; }
.wig-row.at-end .wig-row__viewport::after { opacity: 0; }

@media (max-width: 820px) {
	.wig-row__arrow { display: none; }
	.wig-rows__title { font-size: 22px; }
	.wig-rows__intro { padding-top: 12px; }
	.wig-row__leaves { display: none; }
	.wig-chips__inner { padding-top: 8px; padding-bottom: 8px; }
	.wig-row__title { font-size: 19px; }
	.wig-rows__parent { font-size: 24px; margin-top: 28px; }
	.wig-row { margin-bottom: 24px; }
}

/* ── Stream: section dividers and paging ── */
.wig-stream__section { display: flex; align-items: baseline; gap: 14px; margin: 44px 0 4px; padding-top: 22px; border-top: 2px solid var(--gold, #C5A55A); font-family: var(--font-display, serif); font-weight: 400; font-size: 30px; color: var(--espresso, #2C2018); }
.wig-stream__section a { color: inherit; text-decoration: none; }
.wig-stream__section a:hover { color: var(--terracotta, #C0502E); }
.wig-stream__section span { font: 500 12px/1 var(--font-body, sans-serif); color: var(--warm-gray, #8C7E6F); }
.wig-stream__seeall { margin-left: auto; font: 500 13px/1 var(--font-body, sans-serif) !important; color: var(--terracotta, #C0502E) !important; white-space: nowrap; }
.wig-stream__sentinel { height: 1px; }
.wig-stream.is-loading .wig-stream__sentinel { height: 80px; background: radial-gradient(circle, var(--gold, #C5A55A) 4px, transparent 5px) center / 12px 12px no-repeat; opacity: .6; }
.wig-stream__paging { display: flex; justify-content: center; gap: 16px; padding: 40px 0 20px; }
.wig-stream__paging[hidden] { display: none; }
.wig-stream__paging a { display: inline-flex; align-items: center; padding: 14px 28px; border: 1px solid var(--espresso, #2C2018); border-radius: 999px; background: var(--espresso, #2C2018); color: #fff; font: 600 12px/1 var(--font-body, sans-serif); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.wig-stream__paging a:hover { background: var(--terracotta, #C0502E); border-color: var(--terracotta, #C0502E); }
.wig-stream__paging .wig-stream__prev { background: #fff; color: var(--espresso, #2C2018); }
@media (max-width: 820px) {
	.wig-stream__section { font-size: 24px; margin-top: 32px; }
	.wig-chips__row--leaves + .wig-chips__row--leaves { margin-top: 4px; }
}

/* ── Lead media tile (Grid Layout › Media tray). Poster first; rows.js mounts the player in view. ── */
.wig-media-tile { position: relative; display: block; overflow: hidden; border-radius: 6px; background: var(--sand, #EDE3D2); color: #fff; text-decoration: none; }
.wig-media-tile__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--wig-media-pos, 50% 20%); display: block; transition: opacity .4s; }
.wig-media-tile--contain .wig-media-tile__poster { object-fit: contain; background: #111; }
.wig-media-tile__frame { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wig-media-tile__frame iframe { position: absolute; top: 50%; left: 50%; border: 0; transform: translate(-50%, -50%); }
.wig-media-tile--contain .wig-media-tile__frame iframe { width: 100% !important; height: 100% !important; }
.wig-media-tile.is-playing .wig-media-tile__poster { opacity: 0; }
.wig-media-tile__play { position: absolute; left: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.55); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; padding-left: 3px; transition: opacity .3s; }
.wig-media-tile.is-playing .wig-media-tile__play { opacity: 0; }
.wig-media-tile__label { position: absolute; right: 12px; bottom: 12px; max-width: 70%; font: 600 13px/1.2 var(--font-body, sans-serif); text-shadow: 0 1px 6px rgba(0,0,0,.6); text-align: right; }
/* Lead tile in a clothes row: its own first column, scaled against a card (--wig-media-scale, default ½),
   spanning both rows on two-row rows. Card shape 4:5 keeps it in step with the garments beside it. */
.wig-row--has-media .wig-row__track { grid-template-columns: calc(var(--wig-card-w) * var(--wig-media-scale, 0.5)); }
.wig-row__track > .wig-row__media { grid-row: 1 / -1; scroll-snap-align: start; aspect-ratio: 4 / 5; align-self: start; }
.wig-row--rows-2 .wig-row__track > .wig-row__media { aspect-ratio: auto; height: 100%; }

/* Video rows: every card is a clip, all the same size — a fraction of a clothes card. */
.wig-row--video .wig-row__track { --wig-card-w: calc(((100% - (var(--wig-row-cols) - 1) * var(--wig-row-gap)) / var(--wig-row-cols)) * var(--wig-media-scale, 0.5)); }
.wig-video-card { margin: 0; scroll-snap-align: start; min-width: 0; cursor: pointer; }
.wig-video-card__tile { aspect-ratio: var(--wig-card-ratio, 0.8); width: 100%; }
.wig-video-card__cap { display: flex; flex-direction: column; gap: 2px; padding: 8px 2px 0; }
.wig-video-card__title { font: 500 13px/1.3 var(--font-body, sans-serif); color: var(--espresso, #2C2018); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wig-video-card__meta { font: 500 11px/1 var(--font-body, sans-serif); color: var(--warm-gray, #8C7E6F); }
.wig-video-card:hover .wig-media-tile__poster { transform: scale(1.03); }
.wig-media-tile__poster { transition: opacity .4s, transform .4s; }

/* Lightbox for a clip. */
.wig-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(20,14,10,.92); display: flex; align-items: center; justify-content: center; padding: 24px; }
.wig-lightbox__box { position: relative; width: min(1200px, 100%); aspect-ratio: 16 / 9; max-height: 100%; background: #000; border-radius: 6px; overflow: hidden; }
.wig-lightbox__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wig-lightbox__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; cursor: pointer; }
.wig-lightbox__close:hover { background: rgba(255,255,255,.28); }
.wig-lightbox__title { position: absolute; left: 24px; bottom: 16px; color: #fff; font: 500 14px/1.3 var(--font-body, sans-serif); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
body.wig-lightbox-open { overflow: hidden; }
/* In a hero tile it replaces the mosaic. */
.wig-hero__media { flex: 1; min-height: 160px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .wig-media-tile.is-playing .wig-media-tile__poster { opacity: 1; } }

/* ── Page Canvas (storefront). 12 columns of square units; tiles are placed by --c/--r/--w/--h. ── */
.wig-canvas { --wig-canvas-gap: 14px; --wig-canvas-unit: 80px; display: grid; grid-template-columns: repeat(var(--wig-canvas-cols, 12), minmax(0, 1fr)); grid-auto-rows: minmax(var(--wig-canvas-unit), auto); gap: var(--wig-canvas-gap); margin: 18px 0 8px; }
.wig-canvas__tile { grid-column: var(--c) / span var(--w); grid-row: var(--r) / span var(--h); min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.wig-canvas__tile > * { flex: 1; min-height: 0; }
.wig-canvas__tile--mosaic .wig-hero__tile, .wig-canvas__tile--hero .wig-hero__tile { min-height: 0; height: 100%; }
.wig-canvas__tile--hero .wig-hero__tile { padding: 26px; background: linear-gradient(160deg, #fff 0%, var(--ivory, #FDF8F0) 100%); border-color: var(--gold, #C5A55A); }
.wig-canvas__tile--hero .wig-hero__title { font-size: 38px; }
.wig-canvas__tile--mosaic .wig-hero__mosaic img, .wig-canvas__tile--hero .wig-hero__mosaic img { aspect-ratio: auto; height: 100%; min-height: 0; }
.wig-canvas__tile--mosaic .wig-hero__mosaic, .wig-canvas__tile--hero .wig-hero__mosaic { grid-template-rows: 1fr 1fr; min-height: 0; }
.wig-canvas__tile--row .wig-row { margin: 0; }
.wig-canvas__tile--row { --wig-row-cols: calc(6 * var(--w) / 12); }
@media (max-width: 1400px) { .wig-canvas__tile--row { --wig-row-cols: calc(5 * var(--w) / 12); } }
@media (max-width: 1100px) { .wig-canvas__tile--row { --wig-row-cols: calc(4 * var(--w) / 12); } }
.wig-canvas__single { display: block; }
.wig-canvas__single .iyanifas-product-card { height: 100%; }
.wig-canvas__media { height: 100%; min-height: 120px; border-radius: 8px; }
.wig-canvas__text, .wig-canvas__countdown { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px 24px; background: #fff; border: 1px solid rgba(197,165,90,.35); border-radius: 8px; color: var(--espresso, #2C2018); }
.wig-canvas__text h3, .wig-canvas__countdown h3 { margin: 0; font: 600 26px/1.15 var(--font-display, serif); }
.wig-canvas__body { font: 400 15px/1.5 var(--font-body, sans-serif); }
.wig-canvas__body p { margin: 0 0 .6em; }
.wig-canvas__cta { align-self: flex-start; margin-top: auto; font: 600 13px/1 var(--font-body, sans-serif); color: var(--terracotta, #C0502E); text-decoration: none; }
.wig-canvas__cta:hover { text-decoration: underline; }
.wig-canvas__clock { display: grid; grid-template-columns: repeat(4, auto); gap: 0 14px; align-items: baseline; justify-content: start; }
.wig-canvas__clock span { font: 700 40px/1 var(--font-display, serif); color: var(--indigo, #2b3a67); font-variant-numeric: tabular-nums; }
.wig-canvas__clock small { grid-row: 2; font: 500 11px/1 var(--font-body, sans-serif); color: var(--warm-gray, #8C7E6F); text-transform: uppercase; letter-spacing: .08em; }
.wig-canvas__countdown p { margin: 0; font: 400 14px/1.5 var(--font-body, sans-serif); }
/* Phones: reading order (row, then column), honouring each tile's mobile setting. */
@media (max-width: 820px) {
	.wig-canvas { display: flex; flex-wrap: wrap; gap: 12px; }
	.wig-canvas__tile { grid-column: auto; grid-row: auto; flex: 1 1 100%; min-height: 0; }
	.wig-canvas__tile--m-half { flex: 1 1 calc(50% - 6px); }
	.wig-canvas__tile--m-hidden { display: none; }
	.wig-canvas__tile--hero .wig-hero__title { font-size: 28px; }
	.wig-canvas__tile--row { --wig-row-cols: 3; }
}

/* Collection guide bar — who, then what (15 Sept 2026) */
.wig-cnav { margin: 4px 0 18px; background: #fff; border: 1px solid rgba(198,175,113,.45); border-radius: 10px; box-shadow: 0 1px 2px rgba(44,32,24,.05); }
.wig-cnav__track { display: flex; align-items: center; gap: 4px 18px; padding: 10px 16px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.wig-cnav a { color: var(--espresso, #2C2018); text-decoration: none; font-family: var(--font-display, serif); font-size: 17px; line-height: 1.3; padding: 2px 0; border-bottom: 2px solid transparent; }
.wig-cnav a:hover, .wig-cnav a:focus-visible { border-bottom-color: #C6AF71; }
.wig-cnav a.is-active { border-bottom-color: #B3541E; }
.wig-cnav__home { font-weight: 700; }
.wig-cnav__link span { margin-left: 5px; font-family: var(--font-body, sans-serif); font-size: 11px; letter-spacing: .04em; color: #8a7a6c; }
.wig-cnav__sep { width: 1px; align-self: stretch; background: rgba(198,175,113,.55); }
@media (max-width: 782px) { .wig-cnav { margin: 0 0 12px; border-radius: 8px; } .wig-cnav a { font-size: 15px; } .wig-cnav__track { padding: 8px 12px; gap: 4px 14px; } }