/* =====================================================================
   GOKUDO wishlist styles for the Save button and the My Account wishlist tab. The
   wishlist flag in gokudo_asset_contexts() (inc/assets.php) loads this file with
   wishlist.js on every view that renders the button.
   ===================================================================== */

/* ---- Save button (shared) ---- */
/* This button marks its states on the border and the glyph, never on the ground, so
   all three states hold the resting fill. base.css says why they have to be named. */
.gk-wish-btn,.gk-wish-btn:is(:hover,:focus,:active){display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;
	background:var(--veil);border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:.2s}
.gk-wish-btn svg{width:20px;height:20px;transition:fill .2s}
.gk-wish-btn:hover{color:var(--blue);border-color:var(--blue)}
.gk-wish-btn.is-in{color:var(--blue);border-color:var(--blue)}
.gk-wish-btn.is-in svg{fill:var(--blue)}
.gk-wish-btn:disabled{opacity:.5;cursor:default}

/* Product card corner (archive): bottom left, clear of crest/tag/flags */
/* The one control in the theme with a shadow of its own: it floats over the card image,
   so it needs to sit off it. base.css strips Kadence's shadow from every other control
   on hover, and exempts this class from that strip. The hovered selector here stops
   Kadence's own button:hover (0,1,1) from replacing this shadow with its 15px drop on
   hover. Without the hovered state in the selector, Kadence's rule would win and swap
   in that drop shadow instead. */
.pc-wish,.pc-wish:is(:hover,:focus){position:absolute;left:16px;bottom:16px;z-index:5;box-shadow:0 6px 18px -8px var(--shadow-sm)}

/* Detail page: one standalone button above the size row */
.pd-wish{width:48px;height:48px;order:2;margin-left:auto}
.pd-wish svg{width:22px;height:22px}

/* ---- My Account wishlist tab ---- */
.gk-wish-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.gk-wish-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);transition:border-color .25s}
.gk-wish-card:hover{border-color:var(--ink)}
/* The box is square, as the product images are, so the picture fills it with no crop.
   object-fit:cover crops only a picture that is not square. */
.gw-media{aspect-ratio:1/1;background:var(--bg2);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--line2)}
.gw-media img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.gw-noimg{font-family:var(--display);font-weight:900;font-size:72px;color:var(--wash);user-select:none}
.gw-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:6px}
.gw-code{font-size:10px;letter-spacing:.14em;color:var(--blue)}
/* Exception: no link mark at rest. View → beside it goes to the same product. */
.gw-name{font-family:var(--display);font-weight:900;font-size:26px;line-height:.95;text-transform:uppercase;letter-spacing:var(--track-sm);color:var(--ink);transition:color .2s}
.gw-name:hover{color:var(--blue)}
.gw-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line2)}
.gw-price{font-family:var(--display);font-size:24px;line-height:1;letter-spacing:var(--track-sm);color:var(--ink)}
.gw-view{font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:color .2s}
body.gk-page .gw-view{color:var(--blue)}
body.gk-page .gw-view:hover{color:var(--ink)}
.gw-remove{position:absolute;top:14px;right:14px;z-index:6;width:38px;height:38px}
.gw-remove svg{width:18px;height:18px}

.gk-wish-empty{text-align:center;padding:46px 0 30px;max-width:460px;margin:0 auto}
.gk-wish-empty h3{font-family:var(--display);font-weight:900;font-size:clamp(30px,4vw,42px);text-transform:uppercase;letter-spacing:var(--track-md);line-height:.9}
.gk-wish-empty p{color:var(--muted);font-size:15px;line-height:1.7;margin:14px 0 26px}
/* The heart of the Save button, in the hint text. It takes the text color and sits on
   the line at about the height of a capital letter. */
.gw-heart svg{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.2em}
/* Shared .gd-cta-btn declarations live in components.css, loaded on every page. This
   page's other two callers, product listing and product detail, never load
   my-account.css, so the button needs its base style there, not here. my-account.css
   only supplies this button's own sizing. */
.gk-wish-empty .gd-cta-btn{display:inline-flex}

@media(max-width:560px){
	.gk-wish-grid{grid-template-columns:1fr}
}