/**
 * Layout, WooCommerce-markup and accessibility layer (loaded last).
 */

/* ---------- Accessibility ---------- */
.skip-link.visually-hidden:focus {
  position: fixed !important; top: 8px; left: 8px; z-index: 10000;
  width: auto !important; height: auto !important; margin: 0 !important; padding: 1rem 1.6rem !important;
  clip: auto !important; overflow: visible !important; white-space: normal !important;
  background: #fff; color: var(--heading-color); border-radius: 6px; box-shadow: var(--shadow-lg);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}
button { font: inherit; cursor: pointer; }
.cart-item-remove-btn { background: none; border: 0; padding: 0; }

/* ---------- Header / mega menu ---------- */
.header-inner { position: relative; }
.nav-item { position: static; }
.nav-item:focus-within .mega-menu,
.nav-item.is-open .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; }
.mega-menu-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2.8rem 2.4rem; }
.mega-menu { left: 0; transform: none; width: 100%; max-width: none; }

.mobile-drawer-title { font-weight: 700; font-size: 1.6rem; color: var(--heading-color); }
.mobile-drawer-footer { padding: 2rem var(--gutter-sm); border-top: 1px solid var(--card-border); margin-top: 1.6rem; }
.mobile-drawer-footer .btn { width: 100%; margin-bottom: 1rem; }
.mobile-drawer-phone { font-size: 1.3rem; color: #6b6b6b; text-align: center; }
.mobile-menu-link--all { font-weight: 800; color: #000; }
.predictive-empty { padding: 1.6rem; text-align: center; color: #6b6b6b; }
.predictive-result-stock { color: #5d6e00; font-size: 1.1rem; font-weight: 700; }

/* ---------- Footer ---------- */
.footer-top-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.footer-accordions-mobile { display: none; }
@media (max-width: 768px) {
  .footer-accordions-mobile { display: block; }
  .footer-col-desktop-links { display: none; }
}
.footer-contact-item a { color: inherit; }

/* ---------- Cart drawer ---------- */
.cart-drawer-message { margin: 0.8rem 1.6rem 0; padding: 1rem 1.2rem; border-radius: 6px; background: #fdecea; color: #8a1f17; font-size: 1.3rem; }
.cart-drawer-message[hidden] { display: none; }
.cart-drawer-actions .btn { width: 100%; }

/* ---------- Archive / filters ---------- */
fieldset.filter-group { border: 0; margin: 0; min-width: 0; }
fieldset.filter-group legend { padding: 0; }
.collection-sidebar .filter-apply-btn { display: none; }
.mobile-filter-body { padding: 1.6rem; overflow-y: auto; }
.mobile-filter-body .filter-apply-btn { display: inline-flex; width: 100%; margin-top: 1.6rem; }
.stock-toggle-label { font-weight: 700; font-size: 1.35rem; color: var(--heading-color); }
.stock-toggle-switch { position: relative; }
.stock-toggle-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stock-toggle-switch input:focus-visible + .switch-track { outline: 2px solid var(--heading-color); outline-offset: 2px; }
.filter-checkbox-text { display: flex; align-items: center; }
.filter-chip { text-decoration: none; }
.clear-all-filters-btn { text-decoration: underline; cursor: pointer; }
.filter-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--heading-color); color: #fff; font-size: 1.1rem; }
.products-grid.is-loading { opacity: 0.4; pointer-events: none; transition: opacity var(--transition-fast); }
.collection-pagination .page-numbers { display: flex; gap: 0.6rem; justify-content: center; list-style: none; padding: 0; flex-wrap: wrap; }
.collection-pagination .page-numbers a, .collection-pagination .page-numbers span { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--card-border); border-radius: 20px; padding: 0 1rem; }
.collection-pagination .page-numbers .current { background: var(--heading-color); color: #fff; border-color: var(--heading-color); }
.subcategory-icon-wrap img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- WooCommerce notices ---------- */
.woocommerce-notices-wrapper { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--gutter-sm); }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; margin: 1.6rem 0; padding: 1.2rem 1.6rem; border-radius: 8px;
  border: 1px solid var(--card-border); background: #f7f7f7; font-size: 1.4rem;
}
.woocommerce-error { background: #fdecea; border-color: #f2b8b2; color: #8a1f17; }
.woocommerce-message .button, .woocommerce-info .button { float: right; margin-left: 1rem; }

/* ---------- Single product (WooCommerce markup) ---------- */
.single-product-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
@media (max-width: 900px) { .single-product-layout { grid-template-columns: 1fr; gap: 2.4rem; } }
.single-product-layout .woocommerce-product-gallery { float: none !important; width: 100% !important; margin: 0 !important; position: relative; }
.single-product-layout .summary { float: none !important; width: auto !important; margin: 0 !important; }
.product-gallery-sticky { position: sticky; top: calc(var(--header-height) + 24px); }
@media (max-width: 900px) { .product-gallery-sticky { position: static; } }
.woocommerce-product-gallery__image img { width: 100%; height: auto; border-radius: var(--card-radius); }
.woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.woocommerce-product-gallery .flex-control-thumbs img { cursor: pointer; opacity: 0.6; border-radius: 6px; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce-product-gallery__trigger { position: absolute; top: 1rem; right: 1rem; z-index: 5; }
.onsale-wrap { position: absolute; top: 1.2rem; left: 1.2rem; z-index: 6; }

.pdp-buy-form form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-bottom: 2rem; }
.pdp-buy-form form.variations_form { display: block; }
.pdp-buy-form .variations { width: 100%; border: 0; margin-bottom: 1.6rem; }
.pdp-buy-form .variations th, .pdp-buy-form .variations td { display: block; padding: 0; text-align: left; }
.pdp-buy-form .variations label { font-weight: 700; font-size: 1.35rem; color: var(--heading-color); }
.pdp-buy-form .variations select { width: 100%; height: 48px; padding: 0 1.4rem; border: 1px solid var(--input-border); border-radius: var(--input-radius); background: #fff; font: inherit; margin: 0.4rem 0 1rem; }
.pdp-buy-form .reset_variations { font-size: 1.2rem; }
.pdp-buy-form .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.pdp-buy-form .woocommerce-variation-price { margin-bottom: 1rem; font-weight: 800; }
.pdp-buy-form .quantity { display: inline-flex; }
.pdp-buy-form .quantity .qty { width: 80px; height: 52px; text-align: center; font-size: 1.5rem; font-weight: 700; border: 1px solid var(--input-border); border-radius: var(--btn-radius); background: #f7f7f7; }
.pdp-buy-form .single_add_to_cart_button {
  flex: 1; min-width: 180px; height: 52px; padding: 0 2.4rem; border: 0 !important; border-radius: var(--btn-radius);
  background: var(--btn-bg-dark) !important; color: var(--btn-text-lime) !important; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.05em;
}
.pdp-buy-form .single_add_to_cart_button:hover:not(:disabled) { background: var(--btn-bg-hover) !important; }
.pdp-buy-form .single_add_to_cart_button.disabled, .pdp-buy-form .single_add_to_cart_button:disabled { opacity: 0.5; cursor: not-allowed; }
.pdp-buy-form .stock { font-size: 1.3rem; margin: 0 0 1rem; }
.product_meta { font-size: 1.3rem; color: var(--text-color); display: grid; gap: 0.4rem; margin-bottom: 1.6rem; }
.pdp-rating-stars .star-rating { color: var(--star-rating); }
.pdp-accordion-content table.woocommerce-product-attributes { width: 100%; border-collapse: collapse; }
.pdp-accordion-content table.woocommerce-product-attributes th, .pdp-accordion-content table.woocommerce-product-attributes td { padding: 0.8rem 0; border-bottom: 1px solid var(--divider-color); text-align: left; font-size: 1.35rem; }
.pdp-accordion-content table.woocommerce-product-attributes th { width: 40%; font-weight: 700; color: var(--heading-color); }
.sticky-mobile-buy-bar { visibility: hidden; }
.sticky-mobile-buy-bar.is-visible { visibility: visible; }

.related.products, .upsells.products { margin-top: 6.4rem; padding-top: 4.8rem; border-top: 1px solid var(--divider-color); }
.related.products > h2, .upsells.products > h2 { font-size: 2.4rem; font-weight: 900; margin-bottom: 2.4rem; color: var(--heading-color); }

/* ---------- Cart / checkout / account ---------- */
.cart-page-container .cart-collaterals .cart_totals { width: 100%; float: none; }
.cart-page-container .shop_table { width: 100%; }
@media (max-width: 900px) {
  .cart-page-container form > div[style*="grid-template-columns"],
  .my-account-page-container > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
.woocommerce-checkout #payment { background: #f7f7f7; border-radius: 8px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea { width: 100%; padding: 1rem 1.4rem; border: 1px solid var(--input-border); border-radius: 8px; font: inherit; }
.woocommerce form .form-row label { font-size: 1.3rem; font-weight: 600; display: block; margin-bottom: 0.4rem; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.woocommerce-MyAccount-navigation a { display: block; padding: 0.8rem 1rem; border-radius: 6px; color: var(--heading-color); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--heading-color); color: var(--accent-lime); }

/* =====================================================================
   Reference alignment (audit of computerlounge.co.nz, 2026-10-26)
   Measured at 1440px: header 100px, nav row 40px / 15px light, mega panel
   full width with 4 columns + 64px gap, 24px grid gap, product grid 4 cols
   (3 tablet, 2 mobile), hero 1425x646 desktop / 390x495 mobile.
   ===================================================================== */

/* Header */
.header-inner, .site-header .container { position: static; }
.header-main-row { padding-top: 1.2rem; padding-bottom: 1.2rem; gap: 2.4rem; justify-content: flex-start; }
.header-search { max-width: 570px; }
.search-form-pill { height: 40px; }
.site-logo img, .site-logo svg { height: 36px; }
.header-actions { margin-left: auto; }
.header-nav-bar .primary-nav-list { height: 40px; gap: 2.4rem; }
.header-nav-bar .nav-link { font-size: 1.5rem; font-weight: 300; }

/* Mega menu: full-width panel, 4-column grid, "Go to" links */
.mega-menu {
  left: 0; right: 0; width: 100%; max-width: none; transform: none;
  border-width: 1px 0 0; border-radius: 0; padding: 3.2rem var(--gutter-lg) 4rem;
}
.mega-menu-cols {
  max-width: calc(var(--page-width) - 2 * var(--gutter-lg)); margin: 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.2rem 6.4rem;
}
@media (max-width: 1280px) { .mega-menu-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2rem 4rem; } }
.mega-col-title { font-size: 1.5rem; font-weight: 300; margin-bottom: 0.6rem; display: inline-block; }
.mega-sub-link { font-size: 1.32rem; font-weight: 400; display: block; padding: 0.5rem 0; }
.mega-go-link { display: inline-block; margin-top: 0.8rem; font-size: 1.32rem; color: rgba(0, 0, 0, 0.7); text-decoration: underline; text-underline-offset: 3px; }
.mega-go-link:hover { color: #000; }

/* Mobile header: menu left, logo centred, icons right, persistent search row */
@media (max-width: 1024px) {
  .header-main-row { flex-wrap: wrap; row-gap: 0.8rem; padding-top: 0.8rem; padding-bottom: 0.8rem; gap: 0; }
  .mobile-nav-toggle { order: 1; }
  .site-logo { order: 2; flex: 1; justify-content: center; margin: 0; max-width: none; }
  .header-actions { order: 3; margin-left: 0; }
  .header-search { display: block; order: 4; flex: 0 0 100%; max-width: none; width: 100%; box-sizing: border-box; overflow: hidden; }
  .mobile-search-toggle, .mobile-search-overlay { display: none !important; }
}

/* Hero proportions: 1425x646 desktop, 390x495 mobile */
.hero-slide { min-height: 0; aspect-ratio: 1425 / 646; }
@media (max-width: 768px) { .hero-slide { aspect-ratio: 390 / 495; } }
.hero-pause {
  position: absolute; left: 2rem; bottom: 1.6rem; z-index: 7; width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, 0.9); color: #2c2c2c; display: inline-flex; align-items: center; justify-content: center;
}
.hero-pause[hidden] { display: none; }
.hero-pause-icon { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hero-pause.is-paused .hero-pause-icon { width: 0; height: 0; border: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }

/* Product carousels: 5 / 4 / 3 / 2 cards per view, 24px gap (12px on mobile) */
.product-carousel-track { gap: var(--grid-column-gap); }
.carousel-card { flex: 0 0 calc((100% - 4 * var(--grid-column-gap)) / 5); max-width: none; }
@media (max-width: 1279px) { .carousel-card { flex-basis: calc((100% - 3 * var(--grid-column-gap)) / 4); } }
@media (max-width: 1024px) { .carousel-card { flex-basis: calc((100% - 2 * var(--grid-column-gap)) / 3); } }
@media (max-width: 768px) {
  .product-carousel-track { gap: 1.2rem; }
  .carousel-card { flex-basis: calc((100% - 1.2rem) / 2); }
}
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; margin-bottom: 2.4rem; }

/* Promotions: 4 across, scroll on small screens */
.home-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .home-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .home-card-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.2rem; }
  .home-card-grid > * { flex: 0 0 78%; scroll-snap-align: start; }
}

/* Category tiles: 4 across (2 on mobile), portrait */
.home-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-tile { height: auto; aspect-ratio: 4 / 5; }
@media (max-width: 1024px) { .home-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .home-tile-title { font-size: 1.6rem; } .home-tile-text { padding: 1.4rem; } .home-tile-sub { display: none; } }

/* Product card extras */
.badge-sale { background: var(--sale-badge); color: #fff; }
.product-card-sku { font-size: 1.15rem; color: #6b6b6b; margin-bottom: 0.4rem; }
.product-card-sku strong { font-weight: 700; color: var(--heading-color); }

/* Category landing page */
.landing-cat-strip { padding: 2.4rem 0 0.8rem; }
.cat-strip-list { display: flex; gap: var(--grid-column-gap); overflow-x: auto; scroll-snap-type: x proximity; list-style: none; margin: 0; padding: 0 0 1.2rem; }
.cat-strip-item { flex: 0 0 140px; scroll-snap-align: start; }
.cat-strip-link { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; color: var(--heading-color); font-size: 1.3rem; font-weight: 600; }
.cat-strip-media { display: block; width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; background: #fff; }
.cat-strip-media img { width: 100%; height: 100%; object-fit: contain; }
.landing-brand-list { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.landing-brand-pill { display: inline-block; padding: 0.9rem 1.8rem; border: 1px solid var(--card-border); border-radius: 999px; color: var(--heading-color); font-weight: 600; font-size: 1.35rem; }
.landing-brand-pill:hover { background: var(--heading-color); color: var(--accent-lime); }
.landing-description .collection-description { max-width: 90ch; line-height: 1.6; }
@media (min-width: 1025px) { .cat-strip-list { justify-content: flex-start; } }

/* Collection grid: 4 / 3 / 2 columns, 24px gap */
.products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-row-gap) var(--grid-column-gap); }
@media (max-width: 1280px) { .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; } }
.hero-pause:focus-visible, .cat-strip-link:focus-visible, .landing-brand-pill:focus-visible { outline: 2px solid var(--heading-color); outline-offset: 2px; }
.hero-slide--plain { aspect-ratio: auto; min-height: 360px; }

/* DEF-001: Carousel product card price colour — WC default grey overrides theme */
.product-carousel-section .woocommerce-Price-amount,
.product-carousel-section .price,
.product-carousel-section .price ins,
.product-carousel-section .price ins .woocommerce-Price-amount { color: var(--heading-color) !important; }

/* DEF-002: Prevent horizontal scroll from off-screen nested mobile menu panel */
html { overflow-x: hidden; }