/* WordPress and accessibility integration. Reference design remains in prototype.css. */
/* Parity: body, header and footer-rail colours come from the selected prototype (no WordPress overrides). */
.niche-foundation .nav li,.niche-foundation .mobileOverlayNav li { list-style:none; }
.niche-foundation .view.active { display:block; }
.niche-foundation .homeFooterDisclosure { position:relative!important; inset:auto!important; }
.niche-foundation .mobileOverlay[hidden] { display:none!important; }
.niche-foundation .nav { opacity:1!important; transform:none!important; pointer-events:auto!important; }
.niche-foundation .designerChildView .childHero { position:relative; }
.niche-foundation .innerCopy h1 { overflow-wrap:anywhere; }
.niche-foundation :focus-visible { outline:2px solid #704214!important; outline-offset:5px; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:9999; padding:16px; background:#fff; color:#151513; }
.skip-link:focus { top:10px; }
.niche-directory { min-height:70vh; padding:calc(var(--header) + 60px) 5vw 80px; }
.niche-directory h1 { font-size:clamp(48px,6vw,88px); font-weight:400; }
.niche-directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.niche-directory-grid img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.niche-directory-grid h2 { font-weight:400; font-size:32px; }
.niche-editorial { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:60px 5vw; }
.niche-editorial img { width:100%; height:auto; }
@media(max-width:900px) { .niche-directory-grid,.niche-editorial { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Use native details state instead of the prototype's custom disclosure controller. */
.niche-foundation .homeFooterDisclosure[open] .homeFooterExpanded { max-height:none!important; height:auto!important; padding-top:68px!important; padding-bottom:28px!important; opacity:1!important; transform:none!important; visibility:visible!important; }
.niche-foundation .homeFooterDisclosure[open] .homeFooterChevron { transform:rotate(180deg)!important; }
/* Up to 1180px the arrow sits beside the N. These offsets centre the glyph ink on the N, closed and open. */
@media(max-width:1180px) {
  .niche-foundation .homeFooterChevron { transform:translateY(-2px); }
  .niche-foundation .homeFooterDisclosure[open] .homeFooterChevron { transform:translateY(1.5px) rotate(180deg)!important; }
}
/* Desktop: the arrow sits beneath the N. Equal box, plus a sub-pixel correction for the glyph ink, centres it open and closed. */
@media(min-width:1181px) {
  .niche-foundation .homeFooterChevron { display:block; width:1em; line-height:1; text-align:center; transform:translateX(calc(-50% + .5px)); }
  .niche-foundation .homeFooterDisclosure[open] .homeFooterChevron { transform:translateX(calc(-50% - .5px)) rotate(180deg)!important; }
}

/* Carry the prototype's Home header handoff into separate WordPress routes. */
.home .header.overPhoto { background:transparent; }
.home .header.homeNavHandoff .nav { opacity:0!important; pointer-events:none!important; }
.cHubLinks .niche-hub-preview { appearance:none; display:block; width:100%; border:0; padding:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.cHubLinks .niche-hub-preview { font-family:var(--display); font-size:clamp(34px,3.6vw,62px); font-weight:400; line-height:1.12; letter-spacing:-.025em; }
.cHubLinks .niche-hub-preview:hover,.cHubLinks .niche-hub-preview[aria-pressed="true"] { color:var(--accent); }
[aria-disabled="true"].fBookAction,[aria-disabled="true"].dPanelBook,[aria-disabled="true"].visitBook { cursor:default; }
@media(max-width:960px) { .cHubLinks .niche-hub-preview { font-size:clamp(42px,7vw,66px); } }

@media(max-width:560px) { .cHubLinks .niche-hub-preview { font-size:clamp(36px,10vw,52px); } }


/* Clear Niche team request: replace orange wording with the established brown. */
.designerShopRailHead .kicker,
.designerShopAll:hover,
.designerProductCard:hover .designerProductMeta strong,
.designerCollectionCard .kicker { color:var(--c-accent, #704214)!important; }
.designerShopAll:hover { border-bottom-color:var(--c-accent, #704214)!important; }

/* Use the existing Light surface for visible focus against the dark footer. */
.niche-foundation .homeFooterRail:focus-visible,
.niche-foundation .footer a:focus-visible { outline-color:#faf9f6!important; outline-offset:-4px; }

/* Featured frames (approved 29 Oct): the prototype JMM composition — Product 1, Product 2 and the tall editorial
   Full Collection panel in three equal desktop columns (prototype .designerProductGrid). Fewer cards never leave an
   empty column; the mobile rail has exactly one column per rendered card (no blank swipe area). */
.niche-foundation .designerProductGrid[data-cards="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(min-width:901px) { .niche-foundation .designerProductGrid[data-cards="1"] .designerCollectionCard { min-height:300px; } }
@media(max-width:900px) { .niche-foundation .designerProductGrid[data-cards] { grid-template-columns:repeat(var(--niche-cards),minmax(250px,72vw)); } }
@media(max-width:600px) { .niche-foundation .designerProductGrid[data-cards] { grid-template-columns:repeat(var(--niche-cards),82vw); } }
/* A lone full-collection card fills the row at every width rather than sitting in a rail slot. */
.niche-foundation .designerProductGrid[data-cards="1"] { grid-template-columns:minmax(0,1fr)!important; margin-right:0; overflow-x:visible; }

/* Usability: extend text-link hit areas to 44px without changing their visible size, styling or spacing. */
.niche-foundation :is(.rule,.designerShopAll,.brand,.nav a,.menuButton) { position:relative; }
.niche-foundation :is(.rule,.designerShopAll,.childBack,.cChildBack,.brand,.nav a,.menuButton)::after { content:""; position:absolute; left:0; right:0; top:50%; height:max(100%,44px); transform:translateY(-50%); }

/* Cards are the positioning context so hidden text stays inside the horizontal rail. */
.niche-foundation :is(.designerProductCard,.designerCollectionCard) { position:relative; }
/* Visually hidden text for assistive technology (e.g. new-tab notices). */
.screen-reader-text { position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); border:0; white-space:nowrap; text-transform:none; letter-spacing:normal; }

/* Shared footer metadata link: reuse its inherited size/spacing and central Light hover token. */
.niche-foundation .footbottom .site-credit { color:inherit; font:inherit; letter-spacing:inherit; }
.niche-foundation .footbottom .site-credit:hover { color:var(--niche-tan); }
.niche-foundation .footbottom .site-credit > span[aria-hidden] { display:inline; margin:0; }
@media(max-width:900px) { .niche-foundation .footbottom .site-credit { display:inline-block; margin-top:7px; } }
@media(prefers-reduced-motion:reduce) {
  .niche-foundation .homeFooterDisclosure,
  .niche-foundation .homeFooterDisclosure * { transition:none!important; animation:none!important; }
}

/* Eyecare preview controls: retain reference type/spacing with a 44px minimum hit area. */

/* Eyecare service links retain the hub's existing type and preview treatment. */
.eyecareHub a.niche-hub-preview { text-decoration:none; }
.eyecareHub a.niche-hub-preview[data-preview-active="true"] { color:var(--accent); }
.eyecare-service { min-height:calc(100svh - var(--header)); }
.eyecare-service h1 { max-width:16ch; overflow-wrap:anywhere; }
.eyecare-service-content { max-width:65ch; line-height:1.6; }
.eyecare-service-image { margin:32px 0 0; max-width:900px; }
.eyecare-service-image img { max-width:100%; height:auto; }

/* Native editorial journeys reuse the selected Light layouts and existing assets. */
.cHubLinks a.niche-hub-preview[data-preview-active="true"] { color:var(--accent); }
.niche-native-journey .journeyReviewNote { margin:0; padding:12px 5vw; font-size:11px; line-height:1.5; border-block:1px solid rgba(23,23,21,.12); }
.niche-native-journey .heritageSiblingNav:not(:has(> a:nth-child(4))) { grid-template-columns:repeat(3,minmax(0,1fr)); }
/* Back link is absolutely positioned on desktop (prototype); give its hit area a containing block where it is static. */
@media(max-width:900px) { .niche-native-journey .cChildBack { position:relative; } }
.niche-native-journey .journeyArchiveFull { display:block; max-width:100%; cursor:zoom-in; }
.designerBrowserHeading .journeyReviewNote,.designerBrowserEmpty p { max-width:42ch; font-size:14px; line-height:1.6; }
.designerBrowserEmpty .linkrow { flex-wrap:wrap; }
@media(min-width:961px){.niche-native-journey .peopleGridV615{grid-template-columns:repeat(3,minmax(0,1fr));}}
body.admin-bar :is(.niche-native-journey,.eyecareEditorialView) .cSiblingNav{top:calc(var(--header) + var(--wp-admin--admin-bar--height,32px))!important;}
@media(max-width:960px){body.admin-bar .collectionPage .designerBrowserPreview{top:calc(var(--header) + var(--wp-admin--admin-bar--height,46px))!important;}}

@media(max-width:960px){
 .niche-native-journey .heritagePressStage{position:static!important;}
 .niche-native-journey .heritageCampaignCarouselButton{width:44px!important;height:44px!important;}
}
/* Hub links: 44px hit area without changing the prototype's 43.68px line boxes. */
.niche-foundation .cHubLinks .niche-hub-preview{position:relative;}
.niche-foundation .cHubLinks .niche-hub-preview::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%);}

/* Parity: WordPress adds .home to <body> on the front page; the prototype's .home view rules must not recolour the page body. */
html body.home.niche-foundation { background:var(--b-grey)!important; color:var(--b-ink)!important; }

/* Booking hero (approved 29 Oct): typography and a fine outline on the photograph, as in the Light prototype.
   Barely tinted fill, restrained translucent hover, clear white keyboard focus; no shade, blur or dark panel. */
.niche-foundation :is(.fBookAction,.dPanelBook) { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.9); transition:background-color .3s ease,border-color .3s ease; }
.niche-foundation :is(.fBookAction,.dPanelBook):is(:hover,:focus-visible) { background:rgba(255,255,255,.14); color:#fff; border-color:#fff; }
.niche-foundation :is(.fBookAction,.dPanelBook):focus-visible { outline:2px solid #fff!important; outline-offset:5px; }
/* Home handoff: the Explore panel CTA exists only in the desktop sequence (≥1181px); below that it was unstyled text under the header. */
@media(max-width:1180px) { .niche-foundation .dPanelBooking { display:none!important; } }
@media(min-width:1181px) { .niche-foundation .dPanelBooking { opacity:var(--f-panel-book-opacity,var(--f-nav-opacity)); } }

/* Editorial eyebrows (approved 29 Oct): one understated label style, taken from the prevailing Light kicker
   (10px / 700 / .15em / uppercase / brown). Applies to section, hero and hub labels; Home photo labels,
   card utility labels, navigation and captions keep their own treatments. */
:root { --niche-eyebrow-size:10px; --niche-eyebrow-weight:700; --niche-eyebrow-tracking:.15em; --niche-eyebrow-line:1.2; --niche-eyebrow-gap:18px; }
.niche-foundation .view.active:not([data-view="home"]) :is(.kicker,.cHubKicker):not(.designerCollectionCard .kicker) {
  font-size:var(--niche-eyebrow-size)!important; font-weight:var(--niche-eyebrow-weight)!important; letter-spacing:var(--niche-eyebrow-tracking)!important;
  line-height:var(--niche-eyebrow-line)!important; text-transform:uppercase!important; color:var(--c-accent,#704214)!important; }
.niche-foundation .view.active:not([data-view="home"]) .kicker:has(+ :is(h1,h2,h3)) { margin-bottom:var(--niche-eyebrow-gap)!important; }

/* Editorial hero headings (approved 29 Oct): Niche and Heritage child heroes use the Designer mixed-case display
   treatment (no forced uppercase, -.035em tracking). Font, size, weight, line-height and colour are unchanged.
   Sibling rails share their width equally, so the three-entry Niche rail fills the row like the four-entry rails. */
.cNicheChildView .cChildHeroCopy h1 { text-transform:none; letter-spacing:-.035em; }
.cSiblingNav { grid-template-columns:none; grid-auto-columns:1fr; grid-auto-flow:column; }

/* Shared Previous/Next journey bar: each half is its whole panel for click, hover and focus. The Book variant's
   prototype inset (.bookJourney padding 0 5vw / 0 20px) moves from the bar into its halves, so text positions and the
   divider stay exactly where they were. Focus ring sits inside the panel instead of spilling past its edges. */
.niche-foundation .journeyNav { align-items:stretch; }
.niche-foundation .journeyNav.bookJourney { padding-left:0!important; padding-right:0!important; }
@media(min-width:901px) {
  .niche-foundation .bookJourney .journeyStep.previous { padding-left:10vw!important; }
  .niche-foundation .bookJourney .journeyStep.following { padding-right:10vw!important; }
}
@media(max-width:900px) { .niche-foundation .bookJourney .journeyStep { padding-left:40px!important; padding-right:40px!important; } }
.niche-foundation .journeyStep:focus-visible { outline:2px solid var(--c-accent,#704214)!important; outline-offset:-4px!important; }

/* Niche → The People: manually controlled portrait gallery (approved 29 Oct). Same 1:1 monochrome portraits, type and
   gap; about three per view on desktop, a swipe rail on mobile. No autoplay. Enhanced by journeys.js (.isGallery). */
.niche-foundation .peopleGridV615.isGallery { display:grid!important; grid-auto-flow:column; grid-template-columns:none!important; grid-auto-columns:calc((100% - 28px) / 3); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain; scrollbar-width:none; }
.niche-foundation .peopleGridV615.isGallery::-webkit-scrollbar { display:none; }
.niche-foundation .peopleGridV615.isGallery > .personCard { grid-column:auto; scroll-snap-align:start; } /* Same order at every width: clears the older column placement of Rory below 900px. */
.niche-foundation .peopleGridV615.isGallery:focus-visible { outline-offset:4px!important; }
@media(max-width:960px) { .niche-foundation .peopleGridV615.isGallery { grid-auto-columns:72%; } }
.niche-foundation .peopleGalleryControls { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.niche-foundation .peopleGalleryControls[hidden] { display:none; }
.niche-foundation .peopleGalleryControls button { width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid rgba(23,23,21,.24); background:transparent; color:var(--b-ink,#151513); font:400 18px/1 var(--display,serif); cursor:pointer; transition:color .2s ease,border-color .2s ease; }
.niche-foundation .peopleGalleryControls button:hover:not(:disabled) { color:var(--c-accent,#704214); border-color:var(--c-accent,#704214); }
.niche-foundation .peopleGalleryControls button:disabled { opacity:.32; cursor:default; }
.niche-foundation .personCard.personPending .personPlaceholder { border-color:rgba(23,23,21,.18); background:rgba(23,23,21,.04); color:rgba(23,23,21,.42); }
.niche-foundation .personCard.personPending .personPlaceholder span { font-size:clamp(18px,1.6vw,24px); }
@media(prefers-reduced-motion:reduce) { .niche-foundation .peopleGridV615.isGallery { scroll-behavior:auto; } }

/* Niche → Niche Bazaar Studio chapter: anchor lands below the fixed header and the sticky Niche sibling bar. */
.niche-native-journey #niche-bazaar { scroll-margin-top:calc(var(--header) + 59px); }
body.admin-bar .niche-native-journey #niche-bazaar { scroll-margin-top:calc(var(--header) + 59px + var(--wp-admin--admin-bar--height,32px)); }

/* Shared "Back to…" link: one treatment on every inner page. Destinations stay in the templates and saved content. */
.niche-foundation :is(.childBack,.cChildBack) { display:inline-flex; align-items:center; gap:8px!important; width:max-content; min-height:auto!important; padding-bottom:8px!important; border-bottom:1px solid rgba(21,21,19,.22)!important; color:var(--niche-ink)!important; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; transition:color .2s ease,border-color .2s ease; }
.niche-foundation :is(.childBack,.cChildBack) span { display:inline; width:auto!important; height:auto!important; background:none!important; color:var(--niche-chocolate)!important; font-size:15px!important; }
.niche-foundation :is(.childBack,.cChildBack) b { font-weight:600!important; color:inherit; }
.niche-foundation :is(.childBack,.cChildBack):is(:hover,:focus-visible) { color:var(--niche-chocolate)!important; border-bottom-color:var(--niche-chocolate)!important; }
.niche-foundation :is(.childBack,.cChildBack):is(:hover,:focus-visible) b { color:inherit!important; }
@media(min-width:901px) { .niche-foundation .eyecareEditorialView .childHero { position:relative; } .niche-foundation .eyecareEditorialView .childBack { position:absolute; top:clamp(26px,3vw,42px); left:5vw; margin:0; z-index:3; } .niche-foundation .eyecareEditorialView .childBack + .kicker { margin-top:52px; } } /* Keeps the hero text where it sat before the link moved out of the flow. */
/* Hero copy uses a fixed 38px inset in this range; keep the link on the same line as the eyebrow. */
@media(min-width:901px) and (max-width:1099px) { .niche-foundation :is(.designerChildView,.cNicheChildView) :is(.childBack,.cChildBack) { left:38px!important; } }
@media(max-width:900px) { .niche-foundation :is(.childBack,.cChildBack) { margin:0 0 32px!important; } }

/* Header actions: full-height cells flush to the right edge at every width. Phone layout (up to 600px) already works this way. */
@media(min-width:1181px) { .niche-foundation .header .quick { margin-right:-26px; } } /* Negative margin keeps the wordmark centred. */
@media(min-width:601px) and (max-width:1180px) {
  .niche-foundation .header { gap:0; padding-right:0; }
  .niche-foundation .header .quick { align-self:stretch; height:var(--header); }
  .niche-foundation .header .quick a { min-height:var(--header); padding:0 22px; }
  .niche-foundation .header .quick .bookAction { border-left:1px solid rgba(36,26,23,.14); }
  .niche-foundation .header .menuButton { align-self:stretch; width:76px; min-height:var(--header); height:var(--header); padding:0; border:0; border-left:1px solid rgba(36,26,23,.14); }
  /* Home at tablet width: dark text over the opening photo, as on desktop. The header stays transparent. */
  .niche-foundation .header.overPhoto { color:#241a17; text-shadow:none; border-bottom-color:rgba(36,26,23,.12); }
  .niche-foundation .header.overPhoto .bookAction { background:transparent; }
}
/* Narrowest phones: narrower action cells give the wordmark room. Below 360px only; the cells stay full height. */
@media(max-width:359px) { .niche-foundation .header { grid-template-columns:minmax(0,1fr) 100px 60px!important; } }

/* The People: the rail runs to the viewport edges so the third portrait is clipped at the first position. Its first card stays on the page grid. */
@media(min-width:961px) { .niche-foundation [data-view="niche-team"] .peopleGridV615.isGallery { grid-auto-columns:32.5vw; margin-inline:-10vw; padding-inline:10vw; scroll-padding-inline:10vw; } }
@media(min-width:901px) and (max-width:960px) { .niche-foundation [data-view="niche-team"] .peopleGridV615.isGallery { margin-right:calc(-5vw - 20px); padding-right:calc(5vw + 20px); } }

/* Visit: keep the shopfront in frame. Desktop centres the sign; stacked layouts show the frontage instead of a wide crop. */
.niche-foundation [data-view="visit"] .visitPhoto img { object-position:59% center; }
@media(max-width:960px) { .niche-foundation [data-view="visit"] .visitPhoto { height:auto; min-height:0!important; aspect-ratio:1483/1061; } }
@media(max-width:600px) { .niche-foundation [data-view="visit"] .visitPhoto { aspect-ratio:1/1; } }
/* Heritage Story, phones: the photo carries the Niche logo, so show its full width rather than cropping the wording. */
@media(max-width:600px) { .niche-foundation [data-view="heritage-story"] :is(.cChildHeroMedia,.cChildHeroMedia img) { height:auto!important; min-height:0!important; aspect-ratio:1800/1570; } }