/*
Theme Name: M and N Art
Theme URI: https://mandnart.com/
Author: MAK Digital Design
Author URI: https://makdigitaldesign.com/
Description: Gallery and teaching-studio theme for M and N Art. Artwork runs on WooCommerce products and artists on WooCommerce brands, with post types for classes, exhibitions, testimonials, and FAQs. Generates LocalBusiness, Course, ExhibitionEvent, and FAQPage schema from that content, and enriches Woo's own Product markup with VisualArtwork fields.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mandnart
Tags: e-commerce, custom-menu, custom-logo, featured-images, block-styles, wide-blocks, translation-ready
WC requires at least: 9.6
WC tested up to: 10.0
*/

/* ==========================================================================
   M and N Art  |  mandnart.com
   Palette is named after the pigments it came from. Type is a didone
   (wall-label energy) against a humanist sans, with mono for anything
   that behaves like a label on a paint tube.
   ========================================================================== */

:root{
  /* Pulled from the mandnart.com logo */
  --navy:       #1B3E68;   /* the blue half of the M */
  --navy-deep:  #14304F;
  --navy-dark:  #0E2133;   /* darkest band */
  --navy-mid:   #5B82AE;   /* the pale blue stroke */
  --amber:      #D98F2B;   /* the orange half of the M */
  --amber-deep: #A8641A;
  --sand:       #DED4C4;   /* the palette-knife cream strokes */
  --sand-deep:  #8A6A45;
  --ink:        #22262B;   /* the "art" lettering */
  --ink-2:      #4A5560;
  --ink-3:      #7E8894;
  --cream:      #F4EDE1;   /* light band */
  --rail:       #E7DECD;   /* sand band */
  --paper:      #FCFBF9;   /* the logo's own background */
  --line:       #DCD2C0;
  --line-ink:   rgba(252,251,249,.20);

  /* Aliases kept so component rules stay readable */
  --wash:       var(--cream);
  --wash-2:     var(--rail);
  --crimson:    var(--amber-deep);
  --crimson-2:  var(--amber);
  --ochre:      var(--amber);
  --viridian:   var(--navy);
  --ultramarine:var(--navy-mid);
  --umber:      var(--sand-deep);

  /* Type */
  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --body:    "Karla", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Scale */
  --step--1: clamp(.78rem, .76rem + .12vw, .86rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.1rem + .4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + .95vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5.6rem);

  --shell: 1600px;
  --gap: clamp(1.25rem, .8rem + 1.8vw, 2.5rem);
  --band-pad: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --radius: 2px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,dl,dd,figure,blockquote{ margin:0; }
button,input{ font:inherit; color:inherit; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

:focus-visible{ outline:2px solid var(--crimson); outline-offset:3px; }
.band--ink :focus-visible{ outline-color:var(--ochre); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:.75rem 1.25rem;
  font-family:var(--mono); font-size:var(--step--1);
}
.skip:focus{ left:0; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(1.15rem,.6rem + 2.2vw,2.75rem); }

/* ---------- Type primitives ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.06; letter-spacing:-.012em; }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-1); line-height:1.2; }

.chip{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:1.15rem;
}
.chip__swatch{ width:.85rem; height:.85rem; background:var(--chip,var(--crimson)); border-radius:1px; flex:none; }
.chip--light{ color:rgba(251,251,248,.72); }

.lede{ font-size:var(--step-1); line-height:1.5; color:var(--ink-2); max-width:52ch; }

.textlink{
  font-family:var(--mono); font-size:var(--step--1); letter-spacing:.04em;
  text-decoration:underline; text-underline-offset:.28em;
  text-decoration-color:var(--line); transition:text-decoration-color .2s;
}
.textlink:hover{ text-decoration-color:var(--crimson); }
.textlink--light{ color:rgba(251,251,248,.8); text-decoration-color:var(--line-ink); }
.textlink--light:hover{ text-decoration-color:var(--ochre); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.5rem; border-radius:var(--radius); border:1px solid var(--navy);
  font-family:var(--mono); font-size:var(--step--1); letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.btn--solid{ background:var(--navy); color:var(--paper); border-color:var(--navy); }
.btn--solid:hover{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--navy); }
.btn--ghost:hover{ background:var(--navy); color:var(--paper); }
.btn--invert{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--invert:hover{ background:var(--ochre); border-color:var(--ochre); color:var(--ink); }
.btn--sm{ padding:.6rem 1rem; }

/* ---------- Masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:60;
  background:var(--paper); color:var(--ink);
  border-bottom:1px solid var(--line);
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.masthead.is-stuck{ background:var(--paper); box-shadow:0 6px 20px rgba(14,33,51,.18); }
.masthead__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:84px; }

.wordmark{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; }
.wordmark__mark{ height:52px; width:auto; flex:none; }
.wordmark__type{ display:block; }
.wordmark__type img{ height:22px; width:auto; display:block; }
.wordmark__sub{
  display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3); margin-top:.4rem;
}

.wordmark--footer .wordmark__mark{ height:66px; }
.wordmark--footer .wordmark__type img{ height:28px; }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav__list{ display:flex; gap:1.6rem; }
.nav__list a{
  text-decoration:none; font-size:var(--step--1); letter-spacing:.06em; text-transform:uppercase;
  font-family:var(--mono); padding-block:.4rem; border-bottom:1px solid transparent;
}
.nav__list a:hover{ border-bottom-color:var(--amber); }

.burger{ display:none; background:none; border:1px solid var(--line); border-radius:var(--radius); padding:.6rem .55rem; cursor:pointer; }
.burger span{ display:block; width:20px; height:1.5px; background:var(--ink); }
.burger span + span{ margin-top:5px; }

/* ---------- Hero ---------- */
.hero{
  padding-top:clamp(2.5rem, 1.5rem + 4vw, 5rem);
  background:var(--navy-dark); color:var(--paper);
}
.hero h1{ color:var(--paper); }
.hero .h1__sub{ color:rgba(252,251,249,.72); }
.hero .lede{ color:rgba(252,251,249,.80); }
.hero .chip{ color:rgba(252,251,249,.72); }
.hero :focus-visible{ outline-color:var(--amber); }
.hero .btn--solid{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.hero .btn--solid:hover{ background:var(--paper); border-color:var(--paper); color:var(--ink); }
.hero .btn--ghost{ color:var(--paper); border-color:rgba(252,251,249,.42); }
.hero .btn--ghost:hover{ background:var(--paper); border-color:var(--paper); color:var(--ink); }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--gap); align-items:center;
  padding-bottom:clamp(2.5rem,1.5rem + 3.5vw,4.5rem);
}
.hero__copy{ max-width:40rem; }

h1{ margin-bottom:1.5rem; }
.h1__lead{ display:block; font-size:var(--step-4); line-height:.98; }
.h1__sub{
  display:block; margin-top:1.1rem; max-width:30ch;
  font-family:var(--body); font-size:var(--step-1); font-weight:400;
  line-height:1.35; letter-spacing:0; color:var(--ink-2);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.hero__note{
  margin-top:1.6rem; font-family:var(--mono); font-size:var(--step--1);
  color:rgba(252,251,249,.58); line-height:1.7;
  border-top:1px solid rgba(252,251,249,.18); padding-top:1rem;
}

/* Salon hang */
.salon{
  position:relative; display:flex; flex-direction:column;
  gap:clamp(1rem, .6rem + 1vw, 1.7rem);
  min-width:0;
}
.salon__wall{
  display:flex; flex-direction:column;
  gap:clamp(1rem, .6rem + 1vw, 1.7rem);
}

/* Two large canvases on top */
.salon__feature{
  display:flex; flex-wrap:nowrap;
  gap:clamp(1rem, .6rem + 1vw, 1.7rem);
  align-items:flex-start; justify-content:center;
}

/* Four smaller ones beneath, hung on a level line */
.salon__row{
  display:flex; flex-wrap:nowrap;
  gap:clamp(.7rem, .4rem + .8vw, 1.3rem);
  align-items:flex-start; justify-content:center;
}

.salon__feature .frame,
.salon__row .frame{ flex:0 1 auto; min-width:0; }

/* Frames are capped by HEIGHT, not width, which is how work actually gets
   hung: the eye line stays roughly level and each canvas keeps its own
   proportions. A portrait ends up narrow, a landscape ends up wide, and the
   frame shrink-wraps whatever it holds. */
.frame{
  width:fit-content; max-width:100%;
  background:var(--paper); padding:.7rem .7rem 0;
  border:1px solid rgba(252,251,249,.10);
  box-shadow:0 18px 42px rgba(0,0,0,.38);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s;
}
.frame:hover{ transform:translateY(-4px); box-shadow:0 26px 56px rgba(0,0,0,.48); }
.frame a{ display:block; }
.frame .canvas{ display:block; }
.frame figcaption{
  font-family:var(--mono); font-size:.64rem; line-height:1.6; letter-spacing:.05em;
  color:var(--ink-3); padding:.7rem .1rem .75rem; text-transform:uppercase;
  /* width:0 keeps the caption out of the frame's intrinsic width so the mat
     hugs the canvas instead of stretching to fit the longest word. */
  width:0; min-width:100%;
}
.frame figcaption span{ display:block; color:var(--ink); letter-spacing:.07em; }
.salon__feature .frame{ padding:.9rem .9rem 0; }
.salon__row .frame figcaption{ font-size:.55rem; line-height:1.5; padding:.55rem .1rem .6rem; }
.frame img.canvas{
  width:auto; height:auto;
  max-width:100%; max-height:var(--cap, 300px);
}
.frame .canvas--empty{ height:var(--cap, 300px); width:calc(var(--cap, 300px) * .8); aspect-ratio:auto; }

/* The two large canvases hang at the same height, with the right-hand one
   dropped down the wall so the pair reads as a hang rather than a pair. */
.salon__feature .frame{ --cap:clamp(215px, 29vh, 370px); }
.salon__feature .frame:nth-child(2){ margin-top:clamp(1.75rem, 1rem + 2.75vw, 4rem); }

/* The four beneath hang on one level line, all the same height. Widths
   still vary, because the artwork is uncropped. Height is set rather than
   capped so a fractional viewport unit cannot round one frame a pixel off
   the others. object-fit guards the aspect ratio if a very wide canvas ever
   hits the width limit first. */
.salon__row .frame{ --cap:clamp(115px, 15.5vh, 190px); }
.salon__row .frame img.canvas{ height:var(--cap); width:auto; max-height:none; object-fit:contain; }
.salon__row .frame .canvas--empty{ height:var(--cap); }

.salon__plaque{
  margin-top:.4rem; border-left-color:var(--amber);
  font-family:var(--mono); font-size:var(--step--1); line-height:1.7; color:rgba(252,251,249,.72);
  border-left:3px solid var(--amber); padding-left:1rem; align-self:start;
}
.salon__plaque span{ display:block; font-family:var(--display); font-size:var(--step-1); color:var(--paper); letter-spacing:0; }
.salon__plaque a{ display:inline-block; margin-top:.4rem; text-underline-offset:.28em; text-decoration-color:rgba(252,251,249,.35); }
.salon__plaque a:hover{ text-decoration-color:var(--amber); }

/* ---------- The pigment rail (signature) ---------- */
.rail{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--rail); color:var(--ink); }
@media (max-width:1080px){ .rail__list{ grid-template-columns:repeat(3,1fr); } }
.rail :focus-visible{ outline-color:var(--amber-deep); }
.rail__list{ display:grid; grid-template-columns:repeat(var(--rail-cols,6),1fr); }
.rail__list li + li{ border-left:1px solid var(--line); }
.rail__list a{
  display:block; padding:1.1rem 1.1rem 1.2rem; text-decoration:none;
  transition:background .2s;
}
.rail__list a:hover{ background:var(--paper); }
.rail__chip{ display:block; height:6px; width:100%; background:var(--chip); margin-bottom:.85rem; }
.rail__name{ display:block; font-family:var(--display); font-size:var(--step-1); line-height:1.1; }
.rail__meta{
  display:block; margin-top:.3rem; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- Bands ---------- */
.band{ padding-block:var(--band-pad); }
.band--paper{ background:var(--paper); }
.band--wash{ background:var(--cream); }
.band--ink{ background:var(--navy-dark); color:var(--paper); }
.band--navy{ background:var(--navy-deep); color:var(--paper); }
.band--ink h2,.band--ink h3,.band--navy h2,.band--navy h3{ color:var(--paper); }
.band--ink .band__intro,.band--navy .band__intro{ color:rgba(252,251,249,.78); }
.band--navy :focus-visible{ outline-color:var(--amber); }
/* hairline only where two light bands meet */
.band--paper + .band--wash,
.band--wash + .band--paper{ border-top:1px solid var(--line); }

.band__head{ max-width:68ch; margin-bottom:clamp(2rem,1.2rem + 2.4vw,3.25rem); }
.band__head h2{ margin-bottom:1.1rem; }
.band__intro{ color:var(--ink-2); font-size:var(--step-1); line-height:1.55; }
.band__head--split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap);
  max-width:none; align-items:end;
  margin-bottom:clamp(2.5rem,1.5rem + 3vw,4rem);
}
.band__head--split .band__intro{ font-size:var(--step-0); }
.band__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1.5rem; margin-top:clamp(2rem,1.2rem + 2vw,3rem);
}
.band__foot--left{ justify-content:flex-start; }

/* ---------- Works grid ---------- */
.works{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.works a{ text-decoration:none; display:block; }
.work__img{
  display:block; aspect-ratio:4/5; margin-bottom:1rem;
  border:1px solid var(--line); transition:transform .35s ease, box-shadow .35s ease;
}
.work__img--1{ background:linear-gradient(170deg,#E7E0D2 0 42%, #1B3E68 42% 66%, #0E2133 66%); }
.work__img--2{ background:linear-gradient(200deg,#F1EADC 0 46%, #D98F2B 46% 78%, #A8641A 78%); }
.work__img--3{ background:linear-gradient(155deg,#CBD7E4 0 38%, #5B82AE 38% 70%, #14304F 70%); }
.work__img--4{ background:linear-gradient(190deg,#FAF6EC 0 55%, #DED4C4 55% 74%, #22262B 74%); }
.works a:hover .work__img{ transform:translateY(-5px); box-shadow:0 16px 30px rgba(35,43,51,.14); }
.work__title{ display:block; font-family:var(--display); font-size:var(--step-1); line-height:1.2; }
.work__by{ display:block; margin-top:.25rem; color:var(--crimson); font-size:var(--step--1); }
.work__spec,.work__price{
  display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-top:.45rem;
}
.work__price{ color:var(--ink); margin-top:.2rem; }

/* ---------- Class palette (paint tubes) ---------- */
.palette{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.tube{ background:var(--paper); border:1px solid rgba(251,251,248,.14); }
.tube a{
  display:flex; flex-direction:column; height:100%; padding:0 1.5rem 1.5rem;
  text-decoration:none; color:var(--ink); transition:transform .3s ease;
}
.tube:hover a{ transform:translateY(-4px); }
.tube__cap{ display:block; height:12px; margin-inline:-1.5rem; background:var(--tube); }
.tube__level{
  display:inline-block; margin-top:1.35rem; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tube);
}
.band--ink .tube__name{ color:var(--ink); }
.tube__name{ margin-top:.55rem; font-size:var(--step-2); line-height:1.05; color:var(--ink); }
.tube__desc{ margin-top:.85rem; margin-bottom:1.35rem; color:var(--ink-2); font-size:.95rem; }
.tube__facts{ margin-top:auto; padding-top:1.35rem; border-top:1px solid var(--line); }
.tube__facts > div{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--line); }
.tube__facts dt{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.tube__facts dd{ margin:0; font-size:.88rem; text-align:right; }
.tube__seats{
  display:inline-block; margin-top:1.15rem; align-self:flex-start;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid currentColor; padding:.35rem .7rem; color:var(--tube);
}

/* ---------- Artists ---------- */
.artists{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.artists a{ text-decoration:none; display:block; }
.artist__portrait{
  display:block; aspect-ratio:4/5; margin-bottom:.95rem;
  border:1px solid var(--line); transition:filter .3s, transform .3s;
}
.artist__portrait--1{ background:linear-gradient(168deg,#E3EAF2 0 52%,#1B3E68 52%); }
.artist__portrait--2{ background:linear-gradient(168deg,#F3EBDC 0 52%,#D98F2B 52%); }
.artist__portrait--3{ background:linear-gradient(168deg,#E4E9EF 0 52%,#5B82AE 52%); }
.artist__portrait--4{ background:linear-gradient(168deg,#EFE6D5 0 52%,#8A6A45 52%); }
.artists a:hover .artist__portrait{ transform:translateY(-4px); filter:saturate(1.2); }
.artist__name{ display:block; font-family:var(--display); font-size:var(--step-1); }
.artist__role{ display:block; color:var(--ink-2); font-size:.92rem; margin-top:.15rem; }
.artist__count{
  display:block; margin-top:.4rem; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- Studio ---------- */
.studio{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center; }
.studio__copy p + p{ margin-top:1.1rem; }
.studio__copy h2{ margin-bottom:1.35rem; }
.ticks{ margin-top:1.75rem; display:grid; gap:.7rem; }
.ticks li{ position:relative; padding-left:1.75rem; font-size:.95rem; color:var(--ink-2); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em; width:.7rem; height:.7rem;
  background:var(--amber);
}
.shot{
  position:relative; aspect-ratio:5/4; background:linear-gradient(180deg,#F3ECDF,#DED4C4);
  border:1px solid var(--line); overflow:hidden;
}
.shot__light{ position:absolute; inset:0 0 auto; height:46%; background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0)); }
.shot__easel{ position:absolute; bottom:8%; width:16%; background:var(--paper); border:1px solid var(--ink-3); }
.shot__easel::after{
  content:""; position:absolute; left:50%; top:100%; width:1px; height:34px;
  background:var(--ink-3); transform:translateX(-.5px);
}
.shot__easel--1{ left:12%; height:34%; }
.shot__easel--2{ left:41%; height:41%; background:#f0ece0; }
.shot__easel--3{ left:70%; height:30%; }
.studio__shot figcaption{
  margin-top:.85rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ---------- Journal cards ---------- */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.post article{
  height:100%; background:var(--paper); border:1px solid var(--line); color:var(--ink);
  padding:clamp(1.25rem,1rem + 1vw,2rem); display:flex; flex-direction:column;
}
.post__cat{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--umber); }
.post__title{ margin-top:.8rem; font-size:var(--step-2); line-height:1.1; }
.band--navy .post__title,.band--ink .post__title{ color:var(--ink); }
.post__title a{ text-decoration:none; background-image:linear-gradient(var(--amber),var(--amber)); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s; }
.post__title a:hover{ background-size:100% 1px; }
.post__excerpt{ margin-top:.85rem; color:var(--ink-2); font-size:.95rem; }
.post__meta{ margin-top:auto; padding-top:1.25rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- Quotes ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.quote{ border-top:3px solid var(--amber); padding-top:1.5rem; }
.quote blockquote p{ font-family:var(--display); font-size:var(--step-1); line-height:1.4; }
.quote__by{ margin-top:1rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- FAQ ---------- */
.faq{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(2rem,1rem + 3vw,4rem); align-items:start; }
.faq__head h2{ margin-top:0; }
.faq__list{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.15rem 2.5rem 1.15rem 0; position:relative;
  font-family:var(--display); font-size:var(--step-1); line-height:1.25;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:.25rem; top:1.05rem;
  font-family:var(--mono); font-size:1.2rem; color:var(--amber-deep); transition:transform .25s;
}
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ padding:0 2.5rem 1.35rem 0; color:var(--ink-2); max-width:62ch; }

/* ---------- Visit ---------- */
.visit{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,1rem + 4vw,4.5rem); }
.visit h2{ margin-bottom:1.5rem; }
.visit__subhead{ font-size:var(--step-2); }
.visit address{ font-style:normal; display:grid; gap:.4rem; font-size:var(--step-1); }
.visit address a{ text-decoration:none; border-bottom:1px solid var(--line-ink); width:fit-content; padding-bottom:.15rem; }
.visit address a:hover{ border-bottom-color:var(--ochre); }
.hours{ margin-top:1.75rem; border-top:1px solid var(--line-ink); max-width:30rem; }
.hours > div{ display:flex; justify-content:space-between; gap:1.5rem; padding:.6rem 0; border-bottom:1px solid var(--line-ink); }
.hours dt{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,251,248,.6); }
.hours dd{ margin:0; font-size:.9rem; text-align:right; }
.visit__note{ margin-top:1.25rem; color:rgba(251,251,248,.65); font-size:.9rem; max-width:34rem; }
.visit__col--form p{ margin-top:1rem; color:rgba(251,251,248,.74); max-width:42ch; }
.signup{ margin-top:1.75rem; }
.signup label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,251,248,.6); }
.signup__row{ display:flex; gap:.6rem; margin-top:.6rem; flex-wrap:wrap; }
.signup input{
  flex:1 1 15rem; background:transparent; border:1px solid var(--line-ink);
  border-radius:var(--radius); padding:.85rem 1rem; color:var(--paper);
}
.signup input::placeholder{ color:rgba(251,251,248,.4); }
.signup input:focus{ border-color:var(--ochre); outline:none; }
.signup__fine{ margin-top:.85rem; font-size:.78rem; color:rgba(251,251,248,.5); }

/* ---------- Footer ---------- */
.footer{ background:var(--rail); border-top:1px solid var(--line); padding-top:clamp(2.5rem,1.5rem + 3vw,4rem); }
.footer__grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:var(--gap); }
.footer__brand p{ margin-top:1.25rem; color:var(--ink-2); font-size:.92rem; max-width:38ch; }
.wordmark--footer{ margin-bottom:.25rem; }
.social{ display:flex; gap:1.1rem; margin-top:1.25rem; }
.social a{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--line); }
.social a:hover{ border-bottom-color:var(--crimson); }
.footer__nav h2{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.1rem; }
.footer__nav li{ margin-bottom:.55rem; }
.footer__nav a{ text-decoration:none; font-size:.92rem; border-bottom:1px solid transparent; }
.footer__nav a:hover{ border-bottom-color:var(--crimson); }
.footer__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  margin-top:clamp(2.5rem,1.5rem + 3vw,4rem); padding-block:1.5rem;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--ink-3);
}
.footer__base ul{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.footer__base a{ text-decoration:none; border-bottom:1px solid var(--line); }

/* ==========================================================================
   Blog index + article
   ========================================================================== */
.crumbs{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding-block:1.5rem 0; }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:.5rem; }
.crumbs li::after{ content:"/"; margin-left:.5rem; color:var(--line); }
.crumbs li:last-child::after{ content:""; }
.crumbs a{ text-decoration:none; border-bottom:1px solid var(--line); }

.page-head{ padding-block:clamp(2rem,1.2rem + 2.4vw,3.5rem) clamp(2rem,1.2rem + 2.4vw,3rem); border-bottom:1px solid var(--line); }
.page-head h1{ font-size:var(--step-3); margin-bottom:1rem; }
.page-head p{ color:var(--ink-2); font-size:var(--step-1); max-width:60ch; }
.page-head p.chip{ font-size:.72rem; color:var(--ink-2); max-width:none; }

.topics{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem; }
.topics a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--line); padding:.45rem .8rem; border-radius:var(--radius);
}
.topics a:hover,.topics a[aria-current="page"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.feature{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap); align-items:center; }
.feature__art{ aspect-ratio:16/10; border:1px solid var(--line); background:linear-gradient(150deg,#F1EADC 0 40%,#D98F2B 40% 62%,#1B3E68 62%); }
.feature h2{ font-size:var(--step-3); margin:.8rem 0 1rem; }
.feature h2 a{ text-decoration:none; }
.feature p{ color:var(--ink-2); }

.post-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }

.article{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:start; padding-block:clamp(2.5rem,1.5rem + 3vw,4rem); }
.article__body{ max-width:70ch; }
.article__body h2{ font-size:var(--step-2); margin:2.5rem 0 1rem; }
.article__body h3{ font-size:var(--step-1); margin:2rem 0 .75rem; }
.article__body p{ margin-bottom:1.15rem; }
.article__body ul{ list-style:disc; padding-left:1.25rem; margin-bottom:1.5rem; }
.article__body ul li{ margin-bottom:.5rem; }
.article__body blockquote{
  border-left:3px solid var(--amber); padding:.25rem 0 .25rem 1.25rem; margin:1.75rem 0;
  font-family:var(--display); font-size:var(--step-1); line-height:1.4;
}
.article__meta{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.25rem; }
.article__hero{ aspect-ratio:2/1; border:1px solid var(--line); background:linear-gradient(160deg,#F1EADC 0 45%,#D98F2B 45% 60%,#1B3E68 60%); margin-bottom:2rem; }
.aside{ position:sticky; top:100px; border-top:3px solid var(--navy); padding-top:1.25rem; }
.aside h2{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1rem; }
.aside li{ margin-bottom:.75rem; }
.aside a{ text-decoration:none; border-bottom:1px solid var(--line); font-size:.92rem; }
.aside .btn{ margin-top:1rem; width:100%; }
.aside + .aside{ margin-top:2.5rem; }

/* ---------- Responsive ---------- */
/* The wider container fits more per row on large desktops */
@media (min-width:1500px){
  .works{ grid-template-columns:repeat(4,1fr); }
  .artists{ grid-template-columns:repeat(4,1fr); }
  .studio{ gap:clamp(3rem,2rem + 4vw,6rem); }
}

@media (max-width:1080px){
  .works,.artists{ grid-template-columns:repeat(2,1fr); }
  .palette,.posts,.quotes,.post-list{ grid-template-columns:repeat(2,1fr); }
  .rail__list{ grid-template-columns:repeat(3,1fr); }
  .rail__list li:nth-child(-n + 3){ border-bottom:1px solid var(--line); }
  .rail__list li:nth-child(4){ border-left:none; }
}

@media (max-width:900px){
  .wordmark__mark{ height:38px; }
  .wordmark__type img{ height:17px; }
  .nav{
    position:absolute; top:100%; left:0; right:0; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:1rem 0 1.5rem;
  }
  .nav.is-open{ display:flex; }
  .nav__list{ flex-direction:column; gap:0; }
  .nav__list a{ display:block; padding:.9rem clamp(1.15rem,.6rem + 2.2vw,2.75rem); }
  .nav__cta{ margin:1rem clamp(1.15rem,.6rem + 2.2vw,2.75rem) 0; }
  .burger{ display:block; }
  .masthead__inner{ position:relative; }

  .hero__grid,.studio,.faq,.visit,.band__head--split,.feature,.article{ grid-template-columns:minmax(0,1fr); }
  .aside{ position:static; }
  .hero__copy{ max-width:none; }
}

@media (max-width:680px){
  .works,.artists,.palette,.posts,.quotes,.post-list{ grid-template-columns:1fr; }
  .rail__list{ grid-template-columns:repeat(2,1fr); }
  .rail__list li{ border-bottom:1px solid var(--line); }
  .rail__list li:nth-child(odd){ border-left:none; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
  .hero__actions .btn{ flex:1 1 100%; }
  .salon__feature .frame:nth-child(2){ margin-top:0; }
  /* Two up, two up, two up rather than a single long strip */
  .salon__row{ flex-wrap:wrap; }
  .salon__row .frame{ --cap:clamp(120px, 20vh, 200px); }
  /* Keep the height cap on a phone too, or a portrait canvas eats the
     whole screen and the CTAs end up three scrolls down. */
  /* superseded by the carousel block at the end of this file */
  .salon__plaque{ grid-column:1 / -1; }
  .band__foot{ justify-content:flex-start; }
}

@media print{
  .masthead,.rail,.signup,.burger{ display:none; }
  body{ background:#fff; color:#000; }
}


/* ==========================================================================
   WordPress core, editor, and admin-bar integration
   ========================================================================== */

/* Sticky header has to clear the admin bar */
.admin-bar .masthead{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .masthead{ top:46px; } }
@media screen and (max-width:600px){ .admin-bar .masthead{ top:0; } }
.admin-bar .aside{ top:132px; }

.screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute; width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:var(--ink); color:var(--paper); clip-path:none; height:auto; width:auto;
  padding:.75rem 1.25rem; left:5px; top:5px; z-index:100000;
  font-family:var(--mono); font-size:var(--step--1); text-decoration:none;
}

/* Alignment classes */
.alignleft{ float:left; margin:.35rem 1.75rem 1.25rem 0; }
.alignright{ float:right; margin:.35rem 0 1.25rem 1.75rem; }
.aligncenter{ display:block; margin-inline:auto; }
.alignwide{ width:min(100%, 1100px); margin-inline:auto; }
.alignfull{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); }
.article__body .alignfull img{ width:100%; }

/* Captions, galleries, embeds */
.wp-caption{ max-width:100%; }
.wp-caption-text,.wp-element-caption,figcaption{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-top:.65rem;
}
.wp-block-image img{ height:auto; }
.wp-block-gallery{ margin-bottom:1.75rem; }
.wp-block-quote,.wp-block-pullquote{
  border-left:3px solid var(--amber); padding:.25rem 0 .25rem 1.25rem; margin:1.75rem 0;
  font-family:var(--display); font-size:var(--step-1); line-height:1.4;
}
.wp-block-quote cite{
  display:block; margin-top:.75rem; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; font-style:normal; color:var(--ink-3);
}
.wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.5rem; border-radius:var(--radius);
  background:var(--navy); color:var(--paper); text-decoration:none;
  font-family:var(--mono); font-size:var(--step--1); letter-spacing:.07em; text-transform:uppercase;
}
.wp-block-button__link:hover{ background:var(--amber); color:var(--ink); }
.wp-block-separator{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
.wp-block-table table{ width:100%; border-collapse:collapse; }
.wp-block-table th,.wp-block-table td{ border:1px solid var(--line); padding:.65rem .85rem; text-align:left; }
.wp-block-table th{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
embed,iframe,object{ max-width:100%; }

/* Comments */
.comments{ max-width:70ch; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); }
.comments h2{ font-size:var(--step-2); margin-bottom:1.5rem; }
.comment-list{ list-style:none; }
.comment-list li{ padding:1.25rem 0; border-bottom:1px solid var(--line); }
.comment-meta{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.5rem; }
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radius); padding:.75rem .9rem; background:var(--paper);
}
.comment-form label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:.35rem; }
.comment-form p{ margin-bottom:1rem; }
.comment-form .submit{
  background:var(--navy); color:var(--paper); border:1px solid var(--navy); cursor:pointer;
  padding:.9rem 1.5rem; border-radius:var(--radius);
  font-family:var(--mono); font-size:var(--step--1); letter-spacing:.07em; text-transform:uppercase;
}

/* Pagination */
.pagination{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:clamp(2rem, 1.2rem + 2vw, 3rem); }
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:2.75rem; padding:.65rem .8rem;
  border:1px solid var(--line); border-radius:var(--radius); text-decoration:none;
  font-family:var(--mono); font-size:var(--step--1);
}
.pagination .page-numbers:hover{ border-color:var(--navy); }
.pagination .current{ background:var(--navy); color:var(--paper); border-color:var(--navy); }

/* Current menu item */
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a,
.nav__list .current-menu-parent > a{ border-bottom-color:var(--amber); }

/* Widgets in the article sidebar */
.aside .widget + .widget{ margin-top:2.5rem; }
.aside .widget ul{ list-style:none; }

/* Empty states */
.empty-note{
  border:1px dashed var(--line); padding:clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-family:var(--mono); font-size:var(--step--1); color:var(--ink-3); line-height:1.7;
}
.band--ink .empty-note,.band--navy .empty-note{ border-color:rgba(252,251,249,.28); color:rgba(252,251,249,.7); }

/* Real images replace the CSS placeholders once media exists */
.work__img img,.artist__portrait img,.feature__art img,.article__hero img,.studio__shot img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.work__img,.artist__portrait{ overflow:hidden; }
.work__img:has(img),.artist__portrait:has(img),.feature__art:has(img),.article__hero:has(img){ background:none; }


/* ==========================================================================
   WooCommerce
   ========================================================================== */

/* Woo ships `.woocommerce img { height:auto }`, which out-specifies the plain
   class selectors used above. These raise specificity rather than reach for
   !important. */
.wordmark img.wordmark__mark{ height:52px; width:auto; }
.wordmark--footer img.wordmark__mark{ height:66px; }
.wordmark__type img{ height:22px; width:auto; }
.wordmark--footer .wordmark__type img{ height:28px; }
.work .work__img img,
.artist .artist__portrait img{ width:100%; height:100%; object-fit:cover; }
/* The hero frames are deliberately uncropped, so they are excluded here. */
@media (max-width:900px){
  .wordmark img.wordmark__mark{ height:38px; }
  .wordmark__type img{ height:17px; }
}

/* Sold pieces stay visible but read as unavailable */
.work--sold .work__img{ opacity:.72; }
.work--sold .work__price{ color:var(--ink-3); }

/* Loop furniture Woo prints above the grid */
.woocommerce-ordering,
.woocommerce-result-count{
  font-family:var(--mono); font-size:var(--step--1); color:var(--ink-3); margin-bottom:1.5rem;
}
.woocommerce-ordering select{
  border:1px solid var(--line); border-radius:var(--radius); padding:.5rem .75rem; background:var(--paper);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-left:3px solid var(--amber); background:var(--cream);
  padding:1rem 1.25rem; margin-bottom:1.75rem; list-style:none;
  font-size:.95rem;
}
.woocommerce-error{ border-left-color:var(--crimson-2); }
.woocommerce-message .button,
.woocommerce-info .button{ float:right; }

/* Buttons, add to cart, quantity */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--navy); color:var(--paper);
  border:1px solid var(--navy); border-radius:var(--radius);
  padding:.9rem 1.5rem; font-weight:400;
  font-family:var(--mono); font-size:var(--step--1); letter-spacing:.07em; text-transform:uppercase;
  transition:background .2s, border-color .2s, color .2s;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  background:var(--amber); border-color:var(--amber); color:var(--ink);
}
.woocommerce .quantity .qty{
  border:1px solid var(--line); border-radius:var(--radius); padding:.7rem .5rem; background:var(--paper);
}
.aside form.cart{ display:grid; gap:.75rem; margin-top:1rem; }
.aside form.cart .button{ width:100%; }
.aside .stock{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.aside .stock.out-of-stock{ color:var(--crimson); }

/* Product gallery */
.woocommerce-product-gallery{ margin-bottom:2rem; }
.woocommerce-product-gallery__image img{ border:1px solid var(--line); }
.flex-control-thumbs{ display:flex; gap:.6rem; margin-top:.75rem; list-style:none; padding:0; }
.flex-control-thumbs li{ width:80px; }
.flex-control-thumbs img{ cursor:pointer; border:1px solid var(--line); }

/* Tabs and related, below the main split */
.woocommerce-tabs,
.related.products,
.upsells.products{
  width:100%; max-width:var(--shell); margin-inline:auto;
  padding-inline:clamp(1.15rem, .6rem + 2.2vw, 2.75rem);
  padding-block:clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
}
.woocommerce-tabs .tabs{ display:flex; flex-wrap:wrap; gap:1.5rem; border-bottom:1px solid var(--line); margin-bottom:1.75rem; padding:0; }
.woocommerce-tabs .tabs li{ list-style:none; }
.woocommerce-tabs .tabs a{
  display:block; padding:.75rem 0; text-decoration:none;
  font-family:var(--mono); font-size:var(--step--1); letter-spacing:.08em; text-transform:uppercase;
  border-bottom:2px solid transparent;
}
.woocommerce-tabs .tabs .active a{ border-bottom-color:var(--amber); }
.related.products h2,
.upsells.products h2{ font-size:var(--step-2); margin-bottom:1.5rem; }
.related.products ul.products,
.upsells.products ul.products{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); list-style:none; }
@media (max-width:1080px){ .related.products ul.products,.upsells.products ul.products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .related.products ul.products,.upsells.products ul.products{ grid-template-columns:1fr; } }

/* Cart, checkout, and account render through page.php */
.woocommerce table.shop_table{ width:100%; border-collapse:collapse; border:1px solid var(--line); }
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{ border-bottom:1px solid var(--line); padding:.85rem 1rem; text-align:left; }
.woocommerce table.shop_table th{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text{
  width:100%; border:1px solid var(--line); border-radius:var(--radius);
  padding:.75rem .9rem; background:var(--paper);
}
.woocommerce form .form-row label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.woocommerce-checkout #payment{ background:var(--cream); border:1px solid var(--line); padding:1.5rem; }
.woocommerce-MyAccount-navigation ul{ list-style:none; display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2rem; }
.woocommerce-MyAccount-navigation a{
  font-family:var(--mono); font-size:var(--step--1); letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid var(--line);
}
.woocommerce-MyAccount-navigation .is-active a{ border-bottom-color:var(--amber); }

/* Woo floats the gallery, summary, and sorting form. This layout is grid
   based, so unset them at matching specificity rather than with !important. */
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering{ float:none; margin:0 0 1.5rem; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.images,
.woocommerce-page div.product div.summary{ float:none; width:100%; margin-bottom:2rem; }
/* Cap the gallery so the title and description stay above the fold on a
   portrait canvas. */
.woocommerce div.product div.images{ max-width:560px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border:0; }
.woocommerce div.product{ display:block; }
.woocommerce-tabs .panel > h2:first-child{ font-size:var(--step-2); }


/* ==========================================================================
   Motion: load-in and scroll reveal
   The .mn-motion class is set by assets/js/motion.js before the body paints,
   so nothing is ever hidden when JS is off or reduced motion is requested.
   ========================================================================== */

.mn-motion .mn-reveal{
  opacity:0;
  transform:translateY(18px);
  will-change:opacity, transform;
}
.mn-motion .mn-reveal.mn-in{
  opacity:1;
  transform:none;
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1) var(--mn-delay, 0ms),
    transform .8s cubic-bezier(.22,.61,.36,1) var(--mn-delay, 0ms);
}

/* Canvases settle onto the wall rather than sliding */
.mn-motion .frame.mn-reveal{ transform:translateY(26px) scale(.98); }
.mn-motion .frame.mn-reveal.mn-in{ transform:none; }

/* The pigment rail wipes its swatch in as the row arrives */
.mn-motion .rail__list li.mn-reveal .rail__chip{
  transform:scaleX(0); transform-origin:left center;
}
.mn-motion .rail__list li.mn-reveal.mn-in .rail__chip{
  transform:scaleX(1);
  transition:transform .7s cubic-bezier(.22,.61,.36,1) calc(var(--mn-delay, 0ms) + 120ms);
}

/* Class cards fill their cap like a tube being squeezed */
.mn-motion .tube.mn-reveal .tube__cap{ transform:scaleX(0); transform-origin:left center; }
.mn-motion .tube.mn-reveal.mn-in .tube__cap{
  transform:scaleX(1);
  transition:transform .8s cubic-bezier(.22,.61,.36,1) calc(var(--mn-delay, 0ms) + 150ms);
}

/* Header arrives once, on load */
.mn-motion .masthead{ animation:mn-drop .7s cubic-bezier(.22,.61,.36,1) both; }
@keyframes mn-drop{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:none; }
}

/* The hero is usually the LCP element, so it moves faster and starts sooner
   than the rest to keep the paint metric honest. */
.mn-motion .hero__copy > .mn-reveal.mn-in{ transition-duration:.5s; }
.mn-motion .hero__copy > .mn-reveal{ transform:translateY(12px); }

@media (prefers-reduced-motion: reduce){
  .mn-motion .mn-reveal,
  .mn-motion .frame.mn-reveal,
  .mn-motion .mn-reveal.mn-in{ opacity:1; transform:none; transition:none; }
  .mn-motion .rail__list li.mn-reveal .rail__chip,
  .mn-motion .tube.mn-reveal .tube__cap{ transform:none; }
  .mn-motion .masthead{ animation:none; }
}

/* Never let animation state reach a printer or a PDF export */
@media print{
  .mn-motion .mn-reveal,
  .mn-motion .mn-reveal.mn-in{ opacity:1 !important; transform:none !important; }
  .mn-motion .rail__list li .rail__chip,
  .mn-motion .tube .tube__cap{ transform:none !important; }
}

/* ==========================================================================
   Mobile: the wall becomes a swipeable carousel, one canvas per screen
   ========================================================================== */

@media (max-width:680px){

  /* The track is the wall. display:contents lets the two rows hand their
     frames straight to it, so all six become slides in one scroller. */
  .salon__wall{
    flex-direction:row; flex-wrap:nowrap;
    /* Without these the track's min-content width (six slides) inflates the
       grid column and the whole page gains a horizontal scrollbar. */
    min-width:0;
    gap:0;
    overflow-x:auto; overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Bleed to the screen edges so a slide really is full width */
    width:calc(100% + (clamp(1.15rem, .6rem + 2.2vw, 2.75rem) * 2));
    margin-inline:calc(clamp(1.15rem, .6rem + 2.2vw, 2.75rem) * -1);
    padding-inline:0;
  }
  .salon__wall::-webkit-scrollbar{ display:none; }

  .salon__feature,
  .salon__row{ display:contents; }

  .salon__wall .frame{
    flex:0 0 100%;
    width:100%; max-width:100%;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    margin:0;
    padding:0 clamp(1.15rem, .6rem + 2.2vw, 2.75rem);
    background:none; border:0; box-shadow:none;
    display:flex; flex-direction:column;
  }
  .salon__wall .frame:hover{ transform:none; box-shadow:none; }

  /* Every slide is the same height, so swiping never resizes the hero.
     The canvas is centred inside that fixed box and scaled to fit. */
  .salon__wall .frame a{
    display:flex; align-items:center; justify-content:center;
    height:var(--slide-h, clamp(290px, 78vw, 430px));
    background:var(--paper);
    padding:clamp(.7rem, 2vw, 1rem);
    box-shadow:0 18px 42px rgba(0,0,0,.38);
  }
  .salon__wall .frame img.canvas,
  .salon__wall .frame .canvas--empty{
    width:auto; height:auto;
    max-width:100%; max-height:100%;
    object-fit:contain;
  }
  .salon__wall .frame .canvas--empty{ width:60%; height:100%; }

  /* A fixed caption block, or a two-line title would shift the next slide */
  .salon__wall .frame figcaption{
    width:auto; min-width:0;
    min-height:3.4em;
    padding:.8rem 0 0;
    font-size:.62rem;
    color:rgba(252,251,249,.62);
  }
  .salon__wall .frame figcaption span{ color:var(--paper); }

  /* Slides sit outside the viewport horizontally, so the scroll reveal
     would leave them invisible until swiped. Opt them out. */
  .mn-motion .salon__wall .frame.mn-reveal{ opacity:1; transform:none; }

  /* Position indicator, built by assets/js/nav.js */
  .salon__dots{
    display:flex; justify-content:center; gap:.5rem;
    margin-top:.9rem;
  }
  .salon__dot{
    appearance:none; -webkit-appearance:none;
    width:28px; height:3px; padding:0; border:0; border-radius:0;
    background:rgba(252,251,249,.24); cursor:pointer;
    transition:background .3s;
  }
  .salon__dot.is-on{ background:var(--amber); }
  .salon__dot:focus-visible{ outline:2px solid var(--amber); outline-offset:4px; }
}

@media (max-width:680px) and (prefers-reduced-motion: reduce){
  .salon__wall{ scroll-behavior:auto; }
}