/* ============================================================
   KHAYAE — Page styles
   ============================================================ */

/* ---------- Section heads ---------- */
.sec-head {
   margin-bottom: clamp(28px, 4vw, 52px);
}

.sec-head__title {
   font-size: clamp(34px, 5.2vw, 62px);
   margin-top: 10px;
}

.sec-head--row {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
}

.sec-head__action {
   padding-bottom: 10px;
}

/* ============================================================
   HOME — Hero
   ============================================================ */
.home-hero {
   position: relative;
   height: 100vh;
   min-height: 620px;
   display: flex;
   align-items: flex-end;
   color: var(--paper);
   overflow: hidden;
}

.home-hero__media {
   position: absolute;
   inset: 0;
}

.home-hero__veil {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(20, 18, 15, 0.62) 0%, rgba(20, 18, 15, 0.12) 38%, rgba(20, 18, 15, 0.18) 100%);
}

.home-hero__content {
   position: relative;
   padding-bottom: clamp(54px, 8vw, 104px);
   width: 100%;
}

.home-hero__eyebrow {
   font-family: var(--sans);
   font-size: 11px;
   letter-spacing: 0.34em;
   text-transform: uppercase;
   opacity: 0.9;
   margin-bottom: 22px;
   animation: heroUp 1.1s var(--ease) both;
}

.home-hero__title {
   font-size: clamp(38px, 6vw, 108px);
   letter-spacing: -0.02em;
   animation: heroUp 1.1s var(--ease) 0.08s both;
}

.home-hero__sub {
   font-family: var(--serif);
   font-style: italic;
   font-size: clamp(18px, 2.4vw, 27px);
   max-width: 850px;
   margin-top: 22px;
   opacity: 0.94;
   animation: heroUp 1.1s var(--ease) 0.18s both;
}

.home-hero__cta {
   display: flex;
   gap: 16px;
   margin-top: 38px;
   flex-wrap: wrap;
   animation: heroUp 1.1s var(--ease) 0.28s both;
}

.home-hero__scroll {
   position: absolute;
   right: var(--gutter);
   bottom: clamp(40px, 7vw, 90px);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   font-family: var(--sans);
   font-size: 10px;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   writing-mode: vertical-rl;
   opacity: 0.8;
}

.home-hero__scroll i {
   width: 1px;
   height: 54px;
   background: currentColor;
   position: relative;
   overflow: hidden;
}

.home-hero__scroll i::after {
   content: "";
   position: absolute;
   top: -54px;
   left: 0;
   width: 1px;
   height: 54px;
   background: var(--paper);
   animation: scrollLine 2.4s var(--ease) infinite;
}

@keyframes scrollLine {
   0% {
      top: -54px;
   }

   60%,
   100% {
      top: 54px;
   }
}

@keyframes heroUp {
   from {
      transform: translateY(30px);
   }

   to {
      transform: none;
   }
}

@media (max-width: 768px) {
   .home-hero__scroll {
      display: none;
   }
}

/* ---------- Gateway ---------- */
.gateway-sec {
   background: var(--paper);
}

.gateway {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(20px, 3vw, 44px);
}

.gateway__card {
   cursor: pointer;
}

.gateway__media {
   aspect-ratio: 4/5;
   overflow: hidden;
   position: relative;
}

.gateway__media .ph {
   position: absolute;
   inset: 0;
   transition: transform 1.6s var(--ease);
}

.gateway__card:hover .gateway__media .ph {
   transform: scale(1.05);
}

.gateway__body {
   padding-top: 26px;
   max-width: 440px;
}

.gateway__title {
   font-size: clamp(30px, 4vw, 50px);
   margin: 10px 0 14px;
}

.gateway__body .link-ul {
   margin-top: 18px;
}

@media (max-width: 640px) {
   .gateway {
      grid-template-columns: 1fr;
      gap: 44px;
   }
}

/* ---------- Manifesto ---------- */
.manifesto {
   background: var(--paper-2);
   padding-block: clamp(72px, 11vw, 160px);
}

.manifesto__line {
   font-size: clamp(26px, 4.2vw, 52px);
   line-height: 1.22;
   text-align: center;
   max-width: 1000px;
   margin: 0 auto;
   letter-spacing: -0.01em;
   text-wrap: balance;
}

.manifesto__values {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 36px;
   max-width: 880px;
   margin: clamp(48px, 7vw, 86px) auto 0;
}

.manifesto__val {
   text-align: center;
   padding: 0 12px;
}

.manifesto__val+.manifesto__val {
   border-left: 1px solid var(--line);
}

.manifesto__val-t {
   font-family: var(--serif);
   font-size: 23px;
}

.manifesto__val-d {
   font-family: var(--sans);
   font-size: 12px;
   letter-spacing: 0.04em;
   color: var(--stone);
   margin-top: 8px;
}

@media (max-width: 700px) {
   .manifesto__values {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   .manifesto__val+.manifesto__val {
      border-left: none;
      border-top: 1px solid var(--line);
      padding-top: 26px;
   }
}

/* ---------- Atelier feature ---------- */
.atelier-feat {
   display: grid;
   grid-template-columns: 1.15fr 1fr;
   min-height: 78vh;
}

.atelier-feat__media {
   position: relative;
}

.atelier-feat__media .ph {
   position: absolute;
   inset: 0;
}

.atelier-feat__panel {
   background: var(--ink);
   color: var(--paper);
   display: flex;
   align-items: center;
   padding: clamp(40px, 7vw, 100px);
}

.atelier-feat__panel .eyebrow {
   color: rgba(251, 249, 246, 0.6);
}

.atelier-feat__panel .body-text {
   color: rgba(251, 249, 246, 0.78);
}

.atelier-feat__title {
   font-size: clamp(36px, 4.6vw, 64px);
   margin-top: 16px;
}

@media (max-width: 820px) {
   .atelier-feat {
      grid-template-columns: 1fr;
   }

   .atelier-feat__media {
      min-height: 60vh;
   }
}

/* ---------- Journal grid ---------- */
.jgrid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: clamp(20px, 2.6vw, 40px);
}

.jcard {
   cursor: pointer;
}

.jcard__media {
   aspect-ratio: 5/6;
   overflow: hidden;
   position: relative;
   margin-bottom: 18px;
}

.jcard__media .ph {
   position: absolute;
   inset: 0;
   transition: transform 1.5s var(--ease);
}

.jcard:hover .jcard__media .ph {
   transform: scale(1.045);
}

.jcard__title {
   font-family: var(--serif);
   font-size: 26px;
   line-height: 1.12;
   margin: 10px 0 8px;
}

.jcard__ex {
   font-size: 14px;
   color: var(--ink-soft);
   line-height: 1.6;
   margin-bottom: 14px;
   max-width: 38ch;
}

@media (max-width: 820px) {
   .jgrid {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 560px) {
   .jgrid {
      grid-template-columns: 1fr;
      gap: 38px;
   }
}

/* ---------- Concierge ---------- */
.concierge {
   background: var(--brown);
   color: var(--paper);
   padding-block: clamp(64px, 9vw, 128px);
}

.concierge__line {
   font-size: clamp(28px, 4.4vw, 56px);
   margin-top: 18px;
   line-height: 1.16;
   text-wrap: balance;
}

/* ============================================================
   COLLECTION
   ============================================================ */
.coll-hero {
   position: relative;
   height: clamp(380px, 56vh, 600px);
   display: flex;
   align-items: flex-end;
   color: var(--paper);
   overflow: hidden;
   padding-top: calc(var(--nav-h) + var(--announce-h));
}

.coll-hero__media {
   position: absolute;
   inset: 0;
}

.coll-hero__veil {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(20, 18, 15, 0.6), rgba(20, 18, 15, 0.05) 60%);
}

.coll-hero__content {
   position: relative;
   padding-bottom: clamp(34px, 5vw, 64px);
   width: 100%;
}

.coll-hero__title {
   font-size: clamp(46px, 9vw, 124px);
   margin-top: 6px;
}

.coll-hero__sub {
   font-family: var(--serif);
   font-style: italic;
   font-size: clamp(17px, 2.2vw, 24px);
   max-width: 540px;
   margin-top: 14px;
   opacity: 0.95;
}

.atelier-note {
   background: var(--paper-2);
   border-bottom: 1px solid var(--line);
}

.atelier-note__row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   padding: clamp(28px, 4vw, 48px) var(--gutter);
}

.atelier-note__step {
   display: flex;
   gap: 16px;
   align-items: flex-start;
}

.atelier-note__n {
   font-family: var(--serif);
   font-size: 30px;
   color: var(--brown);
   line-height: 1;
}

.atelier-note__t {
   font-family: var(--serif);
   font-size: 20px;
}

.atelier-note__d {
   font-size: 13px;
   color: var(--stone);
   margin-top: 4px;
   line-height: 1.5;
}

@media (max-width: 760px) {
   .atelier-note__row {
      grid-template-columns: 1fr;
      gap: 20px;
   }
}

.coll-bar {
   position: sticky;
   top: calc(var(--nav-h) + var(--announce-h));
   z-index: 90;
   background: var(--paper);
   border-bottom: 1px solid var(--line);
}

.coll-bar__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 16px;
   padding-bottom: 16px;
   gap: 20px;
}

.coll-bar__cats {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
}

.coll-cat {
   font-family: var(--sans);
   font-size: 11px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   padding: 8px 16px;
   border: 1px solid transparent;
   color: var(--stone);
   transition: all var(--fast);
}

.coll-cat:hover {
   color: var(--ink);
}

.coll-cat.sel {
   color: var(--ink);
   border-color: var(--ink);
}

.coll-bar__right {
   display: flex;
   align-items: center;
   gap: 22px;
}

.coll-bar__count {
   font-family: var(--sans);
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--stone);
   white-space: nowrap;
}

.coll-sort {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--sans);
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--stone);
}

.coll-sort select {
   border: none;
   background: none;
   font-family: var(--sans);
   font-size: 11px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--ink);
   cursor: pointer;
}

@media (max-width: 640px) {
   .coll-bar__inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
   }

   .coll-bar__cats {
      overflow-x: auto;
      flex-wrap: nowrap;
      width: 100%;
   }
}

.crosssell {
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   min-height: 360px;
   background: var(--paper-2);
   cursor: pointer;
   align-items: stretch;
}

.crosssell__media {
   position: relative;
}

.crosssell__media .ph {
   position: absolute;
   inset: 0;
   transition: transform 1.6s var(--ease);
}

.crosssell:hover .crosssell__media .ph {
   transform: scale(1.04);
}

.crosssell__body {
   padding: clamp(32px, 5vw, 64px);
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.crosssell__title {
   font-size: clamp(28px, 3.6vw, 48px);
   margin: 10px 0 12px;
}

.crosssell__body .link-ul {
   margin-top: 16px;
}

@media (max-width: 700px) {
   .crosssell {
      grid-template-columns: 1fr;
   }

   .crosssell__media {
      min-height: 300px;
   }
}

/* ============================================================
   PDP
   ============================================================ */
.pdp-crumb {
   margin-bottom: 24px;
}

.pdp {
   display: grid;
   grid-template-columns: 1.25fr 1fr;
   gap: clamp(28px, 4vw, 72px);
   align-items: start;
}

.pdp__gallery {
   display: grid;
   grid-template-columns: 72px 1fr;
   gap: 16px;
   position: sticky;
   top: calc(var(--nav-h) + var(--announce-h) + 20px);
}

.pdp__thumbs {
   display: flex;
   flex-direction: column;
   gap: 10px;
   order: -1;
}

.pdp__thumb {
   aspect-ratio: 3/4;
   overflow: hidden;
   opacity: 0.55;
   transition: opacity var(--fast);
   border: 1px solid transparent;
}

.pdp__thumb .ph {
   width: 100%;
   height: 100%;
}

.pdp__thumb.sel,
.pdp__thumb:hover {
   opacity: 1;
}

.pdp__thumb.sel {
   border-color: var(--ink);
}

.pdp__main {
   aspect-ratio: 3/4;
   overflow: hidden;
   position: relative;
}

.pdp__main .ph {
   position: absolute;
   inset: 0;
}

.pdp__info {
   padding-top: 6px;
}

.pdp__name {
   font-size: clamp(34px, 4.4vw, 56px);
   margin: 12px 0 12px;
   line-height: 1.02;
}

.pdp__price {
   font-family: var(--sans);
   font-size: 17px;
   letter-spacing: 0.04em;
   color: var(--ink);
}

.pdp__atelier-tag {
   font-family: var(--sans);
   font-size: 11px;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--brown);
   margin-top: 8px;
}

.pdp__story {
   font-size: 16px;
   line-height: 1.7;
   color: var(--ink-soft);
   margin: 24px 0 30px;
   max-width: 46ch;
}

.pdp__opt-block {
   margin-bottom: 26px;
}

.pdp__opt-label {
   font-family: var(--sans);
   font-size: 11px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--stone);
   margin-bottom: 12px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.pdp__opt-label span {
   color: var(--ink);
}

.pdp__sizeguide {
   color: var(--stone);
   text-decoration: underline;
   cursor: pointer;
}

.pdp__sizeguide:hover {
   color: var(--ink);
}

.pdp__warn {
   color: var(--peach-deep);
   font-size: 12px;
   letter-spacing: 0.04em;
   margin-top: 10px;
}

.pdp__cta-block {
   margin: 30px 0;
}

.pdp__qty-add {
   display: flex;
   gap: 14px;
}

.pdp__qty button {
   width: 44px;
   height: 100%;
}

.pdp__qty {
   height: 52px;
}

.pdp__add {
   flex: 1;
   height: 52px;
}

.pdp__cta-row {
   display: flex;
   gap: 12px;
   margin-top: 12px;
}

.pdp__half {
   flex: 1;
}

.pdp__note {
   font-size: 12px;
   color: var(--stone);
   margin-top: 16px;
   letter-spacing: 0.02em;
   line-height: 1.5;
}

.pdp__acc {
   border-top: 1px solid var(--line);
   margin-top: 8px;
}

.pdp__acc-item {
   border-bottom: 1px solid var(--line);
}

.pdp__acc-head {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 0;
   font-family: var(--sans);
   font-size: 12px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
}

.pdp__acc-sign {
   font-size: 16px;
   color: var(--brown);
}

.pdp__acc-body {
   max-height: 0;
   overflow: hidden;
   transition: max-height var(--med) var(--ease);
}

.pdp__acc-item.open .pdp__acc-body {
   max-height: 320px;
}

.pdp__acc-body ul {
   list-style: none;
   padding-bottom: 22px;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.pdp__acc-body li {
   font-size: 14px;
   color: var(--ink-soft);
   padding-left: 18px;
   position: relative;
   line-height: 1.5;
}

.pdp__acc-body li::before {
   content: "—";
   position: absolute;
   left: 0;
   color: var(--stone);
}

@media (max-width: 860px) {
   .pdp {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   .pdp__gallery {
      position: static;
   }
}

.pdp-edit {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 64vh;
   margin-top: clamp(60px, 8vw, 120px);
}

.pdp-edit__media {
   position: relative;
}

.pdp-edit__media .ph {
   position: absolute;
   inset: 0;
}

.pdp-edit__panel {
   background: var(--paper-2);
   display: flex;
   align-items: center;
   padding: clamp(40px, 6vw, 90px);
}

.pdp-edit__line {
   font-size: clamp(28px, 3.4vw, 46px);
   margin-top: 16px;
   line-height: 1.18;
   text-wrap: balance;
}

@media (max-width: 760px) {
   .pdp-edit {
      grid-template-columns: 1fr;
   }

   .pdp-edit__media {
      min-height: 50vh;
   }
}

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout {
   display: grid;
   grid-template-columns: 1.3fr 1fr;
   gap: clamp(36px, 6vw, 96px);
   align-items: start;
}

.co-block {
   animation: viewIn var(--med) var(--ease);
}

.co-h {
   font-family: var(--serif);
   font-size: 26px;
   margin-bottom: 18px;
   font-weight: 400;
}

.co-actions {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 30px;
   flex-wrap: wrap;
   gap: 16px;
}

.co-radio {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 18px 20px;
   border: 1px solid var(--line);
   background: var(--white);
   margin-bottom: 12px;
   transition: border-color var(--fast);
   text-align: left;
}

.co-radio:hover {
   border-color: var(--stone);
}

.co-radio.sel {
   border-color: var(--ink);
}

.co-radio__dot {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 1px solid var(--stone);
   flex-shrink: 0;
   position: relative;
   transition: border-color var(--fast);
}

.co-radio.sel .co-radio__dot {
   border-color: var(--ink);
}

.co-radio.sel .co-radio__dot::after {
   content: "";
   position: absolute;
   inset: 3px;
   border-radius: 50%;
   background: var(--ink);
}

.co-radio__main {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.co-radio__t {
   font-size: 14px;
   letter-spacing: 0.02em;
}

.co-radio__sub {
   font-size: 12px;
   color: var(--stone);
}

.co-radio__price {
   font-size: 13px;
   color: var(--ink-soft);
}

.checkout__summary {
   background: var(--paper-2);
   padding: clamp(26px, 3vw, 38px);
   position: sticky;
   top: calc(var(--nav-h) + var(--announce-h) + 20px);
}

.co-summary-title {
   font-family: var(--serif);
   font-size: 22px;
   margin-bottom: 18px;
   font-weight: 400;
}

.co-lines {
   border-bottom: 1px solid var(--line);
   padding-bottom: 8px;
   margin-bottom: 16px;
}

.co-line {
   display: grid;
   grid-template-columns: 52px 1fr auto;
   gap: 14px;
   align-items: center;
   padding: 12px 0;
}

.co-line__media {
   position: relative;
   aspect-ratio: 3/4;
}

.co-line__qty {
   position: absolute;
   top: -8px;
   right: -8px;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: var(--ink);
   color: var(--paper);
   font-size: 11px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.co-line__name {
   font-family: var(--serif);
   font-size: 16px;
   line-height: 1.1;
}

.co-line__attr {
   font-size: 11px;
   color: var(--stone);
   margin-top: 3px;
}

.co-line__price {
   font-size: 13px;
}

.co-reassure {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 20px;
   font-family: var(--sans);
   font-size: 10px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--stone);
}

.empty-cart {
   padding-block: clamp(40px, 8vw, 100px);
}

.confirm {
   padding-block: clamp(30px, 6vw, 80px);
}

.confirm__mark {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   border: 1px solid var(--brown);
   color: var(--brown);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   margin: 0 auto 24px;
}

.confirm__title {
   font-size: clamp(48px, 8vw, 100px);
   margin: 12px 0 20px;
}

@media (max-width: 820px) {
   .checkout {
      grid-template-columns: 1fr;
   }

   .checkout__summary {
      position: static;
      order: -1;
   }
}

/* ============================================================
   CONSULTATION
   ============================================================ */
.consult {
   display: grid;
   grid-template-columns: 0.85fr 1.15fr;
   gap: clamp(36px, 6vw, 90px);
   align-items: start;
}

.consult__aside {
   position: sticky;
   top: calc(var(--nav-h) + var(--announce-h) + 20px);
}

.consult__title {
   font-size: clamp(40px, 5vw, 72px);
   margin-top: 10px;
}

.consult__piece {
   display: flex;
   gap: 16px;
   align-items: center;
   background: var(--paper-2);
   padding: 16px;
   margin-top: 30px;
}

.consult__piece-media {
   width: 64px;
   aspect-ratio: 3/4;
   flex-shrink: 0;
   position: relative;
}

.consult__piece-name {
   font-family: var(--serif);
   font-size: 19px;
   margin-top: 4px;
}

.consult__piece-price {
   font-size: 12px;
   color: var(--stone);
   margin-top: 3px;
}

.consult__assure {
   margin-top: 30px;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.consult__assure-row {
   display: flex;
   gap: 12px;
   font-size: 14px;
   color: var(--ink-soft);
}

.consult__assure-row span {
   color: var(--brown);
}

/* ---- Mode selector (Step 1) ---- */
.consult__modes {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.consult__mode {
   text-align: left;
   border: 1px solid var(--line);
   background: var(--white);
   padding: 22px 24px;
   transition: border-color var(--fast), background var(--fast);
}

.consult__mode:hover {
   border-color: var(--stone);
}

.consult__mode.sel {
   border-color: var(--ink);
   background: var(--ink);
   color: var(--paper);
}

.consult__mode-top {
   display: flex;
   gap: 18px;
   align-items: flex-start;
}

.consult__mode-icon {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
   margin-top: 2px;
}

.consult__mode-t {
   font-family: var(--serif);
   font-size: 23px;
   display: block;
}

.consult__mode-dot {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 1px solid var(--stone);
   position: relative;
   flex-shrink: 0;
   margin-top: 6px;
}

.consult__mode.sel .consult__mode-dot {
   border-color: var(--paper);
}

.consult__mode.sel .consult__mode-dot::after {
   content: "";
   position: absolute;
   inset: 3px;
   border-radius: 50%;
   background: var(--paper);
}

.consult__mode-d {
   font-size: 14px;
   color: var(--ink-soft);
   margin: 6px 0 0;
   line-height: 1.5;
}

.consult__mode.sel .consult__mode-d {
   color: rgba(251, 249, 246, 0.72);
}

.consult__mode-meta {
   font-family: var(--sans);
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--stone);
   display: block;
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid var(--line);
}

.consult__mode.sel .consult__mode-meta {
   color: rgba(251, 249, 246, 0.55);
   border-top-color: rgba(251, 249, 246, 0.15);
}

/* ---- Schedule labels (shared) ---- */
.consult__sched-label {
   font-family: var(--sans);
   font-size: 11px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--stone);
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.consult__sched-note {
   font-size: 10px;
   letter-spacing: 0.08em;
   color: var(--brown);
   text-transform: none;
}

/* ---- Days & times (shared) ---- */
.consult__days {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 8px;
}

.consult__days--compact {
   grid-template-columns: repeat(5, 1fr);
}

.consult__day {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3px;
   padding: 14px 4px;
   border: 1px solid var(--line);
   background: var(--white);
   transition: all var(--fast);
   cursor: pointer;
}

.consult__day:hover {
   border-color: var(--stone);
}

.consult__day.sel {
   background: var(--ink);
   color: var(--paper);
   border-color: var(--ink);
}

.consult__day-dow {
   font-size: 10px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--stone);
}

.consult__day.sel .consult__day-dow,
.consult__day.sel .consult__day-mon {
   color: rgba(251, 249, 246, 0.7);
}

.consult__day-num {
   font-family: var(--serif);
   font-size: 24px;
}

.consult__day-mon {
   font-size: 10px;
   color: var(--stone);
}

.consult__times {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.consult__times--virtual {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
}

.consult__time {
   padding: 12px 22px;
   border: 1px solid var(--line);
   background: var(--white);
   font-size: 13px;
   letter-spacing: 0.04em;
   transition: all var(--fast);
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
}

.consult__time:hover {
   border-color: var(--stone);
}

.consult__time.sel {
   background: var(--ink);
   color: var(--paper);
   border-color: var(--ink);
}

.consult__time-dur {
   font-size: 10px;
   color: var(--stone);
   letter-spacing: 0.08em;
}

.consult__time.sel .consult__time-dur {
   color: rgba(251, 249, 246, 0.55);
}

/* ---- Recap ---- */
.consult__recap {
   background: var(--paper-2);
   padding: 18px 20px;
   margin: 22px 0;
   border-left: 2px solid var(--brown);
}

.consult__recap-details {
   margin-top: 8px;
}

.consult__recap-line {
   font-family: var(--serif);
   font-size: 18px;
}

.consult__recap-sub {
   font-size: 13px;
   color: var(--stone);
   margin-top: 4px;
   line-height: 1.5;
}

/* ---- In-store: Venue card ---- */
.consult__venue {
   display: grid;
   grid-template-columns: 140px 1fr;
   gap: 20px;
   background: var(--paper-2);
   padding: 0;
   margin-bottom: 28px;
   overflow: hidden;
}

.consult__venue-img {
   position: relative;
   aspect-ratio: 3/4;
}

.consult__venue-info {
   padding: 20px 20px 20px 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.consult__venue-name {
   font-family: var(--serif);
   font-size: 20px;
}

.consult__venue-addr {
   font-size: 14px;
   color: var(--ink-soft);
   line-height: 1.6;
}

.consult__venue-hours {
   display: flex;
   flex-direction: column;
   gap: 4px;
   font-size: 13px;
   color: var(--ink-soft);
   margin-top: auto;
}

/* ---- In-store: Guest picker ---- */
.consult__guests {
   display: flex;
   gap: 8px;
}

.consult__guest-btn {
   padding: 12px 22px;
   border: 1px solid var(--line);
   background: var(--white);
   font-size: 13px;
   letter-spacing: 0.04em;
   transition: all var(--fast);
   cursor: pointer;
}

.consult__guest-btn:hover {
   border-color: var(--stone);
}

.consult__guest-btn.sel {
   background: var(--ink);
   color: var(--paper);
   border-color: var(--ink);
}

/* ---- In-store: What to expect ---- */
.consult__expect {
   margin-top: 32px;
   padding-top: 24px;
   border-top: 1px solid var(--line);
}

.consult__expect-items {
   display: flex;
   flex-direction: column;
   gap: 18px;
   margin-top: 16px;
}

.consult__expect-item {
   display: flex;
   gap: 16px;
   align-items: flex-start;
}

.consult__expect-n {
   font-family: var(--serif);
   font-size: 18px;
   color: var(--brown);
   flex-shrink: 0;
   width: 28px;
}

.consult__expect-t {
   font-family: var(--serif);
   font-size: 17px;
}

.consult__expect-d {
   font-size: 13px;
   color: var(--stone);
   margin-top: 3px;
   line-height: 1.5;
}

/* ---- Virtual: Platform selector ---- */
.consult__platforms {
   display: flex;
   gap: 8px;
}

.consult__platform {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 20px;
   border: 1px solid var(--line);
   background: var(--white);
   font-size: 13px;
   letter-spacing: 0.04em;
   transition: all var(--fast);
   cursor: pointer;
}

.consult__platform:hover {
   border-color: var(--stone);
}

.consult__platform.sel {
   border-color: var(--ink);
}

.consult__platform-dot {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   border: 1px solid var(--stone);
   position: relative;
   flex-shrink: 0;
}

.consult__platform.sel .consult__platform-dot {
   border-color: var(--ink);
}

.consult__platform.sel .consult__platform-dot::after {
   content: "";
   position: absolute;
   inset: 3px;
   border-radius: 50%;
   background: var(--ink);
}

/* ---- Virtual: Timezone ---- */
.consult__tz-wrap {
   position: relative;
}

.consult__tz-select {
   width: 100%;
   padding: 14px 18px;
   border: 1px solid var(--line);
   background: var(--white);
   font-family: var(--sans);
   font-size: 14px;
   color: var(--ink);
   appearance: none;
   cursor: pointer;
   transition: border-color var(--fast);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a7f72' stroke-width='1.2'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 16px center;
}

.consult__tz-select:hover,
.consult__tz-select:focus {
   border-color: var(--stone);
   outline: none;
}

/* ---- Virtual: Preparation tips ---- */
.consult__tips {
   margin-top: 28px;
   padding-top: 22px;
   border-top: 1px solid var(--line);
}

.consult__tips-list {
   list-style: none;
   margin-top: 14px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.consult__tips-list li {
   font-size: 13px;
   color: var(--ink-soft);
   line-height: 1.6;
   padding-left: 20px;
   position: relative;
}

.consult__tips-list li::before {
   content: "—";
   position: absolute;
   left: 0;
   color: var(--brown);
}

/* ---- Virtual: Platform note (in step 3) ---- */
.consult__platform-note {
   background: var(--paper-2);
   padding: 14px 18px;
   margin-top: 14px;
}

.consult__platform-note p {
   font-size: 13px;
   color: var(--ink-soft);
   margin-top: 6px;
   line-height: 1.5;
}

/* ---- WhatsApp: Topics ---- */
.consult__topics {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
}

.consult__topic {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 18px;
   border: 1px solid var(--line);
   background: var(--white);
   font-size: 13px;
   text-align: left;
   transition: all var(--fast);
   cursor: pointer;
   letter-spacing: 0.02em;
}

.consult__topic:hover {
   border-color: var(--stone);
}

.consult__topic.sel {
   border-color: var(--ink);
   background: var(--ink);
   color: var(--paper);
}

.consult__topic-check {
   width: 18px;
   height: 18px;
   border: 1px solid var(--stone);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   flex-shrink: 0;
   transition: all var(--fast);
}

.consult__topic.sel .consult__topic-check {
   border-color: var(--paper);
   color: var(--paper);
}

/* ---- WhatsApp: Concierge info card ---- */
.consult__wa-info {
   margin-top: 28px;
}

.consult__wa-card {
   background: var(--paper-2);
   padding: 22px 24px;
}

.consult__wa-detail {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.consult__wa-row {
   display: flex;
   gap: 8px;
   font-size: 13px;
   line-height: 1.5;
}

.consult__wa-label {
   font-family: var(--sans);
   font-size: 11px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--stone);
   min-width: 110px;
   flex-shrink: 0;
   padding-top: 1px;
}

/* ---- WhatsApp: How it works ---- */
.consult__wa-flow {
   margin-top: 28px;
   padding-top: 22px;
   border-top: 1px solid var(--line);
}

.consult__wa-steps {
   display: flex;
   flex-direction: column;
   gap: 20px;
   margin-top: 16px;
}

.consult__wa-step {
   display: flex;
   gap: 16px;
   align-items: flex-start;
}

.consult__wa-step-n {
   font-family: var(--serif);
   font-size: 22px;
   color: var(--brown);
   flex-shrink: 0;
   width: 28px;
}

.consult__wa-step-t {
   font-family: var(--serif);
   font-size: 17px;
}

.consult__wa-step-d {
   font-size: 13px;
   color: var(--stone);
   margin-top: 3px;
   line-height: 1.5;
}

/* ---- Confirmation detail ---- */
.consult__confirm-detail {
   background: var(--paper-2);
   padding: 16px 20px;
   margin-top: 16px;
   display: inline-block;
}

.consult__confirm-detail p {
   font-size: 14px;
   line-height: 1.6;
}

.consult__done {
   padding-block: clamp(20px, 4vw, 50px);
}

@media (max-width: 860px) {
   .consult {
      grid-template-columns: 1fr;
   }

   .consult__aside {
      position: static;
   }

   .consult__days {
      grid-template-columns: repeat(4, 1fr);
   }

   .consult__days--compact {
      grid-template-columns: repeat(3, 1fr);
   }

   .consult__venue {
      grid-template-columns: 100px 1fr;
   }

   .consult__topics {
      grid-template-columns: 1fr;
   }

   .consult__times--virtual {
      grid-template-columns: repeat(2, 1fr);
   }

   .consult__platforms {
      flex-direction: column;
   }
}

.btn--disabled,
.btn[disabled] {
   opacity: 0.32;
   pointer-events: none;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-hero {
   position: relative;
   height: 100vh;
   min-height: 620px;
   display: flex;
   align-items: flex-end;
   color: var(--paper);
   overflow: hidden;
}

.about-hero__media {
   position: absolute;
   inset: 0;
}

.about-hero__veil {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(20, 18, 15, 0.6), rgba(20, 18, 15, 0.1) 55%, rgba(20, 18, 15, 0.25));
}

.about-hero__content {
   position: relative;
   padding-bottom: clamp(48px, 7vw, 96px);
   width: 100%;
}

.about-hero__title {
   font-size: clamp(48px, 9vw, 132px);
   margin-top: 10px;
}

.about-intro {
   max-width: 760px;
}

.about-quote {
   background: var(--brown);
   color: var(--paper);
   padding-block: clamp(72px, 11vw, 150px);
}

.about-quote__line {
   font-size: clamp(26px, 4vw, 50px);
   line-height: 1.24;
   max-width: 940px;
   margin: 0 auto;
   text-wrap: balance;
   font-style: italic;
}

.values-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   background: var(--line);
   border: 1px solid var(--line);
}

.value-card {
   background: var(--paper);
   padding: clamp(26px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
   min-height: 240px;
   display: flex;
   flex-direction: column;
}

.value-card__n {
   font-family: var(--serif);
   font-size: 22px;
   color: var(--brown);
}

.value-card__t {
   font-family: var(--serif);
   font-size: 25px;
   line-height: 1.1;
   margin: 18px 0 12px;
}

.value-card__d {
   font-size: 14px;
   color: var(--ink-soft);
   line-height: 1.6;
   margin-top: auto;
}

@media (max-width: 900px) {
   .values-grid {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 520px) {
   .values-grid {
      grid-template-columns: 1fr;
   }

   .value-card {
      min-height: 0;
   }
}

/* ============================================================
   JOURNAL / ARTICLE
   ============================================================ */
.journal-feat {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: clamp(24px, 4vw, 60px);
   align-items: center;
   cursor: pointer;
}

.journal-feat__media {
   aspect-ratio: 16/11;
   overflow: hidden;
   position: relative;
}

.journal-feat__media .ph {
   position: absolute;
   inset: 0;
   transition: transform 1.6s var(--ease);
}

.journal-feat:hover .journal-feat__media .ph {
   transform: scale(1.04);
}

.journal-feat__title {
   font-size: clamp(32px, 4.4vw, 60px);
   margin: 12px 0 16px;
   line-height: 1.04;
}

.journal-feat__body .link-ul {
   margin-top: 18px;
}

@media (max-width: 760px) {
   .journal-feat {
      grid-template-columns: 1fr;
      gap: 22px;
   }
}

.article {
   max-width: 820px;
}

.article__title {
   font-size: clamp(40px, 6vw, 80px);
   margin: 10px 0;
   line-height: 1.02;
}

.article__hero {
   aspect-ratio: 16/10;
   overflow: hidden;
   position: relative;
   margin: clamp(32px, 5vw, 60px) 0;
}

.article__hero .ph {
   position: absolute;
   inset: 0;
}

.article__body {
   max-width: 640px;
   margin: 0 auto;
}

.article__lede {
   font-family: var(--serif);
   font-size: clamp(22px, 2.6vw, 30px);
   font-style: italic;
   line-height: 1.4;
   color: var(--ink);
   margin-bottom: 30px;
}

.article__p {
   font-size: 17px;
   line-height: 1.85;
   color: var(--ink-soft);
   margin-bottom: 24px;
}

.article__pull {
   font-size: clamp(26px, 3.4vw, 40px);
   line-height: 1.25;
   color: var(--ink);
   text-align: center;
   margin: 44px 0;
   padding: 0 8%;
   text-wrap: balance;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(40px, 6vw, 96px);
   align-items: start;
}

.contact__details {
   margin-top: 36px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
}

.contact__detail {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.contact__detail div {
   font-size: 15px;
   color: var(--ink-soft);
   line-height: 1.5;
}

.contact__form {
   background: var(--paper-2);
   padding: clamp(28px, 4vw, 48px);
}

.contact__sent {
   text-align: center;
   padding: 30px 0;
}

.contact__sent .body-text {
   margin-top: 10px;
}

@media (max-width: 820px) {
   .contact {
      grid-template-columns: 1fr;
   }
}

/* ============================================================
   ACCOUNT
   ============================================================ */
.account {
   max-width: 460px;
}

.account__tabs {
   display: flex;
   border-bottom: 1px solid var(--line);
   margin-bottom: 30px;
}

.account__tab {
   flex: 1;
   padding: 14px;
   font-family: var(--sans);
   font-size: 11px;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--stone);
   border-bottom: 1px solid transparent;
   margin-bottom: -1px;
   transition: all var(--fast);
}

.account__tab.sel {
   color: var(--ink);
   border-bottom-color: var(--ink);
}

/* ============================================================
   LOOKBOOK / DIGITAL CATALOG
   ============================================================ */
.lookbook-hero {
   position: relative;
   padding-top: clamp(100px, 14vw, 160px);
   padding-bottom: clamp(40px, 6vw, 80px);
   background: var(--paper);
   text-align: center;
}

.lookbook-hero__title {
   font-size: clamp(52px, 8vw, 110px);
   line-height: 1.1;
   margin-bottom: 12px;
}

.lookbook-hero__sub {
   font-family: var(--sans);
   font-size: clamp(14px, 2vw, 18px);
   color: var(--stone);
   letter-spacing: 0.02em;
}

.lookbook-gallery-container {
   position: relative;
   background: var(--paper);
   overflow: hidden;
   padding-bottom: 100px;
}

.lookbook-carousel {
   width: 100vw;
   overflow-x: auto;
   cursor: grab;
   padding: 40px var(--gutter) 40px;
   scrollbar-width: none;
   -ms-overflow-style: none;
   scroll-behavior: smooth;
}

.lookbook-carousel::-webkit-scrollbar {
   display: none;
}

.lookbook-carousel.is-dragging {
   cursor: grabbing;
   scroll-behavior: auto;
   user-select: none;
}

.lookbook-track {
   display: flex;
   gap: clamp(16px, 3vw, 40px);
   align-items: center;
   min-width: max-content;
}

.lookbook-card {
   position: relative;
   height: clamp(400px, 65vh, 700px);
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   cursor: pointer;
   padding-top: 36px;
   padding-bottom: 36px;
}

.lookbook-card__media {
   height: 100%;
   aspect-ratio: 3/4;
   overflow: hidden;
   position: relative;
   transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Allow some cards to be wider for variety based on nth-child, or just keep uniform for now. */
.lookbook-card:nth-child(even) .lookbook-card__media {
   aspect-ratio: 4/5;
}

.lookbook-card:nth-child(3n) .lookbook-card__media {
   aspect-ratio: 2/3;
}

.lookbook-card__media img,
.lookbook-card__media .ph {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.lookbook-card:hover .lookbook-card__media {
   transform: scale(0.98);
}

.lookbook-card__number {
   position: absolute;
   top: 16px;
   left: 0;
   width: 100%;
   text-align: center;
   font-family: var(--sans);
   font-size: 16px;
   letter-spacing: 0.1em;
   color: var(--ink);
   opacity: 0;
   transform: translateY(10px);
   transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
   z-index: 2;
   pointer-events: none;
}

.lookbook-card__label {
   position: absolute;
   bottom: -30px;
   left: 0;
   width: 100%;
   text-align: center;
   color: var(--stone);
   opacity: 0;
   transform: translateY(-10px);
   transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
   pointer-events: none;
   font-family: var(--sans);
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
}

.lookbook-card:hover .lookbook-card__number {
   opacity: 1;
   transform: translateY(0);
   top: -30px;
}

.lookbook-card:hover .lookbook-card__label {
   opacity: 1;
   transform: translateY(0);
   bottom: -30px;
}

.lookbook-divider {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 16px;
   padding: 0 4vw;
   height: 100%;
   flex-shrink: 0;
}

.lookbook-divider__line {
   width: 1px;
   height: 120px;
   background: var(--line);
}

.lookbook-divider__label {
   color: var(--stone);
   text-transform: uppercase;
   letter-spacing: 0.2em;
   font-family: var(--sans);
   font-size: 11px;
   writing-mode: vertical-rl;
   transform: rotate(180deg);
}

.lookbook-spacer {
   width: 40px;
   height: 10px;
   flex-shrink: 0;
}

.lookbook-timeline {
   position: absolute;
   bottom: 5;
   left: 0;
   width: 100%;
   padding: 24px 0;
   background: linear-gradient(to top, var(--paper) 40%, rgba(251, 249, 246, 0));
   z-index: 10;
   pointer-events: none;
}

.timeline-track {
   display: flex;
   justify-content: center;
   gap: clamp(30px, 8vw, 120px);
   border-bottom: 1px solid var(--line);
   padding-bottom: 12px;
   pointer-events: auto;
}

.timeline-season {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   position: relative;
   opacity: 0.5;
   transition: opacity var(--fast);
}

.timeline-season:hover,
.timeline-season.is-active {
   opacity: 1;
}

.timeline-ticks {
   display: flex;
   gap: 8px;
   margin-bottom: 4px;
}

.timeline-tick {
   width: 1px;
   height: 12px;
   background: var(--ink);
}

.timeline-season.is-active .timeline-label {
   color: var(--ink);
}

.timeline-label {
   color: var(--stone);
   position: absolute;
   top: 100%;
   padding-top: 12px;
   font-family: var(--sans);
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
}

.lookbook-overview {
   background: var(--paper-2);
   padding-block: clamp(60px, 10vw, 120px);
   border-top: 1px solid var(--line);
}

.lookbook-season-grid {
   margin-bottom: 80px;
}

/* Lightbox */
.lookbook-lightbox {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.5s ease;
}

.lookbook-lightbox.show {
   opacity: 1;
   pointer-events: auto;
}

.lookbook-lightbox__bg {
   position: absolute;
   inset: 0;
   background: var(--paper);
   opacity: 0.98;
   cursor: pointer;
}

.lookbook-lightbox__close {
   position: absolute;
   top: 30px;
   right: 30px;
   z-index: 10;
   color: var(--ink);
   cursor: pointer;
   padding: 10px;
   background: none;
   border: none;
}

.lookbook-lightbox__content {
   position: relative;
   z-index: 5;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: 100%;
   padding: 40px var(--gutter);
   pointer-events: none;
}

.lookbook-lightbox__nav {
   color: var(--stone);
   cursor: pointer;
   padding: 20px;
   transition: color var(--fast);
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: auto;
   background: none;
   border: none;
}

.lookbook-lightbox__nav:hover {
   color: var(--ink);
}

.lookbook-lightbox__center {
   display: flex;
   gap: clamp(40px, 6vw, 100px);
   align-items: center;
   height: 100%;
   max-height: 80vh;
   max-width: 1200px;
   margin: 0 auto;
   pointer-events: auto;
}

.lookbook-lightbox__media {
   height: 100%;
   aspect-ratio: 3/4;
}

.lookbook-lightbox__media img,
.lookbook-lightbox__media .ph {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.lookbook-lightbox__meta {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 30px;
   max-width: 400px;
}

.lookbook-lightbox__info {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.lookbook-lightbox__title {
   font-size: clamp(32px, 4vw, 54px);
   margin-top: 12px;
   line-height: 1.1;
}

@media (max-width: 860px) {
   .lookbook-lightbox__center {
      flex-direction: column;
      justify-content: center;
      gap: 30px;
   }

   .lookbook-lightbox__media {
      max-height: 50vh;
   }

   .lookbook-lightbox__meta {
      align-items: center;
      text-align: center;
   }

   .lookbook-lightbox__nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
   }

   .lookbook-lightbox__nav.prev {
      left: 0;
   }

   .lookbook-lightbox__nav.next {
      right: 0;
   }
}