/* ============================================================================
   Vinigma shop skin  —  dark, editorial, consistent with the cinematic site.
   Loaded only on WooCommerce pages (inc/woo.php). Wine-ink ground, bone text,
   a single wine accent; bold Poppins display, Inter body; framed photography.
   Borrows the empi.re boldness but wears Vinigma's dark skin.
   ========================================================================== */

body.vg-shop-page { background: var(--wine-ink); color: var(--parchment); }

/* ROOT FIX for cart/checkout legibility: those pages render through page.php as
   <main class="section section--light … vg-page">. .section--light (tokens.css)
   remaps the role variables to their light-background values (--muted / --hair /
   --fg / --accent all become dark ink), and woo.css only re-darkens the
   background — so every var(--muted)/var(--hair) inside resolved to dark-on-dark
   and column headers, labels and totals were unreadable. Re-assert the dark
   theme's role variables on the shop containers so muted text is light again.
   This is the single source of truth; the !important colour overrides below are
   belt-and-braces. */
body.vg-shop-page .vg-page,
body.vg-shop-page .vg-shop {
  --bg: var(--wine-ink);
  --fg: var(--parchment);
  --muted: rgba(242, 238, 231, .56);
  --hair: rgba(242, 238, 231, .14);
  --accent: var(--wine);
}

/* WooCommerce ships a global `.woocommerce-page img { height:auto }` reset, and
   body.woocommerce-page is present on every shop view. At specificity (0,1,1) it
   outranks the theme's `.vg-logo__img { height:1.5rem }` (0,1,0), so the header
   wordmark balloons to its natural 247px and swallows the hero. Restore the
   compact logo with a shop-scoped, higher-specificity rule. The same reset makes
   the FOOTER logo balloon on shop pages (bigger than on other pages), so pin it
   to the site-wide clamp too. */
body.vg-shop-page .vg-nav .vg-logo__img { height: 1.9rem; width: auto; }
body.vg-shop-page .vg-footer__logo { height: clamp(2.2rem, 5vw, 3.4rem); width: auto; }

/* Motion is off on shop pages: reveal anything the shell carries. */
body.vg-no-motion [data-reveal] { opacity: 1 !important; transform: none !important; }

/* The shop main is a normal dark .section, so the nav keeps its default dark
   treatment (wine logo + bone links) and everything already matches the site. */
.vg-shop {
  --accent: var(--wine);
  background: var(--wine-ink);
  color: var(--parchment);
  padding-top: clamp(7rem, 12vh, 10rem);
  padding-bottom: clamp(4rem, 9vh, 7rem);
}
.vg-shop .vg-wrap { max-width: var(--wrap); margin-inline: auto; }

/* ---- Shared eyebrow + hairline motifs -------------------------------------*/
.vg-shop .eyebrow { color: var(--accent); font-weight: 500; }

/* ---- Shop hero (bold, dark) ---------------------------------------------- */
.vg-shop__hero { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.vg-shop__hero .eyebrow { display: block; margin-bottom: 1rem; }
.vg-shop__hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 6.5rem); letter-spacing: -.03em; line-height: .95;
  color: var(--parchment); margin: 0 0 1.1rem;
}
.vg-shop__hero p { font-family: var(--font-ui); font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 46ch; margin: 0; }
/* Rich (WYSIWYG) intro: first paragraph is the lead line; any paragraph below it
   renders as smaller, dimmer text so a fine-print line can sit under the intro. */
.vg-shop__hero-text .vg-rich { max-width: 46ch; }
.vg-shop__hero-text .vg-rich p { font-family: var(--font-ui); font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); margin: 0 0 .7rem; }
.vg-shop__hero-text .vg-rich p:last-child { margin-bottom: 0; }
.vg-shop__hero-text .vg-rich p:not(:first-of-type) { font-size: .92rem; line-height: 1.55; color: rgba(242, 238, 231, .5); }
.vg-shop__hero-text .vg-rich small { font-size: .85em; color: rgba(242, 238, 231, .5); }
.vg-shop__hero-text .vg-rich strong { color: var(--parchment); font-weight: 600; }
.vg-shop__hero-text .vg-rich em { font-style: italic; }
.vg-shop__hero-text .vg-rich a { color: var(--wine-soft); text-decoration: underline; text-underline-offset: 2px; }
.vg-shop__hero-text .vg-rich ul, .vg-shop__hero-text .vg-rich ol { margin: .4rem 0 .7rem 1.15rem; padding: 0; }
.vg-shop__hero-text .vg-rich li { margin: .15rem 0; color: var(--muted); }
.vg-shop__hero-note {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem;
  font-family: var(--font-ui); font-weight: 500; font-size: .82rem; color: var(--parchment);
  padding: .55rem .95rem; border: 1px solid var(--hair); border-radius: 999px;
}
.vg-shop__hero-note svg { width: 15px; height: 15px; color: var(--accent); }
.vg-shop__hero-media {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  aspect-ratio: 16 / 7; max-height: 460px; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--hair); background: var(--wine-ink-2);
}
.vg-shop__hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }

/* ---- Product grid: framed, image-forward, numbered ------------------------*/
.vg-shop ul.products,
.vg-shop .products {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem);
}
.vg-shop ul.products::before, .vg-shop ul.products::after { content: none; }

/* flex column so the price/CTA row pins to the bottom of every card; grid rows
   stretch to equal height, so the CTAs align across a row regardless of how long
   each premise is. */
.vg-edition { width: auto !important; margin: 0 !important; float: none !important; display: flex; flex-direction: column; }
.vg-edition__link { display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; text-decoration: none; }
.vg-edition__media {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--hair); background: var(--wine-ink-2);
  margin-bottom: 1.25rem; position: relative; isolation: isolate;
}
.vg-edition__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .8s var(--ease); z-index: 0; }
.vg-edition__link:hover .vg-edition__media img { transform: scale(1.045); }
/* Keep the badge above the image: on hover the image gets `transform: scale`,
   which forms a stacking context that would otherwise paint over the absolutely
   positioned badge (the badge only reappeared once the .8s scale unwound). A
   positive z-index pins it on top at all times. */
.vg-edition__badge {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  font-family: var(--font-mono); font-weight: 500; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(16,11,14,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--parchment); padding: .4rem .65rem; border-radius: 999px; border: 1px solid var(--hair);
}
.vg-edition__no { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--accent); display: block; margin-bottom: .5rem; }
.vg-edition__name {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: -.02em; line-height: 1.05; color: var(--parchment); margin: 0 0 .6rem;
}
.vg-edition__premise { font-family: var(--font-ui); font-size: .96rem; line-height: 1.5; color: var(--muted); margin: 0 0 1.1rem; }
.vg-edition__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--hair); }
.vg-edition__price { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--parchment); }
.vg-edition__cta { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.vg-edition__cta svg { width: 15px; height: 15px; }

/* ---- Single product: framed image + bold summary ------------------------- */
.vg-shop .product { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
/* Static, not sticky: a sticky gallery pins inside .product (which also holds the
   tabs + related), so it paints over them on scroll. It also needs position
   !important to beat Woo core's div.images.woocommerce-product-gallery
   {position:relative}, whose relative + a top offset shifted it over the summary
   on mobile. Static sidesteps the whole class of overlap bug. */
.vg-shop .product .woocommerce-product-gallery { position: static !important; width: 100% !important; margin: 0 !important; align-self: start; }
.vg-shop .product .woocommerce-product-gallery__wrapper,
.vg-shop .product .woocommerce-product-gallery img { border-radius: var(--radius); border: 1px solid var(--hair); }
/* Tabs (Description/Reviews), related and up-sells sit in a full-width row below
   the image+summary instead of auto-placing into the gallery's grid column. */
.vg-shop .product .woocommerce-tabs,
.vg-shop .product .up-sells,
.vg-shop .product .related {
  grid-column: 1 / -1;
}
.vg-shop .product .woocommerce-tabs { padding-top: 1.5rem; }
.vg-shop .product .summary { width: 100% !important; margin: 0 !important; float: none !important; }
.vg-shop .product .product_title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.03em; line-height: 1; color: var(--parchment); margin: 0 0 1.2rem;
}
.vg-shop .product .price { font-family: var(--font-display) !important; font-weight: 600 !important; font-size: 1.7rem !important; color: var(--parchment) !important; margin-bottom: 1.4rem; display: block; }
.vg-shop .product .woocommerce-product-details__short-description { font-family: var(--font-ui); font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); margin-bottom: 1.6rem; }
/* WooCommerce colours in-stock text green; force it to the muted palette. */
.vg-shop p.stock,
.vg-shop .stock,
.vg-shop .stock.in-stock { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--muted) !important; }
.vg-shop__includes {
  display: flex; align-items: center; gap: .55rem; margin: 1.2rem 0 1.6rem;
  font-family: var(--font-ui); font-weight: 500; font-size: .9rem; color: var(--parchment);
  padding: .85rem 1rem; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--wine-ink-2);
}
.vg-shop__includes svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

/* ---- Buttons: the site's .vg-btn language. Scoped to body.vg-shop-page so it
   also covers cart + checkout (which render through page.php as .vg-page, not
   .vg-shop) and overrides WooCommerce's default purple. --------------------- */
body.vg-shop-page .button,
body.vg-shop-page button.button,
body.vg-shop-page .button.alt,
body.vg-shop-page button.button.alt,
body.vg-shop-page .single_add_to_cart_button,
body.vg-shop-page #place_order,
body.vg-shop-page .checkout-button,
body.vg-shop-page .wc-proceed-to-checkout .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-mono); font-weight: 500; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--parchment) !important; background: var(--wine) !important; border: 0 !important; border-radius: 100px;
  padding: 1.05rem 2rem; cursor: pointer; transition: background .3s var(--ease), transform .3s var(--ease);
}
body.vg-shop-page .button:hover,
body.vg-shop-page .button.alt:hover,
body.vg-shop-page .single_add_to_cart_button:hover,
body.vg-shop-page #place_order:hover,
body.vg-shop-page .checkout-button:hover { background: var(--wine-soft) !important; transform: translateY(-2px); }
body.vg-shop-page .single_add_to_cart_button { width: 100%; padding: 1.2rem 2rem; }
/* Secondary actions (Update cart, Apply coupon) read as ghost buttons. */
body.vg-shop-page button[name="update_cart"],
body.vg-shop-page .coupon .button {
  background: transparent !important; color: var(--parchment) !important;
  border: 1px solid var(--hair) !important;
}
body.vg-shop-page button[name="update_cart"]:hover,
body.vg-shop-page .coupon .button:hover { background: var(--wine-ink-2) !important; transform: none; }
body.vg-shop-page button[name="update_cart"][disabled] { opacity: .4; }

body.vg-shop-page .quantity input.qty {
  font-family: var(--font-mono); width: 4.5rem; padding: .85rem .6rem;
  border: 1px solid var(--hair); border-radius: 12px; background: var(--wine-ink-2); color: var(--parchment); text-align: center;
}
.vg-shop form.cart { display: flex; gap: 1rem; align-items: center; margin: 1.4rem 0; flex-wrap: wrap; }

/* ---- De-genericise: tame the default WooCommerce tabs/related ------------- */
.vg-shop .woocommerce-tabs ul.tabs { border: 0; padding: 0; margin: 2.5rem 0 1.5rem; display: flex; gap: 1.5rem; }
.vg-shop .woocommerce-tabs ul.tabs::before { display: none; }
.vg-shop .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; padding: 0; }
.vg-shop .woocommerce-tabs ul.tabs li::before,
.vg-shop .woocommerce-tabs ul.tabs li::after { display: none; }
.vg-shop .woocommerce-tabs ul.tabs li a { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .4rem 0 !important; }
.vg-shop .woocommerce-tabs ul.tabs li.active a { color: var(--parchment); box-shadow: inset 0 -1px 0 var(--accent); }
.vg-shop .woocommerce-tabs .panel { font-family: var(--font-ui); color: var(--muted); }
.vg-shop .woocommerce-tabs .panel h2 { font-family: var(--font-display); font-weight: 700; color: var(--parchment); font-size: var(--fs-h3); }
.vg-shop .products.related > h2, .vg-shop .up-sells > h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--parchment); letter-spacing: -.02em; margin-bottom: 1.5rem; }
.vg-shop .product_meta { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 1.2rem; margin-top: 1.6rem; }
.vg-shop .product_meta .posted_in { display: none; } /* no categories on a game product */
.vg-shop .star-rating, .vg-shop .woocommerce-product-rating { display: none; }

/* ---- Health line + age attestation --------------------------------------- */
.vg-shop__legal { font-family: var(--font-ui); font-size: .78rem; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 1rem; margin-top: 1.5rem; max-width: 54ch; }
.vg-age-check { border: 1px solid var(--hair); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.2rem 0; background: var(--wine-ink-2); }
.vg-age-check label { font-family: var(--font-ui); font-size: .9rem; color: var(--parchment); }

/* ---- Cart + checkout (dark). Scoped to body.vg-shop-page: these render as
   .vg-page (page.php), not .vg-shop. ---------------------------------------- */
body.vg-shop-page table.shop_table { border: 0; border-collapse: collapse; width: 100%; font-family: var(--font-ui); color: var(--parchment); margin: 0 0 2rem; }
body.vg-shop-page table.shop_table th,
body.vg-shop-page table.shop_table td { border: 0; border-bottom: 1px solid var(--hair); padding: 1.1rem .6rem; background: transparent !important; color: var(--parchment) !important; }
body.vg-shop-page table.shop_table th { font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; text-align: left; }
body.vg-shop-page table.shop_table a { color: var(--parchment); }
body.vg-shop-page table.shop_table td.product-name a { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
body.vg-shop-page table.shop_table .product-thumbnail img { width: 64px; height: 80px; object-fit: cover; border-radius: 10px; border: 1px solid var(--hair); }
body.vg-shop-page table.shop_table .amount { color: var(--parchment); }
body.vg-shop-page table.shop_table tfoot th,
body.vg-shop-page .cart_totals .order-total .amount { font-family: var(--font-display); font-weight: 700; }
body.vg-shop-page .cart-collaterals { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 460px; margin-left: auto; }
body.vg-shop-page .coupon { display: flex; gap: .75rem; align-items: center; margin: 1.5rem 0; flex-wrap: wrap; }
body.vg-shop-page .cart_totals h2, body.vg-shop-page #order_review_heading, body.vg-shop-page .woocommerce-checkout h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.02em; color: var(--parchment); margin: 0 0 1.2rem; }
body.vg-shop-page .woocommerce-checkout .col2-set, body.vg-shop-page .checkout.woocommerce-checkout { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); max-width: 760px; margin-inline: auto; }
/* WooCommerce's checkout CSS ties these selectors on specificity and wins on
   source order, so the label + field colours need !important to hold the dark
   palette (labels were rendering dark-on-dark; inputs were white). */
body.vg-shop-page .form-row label,
body.vg-shop-page .woocommerce-billing-fields label,
body.vg-shop-page .woocommerce-additional-fields label { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) !important; }
/* padding/radius/fonts need !important too: Woo core's `.woocommerce form
   .form-row .input-text` (0,3,1) out-specifies this rule and shrank the text
   inputs while the select2 country widget kept the intended size. */
body.vg-shop-page .input-text,
body.vg-shop-page input[type="text"],
body.vg-shop-page input[type="email"],
body.vg-shop-page input[type="tel"],
body.vg-shop-page input[type="password"],
body.vg-shop-page select,
body.vg-shop-page .select2-selection,
body.vg-shop-page textarea { font-family: var(--font-ui) !important; font-size: 1rem !important; width: 100%; padding: .9rem 1rem !important; border: 1px solid var(--hair) !important; border-radius: 12px !important; background: var(--wine-ink-2) !important; color: var(--parchment) !important; height: auto !important; line-height: 1.4 !important; }
body.vg-shop-page .form-row select,
body.vg-shop-page .form-row .select2-container { width: 100% !important; }
body.vg-shop-page .input-text::placeholder, body.vg-shop-page textarea::placeholder { color: rgba(242,238,231,.4); }
body.vg-shop-page .input-text:focus, body.vg-shop-page input:focus, body.vg-shop-page textarea:focus { outline: none; border-color: var(--accent) !important; }
body.vg-shop-page .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--parchment); line-height: 1.4; padding: 0; }
body.vg-shop-page .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 1rem; }
/* dark dropdown panel for the open select2 list */
body.vg-shop-page .select2-dropdown { background: var(--wine-ink-2); border: 1px solid var(--hair); border-radius: 12px; color: var(--parchment); }
body.vg-shop-page .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent); }
body.vg-shop-page .select2-search--dropdown .select2-search__field { background: var(--wine-ink-2); border: 1px solid var(--hair); color: var(--parchment); border-radius: 8px; }
/* Native <select> (e.g. Country / Region) ignores background-color and renders
   an OS-white control unless appearance is stripped. Force the dark field and
   draw our own caret. */
body.vg-shop-page select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EEE7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 1rem !important;
}
body.vg-shop-page select option { background: var(--wine-ink-2); color: var(--parchment); }

/* ---- Checkout structural polish (lift it off the WooCommerce default) ----- */
body.vg-shop-page form.checkout .form-row { margin: 0 0 1.1rem; padding: 0; }
body.vg-shop-page form.checkout .form-row label { display: block; margin: 0 0 .5rem; }
body.vg-shop-page form.checkout .form-row-first,
body.vg-shop-page form.checkout .form-row-last { width: calc(50% - .6rem); display: inline-block; vertical-align: top; }
body.vg-shop-page form.checkout .form-row-first { margin-right: 1.2rem; }
body.vg-shop-page .woocommerce-billing-fields > h3,
body.vg-shop-page .woocommerce-additional-fields > h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.02em; color: var(--parchment); margin: 0 0 1.5rem; }
body.vg-shop-page .woocommerce-additional-fields { margin-top: 2.5rem; }
body.vg-shop-page abbr.required, body.vg-shop-page .required { color: var(--accent); border: 0; text-decoration: none; }
/* Order summary + payment sit in a framed panel so checkout reads as designed. */
body.vg-shop-page #order_review { border: 1px solid var(--hair); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); background: rgba(25,18,22,.5); }
body.vg-shop-page #payment ul.payment_methods li { list-style: none; }
body.vg-shop-page #payment label { color: var(--parchment); font-family: var(--font-ui); text-transform: none; letter-spacing: 0; }
body.vg-shop-page #payment .about_paypal, body.vg-shop-page #payment .payment_box { color: var(--muted); font-size: .85rem; }
body.vg-shop-page #payment div.payment_box { background: var(--wine-ink) !important; border-radius: 10px; }
body.vg-shop-page #payment div.payment_box::before { display: none; }
body.vg-shop-page #payment { margin-bottom: 0; }

/* ---- Checkout footer: privacy + terms + 18+ attestation, as one calm block --*/
body.vg-shop-page .woocommerce-privacy-policy-text { color: var(--muted); font-size: .82rem; line-height: 1.55; margin: 1.25rem 0 0; }
body.vg-shop-page .woocommerce-terms-and-conditions-wrapper { color: var(--muted); margin-top: 1rem; }
body.vg-shop-page input[type="checkbox"], body.vg-shop-page input[type="radio"] { accent-color: var(--wine); width: 1.05rem; height: 1.05rem; }
body.vg-shop-page .vg-age-check { border: 1px solid var(--hair); border-radius: 12px; padding: .9rem 1.1rem; margin: 1.25rem 0 0; background: var(--wine-ink); }
body.vg-shop-page .vg-age-check .form-row { margin: 0; padding: 0; }
body.vg-shop-page .vg-age-check label.checkbox, body.vg-shop-page .vg-age-check label { display: flex; align-items: flex-start; gap: .6rem; font-family: var(--font-ui); font-size: .9rem; line-height: 1.4; color: var(--parchment); text-transform: none; letter-spacing: 0; }
body.vg-shop-page .vg-age-check input { margin: .1rem 0 0; flex: none; }
body.vg-shop-page #place_order { width: 100%; margin-top: 1.5rem; }

/* ---- Coupon (checkout) + login: align to the 760px checkout column -------- */
body.vg-shop-page .woocommerce-form-coupon-toggle,
body.vg-shop-page form.checkout_coupon,
body.vg-shop-page .woocommerce-form-login { max-width: 760px; margin-inline: auto; }
body.vg-shop-page .woocommerce-form-coupon-toggle .woocommerce-info { background: transparent !important; border: 1px dashed var(--hair); }
body.vg-shop-page .woocommerce-form-login,
body.vg-shop-page form.checkout_coupon { border: 1px solid var(--hair); border-radius: var(--radius); padding: 1.25rem 1.5rem; background: var(--wine-ink-2); margin: 0 auto 2rem; }
/* Lay the coupon out as one row: input grows, button beside it. */
body.vg-shop-page form.checkout_coupon { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
body.vg-shop-page form.checkout_coupon > p:not(.form-row) { flex-basis: 100%; margin: 0; color: var(--muted); font-size: .85rem; }
body.vg-shop-page form.checkout_coupon .form-row { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; }
body.vg-shop-page form.checkout_coupon .form-row-first { flex: 1 1 220px; }
body.vg-shop-page form.checkout_coupon input.input-text { width: 100%; }
body.vg-shop-page form.checkout_coupon button { white-space: nowrap; }
body.vg-shop-page form.checkout_coupon label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.vg-shop-page form.checkout_coupon .clear { display: none; }
/* Cart-page coupon row */
body.vg-shop-page .coupon input.input-text { flex: 1 1 200px; }
body.vg-shop-page .cart-empty, body.vg-shop-page .return-to-shop { font-family: var(--font-ui); color: var(--muted); }

/* ---- Notices ------------------------------------------------------------- */
body.vg-shop-page .woocommerce-message, body.vg-shop-page .woocommerce-info, body.vg-shop-page .woocommerce-error {
  font-family: var(--font-ui); border: 1px solid var(--hair); border-left: 3px solid var(--accent);
  border-radius: 12px; background: var(--wine-ink-2) !important; color: var(--parchment); padding: 1rem 1.2rem; list-style: none;
}
body.vg-shop-page .woocommerce-message::before, body.vg-shop-page .woocommerce-info::before, body.vg-shop-page .woocommerce-error::before { display: none; }
body.vg-shop-page .woocommerce-message a, body.vg-shop-page .woocommerce-info a { color: var(--accent); }

/* Hide default archive chrome (we render our own hero). */
.vg-shop .woocommerce-result-count,
.vg-shop .woocommerce-ordering,
.woocommerce-ordering,
.vg-shop .woocommerce-products-header,
.vg-shop .woocommerce-products-header__title,
.vg-shop h1.page-title,
.woocommerce-products-header { display: none; }

/* ---- Cart / checkout / account page shell (rendered via page.php as .vg-page)
   — dark to match. These are the only .vg-page views that load woo.css, so the
   wide wrap here affects the cart layout, not the narrow legal reading pages. -*/
.vg-page { padding-top: clamp(7rem, 12vh, 10rem); background: var(--wine-ink); color: var(--parchment); }
.vg-page__wrap { max-width: var(--wrap); margin-inline: auto; }
.vg-page__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.03em; color: var(--parchment); margin: 0 0 2rem; }
.vg-page__body { font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); }
.vg-page__body h2 { font-family: var(--font-display); font-weight: 700; color: var(--parchment); font-size: var(--fs-h3); margin: 2rem 0 .8rem; }
.vg-page__placeholder { color: var(--muted); font-style: italic; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) { .vg-shop ul.products, .vg-shop .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .vg-shop ul.products, .vg-shop .products { grid-template-columns: 1fr; }
  .vg-shop .product { grid-template-columns: 1fr; }
  .vg-shop .product .woocommerce-product-gallery { position: static !important; }
}