/* ============================================================
   KOKA PEARLS — Page layouts
   ============================================================ */

/* ---------- HERO ---------- */
.hero { position: relative; background: var(--pearl-100); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1fr 0.92fr; align-items: stretch; min-height: min(82vh, 760px); }
.hero__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px,6vw,90px) clamp(24px,5vw,80px); }
.hero__copy .eyebrow { margin-bottom: var(--s-4); }
.hero__copy .display { margin-bottom: var(--s-5); }
.hero__copy .lead { max-width: 44ch; margin-bottom: var(--s-6); }
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero__media { position: relative; background: var(--sapphire-800); }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__seal { position: absolute; left: clamp(24px,5vw,80px); bottom: 28px; display: flex; gap: 22px; flex-wrap: wrap; color: var(--ink-500); font-size: var(--fs-xs); }
.hero__seal span { display: flex; align-items: center; gap: 7px; letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 600; }
.hero__seal svg { width: 16px; height: 16px; color: var(--sapphire-700); }
@media (max-width: 860px){
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { min-height: 380px; order: -1; }
  .hero__seal { position: static; padding: 18px clamp(24px,5vw,80px) 0; }
}

/* ---------- Trust band ---------- */
.trust-band { border-block: 1px solid var(--pearl-200); }

/* ---------- Collection cards ---------- */
.coll-card { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/5; background: var(--sapphire-800); }
.coll-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.coll-card:hover img { transform: scale(1.06); }
.coll-card__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,12,30,0.78) 0%, rgba(8,12,30,0.12) 48%, rgba(8,12,30,0) 100%); }
.coll-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-5); color: #fff; }
.coll-card__body h3 { color: #fff; font-size: 1.7rem; }
.coll-card__body .count { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--platinum-100); opacity: .85; }
.coll-card__cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-400); }
.coll-card__cta svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.coll-card:hover .coll-card__cta svg { transform: translateX(5px); }
.coll-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-4); }
@media (max-width: 900px){ .coll-grid { grid-template-columns: repeat(2,1fr); } }

/* ---------- Story split ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px,5vw,80px); }
.story__media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--sh-3); }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__copy { max-width: 48ch; }
.story__copy .display { font-size: clamp(2rem,1.4rem+2.4vw,3.2rem); margin-block: var(--s-4); }
.story__sign { font-family: var(--font-display); font-size: 1.6rem; color: var(--sapphire-700); margin-top: var(--s-5); }
@media (max-width: 820px){ .story { grid-template-columns: 1fr; } .story__media { aspect-ratio: 16/11; } }

/* ---------- COD banner ---------- */
.cod-banner { background: var(--sapphire-800); color: var(--pearl-050); border-radius: var(--r-lg); padding: clamp(36px,5vw,68px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-6); }
.cod-banner h2 { color: #fff; }
.cod-banner p { color: var(--sapphire-200); max-width: 52ch; margin-top: var(--s-3); }
.cod-banner__steps { display: flex; gap: var(--s-5); margin-top: var(--s-5); flex-wrap: wrap; }
.cod-step { display: flex; gap: 12px; align-items: flex-start; max-width: 200px; }
.cod-step .n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.1rem; background: var(--gold-foil); color: #3a2c10; }
.cod-step p { margin: 0; font-size: var(--fs-sm); color: var(--platinum-100); }
@media (max-width: 760px){ .cod-banner { grid-template-columns: 1fr; } }

/* ---------- Instagram strip ---------- */
.ig-strip { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }
.ig-strip a { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--sapphire-800); }
.ig-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ig-strip a:hover img { transform: scale(1.08); }
.ig-strip a::after { content: ""; position: absolute; inset: 0; background: rgba(20,34,79,0); transition: background .3s; }
.ig-strip a:hover::after { background: rgba(20,34,79,0.3); }
@media (max-width: 760px){ .ig-strip { grid-template-columns: repeat(3,1fr); } }

/* ---------- Page header (interior pages) ---------- */
.page-head { padding-block: clamp(36px,5vw,64px) var(--s-6); }
.page-head .crumbs { margin-bottom: var(--s-4); }
.page-head h1 { font-size: var(--fs-h1); }
.page-head p { color: var(--ink-500); max-width: 58ch; margin-top: var(--s-3); }

/* ---------- Shop layout ---------- */
.shop-layout { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: clamp(28px,4vw,56px); align-items: start; }
.filters { position: sticky; top: calc(var(--header-h-scrolled) + 16px); }
.filter-group { padding-block: var(--s-4); border-bottom: 1px solid var(--pearl-200); }
.filter-group:first-child { padding-top: 0; }
.filter-group h4 { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-700); margin-bottom: var(--s-3); }
.facet { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-size: var(--fs-sm); color: var(--ink-700); }
.facet input { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--greige-300); border-radius: 4px; display: grid; place-items: center; transition: all .2s; flex: 0 0 auto; }
.facet input:checked { background: var(--sapphire-700); border-color: var(--sapphire-700); }
.facet input:checked::after { content: "✓"; color: #fff; font-size: 12px; }
.facet .ct { margin-left: auto; color: var(--greige-400); font-size: var(--fs-xs); }
.facet:hover { color: var(--sapphire-700); }
.swatch-facet { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch-facet button { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--pearl-200); font-size: var(--fs-xs); transition: all .2s; }
.swatch-facet button.is-active { border-color: var(--sapphire-700); background: var(--sapphire-050); color: var(--sapphire-700); }
.price-range { margin-top: var(--s-2); }
.price-range input[type=range]{ width:100%; accent-color: var(--sapphire-700); }
.price-range .vals { display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--greige-500); margin-top:6px; }

.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.shop-toolbar .count { font-size: var(--fs-sm); color: var(--greige-500); }
.shop-toolbar .select { width: auto; min-width: 200px; }
.filter-mobile-btn { display: none; }
.active-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s-4); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--pearl-150); font-size: var(--fs-xs); }
.chip button { color: var(--greige-500); display: grid; place-items: center; }
.chip button svg { width: 12px; height: 12px; }
.empty-state { text-align: center; padding: var(--s-9) var(--s-4); color: var(--greige-500); }

@media (max-width: 880px){
  .shop-layout { grid-template-columns: minmax(0,1fr); }
  .filters { position: fixed; top:0; left:0; bottom:0; width:min(360px,92vw); background:var(--pearl-050); z-index:100; transform:translateX(-100%); transition:transform .4s var(--ease); padding:var(--s-5); overflow-y:auto; overscroll-behavior:contain; box-shadow:var(--sh-3); }
  .filters.is-open { transform:none; }
  .filter-mobile-btn { display:inline-flex; }
}

/* ---------- Product detail ---------- */
/* minmax(0,…) so wide content (buy row, crumbs) can never blow the column
   past the viewport on phones — children shrink and wrap instead */
.pdp { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(32px,5vw,72px); align-items: start; }
.pdp__gallery { position: sticky; top: calc(var(--header-h-scrolled) + 16px); display: grid; grid-template-columns: 76px 1fr; gap: var(--s-3); }
.pdp__thumbs { display: flex; flex-direction: column; gap: 10px; }
.pdp__thumbs button { aspect-ratio: 4/5; border-radius: var(--r-sm); overflow: hidden; border: 1.5px solid transparent; background: var(--pearl-100); }
.pdp__thumbs button.is-active { border-color: var(--sapphire-700); }
.pdp__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp__main { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/5; background: var(--pearl-100); position: relative; }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp__fav { position: absolute; top: 16px; right: 16px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.9); display:grid; place-items:center; color:var(--ink-700); box-shadow:var(--sh-1); }
.pdp__fav.is-active { color: var(--danger-600); } .pdp__fav.is-active svg { fill: currentColor; }
.pdp__info .pcard__cat { color: var(--greige-500); }
.pdp__title { font-size: clamp(2rem,1.5rem+1.6vw,2.9rem); margin-block: 6px var(--s-3); }
.pdp__rating { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--greige-500); margin-bottom: var(--s-4); }
.stars { color: var(--gold-500); letter-spacing: 2px; }
.pdp__price { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-display); font-size: 2rem; font-weight: 600; }
.pdp__price .was { font-size: 1.2rem; color: var(--greige-400); text-decoration: line-through; }
.pdp__desc { color: var(--ink-700); margin-block: var(--s-4); line-height: 1.7; }
.pdp__color { margin-block: var(--s-5); }
.pdp__color .lbl { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-700); margin-bottom: 10px; display:block; }
.pdp__buy { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: stretch; margin-block: var(--s-5); }
.pdp__buy .qty { border-radius: var(--r-pill); }
.pdp__buy .qty button { width: 44px; height: 100%; }
.pdp__acc { border-top: 1px solid var(--pearl-200); }
.acc-item { border-bottom: 1px solid var(--pearl-200); }
.acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) 0; font-weight: 600; font-size: var(--fs-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.acc-head svg { width: 18px; height: 18px; transition: transform .3s; color: var(--greige-500); }
.acc-item.is-open .acc-head svg { transform: rotate(45deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.acc-body > div { padding-bottom: var(--s-4); color: var(--ink-700); font-size: var(--fs-sm); line-height: 1.7; }
@media (max-width: 820px){
  .pdp { grid-template-columns: minmax(0,1fr); }
  .pdp__gallery { position: static; grid-template-columns: minmax(0,1fr); }
  .pdp__thumbs { flex-direction: row; order: 2; }
  .pdp__thumbs button { width: 64px; }
}

/* ---------- Cart / Checkout ---------- */
.cart-page { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: clamp(28px,4vw,56px); align-items: start; }
.cart-table .cart-line { grid-template-columns: 110px 1fr auto; }
.cart-table .cart-line__img { width: 110px; }
.summary-card { background: var(--pearl-100); border-radius: var(--r-md); padding: var(--s-6); position: sticky; top: calc(var(--header-h-scrolled) + 16px); }
.summary-card h3 { font-size: 1.5rem; margin-bottom: var(--s-4); }
.checkout-grid { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: clamp(28px,4vw,56px); align-items: start; }
.form-section { margin-bottom: var(--s-6); }
.form-section h3 { font-size: 1.4rem; margin-bottom: var(--s-2); }
.form-section .sub { font-size: var(--fs-sm); color: var(--greige-500); margin-bottom: var(--s-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-4); }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.field { margin-bottom: var(--s-4); }
/* phone with country dial-code prefix */
.phone-input { display: flex; align-items: stretch; }
.phone-input__code { display: flex; align-items: center; padding: 0 13px; background: var(--pearl-150); border: 1px solid var(--pearl-200); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); white-space: nowrap; }
.phone-input__local { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }
.phone-input__local:disabled { background: var(--pearl-100); color: var(--greige-400); cursor: not-allowed; }
.phone-input:focus-within .phone-input__code { border-color: var(--sapphire-600); }
.mini-line { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.mini-line img { width: 54px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-xs); }
.mini-line .nm { font-size: var(--fs-sm); flex: 1; } .mini-line .nm small { color: var(--greige-500); }
@media (max-width: 880px){ .cart-page, .checkout-grid { grid-template-columns: minmax(0,1fr); } .summary-card { position: static; } .form-row { grid-template-columns: 1fr; } }

/* ---------- Confirmation ---------- */
.confirm { text-align: center; max-width: 640px; margin-inline: auto; }
.confirm__seal { width: 92px; height: 92px; border-radius: 50%; background: var(--cod-050); color: var(--cod-600); display: grid; place-items: center; margin: 0 auto var(--s-5); }
.confirm__seal svg { width: 46px; height: 46px; stroke-width: 1.4; }
.confirm__num { display: inline-block; margin-top: var(--s-4); padding: 10px 22px; border-radius: var(--r-pill); background: var(--pearl-100); font-family: var(--font-sans); letter-spacing: var(--tracking-wide); font-weight: 600; }
.confirm__card { text-align: left; background: var(--pearl-100); border-radius: var(--r-md); padding: var(--s-6); margin-top: var(--s-6); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin-inline: auto; }
.faq-cats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: var(--s-6); }
.faq-cats button { padding: 9px 18px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; border: 1px solid var(--pearl-200); transition: all .2s; }
.faq-cats button.is-active { background: var(--sapphire-700); color: #fff; border-color: var(--sapphire-700); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; }
.contact-cards { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.contact-card { display: flex; gap: var(--s-4); padding: var(--s-4); border: 1px solid var(--pearl-200); border-radius: var(--r-md); transition: border-color .25s, box-shadow .25s; }
.contact-card:hover { border-color: var(--sapphire-200); box-shadow: var(--sh-1); }
.contact-card .ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sapphire-050); color: var(--sapphire-700); }
.contact-card .ico svg { width: 22px; height: 22px; }
.contact-card h4 { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.contact-card p, .contact-card a { font-size: var(--fs-sm); color: var(--ink-500); }
.map-embed { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16/10; background: var(--pearl-150); position: relative; }
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.3) contrast(1.05); }
@media (max-width: 820px){ .contact-grid { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.nf { min-height: 64vh; display: grid; place-items: center; text-align: center; }
.nf .big { font-family: var(--font-display); font-size: clamp(6rem,18vw,12rem); line-height: .9; color: var(--sapphire-700); }

/* ---------- Related ---------- */
.section-divider { display:flex; align-items:center; gap:var(--s-4); margin-bottom: var(--s-6); }
.section-divider h2 { white-space: nowrap; }
.section-divider::before, .section-divider::after { content:""; height:1px; background: var(--pearl-200); flex:1; }