/*
Theme Name: Janus
Theme URI: https://janus.photos
Author: Janus.photos
Author URI: https://janus.photos
Description: A photography archive theme for Janus.photos. Products (via WooCommerce) are treated as pieces in an archive — a coin-flip gallery grid, a threshold-split hero, and a quiet, engraved visual language built around the two-faced god of doorways. Every print looks two ways: toward what it was, and what it's about to become.
Version: 1.13.2
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: janus
Tags: photography, portfolio, ecommerce, woocommerce, dark, custom-menu, translation-ready
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root{
  --ink:        #0E0D0C;
  --ink-soft:   #17140F;
  --ink-raise:  #1F1B15;
  --bone:       #EDE7DD;
  --bone-dim:   #B9B2A4;
  --gold:       #B08D57;
  --gold-bright:#D9B77E;
  --dusk:       #3B4A5A;
  --dawn:       #C9793D;
  --line:       rgba(237,231,221,0.14);
  --line-strong:rgba(237,231,221,0.28);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; margin:0; }
p{ margin:0 0 1em; }
::selection{ background:var(--gold); color:var(--ink); }

a:focus-visible, button:focus-visible, input:focus-visible, .janus-nav-toggle:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.janus-skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:100;
  background:var(--gold-bright); color:var(--ink);
  padding:.8em 1.3em; font-family:var(--font-body);
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border-radius:var(--radius);
  transition:top .25s var(--ease);
}
.janus-skip-link:focus{ top:1rem; }

.janus-eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 .9em;
}

.janus-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.95em 1.9em;
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone);
  background:transparent;
  border:1px solid var(--gold);
  border-radius:var(--radius);
  text-decoration:none;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.janus-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}
.woocommerce a.added_to_cart{ color:var(--gold-bright); margin-left:1em; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }

.janus-link{ color:var(--gold-bright); text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:2px; }
.janus-link:hover{ border-color:var(--gold-bright); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   2. Header
   ========================================================================== */
.janus-header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,13,12,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.janus-header-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:1.1rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.janus-brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--bone);
  font-family:var(--font-display);
}
.janus-brand-name{ font-size:1.15rem; letter-spacing:.28em; }
.janus-brand-logo a{ display:flex; align-items:center; }
.janus-brand-logo img{ max-height:40px; width:auto; }

.janus-nav-toggle{
  display:none; width:34px; height:34px; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:50%; cursor:pointer; color:var(--bone);
  background:transparent; padding:0; font-size:1rem;
}
.janus-nav-list{ display:flex; gap:2.2rem; }
.janus-nav-list a{
  text-decoration:none; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim);
  transition:color .3s var(--ease);
}
.janus-nav-list a:hover{ color:var(--gold-bright); }
.janus-nav-list a[aria-current="page"]{ color:var(--gold-bright); }

.janus-cart{
  display:flex; align-items:center; gap:.5em;
  text-decoration:none; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim);
}
.janus-cart-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.4em; height:1.4em; border-radius:50%; background:var(--gold);
  color:var(--ink); font-size:.7rem; padding:0 .3em;
}

@media (max-width: 860px){
  /* Toggle only shows, and the nav only collapses, once navigation.js has
     confirmed it's running (html.has-js-nav) — with JS unavailable the
     nav stays in normal flow as a plain, always-visible list. */
  html.has-js-nav .janus-nav-toggle{ display:flex; }
  html.has-js-nav .janus-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--ink-soft); border-bottom:1px solid var(--line);
    padding:1.5rem var(--gutter);
  }
  html.has-js-nav .janus-nav.is-open{ display:block; }
  .janus-nav-list{ flex-direction:column; gap:1.1rem; }
}

/* ==========================================================================
   3. Hero (the threshold)
   ========================================================================== */
.janus-hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:flex-end;
  background:
    linear-gradient(90deg, rgba(59,74,90,0.55) 0%, rgba(14,13,12,0.75) 50%, rgba(201,121,61,0.5) 100%),
    linear-gradient(180deg, transparent 40%, var(--ink) 96%),
    radial-gradient(120% 90% at 0% 0%, var(--dusk) 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 0%, var(--dawn) 0%, transparent 55%),
    var(--ink);
  background-size:cover; background-position:center;
  overflow:hidden;
}
/* One stacked, crossfading layer per hero photo (js/hero-slider.js toggles
   .is-active) — mobile-first, swapped for a larger crop once the viewport
   is wide enough (--hero-img-mobile / --hero-img-desktop, set inline per
   slide in front-page.php). With a single photo (or no JS) the first slide
   just sits there, indistinguishable from the old static hero. */
.janus-hero-slides{ position:absolute; inset:0; z-index:0; }
.janus-hero-slide{
  position:absolute; inset:0;
  background-image:var(--hero-img-mobile);
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.8s var(--ease);
}
.janus-hero-slide.is-active{ opacity:1; }
@media (min-width:800px){
  .janus-hero-slide{ background-image:var(--hero-img-desktop); }
}
/* The "photo fade" from Appearance → Customize → Homepage Hero — one
   darkening layer above every slide, so the title stays legible regardless
   of which (or how many) photos are behind it. --hero-overlay is 0–0.8,
   set inline on .janus-hero from the Customizer's janus_hero_overlay. */
.janus-hero.has-image::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    180deg,
    rgba(14,13,12, calc(var(--hero-overlay, 0.45) * 0.6)),
    rgba(14,13,12, min(calc(var(--hero-overlay, 0.45) * 1.4), 0.92)) 85%
  );
}
.janus-hero-seam{
  position:absolute; top:0; bottom:0; left:50%; z-index:1;
  width:1px; background:linear-gradient(180deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
  transform:translateX(-50%);
}
.janus-hero-seam::before{
  content:""; position:absolute; top:50%; left:50%; width:9px; height:9px;
  background:var(--gold); border-radius:50%; transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px rgba(176,141,87,0.15);
}
.janus-hero-content{
  position:relative; z-index:2;
  max-width:var(--container); margin:0 auto; width:100%;
  padding:0 var(--gutter) 5.5rem;
  text-align:center;
}
@media (max-width:600px){
  .janus-hero-content{ padding-bottom:3rem; }
}
.janus-hero-title{
  font-size:clamp(3.4rem, 11vw, 8rem);
  letter-spacing:.06em;
  line-height:.95;
  color:var(--bone);
  margin:0 0 .4em;
}
.janus-hero-sub{
  max-width:36ch; margin:0 auto 1.8em;
  color:var(--bone-dim); font-size:1.02rem;
}

/* ==========================================================================
   4. Sections & gallery grid
   ========================================================================== */
.janus-section{ max-width:var(--container); margin:0 auto; padding:6rem var(--gutter); scroll-margin-top:6rem; }
@media (max-width:600px){
  .janus-section{ padding:3.5rem var(--gutter); scroll-margin-top:4rem; }
}
.janus-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:2.6rem; border-bottom:1px solid var(--line); padding-bottom:1.6rem; }
.janus-section-title{ font-size:clamp(1.6rem,3vw,2.4rem); }
.janus-section-cta{ text-align:center; margin-top:3rem; }
.janus-empty{ color:var(--bone-dim); text-align:center; padding:3rem 0; }
.janus-section--flush-bottom{ padding-bottom:0; }

/* The shop/category wall: a row-justified, edge-to-edge grid — every photo
   in a row shares the exact same height (js/justified-gallery.js, using
   each card's real aspect ratio), with widths summing to the full row
   width. It runs full-bleed because archive-product.php closes
   .janus-shop-wrap right before this <ul> and reopens it right after —
   the grid is simply never nested inside the max-width container, so it
   needs no viewport-width CSS trickery to escape it. Without JS,
   flex-wrap alone still gives a reasonable wrapped grid — just not
   pixel-exact edge-to-edge. */
.janus-gallery-grid{
  display:flex; flex-wrap:wrap; gap:4px;
  list-style:none; margin:0; padding:0; width:100%;
}
.janus-gallery-grid li.product{
  list-style:none; margin:0;
  /* flex-basis:auto (not a fixed px) so the width justified-gallery.js
     sets inline is what actually renders — a fixed flex-basis always wins
     over width in the flex sizing algorithm, no matter what JS sets.
     width:300px here is only the pre-JS/no-JS fallback size. */
  flex:1 1 auto; width:300px; max-width:100%;
  animation:janus-rise .6s var(--ease) both;
}
.janus-gallery-grid li.product:nth-child(2n){ animation-delay:.05s; }
.janus-gallery-grid li.product:nth-child(3n){ animation-delay:.1s; }

/* Full-bleed here: the photo fills its box edge-to-edge, no mat/frame or
   rounded corners — those belong to the more sculptural single-piece and
   category views, not a dense wall of thumbnails. */
.janus-gallery-grid .janus-card-flip,
.janus-gallery-grid .janus-card-face{ border-radius:0; }
.janus-gallery-grid .janus-card-front{ padding:0; background:none; }
.janus-gallery-grid .janus-card-front img{ object-fit:cover; }

/* The name/price stays reachable on hover/focus via the flip's back face
   (already in the DOM) — showing it as a caption below as well would give
   rows uneven heights depending on how each title wraps, breaking the
   whole point of a justified grid. Hidden visually only: still announced
   to assistive tech, which is what gives each card link its accessible
   name (see content-product.php — no separate aria-label there). */
.janus-gallery-grid .janus-card-caption{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Category tiles — the same row-justified, edge-to-edge wall as the shop
   grid (js/justified-gallery.js handles both), full-bleed via the same
   "close the container early, reopen after" trick in front-page.php and
   archive-product.php. Unlike a piece, the name is printed straight onto
   the photo (.janus-card-name-overlay in content-product_cat.php) since
   these are nav elements, not just decoration. */
.janus-category-grid{
  display:flex; flex-wrap:wrap; gap:4px;
  list-style:none; margin:0 0 4rem; padding:0; width:100%;
}
@media (max-width:600px){
  .janus-category-grid{ margin-bottom:2.5rem; }
}
.janus-category-grid li{
  list-style:none; margin:0;
  /* Same fix as .janus-gallery-grid li.product above: flex-basis:auto so
     the JS-set inline width actually wins, not a fixed px basis. */
  flex:1 1 auto; width:300px; max-width:100%;
  animation:janus-rise .6s var(--ease) both;
}
.janus-category-grid li:nth-child(2n){ animation-delay:.05s; }
.janus-category-grid li:nth-child(3n){ animation-delay:.1s; }

.janus-category-grid .janus-card-flip,
.janus-category-grid .janus-card-face{ border-radius:0; }
.janus-category-grid .janus-card-front{ padding:0; background:none; }
.janus-category-grid .janus-card-front img{ object-fit:cover; }
.janus-category-grid .janus-card-caption{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.janus-card-name-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.4rem 1.2rem 1.1rem;
  font-family:var(--font-display); font-size:1.2rem; color:var(--bone);
  text-shadow:0 2px 10px rgba(0,0,0,0.7);
}
.janus-card-link{ display:block; text-decoration:none; color:inherit; }
.janus-card-flip{
  position:relative; aspect-ratio:var(--card-ratio, 4/5); perspective:1800px;
  background:var(--ink-soft); border-radius:var(--radius);
}
.janus-card-inner{
  position:relative; width:100%; height:100%;
  transition:transform .8s var(--ease);
  transform-style:preserve-3d;
}
/* Keyboard focus flips the card on any device — hover is reserved for
   fine-pointer devices below, since touch has no hover state to fire it. */
.janus-card-link:focus-visible .janus-card-inner{ transform:rotateY(180deg); }
@media (hover:hover) and (pointer:fine){
  .janus-card-link:hover .janus-card-inner{ transform:rotateY(180deg); }
}
.janus-card-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--radius); overflow:hidden;
}
/* Matted, not stretched: the photo sits inside a small frame and shows
   in full (object-fit:contain) rather than being cropped or forced to
   fill a box shape it doesn't naturally have. */
.janus-card-front{ padding:clamp(.4rem, 1.4vw, .7rem); background:var(--ink-soft); }
.janus-card-front img{ width:100%; height:100%; object-fit:contain; }
.janus-card-front::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(14,13,12,0.75) 100%);
  pointer-events:none;
}
.janus-badge{
  position:absolute; top:.9rem; left:.9rem; z-index:2;
  font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:var(--gold-bright);
  padding:.35em .7em; border-radius:2px;
}
.janus-card-back{
  background:var(--ink-raise); border:1px solid var(--line);
  transform:rotateY(180deg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:1.6rem;
}
.janus-card-ring{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.janus-card-title{ font-size:1.15rem; margin-bottom:.5em; }
.janus-card-price{ color:var(--bone-dim); font-size:.9rem; margin-bottom:1.2em; }
.janus-card-price ins{ text-decoration:none; color:var(--gold-bright); }
.janus-card-price del{ opacity:.5; margin-right:.4em; }
.janus-card-cta{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-bright); }

/* Gallery-only pieces (no price set, or price 0 — see
   janus_product_is_gallery_only() in functions.php) leave these empty;
   collapse them instead of showing a blank line/gap. !important because
   several later, equally-specific .price rules (single product, toolbar)
   would otherwise win by source order and reintroduce the gap. */
.price:empty,
.janus-card-price:empty{ display:none !important; margin:0 !important; }

.janus-card-caption{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding-top:1rem; font-size:.85rem; line-height:1.4;
}
.janus-card-caption .janus-card-name{ color:var(--bone); min-width:0; }
.janus-card-caption .price{
  color:var(--bone-dim); font-size:.85rem; text-align:right;
  white-space:nowrap; flex-shrink:0;
}
.janus-card-caption .price ins{ text-decoration:none; color:var(--gold-bright); }

/* ==========================================================================
   5. Shop archive
   ========================================================================== */
.janus-shop-wrap{ max-width:var(--container); margin:0 auto; padding:5rem var(--gutter) 7rem; }
@media (max-width:600px){
  .janus-shop-wrap{ padding:2.5rem var(--gutter) 3.5rem; }
}
.janus-shop-header{ text-align:center; margin-bottom:3rem; }
.janus-shop-title{ font-size:clamp(2rem,4vw,3rem); }
/* Category/tag description (WooCommerce's own woocommerce_archive_description
   output) — a quiet subtitle under the title, same voice as the hero sub. */
.janus-shop-header .term-description{
  max-width:52ch; margin:.9rem auto 0; color:var(--bone-dim); font-size:1rem;
}
.janus-shop-header .term-description p:last-child{ margin-bottom:0; }

/* Labels above the sub-category tiles and the category's own pieces, only
   present when a category actually has sub-categories to separate from. */
.janus-shop-subhead{ margin:0 0 1.4rem; }
.janus-shop-wrap > .janus-category-grid{ margin-bottom:4rem; }
.janus-shop-wrap > .janus-category-grid + .janus-shop-subhead{ margin-top:0; }
@media (max-width:600px){
  .janus-shop-wrap > .janus-category-grid{ margin-bottom:2.5rem; }
}

.janus-shop-toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:1rem; margin-bottom:2.6rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line);
}
.woocommerce-result-count, .woocommerce-ordering{
  font-size:.78rem; letter-spacing:.06em; color:var(--bone-dim); margin:0;
}
.woocommerce-ordering select{
  -webkit-appearance:none; appearance:none;
  background-color:var(--ink-soft); color:var(--bone); border:1px solid var(--line-strong);
  padding:.65em 2.3em .65em 1em; font-family:var(--font-body); font-size:.78rem;
  border-radius:var(--radius); width:auto; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23D9B77E' stroke-width='1.4' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9em center;
}
.woocommerce-ordering select:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message{
  max-width:var(--container); margin:2rem auto 0; padding:1em 1.4em;
  border:1px solid var(--line-strong); background:var(--ink-soft); color:var(--bone);
  list-style:none;
}

/* -- fallback: if the theme's woocommerce/ template overrides above ever
   fail to load for the same reason single-product.php did, WooCommerce's
   own default archive markup (ul.products > li.product) still gets a
   premium look from this alone. Harmless and inert if the overrides ARE
   loading, since class names don't collide with .janus-card. -- */
ul.products{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,2rem);
  list-style:none; margin:0; padding:0;
}
@media (max-width:960px){ ul.products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ ul.products{ grid-template-columns:1fr; } }
ul.products li.product{
  position:relative; background:var(--ink-soft); border:1px solid var(--line); overflow:hidden;
}
ul.products li.product a.woocommerce-loop-product__link{ display:block; text-decoration:none; color:inherit; }
ul.products li.product img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform .7s var(--ease);
}
ul.products li.product:hover img{ transform:scale(1.045); }
ul.products li.product h2.woocommerce-loop-product__title{
  font-size:1rem; padding:1rem 1.1rem .15rem; margin:0; font-family:var(--font-display);
}
ul.products li.product .price{
  display:block; padding:0 1.1rem 1.1rem; color:var(--gold-bright); font-family:var(--font-display); font-size:.95rem;
}
ul.products li.product .price del{ color:var(--bone-dim); opacity:.6; margin-right:.4em; }
ul.products li.product a.button{
  display:block; margin:0 1.1rem 1.1rem; text-align:center; font-size:.68rem;
}

/* ==========================================================================
   6. Single product (the piece)
   ========================================================================== */
/* The photo is the product, so it gets the full width of the wrap; title,
   price and the add-to-cart panel sit in a narrower, readable column
   underneath — the "threshold" seam becomes the line between the two. */
.janus-single-wrap{
  position:relative;
  max-width:1760px; margin:0 auto;
  padding:2rem var(--gutter) 3rem;
}
@media (max-width:600px){
  .janus-single-wrap{ padding-bottom:2rem; }
}

/* -- the frame: photo presented like a matted print, not a raw <img> -- */
@keyframes janus-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes janus-rise-in{ from{ opacity:0; transform:translateY(22px) scale(.985); } to{ opacity:1; transform:translateY(0) scale(1); } }
.janus-single-media{ animation:janus-rise-in 1.1s var(--ease) both; }
.janus-single-info{ animation:janus-rise .9s var(--ease) .16s both; }

.janus-single-media{ width:100%; margin-bottom:3rem; }
.janus-single-info{
  position:relative;
  max-width:640px; margin:0 auto; padding-top:3rem;
}
.janus-single-info::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong) 15%, var(--line-strong) 85%, transparent);
}
.janus-single-info::after{
  content:""; position:absolute; top:0; left:50%; width:8px; height:8px;
  background:var(--gold); border-radius:50%; transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px rgba(176,141,87,0.14);
}
.woocommerce-product-gallery{
  position:relative;
  background:
    linear-gradient(155deg, rgba(237,231,221,0.05), transparent 40%),
    var(--ink-soft);
  /* Bottom-weighted mat — the same asymmetry a real framer cuts a mount
     with, rather than a uniform border on all four sides. */
  padding:2.2rem 2.2rem 3.6rem;
  box-shadow:
    inset 0 1px 0 rgba(237,231,221,0.07),
    inset 0 0 0 1px rgba(217,183,126,0.22),
    0 3px 10px rgba(0,0,0,0.35),
    0 60px 110px -35px rgba(0,0,0,0.85);
  width:100%;
  /* Cap the frame's height to what fits comfortably in one screen, so a
     portrait shot is contained (whole image visible, letterboxed) rather
     than stretched to full width and forcing a scroll just to see it all. */
  height:min(86vh, 1060px);
  box-sizing:border-box;
}
/* No border/box-shadow on the wrapper itself: with object-fit:contain a
   letterboxed photo doesn't fill this box, so a line drawn on it (as
   opposed to on the mat above, which is always the true outer rectangle)
   would cut across empty mat space instead of hugging the photo. */
.woocommerce-product-gallery__wrapper{
  position:relative !important; margin:0; padding:0; overflow:hidden;
  width:100% !important; height:100% !important;
}
.woocommerce-product-gallery ul.slides{ margin:0; padding:0; list-style:none; width:100% !important; height:100% !important; }
.woocommerce-product-gallery ul.slides li{ height:100% !important; }
.woocommerce-product-gallery .flex-viewport{ margin:0; width:100% !important; height:100% !important; }
.woocommerce-product-gallery__image{ position:relative; width:100% !important; height:100% !important; }
.woocommerce-product-gallery__image a{ display:block; width:100%; height:100%; }
.woocommerce-product-gallery__image img{
  width:100% !important; max-width:100% !important; height:100% !important;
  object-fit:contain !important; display:block; margin:0 auto;
}
@media (max-width:600px){
  .woocommerce-product-gallery{ height:min(64vh, 700px); padding:1.1rem 1.1rem 2rem; }
}
.woocommerce-product-gallery .flex-direction-nav{ display:none; } /* thumbnails below handle navigation */

.woocommerce-product-gallery__trigger{
  position:absolute; right:1.4rem; bottom:1.4rem; z-index:3;
  width:42px; height:42px; border-radius:50%;
  background:rgba(14,13,12,0.72); border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--gold-bright);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.woocommerce-product-gallery__trigger::before{ content:"+"; font-size:1.5rem; line-height:1; }
.woocommerce-product-gallery__trigger:hover{ background:var(--gold); color:var(--ink); }

.flex-control-thumbs{ display:flex; flex-wrap:wrap; gap:.6rem; margin:.85rem 0 0; padding:0; }
.flex-control-thumbs li{ list-style:none; width:64px; }
.flex-control-thumbs img{ border:1px solid transparent; opacity:.55; cursor:pointer; transition:.3s; }
.flex-control-thumbs img:hover, .flex-control-thumbs .flex-active{ opacity:1; border-color:var(--gold); }

/* -- acquire panel: the add-to-cart form gets real visual weight -- */
.woocommerce div.product form.cart{
  padding:1.5rem 1.7rem; border:1px solid var(--line-strong); background:var(--ink-soft);
  margin:0 0 1.8rem;
}

.janus-single-info .product_title{ font-size:clamp(2.1rem,3.8vw,3rem); line-height:1.05; margin-bottom:.35em; }
.janus-single-info .price{ display:block; font-size:1.4rem; color:var(--gold-bright); margin:0 0 1.6em; font-family:var(--font-display); letter-spacing:.01em; }
.janus-single-info .price del{ color:var(--bone-dim); opacity:.6; font-size:.9em; margin-right:.5em; }
.janus-single-info .woocommerce-product-details__short-description{ color:var(--bone-dim); margin-bottom:1.8em; }
.janus-single-info .woocommerce-product-details__short-description p:last-child{ margin-bottom:0; }

.woocommerce div.product form.cart{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.woocommerce div.product form.cart .quantity{ margin:0; }
.woocommerce div.product form.cart .quantity input{
  width:64px; padding:.9em .6em; background:transparent; border:1px solid var(--line-strong);
  color:var(--bone); font-family:var(--font-body); text-align:center; border-radius:var(--radius);
}
.product_meta{ font-size:.8rem; color:var(--bone-dim); border-top:1px solid var(--line); padding-top:1.4em; }
.product_meta > span{ display:block; margin-bottom:.4em; }
.product_meta a{ color:var(--bone-dim); text-decoration:underline; }

.woocommerce-product-rating{ margin-bottom:1em; font-size:.85rem; color:var(--bone-dim); }
.star-rating{ color:var(--gold); }

.janus-single-notes{ max-width:1560px; margin:0 auto; padding:0 var(--gutter) 6rem; border-top:1px solid var(--line); }
@media (max-width:600px){
  .janus-single-notes{ padding-bottom:3rem; }
}

/* -- tabs: Notes on the Print / Reviews, restyled to match the site nav -- */
.woocommerce-tabs{ margin-top:3.5rem; max-width:70ch; }
.woocommerce-tabs ul.tabs{
  display:flex; gap:2.4rem; margin:0 0 2rem; padding:0; list-style:none;
  border-bottom:1px solid var(--line);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.woocommerce-tabs ul.tabs li{ margin:0; }
.woocommerce-tabs ul.tabs li a{
  display:inline-block; padding-bottom:1rem; margin-bottom:-1px;
  text-decoration:none; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-dim); border-bottom:1px solid transparent; transition:color .3s var(--ease);
}
.woocommerce-tabs ul.tabs li.active a{ color:var(--gold-bright); border-color:var(--gold-bright); }
.woocommerce-tabs .panel{ color:var(--bone-dim); }
.woocommerce-tabs .panel h2{ font-size:1.05rem; color:var(--bone); margin-bottom:.9em; }
.woocommerce-tabs .panel p{ margin-bottom:1em; }
#reviews .comment-form-rating label,
#reviews label{ color:var(--bone-dim); font-size:.85rem; }
#reviews #respond input[type="text"], #reviews #respond input[type="email"], #reviews #respond textarea{
  background:var(--ink-soft); border:1px solid var(--line-strong); color:var(--bone); padding:.7em 1em;
}
#reviews ol.commentlist{ list-style:none; padding:0; margin:1.5rem 0; }
#reviews ol.commentlist li{ border-bottom:1px solid var(--line); padding:1.2rem 0; }

/* -- related & upsell products: same grid language as the archive -- */
.janus-single-notes section.related,
.janus-single-notes section.upsells{ margin-top:4.5rem; }
.janus-single-notes section.related h2,
.janus-single-notes section.upsells h2{ font-size:1.5rem; margin-bottom:2rem; }
.janus-single-notes ul.products{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); align-items:start;
  gap:clamp(1rem,2vw,2rem); list-style:none; padding:0;
}
.janus-single-notes ul.products.has-js-masonry li.product{ position:absolute; top:0; left:0; margin:0; }
.janus-single-notes ul.products li.product{ margin-bottom:clamp(1rem,2vw,2rem); }
@media (max-width:960px){ .janus-single-notes ul.products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .janus-single-notes ul.products{ grid-template-columns:1fr; } }

/* ==========================================================================
   7. Cart / checkout / account (kept in-brand, generic-styled)
   ========================================================================== */
.janus-woo-generic{ max-width:900px; margin:0 auto; padding:1rem var(--gutter) 7rem; }
@media (max-width:600px){
  .janus-woo-generic{ padding-bottom:3.5rem; }
}
.woocommerce table.shop_table{
  width:100%; border-collapse:collapse; margin:0 0 2rem;
  border:1px solid var(--line); font-size:.9rem;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td{
  padding:1em; border-bottom:1px solid var(--line); text-align:left;
}
.woocommerce table.shop_table thead th{
  text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--gold);
}
.woocommerce-cart-form .quantity input, .woocommerce input[type="text"], .woocommerce input[type="email"],
.woocommerce input[type="tel"], .woocommerce input[type="password"], .woocommerce textarea, .woocommerce select{
  background:var(--ink-soft); border:1px solid var(--line-strong); color:var(--bone);
  padding:.8em 1em; border-radius:var(--radius); font-family:var(--font-body); width:100%;
}
.woocommerce form .form-row label{ font-size:.8rem; color:var(--bone-dim); }
.woocommerce-checkout-review-order-table{ background:var(--ink-soft); }
.cart-empty, .return-to-shop{ color:var(--bone-dim); }

/* ==========================================================================
   8. Pages / blog fallback
   ========================================================================== */
.janus-page{ max-width:820px; margin:0 auto; padding:5rem var(--gutter) 7rem; }
@media (max-width:600px){
  .janus-page{ padding:2.5rem var(--gutter) 3.5rem; }
}
.janus-page h1{ font-size:clamp(2rem,4vw,3rem); margin-bottom:1em; }
.janus-page .entry-content > *{ color:var(--bone-dim); }

/* ==========================================================================
   9. Footer
   ========================================================================== */
.janus-footer{ border-top:1px solid var(--line); padding:4rem 0; }
@media (max-width:600px){
  .janus-footer{ padding:2.5rem 0; }
}
.janus-footer-inner{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:flex; flex-direction:column; align-items:center; gap:.8rem; text-align:center;
}
.janus-footer-mark{ font-family:var(--font-display); letter-spacing:.3em; color:var(--gold-bright); font-size:1rem; }
.janus-footer-tag{ color:var(--bone-dim); font-size:.85rem; margin:0; }
.janus-footer-list{ display:flex; gap:1.6rem; margin-top:1rem; }
.janus-footer-list a{ text-decoration:none; color:var(--bone-dim); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.janus-footer-list a:hover{ color:var(--gold-bright); }