/* =====================================================================
   GOKUDO components: blocks that appear on more than one view.

   The stylesheet layers, in load order:
     style.css        design tokens and @font-face                      site-wide
     base.css         chrome: reset, banner, nav, search overlay, footer, reveal
     components.css   this file: blocks several views share             site-wide
     gallery.css      the product gallery and feature block             product
     <view>.css       layout that belongs to exactly one view

   A rule belongs here when two or more views render the same block. A view that wants
   a deliberate variation overrides it in its own stylesheet. There, the override reads
   as a decision, not as a copy that fell behind.
   ===================================================================== */

/* Form notices share one readable treatment without changing the host surface. */
.gk-subscribe{width:100%;max-width:440px;min-width:0}
:is(.news-in,.reg-in,.artcta-in) .gk-subscribe form{min-width:0}
.gk-subscribe input{min-width:0}
.gk-form-notice.gk-rich-text{font-size:13px;line-height:1.6;overflow-wrap:anywhere;margin-top:12px}
.gk-form-notice.gk-rich-text p{font-size:inherit;line-height:inherit;color:inherit;margin:0;max-width:none}
.gk-form-notice.gk-rich-text a{text-decoration:underline;text-underline-offset:3px}

/* The cart and the checkout print the policy notices of the checkout page
   (inc/checkout.php). A notice sits above the block it describes. */
.gk-co-notice.gk-form-notice{color:var(--muted);margin:0 0 18px}
body:is(.gk-page,.gokudo-home) :is(.woocommerce-privacy-policy-link,.woocommerce-terms-and-conditions-link){text-decoration:underline;text-underline-offset:3px}
body.gk-page .woocommerce-table--order-details .woocommerce-table__product-name a{text-decoration:underline;text-underline-offset:3px}
/* The item data, such as the size, aligns with the product name. Kadence indents every
   list by 1.5em. */
body.gk-page .woocommerce-table--order-details .wc-item-meta{margin-left:0}

/* The order details and the customer details. WooCommerce renders both blocks on the
   order received view (checkout) and on the view order endpoint (account). The headings
   take the type of the section headings of the checkout form (.gk-co-fields h3 in
   checkout.css), with no rule under them. The address box states border-radius:0,
   because Kadence gives it 5px at (0,2,1). Each view keeps the table in its own
   stylesheet. */
body.gk-page :is(.woocommerce-order-details,.woocommerce-customer-details) h2{font-family:var(--label);font-size:12px;line-height:1.6;
	letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin:0 0 16px}
body.gk-page .woocommerce-customer-details address{border:1px solid var(--line);border-radius:0;padding:22px 24px;font-style:normal;
	line-height:1.8;color:var(--muted);font-size:14px;background:var(--surface)}

/* -----------------------------------------------------------------------
   .pagehead: breadcrumb, big title, and an optional meta/sub row. It opens
   cart, checkout, my-account, products, newsroom, and support. These
   six agreed on the same values byte-for-byte, so this is the baseline.
   search, sitemap, and terms render a deliberately smaller variant and
   override the sizing rules in their own stylesheets.
   ----------------------------------------------------------------------- */
/* --ph-title-size: the H1 size. The .count number uses it too. */
.pagehead{--ph-title-size:clamp(58px,8vw,118px);border-bottom:1px solid var(--line);background:var(--bg);padding:70px 0 46px}
.ph-crumb{display:flex;align-items:center;gap:10px;color:var(--faint);margin-bottom:30px;flex-wrap:wrap}
.ph-crumb a{color:var(--faint);transition:color .2s}
.ph-crumb a:hover{color:var(--blue)}
.ph-crumb .sep{color:var(--line)}
.ph-crumb .cur{color:var(--ink)}
.ph-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ph-title{display:flex;align-items:flex-end;gap:22px}
.ph-title h1{font-family:var(--display);font-weight:900;font-size:var(--ph-title-size);line-height:.82;text-transform:uppercase;letter-spacing:var(--track-lg)}
.ph-title .han{font-family:var(--han);font-size:clamp(30px,4vw,54px);color:var(--blue);line-height:1;margin-bottom:6px}
.ph-meta{text-align:right;color:var(--muted)}
/* "<number> / <unit>". The number is 0.8 of the H1 size, on the H1 baseline. */
.ph-meta .count{font-family:var(--display);font-size:clamp(28px,3.4vw,46px);line-height:.82;letter-spacing:var(--track-md);color:var(--ink)}
.ph-meta .count em{font-style:normal;font-size:calc(var(--ph-title-size)*.8);line-height:.84;color:var(--blue)}
.ph-sub{margin-top:34px;color:var(--faint);font-size:15px;line-height:1.6;max-width:560px}
@media(max-width:560px){
	.ph-meta{text-align:left}
}

/* Small text-role classes for .ph-meta content, built by the callers of
   template-parts/components/pagehead.php. A shared template part must not receive an
   inline style, so every caller that needs one of these roles uses a class. */
.ph-meta .k{color:var(--faint)}
.ph-meta .v{margin-top:6px;color:var(--ink)}
.ph-meta .cap{margin-top:8px;color:var(--faint)}

/* Database-authored rich text. Page CSS controls the surrounding type measure; this
   primitive only standardizes semantic lists, their accent marker, and the link mark. */
.gk-rich-text{--gk-content-accent:var(--blue)}
.gk-rich-text.is-dark{--gk-content-accent:var(--gold)}
.gk-rich-text :is(ul,ol){margin:24px 0 0;padding-left:1.35em}
.gk-rich-text ul{list-style:square}
.gk-rich-text ol{list-style:decimal}
/* A Han term inside the copy, such as 極道 in the Theory lede, takes the Han face. The
   editor writes it as <span class="han" lang="zh-Hant">. */
.gk-rich-text .han{font-family:var(--han)}
.gk-rich-text li{padding-left:6px;font-size:inherit;line-height:inherit;text-wrap:pretty}
.gk-rich-text li+li{margin-top:10px}
.gk-rich-text li::marker{color:var(--gk-content-accent);font-weight:700}
.gk-rich-text :is(ul,ol) :is(ul,ol){margin-top:10px}
body:is(.gk-page,.gokudo-home) .gk-rich-text a{text-decoration:underline;text-underline-offset:3px}

/* -----------------------------------------------------------------------
   .gk-empty: the branded empty state. Three views render it: the cart when the bag
   holds nothing, the search and archive result list when a query matches nothing, and
   the catalog when the client-side filter hides every card. Each is a heading, a
   sentence, and one way out. The cart also shows the 極 crest above the heading, so
   cart.css holds the crest rule.
   Only the declarations that are the same in all three live here. Scale, padding and
   measure stay in each view's own stylesheet, the same split the two filled-button
   standards below use. Every selector here is a class: an element selector such as
   .gk-empty p would carry one more element than a view's own class rule and would take
   that view's color and size away from it.
   ----------------------------------------------------------------------- */
.gk-empty{text-align:center;margin:0 auto}
.gk-empty-title{font-family:var(--display);font-weight:900;line-height:.9;text-transform:uppercase;letter-spacing:var(--track-md)}
.gk-empty-body{color:var(--muted);line-height:1.7;margin-left:auto;margin-right:auto}
.gk-empty .btn{display:inline-flex;align-items:center;gap:10px;
	font-size:12px;letter-spacing:.2em;border:none;cursor:pointer;transition:.2s}

/* Featured editorial lists. Editors create one bulleted list and make the opening
   phrase of each item bold; the renderer turns any number of items into rule-and-copy
   columns. This variant is for light surfaces.

   An item title has two spellings, and they take one rule. An editor authoring the list
   in a WYSIWYG field can only reach for bold, so their title is a strong. A template
   that owns its own list writes a heading instead, because a title a template states is
   a heading and not an emphasis, and the support page's shipping and contact lists are
   in the document outline because of it. ACF.md holds the authored contract. */
.gk-feature-list>:is(ul,ol){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;
	margin:0;padding:0;list-style:none}
.gk-feature-list>:is(ul,ol)>li{padding-top:24px;border-top:2px solid var(--ink);color:var(--muted);
	font-size:14px;line-height:1.65}
/* font-family and font-weight are here for the h3 spelling. Kadence sets h3 by bare
   element selector, face and weight included, and an element rule beats inheritance
   whatever its weight, the same way base.css describes for heading color. The other
   four properties this rule already states, so those two close the set. On the strong
   spelling both name what the element resolves to anyway. */
.gk-feature-list>:is(ul,ol)>li>:is(strong,h3):first-child,
.gk-feature-list>:is(ul,ol)>li>p:first-child>strong:first-child{display:block;margin-bottom:11px;color:var(--ink);
	font-family:inherit;font-weight:700;font-size:15px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
.gk-feature-list>:is(ul,ol)>li>:is(strong,h3):first-child+br,
.gk-feature-list>:is(ul,ol)>li>p:first-child>strong:first-child+br{display:none}
.gk-feature-list>:is(ul,ol)>li>p{margin:0}


@media(max-width:980px){
	.gk-feature-list>:is(ul,ol){grid-template-columns:1fr 1fr;gap:30px 24px}
}
@media(max-width:560px){
	.gk-feature-list>:is(ul,ol){grid-template-columns:1fr}
}

/* -----------------------------------------------------------------------
   THE PRIMARY ACTION BUTTON. DESIGN.md states its colors.
   Thirteen views each implement this button on their own markup, and the
   checkout implements two: #place_order, and the Login submit inside the
   collapsible login strip. The account orders view implements one: Confirm
   email address, in WooCommerce's email verification notice. The account
   details form and the edit-address form implement one each: Save changes and
   Save address. None of those five can carry a theme class, because all are
   WooCommerce's own output. The selectors are merged into the
   one list here rather than sharing a new class.
   Three of the thirteen are one component, template-parts/components/
   subscribe-form.php, which the front page, the newsroom page and a single
   post each host under a name of their own: .news-in, .reg-in, .artcta-in.

   body:is(.gk-page,.gokudo-home) carries the list, and earns its place twice
   over. It lifts the rule to (0,2,2). That is over base.css's
   `body.gk-page a{color:inherit}` at (0,1,2), and seven of these buttons are
   anchors: without the lift the link reset wins and they render var(--ink)
   on var(--blue). It is also over Kadence's button:focus at (0,1,1), which
   is what holds the fill through a click. Neither is answered by a bare
   class selector.
   Six selectors stay outside the :is(), because :is() takes the weight of
   its heaviest argument and lends it to every member. #place_order would lend
   (1,0,0), and .catfoot a.btn would lend (0,2,1). All five already outscore
   the link reset and Kadence on their own, so they are listed beside it.
   The verification button is named by its href, because it has the same
   .button class as the View button of an order row, which is a secondary.
   Its selector scores (0,3,2), over the (0,3,1) of the secondary list below.
   The two save buttons have that .button class too. They are named by their
   name attribute, and their selector also scores (0,3,2).
   .woocommerce-form-login__submit is the one member that carries Kadence's own
   .button class, so its selector names body rather than resting on the body
   class alone. (0,2,1) clears .button:focus at (0,2,0) outright, which is what
   holds the resting fill through a click, and it does not depend on which of
   the two stylesheets the browser loaded last.
   ----------------------------------------------------------------------- */
body:is(.gk-page,.gokudo-home) :is(.addcart,.gk-checkout-btn,.gk-auth-btn,.gd-cta-btn,.pc-cta,.rg-submit,.gk-op-primary,.artcta-in button,.reach-form button,.news-in button,.reg-in button,.read-cta,.ncard-cta),
.gokudo-checkout #place_order,
body.gokudo-checkout .woocommerce-form-login__submit,
.cart-drawer .checkout,
.catfoot a.btn,
body.gokudo-account a.button[href*="wc_send_verification="],
body.gokudo-account button.button:is([name=save_account_details],[name=save_address]){
	background:var(--blue);color:var(--on-dark);font-family:var(--label);
	text-transform:uppercase;font-weight:700
}
body:is(.gk-page,.gokudo-home) :is(.addcart,.gk-checkout-btn,.gk-auth-btn,.gd-cta-btn,.pc-cta,.rg-submit,.gk-op-primary,.artcta-in button,.reach-form button,.news-in button,.reg-in button,.read-cta,.ncard-cta):hover,
.gokudo-checkout #place_order:hover,
body.gokudo-checkout .woocommerce-form-login__submit:hover,
.cart-drawer .checkout:hover,
.catfoot a.btn:hover,
body.gokudo-account a.button[href*="wc_send_verification="]:hover,
body.gokudo-account button.button:is([name=save_account_details],[name=save_address]):hover{background:var(--gold);color:var(--ink)}
/* Disabled sits after the hover rule and matches its weight, so it takes the tie on
   source order and a disabled button stays inert under the cursor. [aria-disabled]
   covers the anchors, which cannot carry the disabled attribute. */
body:is(.gk-page,.gokudo-home) :is(.addcart,.gk-checkout-btn,.gk-auth-btn,.gd-cta-btn,.pc-cta,.rg-submit,.gk-op-primary,.artcta-in button,.reach-form button,.news-in button,.reg-in button,.read-cta,.ncard-cta):is(:disabled,[disabled],[aria-disabled=true]),
body:is(.gk-page,.gokudo-home) :is(.addcart,.gk-checkout-btn,.gk-auth-btn,.gd-cta-btn,.pc-cta,.rg-submit,.gk-op-primary,.artcta-in button,.reach-form button,.news-in button,.reg-in button,.read-cta,.ncard-cta):is(:disabled,[disabled],[aria-disabled=true]):hover,
.gokudo-checkout #place_order:disabled,
.gokudo-checkout #place_order:disabled:hover{
	background:var(--bg2);color:var(--ink);border:1px solid var(--line);cursor:not-allowed
}

/* -----------------------------------------------------------------------
   THE DARK SECONDARY BUTTON. DESIGN.md states its colors.
   Four views implement this button on their own markup.

   body:is(.gk-page,.gokudo-home) carries the list for the reason it carries the
   primary one. None of today's five members needs the lift: each already scores
   at least (0,2,0) and so clears base.css's `body.gk-page a{color:inherit}` at
   (0,1,2) and Kadence's button:focus at (0,1,1) on its own. The scope is here
   for the member that has not been written yet. A bare single class on an <a>
   scores (0,1,0), loses to the link reset, and renders var(--ink) on var(--ink):
   invisible at rest, legible only under the cursor, because :hover adds the
   class the resting rule lacks. .read-cta shipped that way. Adding the member
   to this list is what stops it happening again.
   .nextobj a.btn stays outside the :is(), because :is() takes the weight of its
   heaviest argument and lends it to every member, and that selector would lend
   its element to the other five. It already outscores the link reset and
   Kadence on its own, so it is listed beside the scope.
   ----------------------------------------------------------------------- */
body:is(.gk-page,.gokudo-home) :is(.gk-empty .btn,.e404-links .btn,.gokudo-account .button,.gokudo-account .woocommerce-button,.gokudo-account .gk-acct-logout),
.nextobj a.btn{
	background:var(--ink);color:var(--on-dark);font-family:var(--label);
	text-transform:uppercase;font-weight:700
}
body:is(.gk-page,.gokudo-home) :is(.gk-empty .btn,.e404-links .btn,.gokudo-account .button,.gokudo-account .woocommerce-button,.gokudo-account .gk-acct-logout):hover,
.nextobj a.btn:hover{background:var(--blue);color:var(--on-dark)}

/* -----------------------------------------------------------------------
   WooCommerce form labels appear on three views: the sign-in and register forms
   (.gk-form, on the <form> itself), the checkout (.gokudo-checkout, on the <body>), and
   the shipping address form in the cart summary (.shipping-calculator-form). The scopes
   differ, so this rule takes three selectors, but it states the treatment once.

   Each selector must outscore Kadence. `.woocommerce form .form-row label` in
   woocommerce.min.css scores (0,2,2), and sets line-height, font-weight, color, and
   font-size. A plain class rule in a view's stylesheet loses to it. Without a rule that
   outscores it, Kadence's selector sets every
   label to 15.3px, bold, in Kadence's navy, on a 2.4 line-height. Its
   letter-spacing of .18em is measured against font-size, so a font-size other than
   10px also changes the tracking.

   font-weight and line-height are declared even though this design would rather
   inherit them, because Kadence declares them, and silence loses. 1.6 is the ratio
   inheritance gives: .reach-form label, the same element on a form that Kadence's
   selector never matches, computes 10px over 16px.

   .gk-remember is excluded. It is the "Remember me" checkbox label, deliberately
   body copy rather than a field label. It carries its own rule in my-account.css,
   raised to (0,3,2) for the same reason as this one. */
body.gk-page .gk-form :is(.form-row,.woocommerce-form-row) label:not(.gk-remember):not(.woocommerce-form__label-for-checkbox),
body.gk-page.gokudo-checkout :is(.form-row,.woocommerce-form-row) label:not(.gk-remember):not(.woocommerce-form__label-for-checkbox),
body.gk-page.gokudo-cart .shipping-calculator-form .form-row label{
	display:block;font-family:var(--label);font-size:10px;font-weight:400;line-height:1.6;
	letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}

/* -----------------------------------------------------------------------
   WooCommerce form fields appear on three views: the checkout, the shipping address
   form in the cart summary, and the billing and shipping forms on the account. All three
   are WooCommerce's own markup, so this block states the field once for the three scopes.
   The sign-in and register forms and the account details form get their fields from
   my-account.css.

   The required mark: WooCommerce colors it red at (0,3,0). Every selector outscores that.
   The field: border-radius:0 and box-shadow:none both undo Kadence, and base.css states
   both centrally. They stay here because this rule is the one place the field is described
   in full. A reader should not have to know about a neutralizer to see what it is.
   The native <select>: `.woocommerce form .form-row select` in woocommerce.min.css
   scores (0,2,2) and sets the padding in em, so the field rule loses the padding of a
   select. A store that sells to one country gets a native select for the country, and
   the select is then shorter than the text fields. The padding rule after the field rule
   scores (0,2,3) or more.
   The select2 box: WooCommerce replaces the state <select> with it on the three views, so
   it takes the field's fill, border, padding, type, and line height, so it is as tall as
   a text field. */
.gokudo-checkout .form-row label .required,
.gokudo-cart .shipping-calculator-form .form-row label .required,
.gokudo-account .woocommerce-address-fields .form-row label .required{color:var(--danger);text-decoration:none}
.gokudo-checkout .form-row .input-text,
.gokudo-checkout .form-row select,
.gokudo-checkout .form-row textarea,
.gokudo-cart .shipping-calculator-form .form-row .input-text,
.gokudo-cart .shipping-calculator-form .form-row select,
.gokudo-account .woocommerce-address-fields .form-row .input-text,
.gokudo-account .woocommerce-address-fields .form-row select{width:100%;background:var(--surface);border:1px solid var(--line);padding:14px 16px;
	font-family:var(--body);font-size:14.5px;color:var(--ink);transition:border-color .2s;border-radius:0;box-shadow:none}
body.gokudo-checkout form .form-row select,
body.gokudo-cart .shipping-calculator-form .form-row select,
body.gokudo-account .woocommerce-address-fields .form-row select{padding:14px 16px}
.gokudo-checkout .form-row .input-text:focus,
.gokudo-checkout .form-row select:focus,
.gokudo-checkout .form-row textarea:focus,
.gokudo-cart .shipping-calculator-form .form-row .input-text:focus,
.gokudo-cart .shipping-calculator-form .form-row select:focus,
.gokudo-account .woocommerce-address-fields .form-row .input-text:focus,
.gokudo-account .woocommerce-address-fields .form-row select:focus{outline:none;border-color:var(--blue)}
.gokudo-checkout .form-row.woocommerce-invalid .input-text,
.gokudo-checkout .form-row.woocommerce-invalid select,
.gokudo-cart .shipping-calculator-form .form-row.woocommerce-invalid .input-text,
.gokudo-cart .shipping-calculator-form .form-row.woocommerce-invalid select,
.gokudo-account .woocommerce-address-fields .form-row.woocommerce-invalid .input-text,
.gokudo-account .woocommerce-address-fields .form-row.woocommerce-invalid select{border-color:var(--danger)}
.gokudo-checkout .select2-container .select2-selection--single,
.gokudo-cart .shipping-calculator-form .select2-container .select2-selection--single,
.gokudo-account .woocommerce-address-fields .select2-container .select2-selection--single{height:auto;background:var(--surface);border:1px solid var(--line);border-radius:0}
.gokudo-checkout .select2-container .select2-selection--single .select2-selection__rendered,
.gokudo-cart .shipping-calculator-form .select2-container .select2-selection--single .select2-selection__rendered,
.gokudo-account .woocommerce-address-fields .select2-container .select2-selection--single .select2-selection__rendered{padding:14px 16px;line-height:1.6;font-size:14.5px;color:var(--ink)}
.gokudo-checkout .select2-container .select2-selection--single .select2-selection__arrow,
.gokudo-cart .shipping-calculator-form .select2-container .select2-selection--single .select2-selection__arrow,
.gokudo-account .woocommerce-address-fields .select2-container .select2-selection--single .select2-selection__arrow{height:100%;top:0;right:8px}
.gokudo-checkout .select2-container--focus .select2-selection--single,
.gokudo-checkout .select2-container--open .select2-selection--single,
.gokudo-cart .shipping-calculator-form .select2-container--focus .select2-selection--single,
.gokudo-cart .shipping-calculator-form .select2-container--open .select2-selection--single,
.gokudo-account .woocommerce-address-fields .select2-container--focus .select2-selection--single,
.gokudo-account .woocommerce-address-fields .select2-container--open .select2-selection--single{border-color:var(--ink)}

/* A label that owns a checkbox is not a field label. Its text belongs beside the box,
   as a sentence, not stacked above it in 10px caps. WooCommerce marks these itself, so
   the exclusion above and this rule share one hook. It reaches (0,4,2) for the same
   reason as the rule above: Kadence's (0,2,2) would otherwise take it. This is what the
   checkout's "Create an account?" row renders as.
   .gk-remember, the sign-in form's "Remember me", is the theme's own markup, and
   carries no WooCommerce class. It is excluded separately, and states this treatment
   itself in my-account.css. */
body.gk-page .gk-form :is(.form-row,.woocommerce-form-row) label.woocommerce-form__label-for-checkbox,
body.gk-page.gokudo-checkout :is(.form-row,.woocommerce-form-row) label.woocommerce-form__label-for-checkbox{
	display:flex;align-items:center;gap:9px;font-family:var(--body);font-size:13px;font-weight:400;
	line-height:1.6;letter-spacing:0;text-transform:none;color:var(--muted);margin:0;cursor:pointer}
body.gk-page :is(.form-row,.woocommerce-form-row) label.woocommerce-form__label-for-checkbox input[type=checkbox]{
	width:16px;height:16px;flex:none;accent-color:var(--blue)}

/* -----------------------------------------------------------------------
   .pc-flag: the promo badge. The product card stacks it in .pc-marks, and the
   product page in .pd-flags. Both render the same markup from the same
   gokudo_tag_badges() list, so the badge itself is stated once here.
   SALE comes from a real sale price and needs no tag. HOT, NEW and LIMITED are
   product tags, and any other tag slug falls through to the last rule. */
.pc-flag{font-family:var(--label);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
	padding:6px 10px;font-weight:700;line-height:1}
.pc-flag.sale{background:var(--blue);color:var(--on-dark)}
.pc-flag.hot{background:var(--blue);color:var(--on-dark)}
.pc-flag.new{background:var(--gold);color:var(--ink)}
.pc-flag.limited{background:var(--gold);color:var(--ink)}
.pc-flag:not(.sale):not(.hot):not(.new):not(.limited){background:var(--ink);color:var(--on-dark)}

/* -----------------------------------------------------------------------
   .pcard: the product card, rendered by template-parts/components/product-card.php.
   Two views hold it: the catalog grid on the shop page and the rail on the front
   page. Each view states only where its cards sit and how wide they are, in
   products.css and home.css. Everything the card is, from the media box down to
   the View Object button, is here, so the two views cannot show two cards.
   The spec table is the single exception. A view may ask the part to leave it out,
   and the catalog grid does. The rule that closes the card body moves with it, so
   both forms of the card end the same way. See .pc-foot.
   .pc-flag, above, is the promo badge the corner stack holds. */
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
	transition:border-color .35s,translate .35s,box-shadow .35s}
/* Exception: the hover moves. The card answers the cursor with a stroke and a lift. It
   and .ncard in home.css, the news card on the front page, are the hovers in the theme
   that move. A card is a whole
   surface and not a control. At that size, a border repaint alone reads as a rendering
   change and not as an answer to the cursor.
   The lift rides translate, not transform. .reveal.in plays gk-reveal with a `both` fill,
   so the keyframe's to{transform:none} holds that property after the animation ends, and
   an animation outranks a normal declaration. A transform here would never paint.
   translate is an independent property the keyframe never names, so the two compose.
   A view that clips the card needs room for both. See .hrail in home.css.
   The card is not a link. Only .pc-cta opens the product, so the card carries no
   pointer cursor and no hit area, as .ncard does. */
.pcard:hover{border-color:var(--ink);translate:0 -6px;box-shadow:0 18px 34px -24px var(--shadow-sm)}
/* The stroke and the shadow are not travel, so reduced motion keeps them and drops the rise. */
@media (prefers-reduced-motion:reduce){.pcard:hover{translate:none}}
.pcard.soon{background:var(--bg2)}

.pc-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line2)}
.pc-media img.shoe{width:100%;height:100%;object-fit:contain;object-position:center 52%;padding:30px 26px 40px;position:relative;z-index:2;mix-blend-mode:multiply}
.pc-bignum{position:absolute;left:14px;bottom:-26px;z-index:1;font-family:var(--display);font-weight:900;font-size:200px;line-height:.7;letter-spacing:var(--track-xl);color:var(--wash-lg);pointer-events:none;user-select:none}
.pc-soonimg{filter:grayscale(1) contrast(.96);opacity:.5}
/* The card's stand-in for a product with no image. single-product.php shows the same
   mark at its own size, so single-product.css restates this rule and loads after. */
.pc-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:clamp(120px,20vw,190px);color:var(--wash-lg);user-select:none;pointer-events:none}

/* The corner stack, top right: the status tag, then the promo flags under it. Only an
   upcoming or a sold-out product has a status tag. One container carries the position,
   so the gap is stated once and every step in the stack is that gap. Two positioned boxes cannot do this: the space between them is then the
   difference between a hard-coded offset and the height the tag happens to render at. */
.pc-marks{position:absolute;top:18px;right:18px;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.pc-tag{font-family:var(--label);font-size:10px;
	letter-spacing:.2em;text-transform:uppercase;padding:8px 12px;font-weight:700}
.pc-tag.soon{background:var(--ink);color:var(--on-dark)}
.pc-tag.sold{background:var(--muted);color:var(--on-dark)}
.pcard.sold{background:var(--bg2)}

/* Struck-through original price on sale items. Half the figure it sits beside, on both
   steps of the card below. The price is what the struck one is read against, so it takes
   a size that is read rather than noticed, and the label face, --faint, and the normal
   weight are what hold it under the display figure. The product page states the same
   half against the same 40px, in single-product.css. */
.pc-price .amt del{font-family:var(--label);font-size:20px;color:var(--faint);margin-left:9px;font-weight:400;letter-spacing:.02em}

/* card body */
.pc-body{display:flex;flex-direction:column;flex:1;padding:30px 32px 32px}
.pc-name{font-family:var(--display);font-weight:900;font-size:clamp(34px,3.4vw,50px);line-height:.9;text-transform:uppercase;letter-spacing:var(--track-md)}
.pc-name em{font-style:normal;color:var(--blue)}
/* The tagline sits under the name. It must read as a second voice, not a second
   heading. It uses the same display face as the name, so it visually belongs with it.
   It is a third of the name's size, and it uses the accent color, so it cannot be
   mistaken for the name. The clamp floor is 18px, so this rule has no override in the narrow media query below, unlike
   .pc-name. */
.pc-tagline{font-family:var(--display);font-weight:900;font-size:clamp(18px,1.6vw,24px);line-height:1;
	text-transform:uppercase;letter-spacing:var(--track-sm);color:var(--blue);margin-top:10px}
.pc-desc{color:var(--muted);font-size:15px;line-height:1.65;margin:18px 0 24px;max-width:430px}

/* mini specs */
.pc-specs{display:flex;flex-wrap:wrap;border-top:1px solid var(--line2);margin-bottom:26px}
.pc-spec{flex:1 1 50%;padding:13px 0;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:4px}
.pc-spec:nth-child(odd){padding-right:18px}
.pc-spec .k{font-family:var(--label);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.pc-spec .v{font-size:13.5px;font-weight:600;color:var(--ink)}

/* No rule above this row where a spec table renders: that table's last border already
   closes the card body, and the price and the button carry their own weight.
   padding-top holds the gap the border sits in either way.
   A card with no spec table draws the line itself, so the body closes the same way in
   both forms of the card. The catalog grid asks for that card, and so would a product
   carrying none of the four attributes, so the condition is the table's absence and not
   a class either of them would have to remember to pass.
   The price is the second half of the condition. It is what makes a card a product's,
   and the front page closes its rail with a card that is a door to the catalog: no
   specs, no price, and no line over its one button.
   561px is the step above the condensed card below. That card is short enough to need
   no line, and it needs none whether the table was dropped or is only turned off, which
   :has() cannot tell apart. Stating the width here answers both with one rule. */
.pc-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-top:24px}
@media(min-width:561px){
	.pcard:has(.pc-price):not(:has(.pc-specs)) .pc-foot{border-top:1px solid var(--line2)}
}
.pc-price{display:flex;flex-direction:column;gap:3px}
.pc-price .amt{font-family:var(--display);font-size:40px;line-height:.9;letter-spacing:var(--track-md)}
.pc-price .amt small{font-family:var(--label);font-size:11px;color:var(--muted);letter-spacing:.1em;margin-left:7px}
.pc-price .note{font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.pc-price .soonamt{font-family:var(--display);font-size:30px;line-height:.9;letter-spacing:var(--track-md);color:var(--muted)}

.pc-cta{display:inline-flex;align-items:center;gap:12px;border:none;cursor:pointer;
	font-size:12px;letter-spacing:.2em;padding:17px 24px;transition:.24s;white-space:nowrap}

@media(max-width:560px){
	/* Condensed card: shorter image, smaller name and price, no description or
	   spec list. The whole card shrinks noticeably. */
	.pc-media{aspect-ratio:16/9}
	.pc-bignum{font-size:140px;bottom:-18px}
	.pc-body{padding:22px 20px 24px}
	.pc-name{font-size:27px}
	.pc-desc,.pc-specs{display:none}
	.pc-price .amt{font-size:30px}
	.pc-price .amt del{font-size:15px}
	.pc-foot{flex-direction:column;align-items:stretch;gap:14px;padding-top:18px}
	.pc-cta{justify-content:center;padding:15px 20px}
}

/* -----------------------------------------------------------------------
   Honeypot field shared by every form (inc/forms.php checks gk_web). It is
   rendered on more than one view, so it belongs in the shared-blocks layer, not
   in chrome. It must stay reachable to a bot and invisible to a human, so it is
   moved off-screen rather than removed from the layout with display:none.
   !important on position/left: this selector's specificity, one class, is lower
   than the input rules that per-page stylesheets define, for example .reach-form
   input in support.css. components.css also loads before every per-page
   stylesheet. Without !important, a later, more-specific per-page rule could win
   the cascade and pull the field back on screen or into the tab order. */
.gk-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}