/* =====================================================================
   GOKUDO cart page layout (wc-cart.php and woocommerce/cart/*.php). It is
   routed by is_cart(), not by slug (see inc/routing.php), and loads on the
   'cart' context in inc/assets.php.
   It shares its visual language with the products page.
   The shared banner, footer, wrap, label, and reveal live in base.css
   (loaded site-wide) and are not repeated here.
   ===================================================================== */

/* The page head (breadcrumb, title) lives in components.css. Cart uses the
   shared values verbatim, with no overrides. */

/* ============ MAIN LAYOUT ============ */
.cartbody{padding:64px 0 110px}
.gk-cart{display:grid;grid-template-columns:1fr 380px;gap:52px;align-items:start}

/* ---- WooCommerce notice bar: coupon applied, item removed with undo, errors ---- */
.gokudo-cart .woocommerce-message,
.gokudo-cart .woocommerce-info,
.gokudo-cart .woocommerce-error,
.gokudo-cart .woocommerce-error li{list-style:none}
.gokudo-cart .woocommerce-message,
.gokudo-cart .woocommerce-info,
.gokudo-cart .woocommerce-error{margin:0 0 30px;padding:16px 20px;background:var(--surface);border:1px solid var(--line);
	border-left:3px solid var(--blue);font-size:14px;color:var(--ink)}
.gokudo-cart .woocommerce-error{border-left-color:var(--ink);background:var(--bg2)}
.gokudo-cart .woocommerce-message a,
.gokudo-cart .woocommerce-info a,
.gokudo-cart .woocommerce-error a{color:var(--blue);font-weight:600}

/* ============ LINE ITEMS ============ */
.gk-lines-head{display:grid;grid-template-columns:1fr 150px 110px 40px;gap:20px;padding:14px 0;color:var(--ink);
	border-bottom:1px solid var(--line2)}
.gk-lines-head .lh-qty,.gk-lines-head .lh-sum{text-align:center}
.gk-line{display:grid;grid-template-columns:120px 1fr 150px 110px 40px;gap:20px;align-items:center;
	padding:26px 0;border-bottom:1px solid var(--line2)}

.gl-media{width:120px;height:90px;background:var(--surface);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.gl-media img{width:100%;height:100%;object-fit:contain;padding:8px;mix-blend-mode:multiply}
.gl-noimg{font-family:var(--display);font-weight:900;font-size:44px;color:var(--wash-sm);user-select:none}

.gl-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.gl-code{font-size:10px;color:var(--blue)}
/* Exception: no link mark at rest. The linked picture beside it goes to the same
   product. */
.gl-name{font-family:var(--display);font-weight:900;font-size:clamp(22px,2.4vw,30px);line-height:.95;text-transform:uppercase;letter-spacing:var(--track-md);transition:color .2s}
.gl-name:hover{color:var(--blue)}
.gl-unit{font-size:10px;color:var(--faint);letter-spacing:.14em}
.gl-unit .woocommerce-Price-amount{font-size:11px;color:var(--muted)}

/* Item data such as size (dl.variation, emitted by wc_get_formatted_cart_item_data) */
.gl-info dl.variation{display:flex;flex-wrap:wrap;gap:4px 6px;margin:1px 0}
.gl-info dl.variation dt,
.gl-info dl.variation dd{margin:0;font-family:var(--label);font-size:10px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--faint)}
.gl-info dl.variation dd{color:var(--ink);font-weight:700}
.gl-info dl.variation dd p{display:inline;margin:0}

.gl-qty{display:flex;align-items:stretch;justify-self:center;border:1px solid var(--line);background:var(--surface)}
/* The :focus and :active states hold the resting fill. base.css says why. */
.gl-step,.gl-step:is(:focus,:active){width:38px;background:transparent;border:none;cursor:pointer;font-size:16px;color:var(--muted);
	font-family:var(--label);transition:.18s;line-height:1}
.gl-step:hover{background:var(--ink);color:var(--on-dark)}
/* Kadence styles input[type=number] at (0,1,1) with a full border, and its :focus at
   (0,2,1) with outline:0. A bare .gl-qin scores (0,1,0) and loses to both, so the field
   draws a border inside .gl-qty and doubles its 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. */
.gl-qin[type=number],.gl-qin[type=number]:focus{width:48px;border:none;border-left:1px solid var(--line2);border-right:1px solid var(--line2);
	text-align:center;font-family:var(--label);font-size:13px;padding:12px 0;background:transparent;color:var(--ink);
	-moz-appearance:textfield;appearance:textfield}
.gl-qin[type=number]:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.gl-qin::-webkit-outer-spin-button,.gl-qin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.gl-sum{text-align:center;font-family:var(--display);font-size:36px;line-height:1;letter-spacing:var(--track-sm)}
.gl-remove{justify-self:center;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
	line-height:1;border:1px solid transparent;transition:.18s}
.gl-remove svg{width:18px;height:18px}
.gl-remove:hover{color:var(--on-dark);background:var(--danger);border-color:var(--danger)}

/* ============ ACTIONS (coupon / update) ============ */
.gk-cart-actions{display:flex;align-items:stretch;gap:14px;padding-top:26px;flex-wrap:wrap}
.gk-coupon{display:flex;align-items:stretch;gap:0;margin-right:auto}
/* Kadence styles input[type=text] at (0,1,1), and its :focus at (0,2,1). The type in the
   selector lifts these rules over both, as on .gl-qin above. Without it, the field keeps a
   right border that doubles the left border of the Apply button. */
.gk-coupon-in[type=text]{width:240px;border:1px solid var(--line);border-right:none;background:var(--surface);padding:0 16px;
	font-family:var(--label);font-size:11px;letter-spacing:.12em;color:var(--ink)}
.gk-coupon-in[type=text]:focus{outline:none;border-color:var(--blue)}
.gk-coupon-in::placeholder{color:var(--faint);text-transform:uppercase}
/* The :focus and :active states hold the resting fill. base.css says why.
   The Update button of the shipping address form takes this button too, as the cart's own
   Update and Apply do: it serves the checkout button below it. It is WooCommerce's output
   with Kadence's .button class, and Kadence styles .button:hover at (0,2,0). Its selector
   at (0,3,0) outscores that. */
.gk-btn-ghost,.gk-btn-ghost:is(:focus,:active),
.gs-shipping .shipping-calculator-form .button,
.gs-shipping .shipping-calculator-form .button:is(:focus,:active){background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer;
	font-family:var(--label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:14px 20px;font-weight:700;transition:.18s}
.gk-btn-ghost:hover,
.gs-shipping .shipping-calculator-form .button:hover{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}

/* ============ TOTALS SUMMARY (right column) ============ */
/* Sticky under a sticky bar, so the offset is the bar plus a gap, never a fixed number. */
.gk-cart-side{position:sticky;top:calc(var(--banner-h) + 24px);background:var(--surface);border:1px solid var(--line);padding:34px 32px 30px}
.gk-cart-side>h3{color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:6px}
.gs-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line2)}
.gs-row .k{color:var(--faint);font-size:10px}
.gs-row .v{font-size:15px;font-weight:600;text-align:right}
/* WooCommerce sets display:flex on the shipping method li at (1,1,2), and a flex item
   ignores text-align. This rule ties that weight and wins on source order, so the method
   sits on the right edge with the other values. */
.gokudo-cart ul#shipping_method li{display:block}
/* The address form under "Change address" uses the full width of the summary. The label
   and the value share one grid cell. The value keeps clear of the label with a left padding,
   and the form cancels that padding with a negative margin. --gs-k is the width of the
   "Shipping" label (64px) plus the 16px gap of .gs-row. A text value that WooCommerce
   prints without an element, such as "Enter your address to view shipping options.", gets
   the padding too. The form is a form, not a value, so it keeps the start alignment. The
   field and label treatment is in components.css. */
.gs-shipping{--gs-k:80px;display:grid;grid-template-columns:minmax(0,1fr);align-items:baseline}
.gs-shipping>.k,.gs-shipping>.v{grid-area:1/1}
.gs-shipping>.v{padding-left:var(--gs-k)}
.gs-shipping .shipping-calculator-form{margin:18px 0 0 calc(-1 * var(--gs-k));text-align:start}
.gs-shipping .shipping-calculator-form .form-row{margin:0 0 14px;padding:0}
/* WooCommerce rounds .woocommerce button.button at (0,2,1), over base.css. */
.gs-shipping .shipping-calculator-form .button{width:100%;border-radius:0}
/* Kadence sets text-underline-offset on a:hover, so the hover rule
   repeats the offset. The arrow points up while the form is open: WooCommerce sets
   aria-expanded on the link. The arrow is decoration, so its alternative text is empty. */
.gs-row .shipping-calculator-button{color:var(--blue);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.gs-row .shipping-calculator-button:hover{color:var(--ink);text-underline-offset:3px}
.gs-row .shipping-calculator-button::after{content:"\2193"/"";display:inline-block;margin-left:6px}
.gs-row .shipping-calculator-button[aria-expanded=true]::after{content:"\2191"/""}
.gs-coupon .v .woocommerce-remove-coupon{color:var(--danger);margin-left:8px;font-size:12px}
.gs-total{border-bottom:none;padding-bottom:24px}
.gs-total .v,.gs-total .v .woocommerce-Price-amount{font-family:var(--display);font-size:52px;font-weight:400;line-height:1;letter-spacing:var(--track-md)}

.gk-checkout-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
	font-size:13px;letter-spacing:.22em;padding:20px;transition:.25s}
/* Kadence sets
   text-underline-offset on a:hover at (0,1,1), so the hover rule repeats the offset to keep
   the line in place. */
.gk-cart-side .gk-continue{display:block;text-align:center;color:var(--blue);font-size:10px;margin-top:16px;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.gk-cart-side .gk-continue:hover{color:var(--ink);text-underline-offset:3px}
.gs-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line2);color:var(--faint);font-size:9.5px;text-align:center}

/* ============ EMPTY CART ============ */
/* The shared shell is .gk-empty in components.css. These are this view's own sizes. */
.gk-empty{padding:40px 0 30px;max-width:560px}
/* The crest is a display glyph with a tall line box. The negative margin closes that gap.
   It sits on the crest, so it does not depend on the optional heading below. */
.gk-empty-crest{font-family:var(--display);font-weight:900;font-size:clamp(120px,18vw,180px);line-height:.9;color:var(--wash-lg);user-select:none;margin-bottom:-30px}
.gk-empty-title{font-size:clamp(38px,5vw,58px)}
/* The paragraph is an optional field, so the gap above the button sits on the button. */
.gk-empty-body{font-size:15px;margin-top:18px;max-width:420px}
.ge-btn{display:inline-flex;width:auto;padding:20px 34px;margin-top:30px}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
	.gk-cart{grid-template-columns:1fr;gap:40px}
	.gk-cart-side{position:static}
}
@media(max-width:640px){
	.gk-lines-head{display:none}
	.gk-line{grid-template-columns:88px 1fr 40px;grid-template-rows:auto auto;row-gap:16px}
	.gl-media{width:88px;height:70px;grid-row:1/3}
	.gl-remove{grid-column:3;grid-row:1;justify-self:end}
	.gl-qty{grid-column:2;grid-row:2;justify-self:start}
	.gl-sum{grid-column:3;grid-row:2;justify-self:end;font-size:24px}
	.gk-coupon{width:100%;margin-right:0}
	.gk-coupon-in[type=text]{flex:1;width:auto;padding:14px 16px}
	.gk-update{width:100%}
}