/*
Theme Name: Dress by Noa
Description: The Dress by Noa atelier and WooCommerce collection.
Version: 2.7.0
Requires at least: 6.9
Requires PHP: 8.3
Text Domain: dress-by-noa
*/

:root {
  --paper: #f6f1e7;
  --ink: #24261e;
  --wine: #49362e;
  --night: #1d211a;
  --line: #d3cbbd;
  --muted: #605b50;
  --brass: #a68a56;
  --serif: "Baskerville", "Times New Roman", serif;
  --display: "Times New Roman", "Arial Hebrew", serif;
  --sans: "Arial Hebrew", Arial, sans-serif;
  --gutter: max(5vw, calc((100vw - 1320px) / 2));
  --header: 75px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + .55rem); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.65 var(--sans); }
body:has(.noa-look-dialog[open]) { overflow: hidden; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.noa-shell { width: min(90%, 1320px); margin-inline: auto; }
.noa-skip { position: fixed; inset-block-start: -8rem; inset-inline-start: 1rem; z-index: 10; background: var(--paper); padding: .55rem .85rem; }
.noa-skip:focus { inset-block-start: 1rem; }
.noa-header { position: sticky; z-index: 5; top: 0; background: var(--paper); }
.noa-header-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(.6rem, 1.5vw, 1.75rem); min-height: var(--header);
}
.noa-brand { display: block; width: fit-content; line-height: 0; }
.noa-brand img { width: auto; height: 55px; }
.noa-header .noa-brand img { filter: brightness(0) opacity(.89); }
.noa-nav, .noa-actions, .noa-social { display: flex; align-items: center; gap: clamp(.8rem, 2.2vw, 2.4rem); }
.noa-actions { justify-content: flex-end; gap: clamp(.75rem, 1.6vw, 1.8rem); }
.noa-nav a, .noa-actions a, .noa-social a { font-size: .85rem; text-decoration: none; white-space: nowrap; }
.noa-nav a { position: relative; padding-block: .5rem; }
.noa-nav a::after {
  content: ""; position: absolute; inset: auto 0 .24rem; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .28s ease;
}
.noa-nav a:is(:hover, [aria-current])::after { transform: scaleX(1); }
.noa-actions a:hover, .noa-social a:hover { text-decoration: underline; text-underline-offset: .25em; }
.noa-reading-line { height: 2px; background: #d4ccbd; }
.noa-reading-line span {
  display: block; width: 100%; height: 100%; background: var(--brass);
  transform: scaleX(var(--noa-progress, 0)); transform-origin: right;
}
.noa-menu-toggle { display: none; }

.noa-cover {
  min-height: clamp(540px, calc(100svh - var(--header)), 850px);
  position: relative; isolation: isolate; display: grid; overflow: hidden;
  color: var(--paper); background: var(--night);
}
.noa-cover-image {
  position: absolute; inset: 0; margin: 0; z-index: -2;
  transform: translateY(var(--noa-cover-drift, 0px));
}
.noa-cover::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: var(--night); opacity: var(--noa-cover-shade, 0);
}
.noa-cover-image img {
  width: 100%; height: 100%; object-fit: cover; object-position: 51% 37%;
}
.noa-cover-ink {
  min-height: inherit; display: flex; align-items: center;
  padding: 3.3rem var(--gutter);
  background: linear-gradient(90deg, #171b14ed 0%, #171b14b0 29%, #171b142f 52%, transparent 69%),
              linear-gradient(0deg, #13160fd4, transparent 34%);
}
.noa-cover-copy { width: min(40%, 410px); margin-inline-start: auto; }
.noa-eyebrow { font-size: .78rem; margin: 0 0 .65rem; }
.noa-cover h1, .noa-creator h2, .noa-process h2, .noa-study h2, .noa-collection h2, .noa-atelier h2 {
  margin: 0; font: 400 clamp(3rem, 6.5vw, 6.8rem)/.96 var(--display);
  letter-spacing: -.062em;
}
.noa-cover h1 { font-family: var(--serif); font-size: clamp(3.25rem, 6.4vw, 5.4rem); text-align: right; }
.noa-cover-copy > p { margin: 1.15rem 0 1.75rem; color: #f4ead9; font-size: clamp(1rem, 1.38vw, 1.18rem); }
.noa-button {
  display: inline-flex; justify-content: space-between; align-items: center; gap: 1.45rem;
  min-height: 48px; padding: .7rem 1.15rem; border: 1px solid currentColor;
  text-decoration: none; line-height: 1.25; font-size: .88rem; transition: background-color .23s, color .23s;
}
.noa-button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.noa-button-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.noa-button-light:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
.noa-link { text-underline-offset: .34em; }

.noa-creator {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-areas: "heading portrait" "story portrait";
  grid-template-rows: max-content 1fr;
  align-items: start; gap: 1.65rem clamp(2rem, 8vw, 8rem);
  max-width: 1110px; padding-block: clamp(4rem, 9vw, 9rem);
}
.noa-creator-heading { grid-area: heading; }
.noa-creator-heading .noa-eyebrow, .noa-collection .noa-eyebrow { color: var(--muted); }
.noa-creator h2 { font-size: clamp(3rem, 5.5vw, 6rem); }
.noa-latin {
  margin: .4rem 0 0; width: fit-content; color: var(--wine);
  font: 400 clamp(1.65rem, 3.2vw, 3.15rem)/1 var(--serif); letter-spacing: -.055em;
}
.noa-latin i { font-weight: 400; }
.noa-creator-text { grid-area: story; border-top: 1px solid var(--line); padding-top: 1.45rem; }
.noa-story-intro p, .noa-creator-story p { margin: 0 0 1.25em; line-height: 1.85; }
.noa-story-intro p { font-size: 1.15rem; color: var(--ink); }
.noa-creator-story p { color: var(--muted); }
.noa-creator-story p:last-child { color: var(--wine); }
.noa-creator-links { display: grid; justify-items: start; gap: .6rem; }
.noa-story-more { width: 100%; }
.noa-story-more summary {
  display: inline-flex; align-items: center; gap: .85rem; min-height: 44px;
  padding: .35rem 0; cursor: pointer; list-style: none;
  color: var(--wine); font-weight: 600; text-decoration: underline; text-underline-offset: .32em;
}
.noa-story-more summary::-webkit-details-marker { display: none; }
.noa-story-more .noa-story-close, .noa-story-more[open] .noa-story-open { display: none; }
.noa-story-more[open] .noa-story-close { display: inline; }
.noa-story-icon { position: relative; width: .8rem; height: .8rem; }
.noa-story-icon::before, .noa-story-icon::after {
  content: ""; position: absolute; inset: 50% 0 auto; border-top: 1px solid currentColor;
}
.noa-story-icon::after { transform: rotate(90deg); }
.noa-story-more[open] .noa-story-icon::after { display: none; }
.noa-creator-story { padding-top: 1.05rem; }
.noa-creator-media { grid-area: portrait; position: relative; padding: 1.1rem 0 0 1.1rem; }
@media (min-width: 781px) {
  .noa-creator-media { position: sticky; top: calc(var(--header) + 2rem); }
}
.noa-creator-media::before { content: ""; position: absolute; inset: 0 1.1rem 1.1rem 0; border: 1px solid #b5a48b; pointer-events: none; }
.noa-creator-media figure { position: relative; margin: 0; }
.noa-creator-portrait img { width: 100%; aspect-ratio: 5/6; max-height: 70svh; object-fit: cover; object-position: center 35%; }
.noa-creator-media.has-work-photo { padding-bottom: 11%; }
.noa-creator-media .noa-creator-work {
  position: absolute; bottom: 0; inset-inline-end: 0; width: 48%;
  background: var(--paper); padding: .45rem;
}
.noa-creator-work img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.noa-creator-work figcaption { font-size: .8rem; margin-top: .35rem; }

.noa-seam { position: relative; height: 0; z-index: 1; pointer-events: none; }
.noa-seam-mark {
  position: absolute; inset-block-start: 0; left: 50%; transform: translate(-50%, -50%);
  display: block; width: min(92%, 620px); height: auto;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.noa-seam-chalk { width: min(96%, 760px); inset-block-start: 8px; }
.noa-seam-chalk-line { fill: #fff; }
.noa-seam-chalk-dust { stroke: #fff; stroke-width: 1.25; opacity: .76; }
.noa-seam-thread-shadow { stroke: #414141; stroke-width: 3.5; }
.noa-seam-thread-line { stroke: #fff; stroke-width: 1.9; }
.noa-seam-needle { fill: #f7f7f7; stroke: #3a3a3a; stroke-width: 1.5; }
.noa-seam-eye { stroke-width: 1.9; }
.noa-pattern-edge { stroke: #3b3b3b; stroke-width: 3.8; fill: #e2e2e2; fill-opacity: .12; }
.noa-pattern-ink { stroke: #f5f5f5; stroke-width: 2; }
.noa-pattern-mark, .noa-pattern-guide { stroke: #ededed; stroke-width: 1.35; }
.noa-pattern-guide { stroke-dasharray: 3 4; }
.noa-seam-tape-body { fill: #eaeaea; stroke: #454545; stroke-width: 1.6; }
.noa-seam-tape-ticks { stroke: #555; stroke-width: 1.45; }
.noa-seam-cut-cloth { fill: #d9d9d9; stroke: #6b6b6b; stroke-width: 1.2; }
.noa-seam-cut-offcut { fill: #acacac; }
.noa-seam-cut-guide { stroke: #686868; stroke-width: 1.2; stroke-dasharray: 4 4; }
.noa-seam-shears { fill: #f3f3f3; stroke: #313131; stroke-width: 2.15; }
.noa-seam-grip { fill: none; stroke: #303030; stroke-width: 4.1; }
.noa-seam-pivot { fill: #595959; stroke: #fff; stroke-width: 1.25; }
.noa-seam-stitch-line { stroke: #f6f6f6; stroke-width: 2.4; }

@media (prefers-reduced-motion: no-preference) {
  .noa-seam-reveal {
    transform-box: view-box; transform-origin: right center;
    transform: scaleX(var(--seam-progress, 1));
  }
  .noa-seam-thread .noa-seam-reveal { transform-origin: 454px 32px; }
  .noa-seam-needle { transform: translateX(calc((1 - var(--seam-progress, 1)) * 399px)); }
}

.noa-process {
  background: #e9e0d3; border-top: 1px solid var(--line);
  padding-block: clamp(3.7rem, 8vw, 8rem);
}
.noa-process-layout {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start; gap: clamp(2rem, 7.4vw, 7.2rem); max-width: 1110px;
}
.noa-process h2 { font-size: clamp(3rem, 5.8vw, 5.7rem); }
.noa-process-quote { margin: clamp(1.3rem, 3vw, 2.8rem) 0 0; }
.noa-process-quote p {
  margin: 0; color: var(--wine); font: 400 clamp(1.5rem, 3vw, 2.55rem)/1.16 var(--display);
}
.noa-process-steps { margin: 0; padding-inline-start: 1.65rem; }
.noa-process-steps li {
  padding-block: 1.1rem 1.3rem; padding-inline-start: .55rem;
  border-top: 1px solid #bdb2a0;
}
.noa-process-steps li:last-child { border-bottom: 1px solid #bdb2a0; }
.noa-process-steps li::marker { font: 400 1.15rem var(--serif); color: #665842; }
.noa-process-steps h3 {
  margin: 0; font: 400 clamp(1.5rem, 2.5vw, 2.3rem)/1.1 var(--display); letter-spacing: -.025em;
}
.noa-process-steps p { margin: .45rem 0 0; max-width: 48ch; color: var(--muted); }
@media (max-width: 780px) {
  .noa-process-layout { grid-template-columns: 1fr; }
  .noa-process-steps { padding-inline-start: 1.25rem; }
}

.noa-films {
  max-width: 1110px; margin-block-start: clamp(3.5rem, 8vw, 7rem);
}
.noa-films-heading { margin-block: clamp(1.25rem, 3vw, 2.35rem); }
.noa-films-heading .noa-eyebrow {
  margin: 0 0 .45rem; width: fit-content; color: var(--wine); font: italic 1.12rem var(--serif); letter-spacing: .045em;
}
.noa-films-heading h3 { margin: 0; font: 400 clamp(2rem, 4.1vw, 4rem)/1.04 var(--display); }
.noa-film-collage {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
  gap: clamp(.35rem, 1.75vw, 1.5rem); max-width: 900px; margin-inline: auto;
}
.noa-film-collage video {
  display: block; width: 100%; height: auto; aspect-ratio: 9/16; object-fit: contain; background: var(--night);
}

.noa-study {
  color: var(--paper); background: #2d3026; padding-block: clamp(3.5rem, 7vw, 7rem);
}
.noa-study > .noa-shell { max-width: 1190px; }
.noa-study-heading { margin-bottom: clamp(1.5rem, 4vw, 3.75rem); }
.noa-study h2 { font-family: var(--serif); font-size: clamp(3.15rem, 6vw, 6rem); text-align: right; }
.noa-study-layout {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start; gap: clamp(1.2rem, 4vw, 3.75rem);
}
.noa-study-image { margin: 0; min-width: 0; }
.noa-study-image img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: contain; }
@media (max-width: 670px) {
  .noa-study-layout { grid-template-columns: 1fr; gap: 2.5rem; max-width: 410px; margin-inline: auto; }
  .noa-study-image img { aspect-ratio: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .noa-editorial.has-entrances [data-enter] {
    opacity: .62; transform: translateY(18px);
    transition: opacity .65s ease, transform .7s cubic-bezier(.2,.65,.25,1);
  }
  .noa-editorial.has-entrances [data-enter]:is(.has-entered, :focus-within) { opacity: 1; transform: none; }
}

.noa-collection { background: #e9e4d7; padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.noa-collection-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem;
}
.noa-collection h2 { font-size: clamp(3rem, 6vw, 6rem); }
.noa-rail-controls, .noa-dialog-controls { display: flex; gap: .4rem; }
.noa-icon-button {
  width: 45px; height: 45px; padding: 0; display: grid; place-items: center;
  font-size: 1.22rem; color: inherit; background: transparent; border: 1px solid #9b8e77;
  border-radius: 50%; cursor: pointer; transition: background-color .2s, color .2s;
}
.noa-icon-button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.noa-icon-button:disabled { opacity: .38; cursor: default; }
.noa-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 28.5%;
  gap: clamp(1rem, 2.8vw, 2.6rem); overflow-x: auto; overscroll-behavior-inline: contain;
  padding: .25rem var(--gutter) 1rem; scroll-padding-inline: var(--gutter); scroll-snap-type: x mandatory;
  scrollbar-color: #9f8f74 transparent; scrollbar-width: thin;
}
.noa-rail:focus-visible { outline-offset: -2px; }
.noa-card { min-width: 0; scroll-snap-align: start; }
.noa-card a { display: block; text-decoration: none; }
.noa-card img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover; background: var(--blush);
  transition: filter .3s;
}
.noa-card a:hover img { filter: brightness(1.055); }
.noa-card h3 { margin: .75rem 0 .1rem; font-size: 1rem; font-weight: 500; }
.noa-card a:hover h3 { text-decoration: underline; text-underline-offset: .24em; }
.noa-card .price { color: var(--muted); }
.noa-look-dialog { width: min(90vw, 830px); max-height: 90svh; padding: 0; background: var(--paper); color: var(--ink); border: 0; }
.noa-look-dialog::backdrop { background: #171a14ca; }
.noa-dialog-layout { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr); }
.noa-dialog-image { background: #24251e; }
.noa-dialog-image img { height: min(74svh, 660px); width: 100%; object-fit: contain; }
.noa-dialog-copy { position: relative; padding: 4.5rem clamp(1.2rem, 4vw, 3.6rem) 2rem; align-self: stretch; }
.noa-dialog-copy h2 { font: 400 clamp(1.9rem, 3.2vw, 3.3rem)/1.05 var(--display); margin: 1rem 0 1.15rem; }
.noa-dialog-close { position: absolute; inset-block-start: .9rem; inset-inline-end: .9rem; }
.noa-dialog-controls { margin-top: 1.55rem; }

.noa-atelier {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  min-height: clamp(465px, 46vw, 740px); color: var(--paper); background: var(--night);
}
.noa-atelier-photo { position: relative; min-height: 290px; }
.noa-atelier-photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.noa-atelier-copy { align-self: center; padding: clamp(2.1rem, 6vw, 7rem) clamp(1.65rem, 5vw, 6rem); }
.noa-atelier h2 { font-size: clamp(2.8rem, 5vw, 5.2rem); }
.noa-atelier-copy > p:not(.noa-eyebrow) { margin: 1.2rem 0 1.4rem; max-width: 32ch; color: #e8e0d1; }

.noa-page h1, .noa-page .product_title { font: 400 clamp(2.3rem, 5vw, 4.5rem)/1.07 var(--display); }
.noa-page { min-height: 48vh; padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.noa-page > h1, .noa-page > article > h1 { margin-bottom: 2rem; }
.noa-page .woocommerce-breadcrumb { color: var(--muted); }
.woocommerce .noa-page ul.products li.product .woocommerce-loop-product__title { color: var(--ink); font-size: 1.15rem; font-weight: 500; }
.woocommerce .noa-page ul.products li.product .price { color: var(--muted); }
.woocommerce .noa-page .button, .woocommerce .noa-page .button.alt,
.noa-page .woocommerce .button, .noa-page .woocommerce .button.alt,
.noa-page .wc-block-components-button:not(.is-link) {
  background: var(--wine); color: var(--paper); border-radius: 0; font-weight: 500; padding: .85em 1.4em;
}
.woocommerce .noa-page .button:hover, .noa-page .woocommerce .button:hover,
.noa-page .wc-block-components-button:not(.is-link):hover { background: var(--ink); color: var(--paper); }
.noa-page input:not([type=checkbox]):not([type=radio]), .noa-page select, .noa-page textarea {
  padding: .6rem; border: 1px solid #8b7b6f; background: #fffdf8; color: var(--ink);
}
.noa-page .woocommerce input.qty, .woocommerce .noa-page input.qty { width: 4.5rem; }
.noa-footer { background: var(--ink); color: var(--paper); padding-block: 3rem; }
.noa-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.noa-footer .noa-brand img { height: clamp(65px, 8vw, 105px); }
.noa-footer small { color: #ddcabc; }
.noa-footer .noa-social { flex-wrap: wrap; }
.noa-footer .noa-footer-nav { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .85rem; }
@media (max-width: 780px) {
  :root { --header: 62px; }
  .noa-header-row { grid-template-columns: auto 1fr; gap: 0 .85rem; position: relative; }
  .noa-header-row .noa-brand img { height: 46px; }
  .noa-actions { justify-self: end; gap: .65rem; }
  .noa-actions a { font-size: .78rem; }
  .noa-nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
  .noa-header.is-enhanced .noa-header-row { grid-template-columns: 1fr auto auto; }
  .noa-header.is-enhanced .noa-menu-toggle {
    display: flex; align-items: center; gap: .4rem; min-height: 44px;
    padding: 0 .3rem; background: transparent; border: 0; color: var(--ink); font-size: .8rem; cursor: pointer;
  }
  .noa-menu-toggle span { width: .8rem; height: .35rem; border-block: 1px solid currentColor; }
  .noa-header.is-enhanced .noa-nav {
    display: none; position: absolute; top: 100%; inset-inline: -5vw; background: var(--paper);
    padding: .7rem 5vw 1rem; border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px #201b171a;
  }
  .noa-header.is-enhanced.menu-open .noa-nav { display: grid; gap: .15rem; }
  .noa-nav a { width: fit-content; min-height: 41px; }
  .noa-cover { min-height: clamp(570px, calc(100svh - var(--header)), 770px); }
  .noa-cover-ink {
    align-items: flex-end; padding: 1.5rem var(--gutter) 3.2rem;
    background: linear-gradient(0deg, #141910ef 0%, #141910a8 24%, #14191022 55%, transparent 72%);
  }
  .noa-cover-copy { width: 100%; margin: 0; }
  .noa-cover h1 { font-size: clamp(2.6rem, 11.6vw, 5.6rem); }
  .noa-cover-copy > p { margin: .8rem 0 1rem; }
  .noa-cover-image img { object-position: 51% 56%; }
  .noa-creator { grid-template-columns: 1fr; grid-template-areas: "heading" "portrait" "story"; gap: 1.5rem; max-width: 490px; }
  .noa-creator-portrait img { aspect-ratio: 4/4.25; object-position: center 34%; }
  .noa-rail { grid-auto-columns: 69%; }
  .noa-atelier { grid-template-columns: 1fr; }
  .noa-atelier-photo { min-height: clamp(300px, 82vw, 500px); }
  .noa-dialog-layout { display: flex; flex-direction: column; }
  .noa-dialog-image img { height: min(52svh, 450px); }
  .noa-dialog-copy { position: static; padding: 1rem 1.15rem 1.15rem; }
  .noa-dialog-copy h2 { margin: .25rem 0 .65rem; }
  .noa-dialog-close { color: var(--paper); background: var(--ink); border-color: var(--paper); }
  .noa-dialog-controls { margin-top: 1rem; }
}
@media (max-width: 350px) {
  .noa-header-row { column-gap: .4rem; }
  
  .noa-actions a { font-size: .71rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .noa-nav a::after,
  .noa-card img, .noa-button, .noa-icon-button { transition: none; }
}
.noa-page .woocommerce-placeholder, .noa-page .woocommerce-product-gallery__image--placeholder { display: none; }