/* =====================================================================
   GOKUDO product gallery and feature block. One view renders this markup
   now, the product detail page (is_product(), see inc/assets.php), and one
   view loads this file. The front page showed the same block until it moved
   to the product card, and the shape of this file still follows from having
   had two callers: the differences one of them wanted (media padding, thumb
   size, feature-media height, spec-row layout) sit as commented overrides in
   that view's own stylesheet rather than here. Keep that split. A second
   view can render the block again, and single-product.css is then the one
   that reads as a decision.
   gallery.js injects the .gal-nav arrows and drives the drag/fade
   interaction.
   ===================================================================== */
.gal-stage{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gal-stage:active{cursor:grabbing}
.gal-stage img{-webkit-user-drag:none;user-drag:none}

/* Prev/next arrows: text glyphs, no external icon font.
   The :focus and :active states hold the resting fill. base.css says why. */
.gal-nav,.gal-nav:is(:focus,:active){position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;
	display:flex;align-items:center;justify-content:center;
	background:var(--veil);border:1px solid var(--line);color:var(--ink);
	font-family:var(--label);font-size:18px;line-height:1;cursor:pointer;
	transition:background .2s,color .2s,border-color .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.gal-nav:hover{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.gal-prev{left:14px}
.gal-next{right:14px}

/* ============ FEATURE PRODUCT (gallery + info panel) ============ */
.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:stretch}
.feature-media{position:relative;background:var(--surface);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.feature-media .bignum{position:absolute;left:20px;top:2px;z-index:1;font-family:var(--display);font-size:170px;line-height:.8;letter-spacing:var(--track-xl);color:var(--wash-lg);pointer-events:none}
.gal-thumbs{display:flex;flex-direction:row;gap:12px;justify-content:center;flex-wrap:wrap;padding:16px;border-top:1px solid var(--line2)}
/* .gal-thumb size (70px home / 74px PDP) stays as a per-view override.
   A thumbnail marks its states on the border, never on the ground: the img below
   composites against this fill, so a repaint of the ground tints the whole picture.
   All three states therefore hold it. base.css says why the states have to be named. */
.gal-thumb,.gal-thumb:is(:hover,:focus,:active){position:relative;border:1px solid var(--line);background:var(--bg2);cursor:pointer;padding:5px;transition:border-color .2s}
/* The product images sit on a white ground. mix-blend-mode:multiply turns that
   white into the fill behind the picture, so the picture needs no ground of the
   same color. It also darkens the subject on a fill that is not white, by the
   value of that fill. It is unified here so both views composite the art the
   same way. */
.gal-thumb img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.gal-thumb:hover{border-color:var(--ink)}
.gal-thumb.active{border-color:var(--blue)}
.gal-thumb.active::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--blue)}
.gal-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* .gal-stage img padding (26px home / 30px PDP) stays as a per-view override.
   mix-blend-mode:multiply unified for the same reason as .gal-thumb img above.
   The picture is taken out of flow so that it cannot set the height of the block it
   sits in. height:100% has nothing definite to resolve against here, so an in-flow
   picture falls back to its own proportions and hands the row its natural height. The
   gallery holds pictures of two shapes, and the row would then change height on a
   thumbnail click, carrying the panel beside it along. Out of flow, the height comes
   from the panel and the stage in every slide. inset:0 with border-box keeps the
   padding above doing what it did. */
.gal-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:2;transition:opacity .35s ease;mix-blend-mode:multiply}
.gal-stage img.fade{opacity:0}
.feature-info{display:flex;flex-direction:column;justify-content:space-between;background:var(--bg2);border:1px solid var(--line);padding:46px 44px}
.feature-info .pname{font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,68px);line-height:.9;text-transform:uppercase;letter-spacing:var(--track-lg)}
.feature-info .pname em{font-style:normal;color:var(--blue)}
.feature-info .pdesc{color:var(--muted);font-size:17px;line-height:1.7;margin:22px 0 30px;max-width:460px}
.specs{border-top:1px solid var(--line);margin-bottom:30px}
/* .specrow gap (PDP-only 16px) stays as a per-view override */
.specrow{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line2);font-size:13px}
.specrow span:first-child{color:var(--faint);font-family:var(--label);font-size:11px;letter-spacing:.15em;text-transform:uppercase}
/* .specrow span:last-child text-align (PDP-only right) stays as a per-view override */
.specrow span:last-child{color:var(--ink);font-weight:600}
.buyrow{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.price{font-family:var(--display);font-size:40px;line-height:1;letter-spacing:var(--track-md)}
.price small{font-family:var(--label);font-size:12px;color:var(--muted);letter-spacing:.1em;margin-left:8px}
.sizes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
/* .sizes button box and label size stay as per-view overrides: the pill was 10px 13px
   on a 46px minimum for the home rail, and the PDP states a box of its own. The
   font-size here is the block's own, and a view that wants a bigger label restates it
   with the box that holds against it. */
/* A control on the --bg2 panel takes the --surface fill. Without it, the button shows
   the panel through it and reads as disabled. */
.sizes button{background:var(--surface);border:1px solid var(--line);color:var(--muted);font-family:var(--label);font-size:12px;cursor:pointer;transition:.18s}
.sizes button:hover{border-color:var(--ink);color:var(--ink)}
.sizes button.sel{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.addcart{width:100%;border:none;cursor:pointer;font-size:13px;letter-spacing:.22em;padding:20px;position:relative;overflow:hidden;transition:.25s}
.addcart:active{transform:scale(.99)}

/* ============ DETAILS grid (product close-up cards) ============ */
/* .details margin-top (home-only 30px, sits directly under the feature block with
   no wrapping section) stays as a per-view override */
.details{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.dcard{background:var(--bg2);border:1px solid var(--line)}
/* The square box keeps the three cards the same height, and each close-up is a square
   (pr_detailN_image). contain, not cover: a close-up must show the whole picture, and a
   picture of a different shape than the box loses its edges under cover. No multiply
   here: each close-up has the --bg2 fill of the card in its ground, so the subject keeps
   its own color. Multiply would darken that ground to a second grey. */
.dcard img{width:100%;aspect-ratio:1/1;object-fit:contain}
.dcard .cap{padding:16px 18px}
.dcard .cap b{font-size:14px;letter-spacing:.02em;color:var(--ink)}

@media(max-width:980px){
	.feature{grid-template-columns:1fr}
	/* Side by side, the stage takes its height from the row, and the panel beside it is
	   what sets that. Stacked, there is no panel to take it from, and the picture cannot
	   give it one: the picture is out of flow so that a slide of a different shape does
	   not move the layout. A ratio of its own answers both. The stage then scales with
	   the width it is given, and every slide lands in the same box.
	   The .feature-media min-height below it is still the floor on a narrow phone, where
	   the ratio alone would leave the object too small to read. */
	.gal-stage{aspect-ratio:4/3}
	/* .feature-media min-height (420px home / 440px PDP) stays a per-view override */
	.gal-thumb{width:60px;height:60px}
	.details{grid-template-columns:1fr}
}
@media(max-width:560px){
	.gal-nav{width:38px;height:38px;font-size:16px}
	.gal-prev{left:8px}
	.gal-next{right:8px}
	/* Left-align a lone last thumbnail row. */
	.gal-thumbs{justify-content:flex-start}
	.feature-info{padding:32px 24px}
}