/* ============================================================
   MULTI-PAGE ADDITIONS
   The four "destination" overlays (product, blog post, my orders,
   shop) keep their original ids on their own page so every render
   function in app.js works unchanged — these rules just take them
   out of the fixed/overlay world and drop them into the page flow.
============================================================ */

/* A modal container that lives on its own page instead of floating
   over one. Overrides the inline style="" the markup carries. */
.nw-page-modal {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: block !important;
  padding: 0 !important;
  max-width: 1680px;
  margin: 0 auto;
}
.nw-page-modal > .modal-pop {
  max-height: none !important;
  overflow: visible !important;
  /* `auto` on the sides, NOT a flat 0. The markup centres this panel with
     Tailwind's mx-auto, and a bare `margin: 0 !important` silently beat it,
     pinning the 1024px panel to the left of its 1680px wrapper and leaving
     776px of dead space down the right of every product page. */
  margin: 0 auto !important;
  width: 100%;
  box-shadow: none;
  background: transparent;
  opacity: 1;
  transform: none;
}
/* ------------------------------------------------------------------
   PRODUCT PAGE WIDTH
   The panel carries Tailwind's max-w-5xl (1024px), which was sized for a
   quick-view modal floating over the page. As a full page it left most of
   a wide screen empty, so the product route runs to 1360px instead.

   .nw-page-head is pinned to the same width and given the 2rem inset the
   gallery column already uses (p-8), so the breadcrumb lines up with the
   product image's left edge rather than floating off on its own.
------------------------------------------------------------------ */
body[data-page="product"] .nw-page-modal { max-width: 1360px; }
body[data-page="product"] .nw-page-modal > .modal-pop { max-width: none; }
body[data-page="product"] .nw-page-head { max-width: 1360px; }
@media (min-width: 768px) {
  body[data-page="product"] .nw-page-head { padding-left: 2rem; padding-right: 2rem; }
}

/* ------------------------------------------------------------------
   PRODUCT DETAIL TABS
   Moved out of the right-hand column to run the full width of the panel.
   In the column a two-line description left most of the page blank; here
   the prose and the spec list share the width instead.
------------------------------------------------------------------ */
.nw-pdp-detail { padding: 1.75rem 1.25rem; }
@media (min-width: 768px) { .nw-pdp-detail { padding: 2.5rem 2rem; } }
.nw-pdp-tabs {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid rgb(var(--c-taupelight) / .3);
  font-size: .875rem;
  font-weight: 600;
  overflow-x: auto;               /* three tabs still fit at 320px */
  scrollbar-width: none;
}
.nw-pdp-tabs::-webkit-scrollbar { display: none; }
.nw-pdp-tabs > button { padding-bottom: .75rem; white-space: nowrap; }
.nw-pdp-tabbody { padding-top: 1.75rem; font-size: .9rem; color: rgb(var(--c-taupe)); line-height: 1.7; }

/* Description: prose beside a scannable fact list. Single column on
   phones, where side-by-side would leave both halves too narrow. */
.nw-pdp-desc { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .nw-pdp-desc { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4rem; }
}
.nw-pdp-prose > p + p { margin-top: 1rem; }
.nw-pdp-prose > p { max-width: 62ch; }   /* keeps the line length readable */

/* Definition list rendered as label/value rows. */
.nw-pdp-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .55rem 1.25rem; }
.nw-pdp-facts dt {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgb(var(--c-espresso));
  padding-top: .15rem;
}
.nw-pdp-facts dd { margin: 0; font-size: .875rem; color: rgb(var(--c-taupe)); }
@media (min-width: 768px) {
  .nw-pdp-facts-wide { grid-template-columns: max-content minmax(0, 1fr); max-width: 46rem; gap: .7rem 2.5rem; }
}

/* ------------------------------------------------------------------
   ASSURANCE BAND (product page)
   Four promises in a row under the buy block. Collapses to 2x2 on phones
   rather than shrinking to unreadable — four columns at 390px would give
   each one under 90px.
------------------------------------------------------------------ */
.nw-assurance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
  padding: 1.75rem 1.25rem;
}
@media (min-width: 768px) {
  .nw-assurance {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 2rem;
  }
}
.nw-assurance-item { display: flex; align-items: flex-start; gap: .7rem; }
.nw-assurance-title {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgb(var(--c-espresso));
  line-height: 1.3;
}
.nw-assurance-sub {
  font-size: 12.5px;
  color: rgb(var(--c-taupe));
  line-height: 1.45;
  margin-top: .15rem;
}

/* .modal-pop normally animates in from scale(.96); on a real page it is
   just content, so make sure it is never left mid-animation. */
.nw-page-modal > .modal-pop:not(.open) { opacity: 1; transform: none; }

/* My-orders page: the modal markup is a flex column sized to the
   viewport — on a page it should size to its content instead. */
#nwAccountPage .nw-page-modal > .modal-pop { display: block !important; }
#nwAccountPage #myOrdersList { overflow: visible !important; flex: none !important; }

/* Shop page: the same #shopView markup, unpinned from the viewport. */
body[data-page="shop"] #shopView {
  position: relative !important;
  inset: auto !important;
  z-index: 0 !important;
  min-height: 70vh;
  overflow: visible !important;
}
body[data-page="shop"] #shopView.hidden { display: flex !important; }
body[data-page="shop"] #shopBg { position: absolute; }
body[data-page="shop"] #shopBodyGrid,
body[data-page="shop"] #shopMainCol { overflow: visible !important; }
body[data-page="shop"] #filterPanel { max-height: none; }

/* Simple page header used by the pages that need a title band. */
.nw-page-head {
  max-width: 1680px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1.5rem;
}
@media (min-width: 768px) { .nw-page-head { padding: 3.5rem 2.5rem 2rem; } }
.nw-page-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold, #b4945c);
  margin-bottom: 0.5rem;
}
.nw-breadcrumb { font-size: 12px; color: var(--taupe, #8a8175); margin-bottom: 1rem; }
.nw-breadcrumb a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.nw-breadcrumb a:hover { border-bottom-color: currentColor; }

/* Blog index cards get the same treatment the home grid uses. */
#nwBlogGrid { max-width: 1680px; margin: 0 auto; padding: 0 1.25rem 4rem; }
@media (min-width: 768px) { #nwBlogGrid { padding: 0 2.5rem 6rem; } }

/* ------------------------------------------------------------------
   Sticky footer for the short pages. Without this, /account or /404
   leave the footer floating mid-screen with dead space beneath it.
   Home and shop are always tall enough not to need it.
------------------------------------------------------------------ */
body[data-page="account"],
body[data-page="notfound"],
body[data-page="post"],
body[data-page="product"],
body[data-page="blog"] {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body[data-page="account"] > main,
body[data-page="notfound"] > main,
body[data-page="post"] > main,
body[data-page="product"] > main,
body[data-page="blog"] > main {
  flex: 1 0 auto;
}

/* The old modal close "×" makes no sense on a real page — the
   breadcrumb and the browser's own back button do that job now. */
body[data-page="product"] #productModalBody > button[aria-label="Close"],
body[data-page="product"] #productModalBody > button[aria-label="Close product"],
body[data-page="post"] #blogPostModalBody > button[aria-label="Close"] {
  display: none !important;
}

/* ------------------------------------------------------------------
   Editorial content pages (About, Contact) — the site had no prose
   styles because everything used to be product UI.
------------------------------------------------------------------ */
.nw-prose {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
  color: rgb(var(--c-taupe));
  font-size: 15px;
  line-height: 1.75;
}
@media (min-width: 768px) {
  .nw-prose { padding: 0 2.5rem 6rem; font-size: 16px; }
}
.nw-prose p { margin-bottom: 1.15rem; }
.nw-prose .nw-lede {
  font-size: 1.15em;
  line-height: 1.65;
  color: rgb(var(--c-espresso));
  margin-bottom: 1.75rem;
}
.nw-prose h2 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  color: rgb(var(--c-espresso));
  font-size: 1.5em;
  margin: 2.5rem 0 0.85rem;
}
.nw-prose ul { margin: 0 0 1.5rem; padding-left: 1.1rem; }
.nw-prose li { margin-bottom: 0.6rem; list-style: disc; }
.nw-prose li strong { color: rgb(var(--c-espresso)); font-weight: 600; }
.nw-prose a { color: rgb(var(--c-gold)); }

.nw-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* Contact cards */
.nw-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin: 2rem 0 1rem;
}
.nw-contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.25rem;
  border: 1px solid rgb(var(--c-taupelight) / 0.6);
  border-radius: 1rem;
  background: rgb(var(--c-porcelain));
  transition: border-color .25s ease, transform .25s ease;
}
a.nw-contact-card:hover {
  border-color: rgb(var(--c-gold));
  transform: translateY(-2px);
}
.nw-contact-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--c-taupe));
  margin-top: 0.35rem;
}
.nw-contact-value {
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--c-espresso));
  word-break: break-word;
}

/* Flow pages (cart / checkout / track-order): a real URL wrapped around
   an overlay. The placeholder only shows for the instant before the
   overlay opens, or if JS never runs. */
.nw-flow-page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
  text-align: center;
}

/* These three pages open an overlay immediately, so the sticky-footer
   flex layout applies to them too. */
body[data-page="about"],
body[data-page="contact"],
body[data-page="cart"],
body[data-page="checkout"],
body[data-page="track-order"] {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body[data-page="about"] > main,
body[data-page="contact"] > main,
body[data-page="cart"] > main,
body[data-page="checkout"] > main,
body[data-page="track-order"] > main { flex: 1 0 auto; }

/* On the prose pages the title block should sit in the same 46rem column
   as the body copy, not span the full 1680px content width. */
body[data-page="about"] .nw-page-head,
body[data-page="contact"] .nw-page-head,
body[data-page="cart"] .nw-page-head,
body[data-page="checkout"] .nw-page-head,
body[data-page="track-order"] .nw-page-head {
  max-width: 46rem;
}