/* ==========================================================================
   NORIANA — LANDING EDIT (page-landing-edit.php)
   Loaded after home-new.css, home-dark.css (dark only) and home-edit.css.
   Adds the pieces a product landing page needs: the three-up gallery and
   the buy block with its detail rows.
   ========================================================================== */

/* The landing hero shows one still image, so the slider chrome goes away. */
.landing-edit .hero--single .hero__arrow,
.landing-edit .hero--single .hero__dots{ display:none; }

/* ------------------------------------------------------------ gallery */
.lgal{ padding-block:clamp(3rem,7vh,5rem) 0; background:var(--nor-cream); }
.lgal__head{
  width:100%; max-width:1360px; margin:0 auto clamp(1.75rem,4vh,2.5rem);
  padding-inline:clamp(1.25rem,5vw,4rem);
  text-align:center;
}
.lgal__eyebrow{
  margin:0 0 1rem;
  font-family:var(--nor-sans); font-weight:500;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--nor-taupe);
}
.lgal__title{
  margin:0;
  font-family:var(--nor-serif); font-weight:500;
  font-size:clamp(2rem,4.5vw,3.1rem); line-height:1.05;
  color:var(--nor-ink);
}
.lgal__grid{
  display:grid;
  gap:2px;
  grid-template-columns:1fr;
}
@media (min-width:820px){ .lgal__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.lgal__grid img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
}

/* --------------------------------------------------------- buy block */
.piece{ padding-block:clamp(3.5rem,8vh,6rem); background:var(--nor-surface); }
.piece__wrap{
  width:100%; max-width:1360px; margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,4rem);
  display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:start;
}
@media (min-width:900px){ .piece__wrap{ grid-template-columns:1.1fr 1fr; } }

.piece__media{ display:grid; gap:2px; }
.piece__main{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.piece__thumbs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; }
.piece__thumbs img{ width:100%; aspect-ratio:1/1; object-fit:cover; }

.piece__copy{ display:flex; flex-direction:column; align-items:flex-start; }
@media (min-width:900px){
  .piece__copy{ position:sticky; top:96px; }
}
.piece__eyebrow{
  margin:0 0 1rem;
  font-family:var(--nor-sans); font-weight:500;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--nor-taupe);
}
.piece__title{
  margin:0;
  font-family:var(--nor-serif); font-weight:500;
  font-size:clamp(2rem,4vw,3rem); line-height:1.08;
  color:var(--nor-ink);
}
.piece__price{
  margin:.9rem 0 0;
  font-family:var(--nor-sans); font-size:1.25rem; color:var(--nor-ink);
}
.piece__price span{
  margin-left:.4rem;
  font-size:.7rem; letter-spacing:.2em; color:var(--nor-muted);
}
.piece__text{
  margin:1.2rem 0 0; max-width:46ch;
  color:var(--nor-muted); font-size:1rem; line-height:1.75;
}
.piece__facts{
  list-style:none; display:flex; flex-wrap:wrap; gap:.5rem;
  margin:1.5rem 0 0; padding:0;
}
.piece__facts li{
  padding:.4rem .8rem;
  border:1px solid var(--nor-line);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--nor-muted);
}
.piece__actions{
  display:flex; flex-wrap:wrap; gap:.75rem;
  width:100%; margin-top:1.75rem;
}
.piece__btn{
  flex:1 1 12rem;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:.9rem 1.8rem;
  font-family:var(--nor-sans); font-weight:500;
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  color:var(--nor-ink); background:transparent;
  border:1px solid var(--nor-ink); cursor:pointer;
  transition:background .3s var(--nor-ease), color .3s var(--nor-ease), border-color .3s var(--nor-ease);
}
.piece__btn:hover{ background:var(--nor-ink); color:var(--nor-cream); }
.piece__btn--solid{ background:var(--nor-ink); color:var(--nor-cream); }
.piece__btn--solid:hover{ background:var(--nor-sage); border-color:var(--nor-sage); color:var(--nor-white); }
.piece__note{
  margin:1rem 0 0;
  font-size:.8rem; letter-spacing:.04em; color:var(--nor-muted);
}
.piece__acc{ width:100%; margin-top:2rem; border-top:1px solid var(--nor-line); }
.piece__acc .faq__q{ font-size:1.15rem; }
.piece__rows{ margin:0; display:grid; gap:.75rem; }
@media (min-width:520px){ .piece__rows{ grid-template-columns:10rem 1fr; gap:.75rem 1.5rem; } }
.piece__rows dt{
  font-family:var(--nor-sans); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--nor-taupe);
}
.piece__rows dd{
  margin:0; color:var(--nor-muted); font-size:.98rem; line-height:1.7;
}

/* ------------------------------------------------- dark variant fixes */
.home-dark.landing-edit .piece__btn--solid,
.home-dark.landing-edit .piece__btn:hover{ color:var(--dk-on-light); }
.home-dark.landing-edit .piece__btn--solid:hover{ color:var(--dk-on-light); }
.home-dark.landing-edit .piece__title,
.home-dark.landing-edit .lgal__title{ font-weight:700; }
.home-dark.landing-edit .piece__eyebrow,
.home-dark.landing-edit .lgal__eyebrow,
.home-dark.landing-edit .piece__btn,
.home-dark.landing-edit .piece__rows dt{ font-weight:600; }
.home-dark.landing-edit .piece__text,
.home-dark.landing-edit .piece__rows dd,
.home-dark.landing-edit .piece__price{ font-weight:500; }

/* multi-value rows (the catalog lists each "Details" bullet separately) */
.piece__rows dd ul{ margin:0; padding:0 0 0 1.1rem; display:grid; gap:.3rem; }
.piece__rows dd li{ line-height:1.6; }

/* the three notes in the detail split read as lead-ins, not headings */
.landing-edit .nabout__text strong{ color:var(--nor-ink); font-weight:500; }
.home-dark.landing-edit .nabout__text strong{ font-weight:600; }

/* ==========================================================================
   Split hero: copy on a solid panel, photograph beside it. Same tokens as
   the homepages, so the dark variant needs nothing extra.
   ========================================================================== */
.lhero{
  display:grid;
  grid-template-columns:1fr;
  background:var(--nor-off);
}
@media (min-width:900px){
  .lhero{ grid-template-columns:minmax(0,46%) minmax(0,54%); min-height:80svh; }
}
.lhero__panel{
  display:flex; align-items:center;
  padding:clamp(2.5rem,6vw,5rem) clamp(1.25rem,5vw,4.5rem);
  background:var(--nor-off);
}
.lhero__copy{ width:100%; max-width:34rem; }
.lhero__eyebrow{
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 1.4rem;
  font-family:var(--nor-sans); font-weight:500;
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--nor-taupe);
}
.lhero__eyebrow::before{ content:""; width:34px; height:1px; background:var(--nor-taupe); }
.lhero__title{
  margin:0 0 1.4rem;
  font-family:var(--nor-serif); font-weight:500;
  font-size:clamp(3rem,6vw,5.25rem); line-height:1; letter-spacing:-.01em;
  color:var(--nor-ink);
}
.lhero__title em{ font-style:italic; font-weight:400; color:var(--nor-taupe); }
.lhero__sub{
  margin:0 0 1.6rem; max-width:32rem;
  color:var(--nor-muted); font-size:1rem; line-height:1.75;
}
.lhero__price{
  margin:0 0 1.75rem;
  font-family:var(--nor-sans); font-size:1.3rem; color:var(--nor-ink);
}
.lhero__price span{ margin-left:.4rem; font-size:.7rem; letter-spacing:.2em; color:var(--nor-muted); }
.lhero__ctas{ display:flex; flex-wrap:wrap; gap:.8rem; }
.lhero__btn{
  flex:1 1 12rem;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:.9rem 2rem;
  font-family:var(--nor-sans); font-weight:500;
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  color:var(--nor-ink); background:transparent;
  border:1px solid var(--nor-ink); cursor:pointer;
  transition:background .3s var(--nor-ease), color .3s var(--nor-ease), border-color .3s var(--nor-ease);
}
.lhero__btn:hover{ background:var(--nor-ink); color:var(--nor-cream); }
.lhero__btn--solid{ background:var(--nor-ink); color:var(--nor-cream); }
.lhero__btn--solid:hover{ background:var(--nor-sage); border-color:var(--nor-sage); color:var(--nor-white); }
.lhero__meta{
  list-style:none; display:flex; flex-wrap:wrap; gap:1.25rem;
  margin:2rem 0 0; padding:1.25rem 0 0;
  border-top:1px solid var(--nor-line);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--nor-muted);
}

.lhero__visual{ position:relative; overflow:hidden; background:var(--nor-surface); }
.lhero__img{
  width:100%; height:100%;
  min-height:clamp(24rem,60vh,44rem);
  object-fit:cover; object-position:center 35%;
}
.lhero__note{
  position:absolute; top:1.5rem; right:1.5rem;
  writing-mode:vertical-rl;
  font-size:.66rem; letter-spacing:.3em; color:var(--nor-white);
  mix-blend-mode:difference;
}
.lhero__thumbs{
  position:absolute; left:1.25rem; bottom:1.25rem;
  display:flex; gap:.5rem;
}
.lhero__thumb{
  width:62px; height:78px; padding:0; overflow:hidden;
  border:1px solid rgba(255,255,255,.45); background:none; cursor:pointer;
  opacity:.65; transition:opacity .3s var(--nor-ease), border-color .3s var(--nor-ease);
}
.lhero__thumb{ background:#0f0f11; }
/* Photo 1 is landscape, 2 and 3 are portrait: contain shows each whole frame
   instead of cropping the portraits into a zoomed-in slice. */
.lhero__thumb img{ width:100%; height:100%; object-fit:contain; }
.lhero__thumb:hover{ opacity:1; }
.lhero__thumb.is-active{ opacity:1; border-color:var(--nor-white); }
@media (max-width:899px){
  .lhero{ display:flex; flex-direction:column-reverse; }
  .lhero__img{ min-height:0; aspect-ratio:4/5; }
  .lhero__thumb{ width:52px; height:66px; }
}

/* bolder on the dark variant, matching /home-dark/ */
.home-dark .lhero__title{ font-weight:700; }
.home-dark .lhero__eyebrow,
.home-dark .lhero__btn,
.home-dark .lhero__meta{ font-weight:600; }
.home-dark .lhero__sub,
.home-dark .lhero__price{ font-weight:500; }
.home-dark .lhero__btn--solid,
.home-dark .lhero__btn:hover{ color:var(--dk-on-light); }

/* hero photographs updated 2026-09-23 */

/* The landing banner carries a wide photograph, so it keeps the homepage
   proportions but sits a little shallower. */
.landing-edit .banner__img{ aspect-ratio:1916/821; }

/* struck-through price beside the sale price in the buy block */
.piece__price .was{
  margin-left:.6rem;
  font-size:.95rem; color:var(--nor-muted); text-decoration:line-through;
}