/*
 * main.css — WordPress/WooCommerce glue that sits on top of the approved page stylesheet
 * (assets/css/pages/*.css). Nothing here restyles an approved section: it only covers markup the
 * static pages did not have (editor-controlled options, WooCommerce output, generic pages).
 */

/* ---- editor options (Page Sections) ------------------------------------------------------------ */
.is-full-width .container,
.is-full-width.container,
.is-full-width .wrap { width: 100%; max-width: none; }

.gbl-section-sub { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.gbl-section-desc { margin-top: 12px; max-width: 64ch; }
.gbl-section-desc p + p { margin-top: 12px; }
.gbl-empty { margin: 24px 0; padding: 24px; border-radius: 12px; background: rgba(0, 13, 92, .06); text-align: center; }

/* ---- toast (cart feedback) — same look as the approved shop page, usable on every page ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; max-width: calc(100% - 32px); padding: 14px 22px; border-radius: 9999px; background: var(--color-primary); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 14px 44px rgba(0, 30, 90, .16); transform: translate(-50%, 24px); opacity: 0; visibility: hidden; transition: transform .3s ease, opacity .3s ease, visibility .3s; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---- product cards inside the WordPress loop ---------------------------------------------------- */
a.pcard__img { display: block; color: inherit; text-decoration: none; }
.pcard h3 a { color: inherit; text-decoration: none; }
.pcard h3 a:hover { text-decoration: underline; }
.pcard .added_to_cart { display: none; }
.pcard .add.loading { opacity: .75; pointer-events: none; }
.pcard .price del { opacity: .6; margin-right: 6px; }
.pcard .price ins { text-decoration: none; }
.pcard[hidden] { display: none; }

/* WooCommerce loop normalisation — keep the approved grid; neutralise WooCommerce's float/width/margin layout.
   (margin-top 28px and the 4-column grid are the approved .grid values from pages/shop.css.) */
body .woocommerce ul.products.grid,
body ul.products.grid { display: grid; margin: 28px 0 0; padding: 0; }
body .woocommerce ul.products.grid[hidden],
body ul.products.grid[hidden] { display: none; }
body .woocommerce ul.products.grid::before,
body .woocommerce ul.products.grid::after,
body ul.products.grid::before,
body ul.products.grid::after { content: none; display: none; }
body .woocommerce ul.products.grid li.product,
body ul.products.grid li.product,
body .woocommerce ul.products.grid li.pcard { float: none; width: auto; margin: 0; padding: 0; clear: none; }
body .woocommerce ul.products.grid li.product a img,
body ul.products.grid li.product a img { margin: 0; box-shadow: none; width: 100%; height: 100%; }

/* WooCommerce's own stylesheet restyled the card text (title 1em + padding, price 0.857em in olive green).
   Restore the approved card typography from pages/shop.css (.pcard h3 / .price). */
body ul.products.grid li.pcard h3 { margin: 0; padding: 0; font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
body ul.products.grid li.pcard .price { display: block; margin: 0; color: var(--color-primary); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
body ul.products.grid li.pcard .price .woocommerce-Price-amount { color: inherit; font-weight: inherit; }

/* WooCommerce messages + pagination in brand colours */
.woocommerce-message, .woocommerce-info, .woocommerce-error { margin: 0 0 24px; padding: 14px 18px; border-radius: 10px; border: 1px solid var(--color-accent); background: var(--color-secondary); color: var(--color-primary); list-style: none; }
.woocommerce-error { border-color: #dc2626; }
.woocommerce-pagination { margin-top: 32px; text-align: center; }
.woocommerce-pagination ul { display: inline-flex; gap: 8px; padding: 0; margin: 0; list-style: none; border: 0; }
.woocommerce-pagination ul li { border: 0; }
.woocommerce-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 9999px; color: var(--color-primary); text-decoration: none; font-weight: 600; }
.woocommerce-pagination .page-numbers.current, .woocommerce-pagination .page-numbers:hover { background: var(--color-primary); color: #fff; }

/* ---- pages without Page Sections: cart, checkout, My account, single product, 404, search ------- */
.gbl-generic, .gbl-wc-main { padding: 200px 0 72px; background: var(--color-secondary); color: var(--color-primary); }
.gbl-generic__in, .gbl-wc-main__in { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.gbl-generic__title { margin: 0 0 24px; font-size: clamp(32px, 4vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.gbl-generic__content > * + * { margin-top: 16px; }
.gbl-generic__item { margin: 0 0 32px; }
.gbl-generic a, .gbl-wc-main a { color: var(--color-primary); }
.gbl-wc-main .button, .gbl-wc-main button.button, .gbl-wc-main a.button, .gbl-wc-main input.button,
.gbl-generic .button, .gbl-generic button.button, .gbl-generic a.button, .gbl-generic input.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border: 0; border-radius: 9999px; background: var(--color-primary); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; }
.gbl-wc-main .button:hover, .gbl-generic .button:hover { background: var(--color-accent); color: var(--color-primary); }
.gbl-wc-main .price, .gbl-wc-main .woocommerce-Price-amount { color: var(--color-primary); font-weight: 700; }
.gbl-wc-main .product_title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -.02em; }

@media (max-width: 900px) {
  .gbl-generic, .gbl-wc-main { padding-top: 170px; }
}

/* ---- shop / product / cart / checkout polish ---------------------------------------------------- */
/* `.gbl-wc-main a` (above) out-ranked the pill buttons, leaving dark text on the dark "Add to cart" pill. */
.gbl-wc-main .btn--dark, .gbl-wc-main a.btn--dark { background: var(--color-primary); color: #fff; }
.gbl-wc-main .btn--dark:hover { background: var(--color-accent); color: var(--color-primary); }
.gbl-wc-main .woocommerce-breadcrumb { margin: 0 0 24px; font-size: 14px; }

/* single product */
.gbl-wc-main div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.gbl-wc-main div.product > * { min-width: 0; }
.gbl-wc-main div.product div.images, .gbl-wc-main div.product div.summary { float: none; width: auto; margin: 0; }
.gbl-wc-main div.product div.images img { width: 100%; height: auto; border-radius: 20px; }
.gbl-wc-main div.product .woocommerce-tabs, .gbl-wc-main div.product .related, .gbl-wc-main div.product .upsells { grid-column: 1 / -1; }
.gbl-wc-main div.product .summary .price { display: block; margin: 12px 0 16px; font-size: 28px; letter-spacing: -.02em; }
.gbl-wc-main div.product .woocommerce-product-details__short-description { margin: 0 0 16px; color: var(--color-text-medium, inherit); }
.gbl-wc-main .gbl-specs { margin: 0 0 24px; }
.gbl-wc-main .gbl-specs > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0, 13, 92, .12); }
.gbl-wc-main .gbl-specs dd { margin: 0; font-weight: 600; }
.gbl-wc-main .gbl-enquiry { margin: 0 0 16px; }
.gbl-wc-main form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 20px; }
.gbl-wc-main .quantity .qty { width: 72px; min-height: 48px; padding: 0 12px; border: 1px solid rgba(0, 13, 92, .25); border-radius: 12px; background: #fff; color: var(--color-primary); font: inherit; text-align: center; }
.gbl-wc-main .product_meta { display: grid; gap: 4px; font-size: 14px; }
.gbl-wc-main .woocommerce-tabs ul.tabs { display: flex; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; border-bottom: 1px solid rgba(0, 13, 92, .15); }
.gbl-wc-main .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; background: none; }
.gbl-wc-main .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 18px; font-weight: 700; text-decoration: none; }
.gbl-wc-main .woocommerce-tabs ul.tabs li.active a { border-bottom: 3px solid var(--color-accent); }
.gbl-wc-main .woocommerce-tabs ul.tabs::before, .gbl-wc-main .woocommerce-tabs ul.tabs li::before, .gbl-wc-main .woocommerce-tabs ul.tabs li::after { display: none; }
.gbl-wc-main .related > h2, .gbl-wc-main .upsells > h2 { margin: 24px 0 24px; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.02em; }

/* forms: reviews, cart, checkout, My account */
.gbl-wc-main input[type="text"], .gbl-wc-main input[type="email"], .gbl-wc-main input[type="tel"], .gbl-wc-main input[type="password"],
.gbl-wc-main input[type="number"], .gbl-wc-main textarea, .gbl-wc-main select, .gbl-wc-main .select2-selection {
	width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid rgba(0, 13, 92, .25); border-radius: 12px; background: #fff; color: var(--color-primary); font: inherit; box-sizing: border-box;
}
.gbl-wc-main textarea { min-height: 120px; }
.gbl-wc-main input:focus-visible, .gbl-wc-main textarea:focus-visible, .gbl-wc-main select:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.gbl-wc-main label { display: block; margin: 0 0 6px; font-weight: 600; }
.gbl-wc-main .required { color: #dc2626; text-decoration: none; }
.gbl-wc-main .form-row { margin: 0 0 16px; }
.gbl-wc-main .comment-form-rating .stars a { color: var(--color-accent); }

/* cart */
.gbl-wc-main table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid rgba(0, 13, 92, .15); border-radius: 16px; background: #fff; overflow: hidden; }
.gbl-wc-main table.shop_table th, .gbl-wc-main table.shop_table td { padding: 14px 16px; border: 0; border-bottom: 1px solid rgba(0, 13, 92, .1); text-align: left; vertical-align: middle; }
.gbl-wc-main table.shop_table tr:last-child > * { border-bottom: 0; }
.gbl-wc-main table.cart img { width: 72px; height: auto; border-radius: 10px; }
.gbl-wc-main table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 8px; }
.gbl-wc-main table.cart td.actions .coupon input { width: 200px; }
.gbl-wc-main .cart-collaterals { margin-top: 32px; }
.gbl-wc-main .cart_totals { width: 100%; max-width: 480px; margin-left: auto; float: none; }
.gbl-wc-main .cart_totals h2, .gbl-wc-main #order_review_heading, .gbl-wc-main .woocommerce-billing-fields h3, .gbl-wc-main .woocommerce-additional-fields h3 { margin: 0 0 16px; font-size: 24px; letter-spacing: -.02em; }
.gbl-wc-main .wc-proceed-to-checkout .checkout-button { width: 100%; }
.gbl-wc-main .cart-empty, .gbl-wc-main .woocommerce-info { text-align: left; }
.gbl-wc-main .return-to-shop { margin-top: 16px; }

/* checkout */
.gbl-wc-main form.checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 40px; align-items: start; }
.gbl-wc-main form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.gbl-wc-main form.checkout #customer_details .col-1, .gbl-wc-main form.checkout #customer_details .col-2 { float: none; width: auto; }
.gbl-wc-main form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; }
.gbl-wc-main form.checkout #order_review { grid-column: 2; grid-row: 2; }
.gbl-wc-main .form-row-first, .gbl-wc-main .form-row-last { width: calc(50% - 8px); display: inline-block; vertical-align: top; }
.gbl-wc-main .form-row-first { margin-right: 12px; }
.gbl-wc-main #payment { padding: 20px; border: 1px solid rgba(0, 13, 92, .15); border-radius: 16px; background: #fff; }
.gbl-wc-main #payment ul.payment_methods { margin: 0 0 16px; padding: 0; list-style: none; }
.gbl-wc-main #payment .payment_box { margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: var(--color-secondary); }
.gbl-wc-main #payment #place_order { width: 100%; }
.gbl-wc-main .gbl-research-ack { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; }
.gbl-wc-main .gbl-research-ack label { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 500; }
.gbl-wc-main .gbl-research-ack input { width: 20px; min-height: 20px; margin-top: 2px; accent-color: var(--color-primary); }
.gbl-wc-main .woocommerce-error li, .gbl-wc-main .woocommerce-message { list-style: none; }
.gbl-wc-main .woocommerce-message .button { margin-left: 12px; }

@media (max-width: 900px) {
	.gbl-wc-main div.product, .gbl-wc-main form.checkout { grid-template-columns: 1fr; }
	.gbl-wc-main form.checkout #customer_details, .gbl-wc-main form.checkout #order_review_heading, .gbl-wc-main form.checkout #order_review { grid-column: 1; grid-row: auto; }
	.gbl-wc-main .form-row-first, .gbl-wc-main .form-row-last { width: 100%; margin-right: 0; display: block; }
	.gbl-wc-main table.cart td.actions .coupon input { width: 100%; }
}

/* WooCommerce paints primary buttons ("Add to cart" on the product page, the review "Submit") in its own purple/grey.
   Use the same navy pill as the shop cards' .btn--dark. */
.woocommerce .gbl-wc-main .button.alt, .woocommerce .gbl-wc-main button.button.alt, .woocommerce .gbl-wc-main a.button.alt, .woocommerce .gbl-wc-main input.button.alt,
.woocommerce .gbl-wc-main #respond input#submit { background: var(--color-primary); color: #fff; font-weight: 700; }
.woocommerce .gbl-wc-main .button.alt:hover, .woocommerce .gbl-wc-main button.button.alt:hover, .woocommerce .gbl-wc-main a.button.alt:hover, .woocommerce .gbl-wc-main input.button.alt:hover,
.woocommerce .gbl-wc-main #respond input#submit:hover { background: var(--color-accent); color: var(--color-primary); }
.woocommerce .gbl-wc-main #respond input#submit { min-height: 48px; padding: 0 28px; border: 0; border-radius: 9999px; cursor: pointer; }

/* Banner image: WooCommerce's `.woocommerce img { height: auto; max-width: 100% }` out-ranked `.page-hero__img` on the
   shop page, so the image kept its own aspect ratio (taller than the banner) and the dark scrim — which only covers
   the banner box — stopped partway down it. Make the image fill the banner again, as on the approved page. */
body .page-hero .page-hero__img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* ---- header logo 200–250px ---------------------------------------------------------------------------------------
   The approved header was built around a 150px logo that hangs ~15px below the 120px nav pill. The logo is now
   200–250px (scales with the viewport) and still hangs from the same point under the top bar, so it grows downward:
   --gbl-logo-x is the extra height compared with the approved 150px. The pill moves down by half of it (the logo is
   centred on the pill) and the content under the header moves down by at least all of it — and never closer than
   --gbl-below-logo, the logo's real bottom edge + a gap — so no heading, lead text, breadcrumb or button ever sits
   under the logo. Phones/tablets (<= 900px) keep their own smaller header. */
:root {
	--gbl-logo-h: clamp(200px, 17.5vw, 250px);
	--gbl-logo-x: calc(var(--gbl-logo-h) - 150px);
	--gbl-below-logo: calc(var(--u) * 28 + var(--gbl-logo-h) + 13px); /* logo bottom edge (pill top + 60 + h/2) + 28px */
	--gbl-home-shift: max(var(--gbl-logo-x), calc(var(--gbl-logo-h) + 13px - var(--u) * 84.5));
}
@media (min-width: 901px) {
	body .navpill .logo__img { height: var(--gbl-logo-h); width: auto; }

	/* inner pages (header inside the banner), shop + WooCommerce/generic pages (header overlaid on the page) */
	body:not(.home) .navpill { margin-top: calc(var(--u) * 12 + var(--gbl-logo-x) / 2); margin-bottom: calc(var(--gbl-logo-x) / 2); }
	.site-top ~ main .page-hero { padding-top: max(calc(215px + var(--gbl-logo-x)), var(--gbl-below-logo)); }
	.gbl-generic, .gbl-wc-main { padding-top: max(calc(200px + var(--gbl-logo-x)), calc(var(--gbl-below-logo) - 13px)); }

	/* home hero: absolutely positioned layout scaled by --u — move the pill, copy and feature cards, grow the hero */
	body.home .navpill { top: calc(var(--u) * 28 + var(--gbl-logo-x) / 2); }
	body.home .hero { height: calc(var(--u) * 376.5 + var(--gbl-home-shift)); }
	body.home .hero__copy { top: calc(var(--u) * 112.5 + var(--gbl-home-shift)); }
	body.home .feats { top: calc(var(--u) * 320.5 + var(--gbl-home-shift)); }
}

/* ---- cart / checkout / variation dropdown polish ------------------------------------------------------------------ */
/* Content width = the header/footer grid (the nav pill's width), not a separate 1200px box. */
.gbl-generic__in, .gbl-wc-main__in { width: calc(100% - 2 * var(--space-container-x, 24px)); max-width: calc(var(--container-max, 1200px) - 2 * var(--space-container-x, 24px)); margin: 0 auto; padding: 0; }

/* Buttons: on the cart/checkout pages <body> has no `.woocommerce` class, so the earlier `.woocommerce .gbl-wc-main`
   rules never matched and WooCommerce's purple won. Same navy pill as the shop cards. */
body .gbl-wc-main a.button.alt, body .gbl-wc-main button.button.alt, body .gbl-wc-main input.button.alt, body .gbl-wc-main #respond input#submit,
body .gbl-wc-main #payment #place_order { background: var(--color-primary); color: #fff; font-weight: 700; }
body .gbl-wc-main a.button.alt:hover, body .gbl-wc-main button.button.alt:hover, body .gbl-wc-main input.button.alt:hover, body .gbl-wc-main #respond input#submit:hover,
body .gbl-wc-main #payment #place_order:hover { background: var(--color-accent); color: var(--color-primary); }
body .gbl-wc-main .button:disabled, body .gbl-wc-main button.button:disabled[disabled], body .gbl-wc-main .button.disabled { background: var(--color-primary); color: #fff; opacity: .45; cursor: not-allowed; }
body .gbl-wc-main .wc-proceed-to-checkout a.checkout-button, body .gbl-wc-main #payment #place_order { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin: 0; padding: 0 28px; border-radius: 9999px; font-size: 16px; line-height: 1.2; }

/* notices: WooCommerce's icon sits on top of the text */
.gbl-wc-main .woocommerce-info::before, .gbl-wc-main .woocommerce-message::before, .gbl-wc-main .woocommerce-error::before { display: none; }
.gbl-wc-main .woocommerce-info a, .gbl-wc-main .woocommerce-message a:not(.button) { font-weight: 600; }

/* cart table: narrow remove / thumbnail columns, readable product name */
.gbl-wc-main table.cart th.product-remove, .gbl-wc-main table.cart td.product-remove { width: 56px; padding-right: 0; text-align: center; }
.gbl-wc-main table.cart th.product-thumbnail, .gbl-wc-main table.cart td.product-thumbnail { width: 104px; padding-right: 0; }
.gbl-wc-main table.cart th.product-price, .gbl-wc-main table.cart td.product-price,
.gbl-wc-main table.cart th.product-quantity, .gbl-wc-main table.cart td.product-quantity,
.gbl-wc-main table.cart th.product-subtotal, .gbl-wc-main table.cart td.product-subtotal { width: 130px; }
.gbl-wc-main table.cart td.product-name a { font-weight: 700; text-decoration: none; }
.gbl-wc-main table.cart td.product-name a:hover { text-decoration: underline; }
.gbl-wc-main table.cart td.product-name dl.variation { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 0; font-size: 14px; }
.gbl-wc-main table.cart td.product-name dl.variation dt, .gbl-wc-main table.cart td.product-name dl.variation dd, .gbl-wc-main table.cart td.product-name dl.variation p { margin: 0; }
.gbl-wc-main table.cart td.product-name dl.variation dt { font-weight: 600; }
.gbl-wc-main table.cart a.remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #dc2626; font-size: 22px; text-decoration: none; }
.gbl-wc-main table.cart a.remove:hover { background: #dc2626; color: #fff; }

/* checkout: heading and order summary start on the same row; the order box no longer drops below the billing heading */
.gbl-wc-main form.checkout { grid-template-rows: auto auto 1fr; }
.gbl-wc-main form.checkout #customer_details { grid-row: 1 / span 3; }
.gbl-wc-main #order_review table.shop_table { margin: 0 0 20px; }
.gbl-wc-main #order_review td.product-name { font-weight: 600; }

/* variation dropdown on the product page */
.gbl-wc-main table.variations { width: 100%; margin: 0 0 16px; border: 0; background: none; }
.gbl-wc-main table.variations th, .gbl-wc-main table.variations td { display: block; padding: 0; border: 0; background: none; text-align: left; }
.gbl-wc-main table.variations th.label { margin: 0 0 6px; }
.gbl-wc-main table.variations th.label label { margin: 0; font-weight: 700; }
.gbl-wc-main table.variations select { width: 100%; max-width: 360px; }
.gbl-wc-main a.reset_variations { display: inline-block; margin-top: 8px; font-size: 14px; }
.gbl-wc-main .single_variation_wrap .woocommerce-variation-price { margin: 4px 0 14px; }
.gbl-wc-main .single_variation_wrap .woocommerce-variation-price .price { font-size: 28px; letter-spacing: -.02em; }
.gbl-wc-main .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gbl-wc-main .woocommerce-variation-description p { margin: 0 0 12px; }
/* the "From $…" line at the top is replaced by the chosen size's price once a size is selected */
.gbl-wc-main .summary:has(.woocommerce-variation-price .price) > p.price { display: none; }

/* cart "actions" row: coupon on the left, Update cart on the right. (A flex <td> lost its colspan and squeezed the first column.) */
@media (min-width: 769px) {
	.gbl-wc-main table.cart td.actions { padding: 16px; }
	.gbl-wc-main table.cart td.actions .coupon { float: left; display: flex; flex-wrap: nowrap; gap: 8px; }
	.gbl-wc-main table.cart td.actions .coupon label { display: none; }
	.gbl-wc-main table.cart td.actions button[name="update_cart"] { float: right; }
	.gbl-wc-main table.cart td.actions::after { content: ""; display: table; clear: both; }
}

/* checkout / account fields: WooCommerce's `.form-row .input-text` border out-ranked the theme's, so text fields had a dark
   border while the dropdowns had a light one. One style for all of them. */
body .gbl-wc-main form .form-row input.input-text, body .gbl-wc-main form .form-row textarea, body .gbl-wc-main form .form-row select,
body .gbl-wc-main form.woocommerce-cart-form input.input-text, body .gbl-wc-main .quantity input.qty {
	min-height: 48px; padding: 10px 14px; border: 1px solid rgba(0, 13, 92, .25); border-radius: 12px; background: #fff; color: var(--color-primary); box-shadow: none;
}
body .gbl-wc-main form .form-row textarea { min-height: 120px; }
body .gbl-wc-main form .form-row input.input-text:focus, body .gbl-wc-main form .form-row textarea:focus { border-color: var(--color-primary); outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* product cards: price and button on ONE row (as on the approved home cards); "From" is a small label above the amount.
   Narrow cards (tablet/phone) wrap the button below the price instead of overflowing. */
.pcard .pcard__buy { flex-wrap: nowrap; gap: 8px; }
.pcard .pcard__buy .price { flex-shrink: 0; white-space: nowrap; line-height: 1.15; }
.pcard .pcard__buy .price__from, .gbl-wc-main .price__from { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.pcard .pcard__buy .btn { flex-shrink: 0; padding-left: 16px; padding-right: 16px; }
@media (max-width: 1180px) { .pcard .pcard__buy { flex-wrap: wrap; } }

/* header dropdown: a menu item with child items (Shop → Vial Cases / Research Catalogue). Opens on hover and on
   keyboard focus; on phones the child links are always listed under the parent inside the open menu. */
.nav__dd { position: relative; display: inline-flex; align-items: center; }
.nav__sub { position: absolute; top: 100%; left: 50%; z-index: 300; min-width: 220px; padding-top: 14px; opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.nav__sub-in { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid rgba(0, 13, 92, .12); box-shadow: 0 18px 40px rgba(0, 9, 48, .28); }
.nav__dd:hover .nav__sub, .nav__dd:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav .nav__sub a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; color: #000D5C; font-size: 15px; font-weight: 600; text-decoration: none; background: none; box-shadow: none; height: auto; }
.nav .nav__sub a:hover, .nav .nav__sub a:focus-visible { background: #E6F2FF; color: #000D5C; text-decoration: none; }
.nav .nav__sub a[aria-current="page"] { background: #E6F2FF; color: #000D5C; padding: 0 16px; height: auto; border-radius: 10px; box-shadow: none; }
@media (max-width: 900px) {
	.nav__dd { display: block; width: 100%; }
	.nav__dd > a { width: 100%; }
	.nav__sub { position: static; min-width: 0; padding: 0; opacity: 1; visibility: visible; transform: none; }
	.nav__sub-in { padding: 0 0 0 18px; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
	.nav .nav__sub a { min-height: 48px; padding: 0; border-radius: 0; font-size: 15px; color: var(--color-text-inverse, #fff); border-bottom: 1px solid rgba(255, 255, 255, .16); }
	.nav .nav__sub a:hover, .nav .nav__sub a:focus-visible { background: none; color: var(--color-accent, #CFE6FB); }
	.nav .nav__sub a[aria-current="page"] { background: none; color: var(--color-accent, #CFE6FB); padding: 0; border-radius: 0; }
}

/* COA page — report gallery: four reports per row, each opens in the full-size viewer. */
.coa__head { max-width: var(--container-narrow, 800px); margin-bottom: 48px; }
.coa__lead { margin-top: 16px; font-size: var(--text-body-lg, 18px); line-height: 1.55; }
.coa__lead p + p { margin-top: 12px; }
.coa-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-gap, 24px); margin: 0; padding: 0; list-style: none; }
.coa-grid__item { margin: 0; min-width: 0; }
.coa-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--card-radius, 10px); background: var(--card-bg, #fff); border: 1px solid var(--card-border-color, #E1EBF5); box-shadow: var(--shadow-sm, 0 1px 8px rgba(0, 0, 0, .06)); overflow: hidden; color: var(--color-primary, #000D5C); text-decoration: none; cursor: zoom-in; transition: transform var(--transition-base, .25s ease), box-shadow var(--transition-base, .25s ease); }
.coa-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 0, 0, .1)); }
.coa-card:focus-visible { outline: 2px solid var(--color-accent, #0096FB); outline-offset: 3px; }
.coa-card__img { display: block; aspect-ratio: 17 / 22; overflow: hidden; background: var(--color-bg-light, #F2F8FF); border-bottom: 1px solid var(--card-border-color, #E1EBF5); }
.coa-card__thumb { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.coa-card__meta { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px 16px; }
.coa-card__meta strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.coa-card__meta span { font-size: var(--text-small, 14px); font-weight: 500; color: var(--color-text-medium, #34445E); }
@media (max-width: 1100px) { .coa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .coa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 480px) { .coa-card__meta { padding: 10px 12px 12px; } .coa-card__meta strong { font-size: 14px; } }

.coa-viewer { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 56px 72px 24px; background: rgba(0, 6, 31, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.coa-viewer[hidden] { display: none; }
.coa-viewer__fig { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; max-width: 100%; max-height: 100%; min-height: 0; }
.coa-viewer__stage { max-width: 100%; min-height: 0; overflow: auto; border-radius: var(--radius-md, 10px); background: #fff; box-shadow: 0 24px 80px rgba(0, 0, 0, .55); overscroll-behavior: contain; }
.coa-viewer__img { display: block; width: auto; height: auto; max-width: min(100%, 92vw); max-height: calc(100vh - 140px); cursor: zoom-in; }
.coa-viewer.is-zoomed .coa-viewer__stage { width: min(100%, 1100px); }
.coa-viewer.is-zoomed .coa-viewer__img { width: 100%; max-width: none; max-height: none; cursor: zoom-out; }
.coa-viewer__cap { color: #fff; font-size: 14px; font-weight: 600; text-align: center; }
.coa-viewer__btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; transition: background-color var(--transition-fast, .15s ease), color var(--transition-fast, .15s ease); }
.coa-viewer__btn:hover { background: #fff; color: var(--color-primary, #000D5C); }
.coa-viewer__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.coa-viewer__close { top: 16px; right: 16px; }
.coa-viewer__nav { top: 50%; margin-top: -24px; }
.coa-viewer__prev { left: 12px; }
.coa-viewer__next { right: 12px; }
.coa-viewer__nav[hidden] { display: none; }
@media (max-width: 700px) {
	.coa-viewer { padding: 64px 12px 16px; }
	.coa-viewer__nav { top: auto; bottom: 12px; margin-top: 0; width: 44px; height: 44px; }
	.coa-viewer__img { max-height: calc(100vh - 170px); }
	.coa-viewer__cap { padding: 0 56px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .coa-card, .coa-card:hover { transition: none; transform: none; } }