/* =====================================================================
   GOKUDO: product detail layout (single-product.php). Loaded on the
   'product' context (is_product()), resolved by inc/assets.php, alongside
   gallery.css. Shared banner, footer, wrap, label, toast, and reveal live in
   base.css, loaded site-wide. This page drives the live WooCommerce cart.
   ===================================================================== */

/* ============ FULL WIDTH ============
   This page runs edge to edge, the same as the catalog. Every other page caps its
   content at .wrap's 1320px, which is a reading measure, and the width this page is
   given goes to the object instead: the gallery is the argument the page makes, and a
   wider frame draws the shoe larger rather than setting a longer line of text. The
   information panel beside it keeps the width it has at the cap, so the media column is
   the only one that grows. See .feature under FEATURE PRODUCT.
   The cap is lifted inside <main> only. The banner and the footer are chrome, and chrome
   that changed width on one page would read as the page being misaligned.
   Only max-width is touched, so the gutter and its 24px step at 980px stay base.css's
   and are not restated here. */
body.gokudo-single-product main .wrap{max-width:none}

/* ============ BREADCRUMB ============ */
.dethead{background:var(--bg);padding:34px 0 26px}
.dethead .crumb{display:flex;align-items:center;gap:10px;color:var(--faint);flex-wrap:wrap}
.dethead .crumb a{color:var(--faint);transition:color .2s}
.dethead .crumb a:hover{color:var(--blue)}
.dethead .crumb .sep{color:var(--line)}
.dethead .crumb .cur{color:var(--ink)}

/* ============ FEATURE PRODUCT ============
   The gallery + feature-info + details-grid rules for this section live in gallery.css,
   which this is now the only view to load. The four figures below stay here rather than
   in gallery.css: they are this view's, and gallery.css holds what any view rendering
   the block would take. gallery.css says why that split survives one caller. */
#product{padding:54px 0 100px;background:var(--bg)}
/* Media height. The row stretches, so this block is as tall as this floor or as tall as
   the information panel, whichever is more. The picture is contained, so that height is
   what sets how large the object draws on a wide window. The column there keeps taking
   width the picture cannot use.
   The floor follows the viewport for that reason. 72vh keeps the block inside a short
   window. 36vw holds it back on a tall narrow one, where the picture is limited by its
   width and more height is empty ground above and below it. 620px is the floor under
   both, and 1040px is the cap.
   The panel beside it is space-between, so the height the floor adds opens between the
   specification table and the buy controls. */
.feature-media{min-height:clamp(620px,min(36vw,72vh),1040px)}
/* Main stage image padding, over gallery.css's own */
.gal-stage img{padding:30px}
/* Thumbnail size, over gallery.css's own */
.gal-thumb{width:74px;height:74px}
/* Where the page's extra width goes. The information panel holds the 575px it is given
   at the cap, and the media column takes the rest, so a wider window is a larger object
   and not a wider column of specifications.
   1320px is where the cap stopped mattering. It is a border-box width, so it holds the
   two 40px gutters inside itself, and a window at 1320 gives the same 1240 of content
   capped or not. Under that width this rule is off and the 1.05fr/.95fr split in
   gallery.css still sizes both columns, which is what those windows already showed.
   575px is that split's own figure for the panel, stated here as the fixed track: at
   1320 the two rules meet on the same pair of columns and nothing steps. */
@media(min-width:1320px){
	.feature{grid-template-columns:minmax(0,1fr) 575px}
}

/* Placeholder for products with no image */
.pc-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:clamp(140px,22vw,240px);color:var(--wash-lg);user-select:none;pointer-events:none}

.fi-meta{display:flex;align-items:center;gap:12px;margin-bottom:22px;color:var(--blue);font-family:var(--label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;flex-wrap:wrap}
/* This page's spec rows carry a gap and right-align their value column. The rows in
   gallery.css do neither. */
.specrow{gap:16px}
.specrow span:last-child{text-align:right}
.price-soon{color:var(--muted)}
.sizelab{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;font-family:var(--label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.sizelab a{color:var(--blue)}
/* Size-pill box and label, over gallery.css's own. This is the control the reader picks
   from, so the label takes a size it can be read at from the distance the page is held.
   height and line-height hold the box off the font, and the label then sets nothing but
   itself. The width still comes from min-width: the widest label the store carries is
   16px against 48px of box. */
.sizes button{display:flex;align-items:center;justify-content:center;height:45px;padding:0 14px;min-width:48px;font-size:14px;line-height:1}
/* Sold-out size: disabled and struck through, not clickable */
.sizes button.soldsize,.sizes button[disabled]{opacity:.34;cursor:not-allowed;text-decoration:line-through;border-style:dashed;pointer-events:none}
.sizes button.soldsize:hover,.sizes button[disabled]:hover{border-color:var(--line);color:var(--muted)}
/* Quantity stepper (- 1 +) */
.qtyrow{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.qtylab{font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* The same --surface fill as the size buttons above. The buttons and the field inside
   stay transparent, so this fill shows through all three. */
.qtybox{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--surface)}
/* The :focus and :active states hold the resting fill. base.css says why. */
.qtybtn,.qtybtn:is(:focus,:active){width:42px;height:44px;background:transparent;border:none;cursor:pointer;font-size:18px;color:var(--ink);font-family:var(--label);line-height:1;transition:.15s}
.qtybtn:hover{background:var(--ink);color:var(--on-dark)}
/* Kadence styles input[type=number] at (0,1,1) with a full border and a white fill, and
   its :focus at (0,2,1) with outline:0. A bare .qtyinp scores (0,1,0) and loses to both,
   so the field draws a border inside .qtybox and doubles its top and bottom edges. The
   type in the selector lifts the rule to (0,2,0), and :focus to (0,3,0), over both.
   The ring sits inside the field, because the buttons on each side touch it. */
.qtyinp[type=number],.qtyinp[type=number]:focus{width:52px;height:44px;text-align:center;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);background:transparent;color:var(--ink);font-family:var(--label);font-size:14px;-moz-appearance:textfield}
.qtyinp[type=number]:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.qtyinp::-webkit-outer-spin-button,.qtyinp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* "Join the Register" takes the layout of the add-to-cart that it replaces. */
.addcart-soon{display:block;text-align:center;text-decoration:none}

/* The row that holds the promo badges, and the struck-through original price. The badge
   itself is in components.css: this page and the catalog card render the same one. */
.pd-flags{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
/* Half the figure it sits beside. The struck price is what the current one is read
   against, so it takes a size that is read rather than noticed. It stays subordinate on
   three counts the size does not touch: the label face against the display one, --faint
   against --ink, and the normal weight. */
.price del{font-family:var(--label);font-size:20px;color:var(--faint);margin-left:10px;font-weight:400;letter-spacing:.02em}

/* ============ DETAILS ============ */
#details{padding:0 0 110px;background:var(--bg)}
/* The same step as .lineup-head on the front page: a heading
   that opens a row of cards. */
.details-head{font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,76px);line-height:.92;
	text-transform:uppercase;letter-spacing:var(--track-lg);margin-bottom:52px}
.details-head em{font-style:normal;color:var(--blue)}
/* Force the card image to block level. gallery.css's .dcard grid does not set it. */
.dcard img{display:block}

/* ============ NEXT OBJECT ============ */
.nextobj{padding:80px 0;background:var(--bg)}
.nextobj-in{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;border:1px solid var(--line);padding:46px 50px;background:var(--bg2)}
.nextobj h3{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.4vw,46px);text-transform:uppercase;letter-spacing:var(--track-md);line-height:.95}
.nextobj h3 em{font-style:normal;color:var(--blue)}
.nextobj p{color:var(--muted);font-size:16px;margin-top:12px;max-width:440px;line-height:1.6}
.nextobj a.btn{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.2em;padding:18px 28px;transition:.22s}

/* ============ SIZE GUIDE modal (shared shoe size chart) ============ */
.sizelab .sizeguide-open{background:none;border:none;cursor:pointer;color:var(--blue);font-family:var(--label);
	font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:0;text-decoration:underline;text-underline-offset:3px}
.sizelab .sizeguide-open:hover{color:var(--ink)}
.sizeguide-overlay{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;
	background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s}
.sizeguide-overlay.open{opacity:1;visibility:visible}
.sizeguide-overlay[hidden]{display:none}
.sizeguide-modal{background:var(--bg);border:1px solid var(--line);max-width:460px;width:100%;max-height:86vh;overflow-y:auto;
	transform:translateY(14px);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.sizeguide-overlay.open .sizeguide-modal{transform:none}
.sg-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid var(--line)}
.sg-head h3{font-family:var(--display);font-weight:700;font-size:26px;text-transform:uppercase;letter-spacing:var(--track-sm)}
.sg-head h3 .label{font-size:11px;color:var(--muted);letter-spacing:.2em;margin-left:8px}
/* This close control marks its states on the glyph color alone, so all three hold the
   empty ground. base.css says why the states have to be named. */
.sg-x,.sg-x:is(:hover,:focus,:active){background:none;border:none;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;transition:color .2s}
.sg-x:hover{color:var(--ink)}
.sg-body{padding:22px 26px 28px}
.sg-note{font-size:13px;color:var(--muted);line-height:1.65;margin-bottom:18px}
.sg-table{width:100%;border-collapse:collapse}
.sg-table th{font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.sg-table td{font-family:var(--label);font-size:13px;color:var(--ink);padding:11px 12px;border-bottom:1px solid var(--line2)}

/* ---- "Join the Register" modal for Coming Soon products, reusing the .sizeguide shell ---- */
.rg-prod{font-family:var(--display);font-size:20px;text-transform:uppercase;letter-spacing:var(--track-sm);margin-bottom:8px}
.rg-form{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.rg-form[hidden]{display:none}
.rg-field{display:flex;flex-direction:column;gap:7px}
.rg-lab{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.rg-lab em{font-style:normal;color:var(--muted);text-transform:none;letter-spacing:0}
.rg-form input[type=email],.rg-form select{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--ink);font-family:var(--body);font-size:15px;padding:13px 14px;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.rg-form input[type=email]:focus,.rg-form select:focus{border-color:var(--blue)}
.rg-submit{border:none;cursor:pointer;font-size:12px;letter-spacing:.16em;padding:15px;transition:background .2s,color .2s}
.rg-msg{min-height:1em;font-size:13px;color:var(--blue);margin:2px 0 0}
.rg-done{text-align:center;padding:12px 0 6px}
.rg-done-mark{font-family:var(--display);font-size:34px;color:var(--blue);text-transform:uppercase;margin-bottom:12px;letter-spacing:var(--track-md)}
.rg-done p{color:var(--muted);font-size:14px;line-height:1.7}

/* ============ RESPONSIVE ============
   The .feature, .gal-thumb, .details, .feature-info and .gal-thumbs
   breakpoints live in gallery.css, and the .gk-feature-list column count lives in
   components.css, which every view loads. Only this page's own .feature-media height
   and .nextobj-in padding stay here.
   The one step above the cap is not here either: it sits with .feature under
   FEATURE PRODUCT, because the column split is what that grid is rather than an
   adjustment to it. */
@media(max-width:980px){
	.feature-media{min-height:440px}
}
@media(max-width:560px){
	.nextobj-in{padding:32px 26px}
}