/* ==========================================================================
   TIRAZ — Page sections
   ========================================================================== */

/* ============ HERO SLIDER ============
   Slides are stacked in a single grid cell instead of being absolutely
   positioned, so the section grows to fit the tallest slide and nothing
   is ever clipped on short viewports. */
.hero {
  position: relative; min-height: clamp(460px, 68vh, 660px); overflow: hidden;
  background: var(--ink); display: grid; grid-template-areas: "stack";
}
.hero__track { grid-area: stack; display: grid; grid-template-areas: "slide"; }
.hero__slide {
  grid-area: slide; position: relative; opacity: 0; visibility: hidden;
  transition: opacity .9s var(--e-out), visibility .9s;
}
.hero__slide.on { opacity: 1; visibility: visible; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg svg { width: 100%; height: 100%; display: block; }
/* the scene is composed with the garment on the right and the text scrim on the
   left; in RTL the copy sits on the right, so mirror the whole scene */
[dir="rtl"] .hero__bg svg { transform: scaleX(-1); }
.hero__slide.on .hero__bg { animation: heroZoom 9s var(--e-out) forwards; }
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }

.hero__inner { position: relative; display: flex; align-items: center; padding-block: 56px 96px; }
.hero__body { max-width: 560px; color: #fff; }
.hero__slide.on .hero__body > * { animation: heroUp .8s var(--e-out) backwards; }
.hero__slide.on .hero__body > *:nth-child(1) { animation-delay: .12s; }
.hero__slide.on .hero__body > *:nth-child(2) { animation-delay: .22s; }
.hero__slide.on .hero__body > *:nth-child(3) { animation-delay: .32s; }
.hero__slide.on .hero__body > *:nth-child(4) { animation-delay: .42s; }
.hero__slide.on .hero__body > *:nth-child(5) { animation-delay: .52s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
  font-size: var(--fs-xs); letter-spacing: .16em; color: var(--brass-3);
  padding: 6px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-full);
  background: rgba(255,255,255,.06); backdrop-filter: blur(6px);
}
.hero__eyebrow svg { width: 14px; height: 14px; }
.hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.34;
  color: #fff; margin-bottom: 18px;
}
.hero__title em { font-style: normal; color: var(--brass-2); }
.hero__text { font-size: var(--fs-lg); color: rgba(255,255,255,.78); max-width: 46ch; margin-bottom: 28px; line-height: 1.7; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero__meta { display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; }
.hero__meta div { color: rgba(255,255,255,.7); font-size: var(--fs-xs); }
.hero__meta b {
  display: block; font-family: var(--f-latin); font-size: var(--fs-xl); color: #fff;
  font-weight: 600; line-height: 1.2;
  direction: ltr; unicode-bidi: isolate;
}

/* slider controls — parked on the art side so they never sit under the copy;
   the extra end padding keeps them clear of the fixed WhatsApp / to-top buttons */
.hero__nav {
  position: absolute; bottom: 30px; inset-inline-start: 0; width: 100%;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px; z-index: 6;
  padding-inline-end: 92px;
}
.hero__dots { display: flex; gap: 9px; }
.hero__dot {
  width: 34px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.28);
  position: relative; overflow: hidden; transition: var(--t-fast);
}
.hero__dot::after {
  content: ''; position: absolute; inset-inline-start: 0; top: 0; height: 100%; width: 0;
  background: var(--brass-2);
}
.hero__dot.on { width: 56px; }
.hero__dot.on::after { animation: dotFill 6s linear forwards; }
@keyframes dotFill { to { width: 100%; } }
.hero__arrows { display: flex; gap: 8px; margin-inline-start: 22px; }
.hero__arrow {
  width: 42px; height: 42px; border-radius: var(--r-full); display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.26); color: #fff; transition: var(--t-fast);
  background: rgba(255,255,255,.06); backdrop-filter: blur(6px);
}
.hero__arrow:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero__arrow svg { width: 17px; height: 17px; }
@media (max-width: 720px) {
  .hero { min-height: 520px; }
  .hero__inner { padding-block: 48px 92px; }
  .hero__body { max-width: none; }
  .hero__meta { gap: 20px; }
  .hero__nav { padding-inline-end: 76px; }
}

/* ============ USP strip ============ */
.usp { background: #fff; border-block: 1px solid var(--line-2); }
.usp__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.usp__item {
  display: flex; align-items: center; gap: 14px; padding: 26px 22px;
  border-inline-start: 1px solid var(--line-2); transition: background var(--t-fast);
}
.usp__item:first-child { border-inline-start: 0; }
.usp__item:hover { background: var(--bone-2); }
.usp__ico {
  width: 46px; height: 46px; border-radius: var(--r-md); flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--bone), #EFE6D6); color: var(--brass);
  border: 1px solid var(--line-2);
}
.usp__ico svg { width: 22px; height: 22px; }
.usp__item b { display: block; font-size: var(--fs-base); font-weight: 600; margin-bottom: 2px; }
.usp__item span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) { .usp__grid { grid-template-columns: 1fr 1fr; } .usp__item:nth-child(3) { border-inline-start: 0; } }
@media (max-width: 520px) { .usp__grid { grid-template-columns: 1fr; } .usp__item { border-inline-start: 0; border-top: 1px solid var(--line-2); } .usp__item:first-child { border-top: 0; } }

/* ============ Category grid ============ */
.cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-4); }
.cat {
  position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--bone);
  aspect-ratio: 3/4; display: block; transition: transform var(--t-med), box-shadow var(--t-med);
}
.cat:hover { transform: translateY(-6px); box-shadow: var(--sh-4); }
.cat svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--t-slow); }
.cat:hover svg { transform: scale(1.06); }
.cat__label {
  position: absolute; inset-inline: 10px; bottom: 10px; z-index: 2;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-radius: var(--r-md); padding: 11px 14px; text-align: center;
  transition: var(--t-med);
}
.cat:hover .cat__label { background: var(--ink); }
.cat__label b { display: block; font-size: var(--fs-sm); font-weight: 600; transition: color var(--t-med); }
.cat__label span { font-size: 10.5px; color: var(--muted); font-family: var(--f-latin); transition: color var(--t-med); }
.cat:hover .cat__label b { color: #fff; }
.cat:hover .cat__label span { color: var(--brass-3); }
@media (max-width: 1100px) { .cats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .cats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } }
@media (max-width: 460px)  { .cats { grid-template-columns: repeat(2, 1fr); } }

/* Scene art always fills its frame, however it was inserted */
.promo > svg, .deal > svg, .mega__promo > svg, .atelier__art > svg,
.pcard__media > svg, .pop-news__art > svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

/* ============ Split promo banners ============ */
.promos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.promo {
  position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 330px;
  display: flex; align-items: center; transition: box-shadow var(--t-med);
}
.promo:hover { box-shadow: var(--sh-4); }
.promo svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--t-slow); }
.promo:hover svg.bg { transform: scale(1.05); }
.promo__body { position: relative; z-index: 2; padding: var(--sp-8); color: #fff; max-width: 62%; }
.promo__body h3 { font-size: var(--fs-2xl); line-height: 1.25; margin: 10px 0 12px; color: #fff; }
.promo__body p { font-size: var(--fs-sm); color: rgba(255,255,255,.75); margin-bottom: 22px; }
.promo--tall { min-height: 420px; }
@media (max-width: 820px) { .promos { grid-template-columns: 1fr; } .promo__body { max-width: 80%; padding: var(--sp-6); } }

/* ============ Deal strip (countdown) ============ */
.deal {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; min-height: 380px;
}
.deal svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.deal__body { position: relative; z-index: 2; padding: var(--sp-9) var(--sp-8); color: #fff; }
.deal__body h3 { font-size: var(--fs-3xl); line-height: 1.2; margin: 12px 0 14px; color: #fff; }
.deal__body p { color: rgba(255,255,255,.76); max-width: 44ch; margin-bottom: 26px; }
.deal__cd { margin-bottom: 28px; }
.deal__card {
  position: relative; z-index: 2; margin: var(--sp-6); background: #fff;
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-5);
}
@media (max-width: 900px) { .deal { grid-template-columns: 1fr; } .deal__card { margin-top: 0; } }

/* ============ Recently sold ticker ============ */
.sold-strip { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.sold-strip__head {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  border-bottom: 1px solid var(--line-2); background: var(--bone-2);
}
.sold-strip__head b { font-size: var(--fs-base); }
.live-dot {
  width: 8px; height: 8px; border-radius: 99px; background: var(--success); flex: none;
  box-shadow: 0 0 0 0 rgba(63,107,79,.55); animation: pulse 2s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(63,107,79,0); } 100% { box-shadow: 0 0 0 0 rgba(63,107,79,0); } }
.sold-list { display: grid; grid-template-columns: repeat(4, 1fr); }
.sold {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-inline-start: 1px solid var(--line-2);
}
.sold:first-child { border-inline-start: 0; }
.sold__img { width: 46px; height: 58px; border-radius: var(--r-sm); overflow: hidden; background: var(--bone); flex: none; }
.sold__b { min-width: 0; }
.sold__b b { display: block; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sold__b span { font-size: var(--fs-xs); color: var(--muted); }
.sold__b span i { color: var(--success); font-style: normal; }
@media (max-width: 1000px) { .sold-list { grid-template-columns: 1fr 1fr; } .sold:nth-child(3) { border-inline-start: 0; } }
@media (max-width: 560px)  { .sold-list { grid-template-columns: 1fr; } .sold { border-inline-start: 0; border-top: 1px solid var(--line-2); } }

/* ============ Brands strip ============ */
.brands-strip {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden;
}
.brand-cell {
  background: #fff; display: grid; place-items: center; padding: 26px 14px;
  color: #A79E90; transition: var(--t-med);
}
.brand-cell:hover { color: var(--ink); background: var(--bone-2); }
.brand-cell svg { max-width: 100%; height: auto; }
@media (max-width: 1000px) { .brands-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px)  { .brands-strip { grid-template-columns: repeat(2, 1fr); } }

/* ============ Atelier feature ============ */
.atelier { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-9); align-items: center; }
.atelier__art { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3; }
.atelier__art svg { width: 100%; height: 100%; }
.atelier__badge {
  position: absolute; bottom: 18px; inset-inline-start: 18px;
  background: #fff; border-radius: var(--r-md); padding: 12px 16px; box-shadow: var(--sh-3);
  display: flex; align-items: center; gap: 11px;
}
.atelier__badge svg { width: 26px; height: 26px; color: var(--brass); }
.atelier__badge b { font-size: var(--fs-sm); display: block; }
.atelier__badge span { font-size: var(--fs-xs); color: var(--muted); }
.steps { display: grid; gap: var(--sp-4); margin: var(--sp-6) 0 var(--sp-7); }
.step { display: flex; gap: 16px; align-items: flex-start; }
.step__n {
  width: 38px; height: 38px; border-radius: var(--r-full); flex: none; display: grid; place-items: center;
  background: var(--ink); color: var(--brass-2); font-family: var(--f-latin); font-weight: 600; font-size: var(--fs-sm);
}
.step b { display: block; margin-bottom: 3px; font-size: var(--fs-md); }
.step p { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.7; }
@media (max-width: 900px) { .atelier { grid-template-columns: 1fr; gap: var(--sp-7); } }

/* ============ Journal cards ============ */
.posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.post { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; transition: var(--t-med); display: flex; flex-direction: column; }
.post:hover { box-shadow: var(--sh-4); transform: translateY(-5px); border-color: var(--line); }
.post__media { aspect-ratio: 16/11; overflow: hidden; position: relative; }
.post__media svg { width: 100%; height: 100%; transition: transform var(--t-slow); }
.post:hover .post__media svg { transform: scale(1.07); }
.post__cat {
  position: absolute; top: 12px; inset-inline-start: 12px;
  background: rgba(255,255,255,.94); border-radius: var(--r-xs); padding: 4px 10px;
  font-size: 10.5px; font-weight: 600; color: var(--ink);
}
.post__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post__meta { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: 10px; }
.post__body h4 { font-size: var(--fs-md); line-height: 1.5; transition: color var(--t-fast); }
.post:hover h4 { color: var(--brass); }
.post__body p { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.75; }
.post__more { margin-top: auto; padding-top: 6px; font-size: var(--fs-sm); color: var(--brass); font-weight: 500; }
@media (max-width: 1000px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .posts { grid-template-columns: 1fr; } }

/* ============ Testimonials ============ */
.tsts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.tst {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: var(--sp-6); display: flex; flex-direction: column; gap: 14px; position: relative;
  transition: var(--t-med);
}
.tst:hover { box-shadow: var(--sh-3); border-color: var(--line); }
.tst::before {
  content: '”'; position: absolute; top: 6px; inset-inline-end: 22px;
  font-family: var(--f-serif); font-size: 82px; line-height: 1; color: var(--brass); opacity: .16;
}
.tst p { font-size: var(--fs-sm); line-height: 1.85; color: var(--text-soft); position: relative; }
.tst__who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line-2); }
.tst__av {
  width: 42px; height: 42px; border-radius: var(--r-full); flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--ink), var(--ink-3)); color: var(--brass-2);
  font-family: var(--f-display); font-size: var(--fs-md);
}
.tst__who b { display: block; font-size: var(--fs-sm); }
.tst__who span { font-size: var(--fs-xs); color: var(--muted); }
.tst__ok { margin-inline-start: auto; font-size: 10px; color: var(--success); display: flex; align-items: center; gap: 4px; }
.tst__ok svg { width: 13px; height: 13px; }
@media (max-width: 900px) { .tsts { grid-template-columns: 1fr; } }

/* ============ Page head ============ */
.pagehead { background: #fff; border-bottom: 1px solid var(--line-2); padding-bottom: var(--sp-7); position: relative; overflow: hidden; }
.pagehead__deco { position: absolute; inset-inline-end: -60px; top: -40px; width: 320px; opacity: .05; pointer-events: none; }
.pagehead h1 { font-size: var(--fs-3xl); }
.pagehead p { color: var(--text-dim); margin-top: 8px; max-width: 60ch; }

/* ============ SHOP layout ============ */
.shop { display: grid; grid-template-columns: 268px 1fr; gap: var(--sp-7); align-items: start; }
.filters {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: var(--sp-5); position: sticky; top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto;
}
.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.filters__head b { font-size: var(--fs-md); }
.filters__clear { font-size: var(--fs-xs); color: var(--sale); transition: var(--t-fast); }
.filters__clear:hover { text-decoration: underline; }
.fgroup { border-top: 1px solid var(--line-2); padding-block: var(--sp-4); }
.fgroup:first-of-type { border-top: 0; padding-top: 0; }
.fgroup__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); font-weight: 600; margin-bottom: 12px;
}
.fgroup__head svg { width: 15px; height: 15px; color: var(--muted); transition: transform var(--t-fast); }
.fgroup.closed .fgroup__head svg { transform: rotate(-90deg); }
[dir="ltr"] .fgroup.closed .fgroup__head svg { transform: rotate(90deg); }
.fgroup__body { display: grid; gap: 9px; }
.fgroup.closed .fgroup__body { display: none; }
.fgroup__body::-webkit-scrollbar { width: 5px; }
.fswatches { display: flex; flex-wrap: wrap; gap: 9px; }
.fswatch {
  width: 26px; height: 26px; border-radius: var(--r-full); position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); transition: var(--t-fast);
}
.fswatch:hover { transform: scale(1.12); }
.fswatch.on { box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.fsizes { display: flex; flex-wrap: wrap; gap: 7px; }
.fsize {
  min-width: 40px; height: 34px; padding-inline: 10px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: var(--fs-xs); font-family: var(--f-latin);
  display: inline-flex; align-items: center; justify-content: center; transition: var(--t-fast);
}
.fsize:hover { border-color: var(--brass); color: var(--brass); }
.fsize.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.mobile-only { display: none; }
@media (max-width: 980px) { .mobile-only { display: block; } }
.pager a.off { opacity: .35; pointer-events: none; }

.shop__bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 12px 16px; margin-bottom: var(--sp-5);
}
.shop__count { font-size: var(--fs-sm); color: var(--text-dim); }
.shop__count b { color: var(--ink); font-family: var(--f-latin); }
.viewtoggle { display: flex; gap: 3px; background: var(--bone); border-radius: var(--r-md); padding: 3px; }
.viewtoggle button { width: 34px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted); transition: var(--t-fast); }
.viewtoggle button.on { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.viewtoggle svg { width: 16px; height: 16px; }
.shop__sort { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.shop__sort .select { height: 38px; font-size: var(--fs-sm); min-width: 190px; }
.filters-btn { display: none; }
@media (max-width: 980px) {
  .shop { grid-template-columns: 1fr; }
  .filters {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: min(90vw, 340px);
    border-radius: 0; z-index: var(--z-drawer); max-height: none; height: 100%;
    transform: translateX(var(--tx-out, -100%)); transition: transform .38s var(--e-out);
  }
  [dir="rtl"] .filters { --tx-out: 100%; }
  .filters.open { transform: none; }
  .filters-btn { display: inline-flex; }
}

/* ============ PRODUCT page ============ */
.pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-9); align-items: start; }
.gallery { display: grid; grid-template-columns: 84px 1fr; gap: var(--sp-4); position: sticky; top: calc(var(--header-h) + 20px); }
.gallery__thumbs { display: grid; gap: 10px; align-content: start; }
.gthumb {
  aspect-ratio: 3/4; border-radius: var(--r-md); overflow: hidden; border: 1.5px solid var(--line-2);
  background: var(--bone); transition: var(--t-fast); position: relative;
}
.gthumb:hover { border-color: var(--brass); }
.gthumb.on { border-color: var(--ink); }
.gthumb svg { width: 100%; height: 100%; }
.gallery__main {
  border-radius: var(--r-lg); overflow: hidden; background: var(--bone); position: relative;
  aspect-ratio: 3/4; border: 1px solid var(--line-2); cursor: zoom-in;
}
.gallery__main svg { width: 100%; height: 100%; transition: transform .5s var(--e-out); }
.gallery__main.zoom svg { transform: scale(1.7); }
.gallery__flags { position: absolute; top: 16px; inset-inline-start: 16px; display: flex; flex-direction: column; gap: 7px; z-index: 3; }
.gallery__zoomhint {
  position: absolute; bottom: 14px; inset-inline-end: 14px; z-index: 3;
  background: rgba(255,255,255,.9); border-radius: var(--r-full); padding: 6px 13px;
  font-size: var(--fs-xs); color: var(--text-soft); display: flex; align-items: center; gap: 6px;
}
.gallery__zoomhint svg { width: 13px; height: 13px; }
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: var(--sp-7); }
  .gallery { position: static; grid-template-columns: 1fr; }
  .gallery__thumbs { grid-auto-flow: column; grid-auto-columns: 74px; overflow-x: auto; }
}

.pinfo__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pinfo__brand a { font-size: var(--fs-sm); color: var(--brass); font-weight: 500; }
.pinfo h1 { font-size: var(--fs-2xl); line-height: 1.3; margin-bottom: 12px; }
.pinfo__rate { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; font-size: var(--fs-sm); color: var(--muted); }
.pinfo__rate a { color: var(--brass); }
.pinfo__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-block: 18px; border-block: 1px solid var(--line-2); margin-bottom: 20px; }
.pinfo__price .price { font-size: var(--fs-3xl); }
.pinfo__desc { color: var(--text-soft); font-size: var(--fs-base); line-height: 1.85; margin-bottom: 24px; }
.pinfo__block { margin-bottom: 22px; }
.pinfo__label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.pinfo__label b { font-size: var(--fs-sm); }
.pinfo__label span { font-size: var(--fs-sm); color: var(--muted); }
.pinfo__label a { font-size: var(--fs-xs); color: var(--brass); display: inline-flex; align-items: center; gap: 5px; }
.pinfo__label a svg { width: 14px; height: 14px; }
.pinfo__buy { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.pinfo__buy .btn { flex: 1; min-width: 180px; }
.pinfo__perks { display: grid; gap: 12px; background: var(--bone); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-4); margin-top: var(--sp-5); }
.perk { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-sm); }
.perk svg { width: 18px; height: 18px; color: var(--brass); flex: none; margin-top: 2px; }
.perk b { display: block; font-weight: 600; }
.perk span { color: var(--muted); font-size: var(--fs-xs); }

.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-7); }
.spec__row { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-2); font-size: var(--fs-sm); }
.spec__row span { color: var(--muted); }
.spec__row b { font-weight: 500; }
@media (max-width: 680px) { .spec { grid-template-columns: 1fr; } }

.rsummary { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-7); align-items: center; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line-2); margin-bottom: var(--sp-6); }
.rsummary__big { text-align: center; }
.rsummary__big b { font-family: var(--f-latin); font-size: 3.4rem; font-weight: 600; line-height: 1; display: block; }
.rsummary__big span { font-size: var(--fs-xs); color: var(--muted); }
.rbars { display: grid; gap: 8px; }
@media (max-width: 640px) { .rsummary { grid-template-columns: 1fr; } }

.review { padding-block: var(--sp-5); border-bottom: 1px solid var(--line-2); }
.review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.review__head b { font-size: var(--fs-sm); }
.review__head time { font-size: var(--fs-xs); color: var(--muted); margin-inline-start: auto; }
.review p { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.85; }

/* ============ CART / CHECKOUT ============ */
.cartgrid { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-7); align-items: start; }
.cartbox { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.cartbox__head { padding: var(--sp-5); border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; }
.cartbox__head b { font-size: var(--fs-md); }
.cline { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--sp-4); padding: var(--sp-5); border-bottom: 1px solid var(--line-2); align-items: center; }
.cline:last-child { border-bottom: 0; }
.cline__img { aspect-ratio: 3/4; border-radius: var(--r-md); overflow: hidden; background: var(--bone); }
.cline__name { font-size: var(--fs-base); font-weight: 500; line-height: 1.5; display: block; margin-bottom: 6px; }
.cline__name:hover { color: var(--brass); }
.cline__meta { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cline__meta i { width: 12px; height: 12px; border-radius: 99px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); vertical-align: -2px; margin-inline-end: 5px; }
.cline__end { text-align: end; display: grid; gap: 10px; justify-items: end; }
@media (max-width: 700px) {
  .cartgrid { grid-template-columns: 1fr; }
  .cline { grid-template-columns: 76px 1fr; }
  .cline__end { grid-column: 1 / -1; justify-items: stretch; text-align: start; }
}
.summary { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--sp-6); position: sticky; top: calc(var(--header-h) + 16px); }
.summary h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-5); }
.coupon { display: flex; gap: 8px; margin-block: var(--sp-4); }
.coupon .input { height: 44px; }

.chk { display: grid; grid-template-columns: 1fr 400px; gap: var(--sp-7); align-items: start; }
.chk__panel { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--sp-6); margin-bottom: var(--sp-5); }
.chk__panel h3 { font-size: var(--fs-md); margin-bottom: var(--sp-5); display: flex; align-items: center; gap: 10px; }
.chk__n { width: 26px; height: 26px; border-radius: var(--r-full); background: var(--ink); color: var(--brass-2); display: grid; place-items: center; font-family: var(--f-latin); font-size: var(--fs-xs); flex: none; }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.formgrid .full { grid-column: 1 / -1; }
.payopt {
  display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--line);
  border-radius: var(--r-md); cursor: pointer; transition: var(--t-fast); margin-bottom: 10px;
}
.payopt:hover { border-color: var(--brass); }
.payopt.on { border-color: var(--ink); background: var(--bone-2); }
.payopt input { position: absolute; opacity: 0; }
.payopt__dot { width: 19px; height: 19px; border-radius: 99px; border: 1.6px solid var(--line); flex: none; display: grid; place-items: center; }
.payopt.on .payopt__dot { border-color: var(--ink); }
.payopt.on .payopt__dot::after { content: ''; width: 10px; height: 10px; border-radius: 99px; background: var(--ink); }
.payopt svg { width: 22px; height: 22px; color: var(--brass); }
.payopt b { display: block; font-size: var(--fs-sm); }
.payopt span { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 900px) { .chk { grid-template-columns: 1fr; } .formgrid { grid-template-columns: 1fr; } }

/* ============ IDENTITY page ============ */
.idsec { padding-block: var(--sp-9); border-bottom: 1px solid var(--line-2); }
.swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-4); }
.sw { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-2); background: #fff; }
.sw__chip { height: 110px; }
.sw__meta { padding: 12px 14px; }
.sw__meta b { display: block; font-size: var(--fs-sm); }
.sw__meta span { font-size: var(--fs-xs); color: var(--muted); font-family: var(--f-latin); text-transform: uppercase; }
@media (max-width: 900px) { .swatch-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .swatch-grid { grid-template-columns: repeat(2, 1fr); } }

.type-spec { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--sp-7); display: grid; gap: var(--sp-6); }
.type-row { display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-5); align-items: baseline; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line-2); }
.type-row:last-child { border-bottom: 0; padding-bottom: 0; }
.type-row__label b { display: block; font-size: var(--fs-sm); }
.type-row__label span { font-size: var(--fs-xs); color: var(--muted); font-family: var(--f-latin); }
@media (max-width: 700px) { .type-row { grid-template-columns: 1fr; } }

.logo-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.logo-cell { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--sp-7); display: grid; place-items: center; gap: var(--sp-4); min-height: 190px; }
.logo-cell.dark { background: var(--ink); border-color: var(--ink); }
.logo-cell.brass { background: linear-gradient(140deg, var(--brass), var(--brass-2)); border-color: transparent; }
.logo-cell.bone { background: var(--bone); }
.logo-cell small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-family: var(--f-latin); color: var(--muted); }
.logo-cell.dark small { color: rgba(255,255,255,.5); }
.logo-cell.brass small { color: rgba(255,255,255,.75); }
@media (max-width: 900px) { .logo-board { grid-template-columns: 1fr 1fr; } }

.fabric-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-4); }
.fab { text-align: center; }
.fab svg { border-radius: var(--r-md); width: 100%; height: auto; }
.fab b { display: block; font-size: var(--fs-sm); margin-top: 10px; }
.fab span { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 900px) { .fabric-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============ Generic content ============ */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--fs-xl); margin: var(--sp-7) 0 var(--sp-3); }
.prose h3 { font-size: var(--fs-md); margin: var(--sp-5) 0 var(--sp-2); }
.prose p { color: var(--text-soft); line-height: 1.9; margin-bottom: var(--sp-3); }
.prose ul { margin: var(--sp-3) 0; display: grid; gap: 9px; }
.prose li { display: flex; gap: 10px; color: var(--text-soft); font-size: var(--fs-base); }
.prose li::before { content: ''; width: 5px; height: 5px; border-radius: 99px; background: var(--brass); flex: none; margin-top: 11px; }

.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.stat { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--sp-6); text-align: center; }
.stat b {
  display: block; font-family: var(--f-latin); font-size: var(--fs-3xl); font-weight: 600;
  color: var(--brass); line-height: 1; letter-spacing: -.02em;
  direction: ltr; unicode-bidi: isolate;
}
.stat span { font-size: var(--fs-sm); color: var(--text-dim); display: block; margin-top: 8px; }
@media (max-width: 800px) { .statgrid { grid-template-columns: 1fr 1fr; } }

/* Empty page states */
.bigempty { text-align: center; padding-block: var(--sp-11); }
.bigempty svg { width: 96px; height: 96px; color: var(--line); margin-inline: auto; margin-bottom: var(--sp-5); }
.bigempty h2 { font-size: var(--fs-xl); margin-bottom: 10px; }
.bigempty p { color: var(--muted); margin-bottom: var(--sp-6); }