/*
Theme Name: M-Oneeleven
Theme URI: https://example.com
Author: Dearthwood Software
Description: Lightweight theme for M-Oneeleven with modern hero + animated diagonals. Customizer-driven.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: moneeleven
*/

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --teal:#11d3c7;
  --magenta:#e6368d;
  --dark:#0a0a0a;
  --grey:#1a1a1a;
  --mid:#2a2a2a;
  --text:#ffffff;
  --muted:#999;
}

html, body{height:100%}
body{
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--dark);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}

a, a:visited { color: inherit; }
a:hover, a:active { color: var(--teal); }

h1, h2, h3, h4 {padding: 5px; margin-top: 10px; margin-bottom:10px;}

/* --- General list styling --- */
ul, ol {
  margin: 1.2em 0 1.4em 1.4em;
  padding-left: 1.2em;
  line-height: 1.6;
  color: var(--text);
  font-size: 1rem;
}

ul li, ol li {
  margin-bottom: 0.5em;
  position: relative;
}

/* --- Teal glowing dot before each nav link --- */
ul.nav-links li {
  position: relative;         /* anchor the dot */
  padding-left: 16px;         /* room for the dot */
  list-style: none;           /* make sure no default bullet appears */
}

ul.nav-links li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 6px var(--teal);
  opacity: 0.9;
  pointer-events: none;
}

/* Optional: add subtle hover glow */
ul.nav-links li:hover::before {
  box-shadow: 0 0 10px var(--teal), 0 0 4px var(--teal);
}


/* --- Bold labels (like “First-party cookies”) --- */
ul li strong {
  color: var(--magenta);
  font-weight: 600;
}

/* --- Headings in lists --- */
h2, h3, h4 {
  color: var(--teal);
  margin-top: 2em;
  margin-bottom: 0.6em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Optional: smooth hover effect for links inside lists --- */
ul li a {
  color: var(--teal);
  text-decoration: underline;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
ul li a:hover {
  color: var(--magenta);
  text-shadow: 0 0 6px var(--magenta);
}


/* Animated diagonal stripes background */
.bg-stripes{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.15; /* Animated diagonal stripes opacity */
}
.stripe{
  position: absolute;
  width: 4px;
  height: 200%;
  top: -50%;
  transform-origin: center;
  animation: drift 20s linear infinite;
}
.stripe:nth-child(1){left:5%;  background:var(--teal);    animation-delay:0s;  animation-duration:25s}
.stripe:nth-child(2){left:15%; background:var(--magenta); animation-delay:-3s; animation-duration:30s}
.stripe:nth-child(3){left:25%; background:var(--teal);    animation-delay:-7s; animation-duration:22s}
.stripe:nth-child(4){left:40%; background:var(--magenta); animation-delay:-12s;animation-duration:28s}
.stripe:nth-child(5){left:55%; background:var(--teal);    animation-delay:-5s; animation-duration:26s}
.stripe:nth-child(6){left:68%; background:var(--magenta); animation-delay:-15s;animation-duration:24s}
.stripe:nth-child(7){left:78%; background:var(--teal);    animation-delay:-9s; animation-duration:27s}
.stripe:nth-child(8){left:88%; background:var(--magenta); animation-delay:-2s; animation-duration:29s}
.stripe:nth-child(9){left:95%; background:var(--teal);    animation-delay:-18s;animation-duration:23s}
@keyframes drift{
  0%{transform: translateY(0) rotate(45deg)}
  100%{transform: translateY(15%) rotate(45deg)}
}

/* Container */
.container{
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Nav */
nav.site-nav{
  padding: 2rem 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.logo-hex{
  width: 100px;
  height: 100px;
  position: relative;
  cursor: pointer;
  display:flex;align-items:center;gap:14px;
}
.hex-shape{
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--magenta) 100%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
}
.site-title-text{font-weight:800;letter-spacing:.12em;text-transform:uppercase}

/* WP custom logo fallback sizing */
.custom-logo{max-height:100px;height:auto;width:auto}

/* Fix mobile menu stacking */
.nav-toggle {
  position: relative;
  z-index: 9999;
}

.nav-links{
  display: flex;
  gap: 3rem;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 9998; /* ensures it sits above everything else */
}

.nav-links.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.nav-links a{
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
}
.nav-links a::after{
  content: '';
  position: absolute;
  bottom: -4px; left: 0; width: 0; height: 2px;
  background: var(--teal);
  transition: width 0.3s;
}
.nav-links a:hover{color: var(--text)}
.nav-links a:hover::after{width: 100%}

/* Hero section */
.hero{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem 5vw;
  text-align: center;
  position: relative;
}
.hero-title{
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  background: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subtitle{
  font-size: clamp(1rem, 3vw, 1.8rem);
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4rem;
}

/* CTA Grid */
.cta-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  width: 100%;
  margin-top: 3rem;
}
.cta-card{
  background: var(--grey);
  border: 2px solid var(--mid);
  padding: 3rem 2rem;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.cta-card::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, var(--accent) 100%);
  opacity: 0; transition: opacity 0.4s;
}
.cta-card::after{
  content: '';
  position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(135deg, var(--accent) 0%, transparent 50%);
  z-index: -1; opacity: 0; transition: opacity 0.4s;
}
.cta-card span{ position: relative; z-index: 1; display: block; transition: transform 0.4s; }
.cta-card:hover{ transform: translateY(-8px); border-color: var(--accent); }
.cta-card:hover::before{opacity: .1}
.cta-card:hover::after{opacity: 1}
.cta-card:hover span{transform: scale(1.05)}
.cta-card[data-accent="teal"]{--accent: var(--teal)}
.cta-card[data-accent="magenta"]{--accent: var(--magenta)}

/* Footer */
footer{
  padding: 3rem 5vw;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--mid);
}

/* Mobile nav toggle */
.nav-toggle{
  display: none; flex-direction: column; gap: 6px; cursor: pointer; padding: 8px;
}
.nav-toggle span{ width: 28px; height: 3px; background: var(--text); transition: all 0.3s; }

@media (max-width: 768px){
  .nav-toggle{display:flex}
  .nav-links{
    position: absolute; top: 100%; left: 0; right: 0; background: var(--grey);
    flex-direction: column; gap: 0; padding: 2rem;
    transform: translateY(-100%); opacity: 0; pointer-events: none; transition: all 0.4s;
  }
  .nav-links.active{ transform: translateY(0); opacity: 1; pointer-events: all; }
  .nav-links li{ padding: 1rem 0; border-bottom: 1px solid var(--mid); }
  .cta-grid{ grid-template-columns: 1fr; }
}

/* Subtle ambient glow */
.ambient-glow{
  position: fixed; width: 600px; height: 600px; border-radius: 50%;
  pointer-events: none; z-index: 0; filter: blur(120px); opacity: 0.15;
}
.glow-1{ top: -300px; left: -200px; background: var(--teal);    animation: float 15s ease-in-out infinite; }
.glow-2{ bottom: -300px; right:-200px; background: var(--magenta);animation: float 18s ease-in-out infinite reverse; }
@keyframes float{
  0%,100%{transform: translate(0,0) scale(1)}
  33%{transform: translate(50px,-30px) scale(1.1)}
  66%{transform: translate(-30px,50px) scale(.9)}
}

.hero-title {
  text-align: center;
  color: var(--text);
}
.hero-title-widget {
  display: inline-block;
}
.hero-title .widget-title {
  font-size: 1rem;
  margin: 0;
  background: linear-gradient(to bottom,#fff,#ccc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  text-transform: uppercase;
}


/* Hero content blocks (above/below the buttons) */
.hero-block{
  width:min(1000px, 92vw);
  margin: 1.2rem auto 2rem;
  padding: 1.2rem 1.2rem;
  background: linear-gradient(160deg, var(--glass), rgba(255,255,255,.05));
  border: 2px solid var(--mid);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  color: var(--text);
}
.hero-block--top   { margin-top: 1rem;  }
.hero-block--bottom{ margin-top: 2rem;  }

.hero-block-title{
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  margin: 0 0 .5rem;
  letter-spacing: .04em;
  font-weight: 800;
  background: linear-gradient(to bottom, #ffffff, #cccccc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip:text;
}
.hero-block p{ color: var(--muted); }
.hero-block :where(ul,ol){margin:.6rem 0 .6rem 1.2rem}
.hero-block a{ color: var(--teal); text-underline-offset: 3px; }
.hero-block a:hover{ color:#000; background:var(--teal); padding:.05em .18em; border-radius:6px }


/* Footer layout + links */
.footer-inner{
  display:flex;
  gap:2.2rem;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  width:min(1200px, 92vw);
  margin:0 auto 1rem;
  text-align:left;
}

.footer-info, .footer-legal{ color: var(--muted); }
.footer-info a, .footer-legal a{ color: inherit; text-decoration: none; }
.footer-info a:hover, .footer-legal a:hover{ color: var(--text); text-decoration: underline; }

.footer-line{ margin:.2rem 0; }
.footer-address p{ margin:.2rem 0; }

.footer-legal-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.9rem;
}
.footer-legal-list li{ position:relative; }
.footer-legal-list li+li::before{
  content: "•";
  margin: 0 .6rem 0 0;
  opacity:.6;
}



@media (max-width: 700px){
  .footer-inner{ flex-direction:column; gap:1rem; }
}



/* =========================
   Contact Form 7 – site skin
   ========================= */
.wpcf7 form{
  --bg: var(--mid);
  --fg: var(--text);
  --border: rgba(255,255,255,.10);
  --border-focus: var(--teal);
  --hint: var(--muted);
  --danger: #ff5a7a;            /* for tips; falls back if --magenta unused */
}

/* layout + spacing */
.wpcf7 form p{ margin: 14px 0; }
.wpcf7 form label{ display:block; margin: 0 0 6px; font-weight:600; letter-spacing:.2px; color: var(--fg); }

/* inputs, textareas, selects */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select{
  width:100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

/* placeholder */
.wpcf7 ::placeholder{ color: var(--hint); opacity:.85; }

/* focus state */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus{
  border-color: var(--border-focus);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--border-focus) 35%, transparent),
    inset 0 0 0 1px rgba(0,0,0,.35);
}

/* select arrow (consistent look) */
.wpcf7 select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg) 50%),
    linear-gradient(135deg, var(--fg) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%,
    calc(100% - 42px) 50%;
  background-size: 6px 6px, 6px 6px, 1px 1px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

/* checkboxes / radios */
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"]{
  accent-color: var(--teal);
  transform: translateY(1px);
}

/* submit button */
.wpcf7 .wpcf7-submit{
  display:inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--teal);
  color: #0a0a0a;
  border: none;
  font-weight: 800;
  cursor: pointer;
  transition: transform .06s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 24px rgba(17,211,199,.18);
}
.wpcf7 .wpcf7-submit:hover{ filter: brightness(1.06); }
.wpcf7 .wpcf7-submit:active{ transform: translateY(1px); }

/* Turnstile block spacing (iframe itself handles its own theme) */
.wpcf7 .cf-turnstile,
.wpcf7 .wpcf7-form-control-turnstile{
  margin: 10px 0 16px;
}

/* validation + response messages */
.wpcf7 .wpcf7-not-valid{ border-color: var(--magenta, var(--danger)) !important; }
.wpcf7 .wpcf7-not-valid:focus{
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--magenta, var(--danger)) 30%, transparent),
    inset 0 0 0 1px rgba(0,0,0,.35);
}
.wpcf7 .wpcf7-not-valid-tip{
  margin-top: 6px;
  font-size: .9rem;
  color: var(--magenta, var(--danger));
}

.wpcf7 .wpcf7-response-output{
  margin: 16px 0 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 12px 14px;
  background: color-mix(in oklab, var(--dark) 70%, #000 30%);
  color: var(--fg);
}
.wpcf7 .wpcf7-mail-sent-ok{
  border-color: color-mix(in oklab, var(--teal) 60%, #fff 0%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--teal) 25%, transparent);
}
.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-acceptance-missing{
  border-color: var(--magenta, var(--danger));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--magenta, var(--danger)) 25%, transparent);
}

/* success/failed spinner positioning tweaks */
.wpcf7 .wpcf7-spinner{
  margin-left: 10px;
  filter: brightness(.9);
}








/* ===== WooCommerce styling (uses existing tokens) ===== */

/* Shop page heading */
.shop-hero{
  text-align:center; padding:4rem 5vw 2rem;
}
.shop-hero h1{
  font-size: clamp(2rem, 6vw, 3.2rem);
  letter-spacing:.04em; font-weight:900;
  background: linear-gradient(to bottom, #ffffff, #cccccc);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:.5rem;
}
.shop-hero p{ color:var(--muted) }


/* ===== PRODUCT GRID – COMPACT, ORDERLY, RESPONSIVE ===== */
/* Only apply to shop/archive pages, NOT single product pages */
body.archive ul.products,
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products {
  --card-w: 240px;
  width: min(1100px, 92vw);
  margin: 1rem auto 3.2rem;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
}

/* scale card width on different screens */
@media (min-width: 1400px){ 
  body.archive ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products { 
    --card-w: 260px; 
  } 
}
@media (max-width: 900px) { 
  body.archive ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products { 
    --card-w: 200px; 
  } 
}
@media (max-width: 560px) { 
  body.archive ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products { 
    grid-template-columns: 1fr; 
  } 
}

.product-card {
  background: rgba(0, 0, 0, 0.7); /* black at 70% opacity */
  /* or for a slightly lighter touch: */
  /* background: rgba(0, 0, 0, 0.5); */
  
  border: 2px solid var(--mid);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  max-width: 320px;
  justify-self: center;
}
.product-card:hover{ transform: translateY(-4px); border-color: var(--teal); }

/* Remove all underlines from product links */
.product-card a,
.product-card a:hover,
.product-title,
.product-meta a {
  text-decoration: none !important;
}

/* lock thumbnails to a consistent square so rows align */
.product-thumb{
  aspect-ratio: 1 / 1;
  background: #111;
  display: grid;
  place-items: center;
}
.product-thumb img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* body flex pushes actions to the bottom for equal card heights */
.product-body{
  padding: 1rem 1.2rem 1.2rem;
  display: flex; flex-direction: column; gap: .5rem;
  min-height: 150px; /* small floor so short titles don't squash */
}

/* tidy titles: clamp to two lines so heights stay even */
.product-title{
  font-weight: 800; line-height: 1.25; font-size: .95rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price{ font-weight: 900; letter-spacing: .04em; }

/* meta stays subtle */
.product-meta{ color: var(--muted); font-size: .9rem; }

/* actions pinned to bottom of card */
.product-actions{
  display: flex; gap: .6rem; margin-top: auto; /* <- pushes to bottom */
  justify-content: center; /* <- centres the button */
}

/* scope buttons to product cards ONLY to avoid site-wide leaks */
.product-actions .button,
.product-actions .added_to_cart {
  display: inline-block;
  padding: .7rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  color: #000; /* black text */
  background: var(--teal);
  border: 2px solid var(--teal);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.6), /* outer glow */
              0 0 40px rgba(0, 255, 255, 0.3); /* softer spread */
  transition: all .2s ease;
}

.product-actions .button:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #000;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.8), /* stronger glow on hover */
              0 0 60px rgba(0, 255, 255, 0.4);
}

.product-actions .added_to_cart {
  background: transparent;
  border-color: var(--teal);
  color: var(--teal);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}


/* Single product */
.single-wrap{
  width:min(1200px,92vw); margin:3rem auto 4rem; display:grid; gap:2rem;
  grid-template-columns: 1.1fr 1fr;
}
@media (max-width:900px){ .single-wrap{ grid-template-columns:1fr } }

.single-gallery{ background:var(--grey); border:2px solid var(--mid); border-radius:14px; overflow:hidden }
.single-summary{
  background: linear-gradient(160deg, var(--glass), rgba(255,255,255,.05));
  border:2px solid var(--mid); border-radius:14px; padding:1.5rem 1.2rem;
}
.single-summary h1{ margin:0 0 .5rem }
.single-price{ font-size:1.6rem; font-weight:900; margin:.3rem 0 1rem }
.single-meta{ color:var(--muted); margin-bottom:1rem }
.single-actions .quantity input{ max-width:86px; padding:.6rem; background:#0f0f0f; color:#fff; border:1px solid var(--mid); border-radius:8px; }
.single-actions .button{ padding:.9rem 1.2rem; font-size:1rem }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  width:min(1100px,92vw); margin:1rem auto; padding:1rem 1.2rem; border-radius:10px; border:1px solid var(--mid);
  background: rgba(255,255,255,.05);
}


.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce{
  width:min(1100px,92vw); margin:3rem auto; background:linear-gradient(160deg,var(--glass),var(--glass2));
  border:2px solid var(--mid); border-radius:14px; padding:1.2rem;
}

/* Center the Woo content area */
.dw-container{ width:min(1200px, 92vw); margin:0 auto; }

/* Two-column single product layout */
.dw-product .single-wrap{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:28px;
  align-items:start;
  margin:22px 0 30px;
}
.dw-product .single-gallery{
  background:#0f0f0f; border-radius:12px; padding:14px;
}
.dw-product .single-summary{
  background:rgba(0,0,0,.35); border-radius:12px; padding:20px;
}

/* Woo gallery bits */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{ gap:12px; }
.woocommerce div.product div.images .flex-control-thumbs{
  display:flex; gap:10px; margin-top:12px;
}
.woocommerce div.product div.images .flex-control-thumbs li{ width:78px; }
.woocommerce div.product div.images img{ border-radius:8px; }

/* Typography / spacing */
.woocommerce div.product .product_title{ font-size:28px; line-height:1.25; margin:0 0 8px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price{ font-size:20px; font-weight:700; margin:8px 0 12px; }
.woocommerce div.product .woocommerce-product-details__short-description{ opacity:.9; margin-bottom:16px; }

/* ATC row */
.woocommerce div.product form.cart{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0 16px; }
.woocommerce .quantity .qty{
  width:80px; text-align:center; padding:10px; border-radius:8px;
  border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.25); color:#fff;
}
.woocommerce div.product form.cart .button{
  padding:12px 18px; border-radius:10px; font-weight:700;
}

/* Tabs & below section */
.dw-product .single-below{ margin-top:22px; }
.woocommerce div.product .woocommerce-tabs{
  background:rgba(0,0,0,.35); border-radius:12px; padding:18px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex; gap:18px; border:none; padding:0; margin:0 0 12px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent; border:none; margin:0; padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:inline-block; padding:8px 10px; border-radius:8px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  background:rgba(255,255,255,.08);
}

/* Notices */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info{
  background:rgba(0,0,0,.4); border-radius:10px; border:1px solid rgba(255,255,255,.1);
}

/* ===== SINGLE PRODUCT – HARD LAYOUT FIX ===== */

/* 0) Center the whole product area */
body.single-product .woocommerce,
body.single-product .site,
body.single-product .content-area,
body.single-product .site-main { width: 100%; }
body.single-product div.product { 
  width: min(1200px, 92vw); 
  margin: 0 auto 36px; 
}

/* 1) Two-column grid: gallery left, summary right */
body.single-product div.product {
  display: grid !important;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: start;
}

/* Woo's native class names */
body.single-product div.product .woocommerce-product-gallery { grid-column: 1; }
body.single-product div.product .summary.entry-summary      { grid-column: 2; }

/* 2) Gallery sizing & containment (no more giant image) */
body.single-product div.product .woocommerce-product-gallery,
body.single-product div.product .woocommerce-product-gallery__wrapper { position: relative; }

body.single-product div.product .woocommerce-product-gallery__image {
  aspect-ratio: 1 / 1;                 /* square stage like your BRJ page */
  background: #0f0f0f;
  border-radius: 12px;
  overflow: hidden;
}
body.single-product div.product .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;                  /* never overflows */
  display: block;
}

/* Thumbnails tidy */
body.single-product div.product .flex-control-thumbs {
  display: flex; gap: 10px; margin-top: 12px;
}
body.single-product div.product .flex-control-thumbs li { width: 80px; }
body.single-product div.product .flex-control-thumbs img { border-radius: 8px; }

/* 3) Summary panel visual */
body.single-product div.product .summary.entry-summary {
  background: rgba(0,0,0,.35);
  border-radius: 12px;
  padding: 20px;
}
body.single-product div.product .product_title { 
  font-size: 28px; line-height: 1.25; margin: 0 0 8px;
}
body.single-product div.product p.price,
body.single-product div.product span.price {
  font-size: 20px; font-weight: 700; margin: 8px 0 12px;
}
body.single-product div.product .woocommerce-product-details__short-description { 
  opacity: .92; margin-bottom: 16px;
}

/* Add-to-cart row */
body.single-product div.product form.cart {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 16px;
}
body.single-product .quantity .qty {
  width: 80px; text-align: center; padding: 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.25); color: #fff;
}
body.single-product div.product form.cart .button {
  padding: 12px 18px; border-radius: 10px; font-weight: 700;
}

/* 4) Tabs (long description etc.) sit BELOW the grid */
body.single-product .woocommerce-tabs {
  grid-column: 1 / -1;                  /* span both columns, i.e., below */
  background: rgba(0,0,0,.35);
  border-radius: 12px;
  padding: 18px;
  margin-top: 8px;
}
body.single-product .woocommerce-tabs ul.tabs {
  display: flex; gap: 18px; border: none; padding: 0; margin: 0 0 12px;
}
body.single-product .woocommerce-tabs ul.tabs li { background: transparent; border: none; margin: 0; padding: 0; }
body.single-product .woocommerce-tabs ul.tabs li a { display: inline-block; padding: 8px 10px; border-radius: 8px; }
body.single-product .woocommerce-tabs ul.tabs li.active a { background: rgba(255,255,255,.08); }

/* 5) Mobile: stack to single column */
@media (max-width: 900px) {
  body.single-product div.product {
    grid-template-columns: 1fr;
  }
  body.single-product .woocommerce-tabs { grid-column: 1; }
}

/* 6) Defensive: kill any stray full-width styles some themes add */
body.single-product div.product .woocommerce-product-gallery,
body.single-product div.product .summary.entry-summary,
body.single-product .woocommerce-tabs { max-width: none !important; }





/* === Single product: variations + qty + ATC === */

/* Layout */
body.single-product div.product form.cart{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:16px 0 18px;
}
body.single-product table.variations{ margin:14px 0 6px; width:100%; border:0; }
body.single-product table.variations tr{
  display:flex; gap:12px; align-items:center; margin-bottom:8px;
}
body.single-product table.variations td{ border:0; padding:0; }
body.single-product table.variations td.label{
  min-width:80px; font-weight:700; opacity:.9;
}

/* Selects */
body.single-product .variations select{
  height:44px; min-width:180px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  appearance:none;
}
body.single-product .variations select:focus{
  outline:2px solid var(--teal,#11d3c7);
  border-color:transparent;
}

/* “Clear” link by the selects */
body.single-product a.reset_variations{
  margin-left:8px; font-size:13px; opacity:.85; text-decoration:underline;
}

/* Stock line */
body.single-product .stock{ margin:8px 0 0; font-size:14px; opacity:.9; }

/* Quantity box */
body.single-product .quantity .qty{
  width:82px; height:44px;
  text-align:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
  color:#fff;
}

/* Add to basket */
body.single-product .single_add_to_cart_button{
  height:44px; padding:0 18px;
  border-radius:12px;
  font-weight:800; letter-spacing:.02em;
  background:var(--teal,#11d3c7);
  border:1px solid transparent;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
body.single-product .single_add_to_cart_button:hover{ filter:brightness(1.06); transform:translateY(-1px); }
body.single-product .single_add_to_cart_button:active{ transform:translateY(0); }

/* Mobile: stack neatly */
@media (max-width:900px){
  body.single-product table.variations tr{ flex-direction:column; align-items:stretch; }
  body.single-product .variations select{ width:100%; }
  body.single-product div.product form.cart{ flex-direction:column; align-items:stretch; }
  body.single-product .quantity .qty,
  body.single-product .single_add_to_cart_button{ width:100%; }
}


/* ========== VARIATIONS ROW: ALIGNMENT + CONSISTENT SIZING ========== */

/* Put label + control on one baseline and keep widths consistent */
body.single-product table.variations{ width:100%; border:0; margin:14px 0 8px; }
body.single-product table.variations tr{
  display:flex; align-items:center; gap:14px;
  margin:10px 0;
}
body.single-product table.variations td{ border:0; padding:0; }

/* Fixed label width to stop jitter, baseline to the 44px control */
body.single-product table.variations td.label{
  width:92px; min-width:92px;
  font-weight:700; opacity:.9; line-height:44px;
}

/* Value cell holds the select + “Clear” neatly on one line */
body.single-product table.variations td.value{
  display:flex; align-items:center; gap:10px; flex:1;
}

/* Controls: same height, same border, same radius */
body.single-product .variations select,
body.single-product .quantity .qty,
body.single-product .single_add_to_cart_button{
  height:44px;
  border-radius:10px;
}

/* Select width so columns line up; arrow kept native */
body.single-product .variations select{
  width:220px; min-width:200px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  appearance:auto;          /* use native, but… see color-scheme below */
}

/* “Clear” link sits neatly beside the select */
body.single-product a.reset_variations{
  font-size:13px; opacity:.85; text-decoration:underline;
}

/* Qty + button line up perfectly */
body.single-product div.product form.cart{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin:14px 0 18px;
}
body.single-product .quantity .qty{
  width:82px; text-align:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25); color:#fff;
}
body.single-product .single_add_to_cart_button{
  padding:0 18px; font-weight:800; letter-spacing:.02em;
  background:var(--teal); border:1px solid transparent;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* Mobile: stack cleanly */
@media (max-width:900px){
  body.single-product table.variations tr{ flex-direction:column; align-items:stretch; gap:8px; }
  body.single-product .variations select{ width:100%; }
  body.single-product div.product form.cart{ flex-direction:column; align-items:stretch; }
  body.single-product .quantity .qty, body.single-product .single_add_to_cart_button{ width:100%; }
}

/* ========== WOOCOMMERCE VARIATIONS: PROPER DARK MODE ========== */

/* Kill the bullet points bleeding into Woo lists */
.woocommerce-tabs ul.tabs li::before,
.woocommerce ul.products li::before,
.woocommerce-page ul.products li::before,
body.single-product table.variations tr::before,
.woocommerce .woocommerce-tabs ul.tabs li::before {
  content: none !important;
  display: none !important;
}

/* Variations table: no list styling */
body.single-product table.variations {
  list-style: none !important;
  width: 100%;
  border: 0;
  margin: 0 0 20px 0;
}

body.single-product table.variations tr {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 12px 0;
  list-style: none !important;
}

body.single-product table.variations td {
  border: 0;
  padding: 0;
}

/* Label: left side, fixed width */
body.single-product table.variations td.label {
  width: auto;
  min-width: 120px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 48px;
  white-space: nowrap;
}

/* Value cell: holds select + clear link */
body.single-product table.variations td.value {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

/* ===== THE DROPDOWN SELECT ITSELF ===== */
body.single-product .variations select {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  border: 2px solid rgba(17, 211, 199, 0.4) !important;
  background: #1a1a1a !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

body.single-product .variations select:hover {
  border-color: rgba(17, 211, 199, 0.6) !important;
  background: #222 !important;
}

body.single-product .variations select:focus {
  outline: none;
  border-color: var(--teal, #11d3c7) !important;
  background: #222 !important;
  box-shadow: 0 0 0 3px rgba(17, 211, 199, 0.2),
              inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ===== DROPDOWN OPTIONS (limited browser support) ===== */
body.single-product .variations select option {
  background: #1a1a1a;
  color: #fff;
  padding: 12px;
}

body.single-product .variations select option:checked,
body.single-product .variations select option[selected] {
  background: #2a2a2a;
  color: var(--teal, #11d3c7) !important;
  font-weight: 700;
}

body.single-product .variations select option:hover {
  background: #2a2a2a;
  color: var(--teal, #11d3c7);
}

/* Tell browsers to use dark UI controls */
body.single-product,
body.single-product .variations select,
body.single-product .quantity .qty,
body.single-product input,
body.single-product select,
body.single-product textarea {
  color-scheme: dark;
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
  body.single-product .variations select {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
  }
  
  body.single-product .variations select option {
    background: #1a1a1a;
    color: #fff;
  }
}

/* "Clear" link beside the select */
body.single-product a.reset_variations {
  font-size: 13px;
  opacity: 0.85;
  text-decoration: underline;
  color: var(--teal, #11d3c7);
  transition: color 0.2s ease;
  white-space: nowrap;
  margin-left: auto;
}

body.single-product a.reset_variations:hover {
  opacity: 1;
  text-shadow: 0 0 8px var(--teal, #11d3c7);
}

/* Stock availability text */
body.single-product .stock {
  margin: 8px 0 0;
  font-size: 14px;
  opacity: 0.9;
}

/* ===== QUANTITY + ADD TO BASKET ===== */
body.single-product div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 20px 0 18px;
}

body.single-product .quantity .qty {
  width: 80px;
  height: 48px;
  text-align: center;
  border-radius: 10px;
  border: 2px solid rgba(17, 211, 199, 0.4) !important;
  background: #1a1a1a !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

body.single-product .quantity .qty:hover {
  border-color: rgba(17, 211, 199, 0.6) !important;
  background: #222 !important;
}

body.single-product .quantity .qty:focus {
  outline: none;
  border-color: var(--teal, #11d3c7) !important;
  background: #222 !important;
  box-shadow: 0 0 0 3px rgba(17, 211, 199, 0.2),
              inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.single-product .single_add_to_cart_button {
  height: 48px;
  padding: 0 24px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--teal, #11d3c7) !important;
  border: none !important;
  color: #0a0a0a !important;
  box-shadow: 0 6px 18px rgba(17, 211, 199, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
}

body.single-product .single_add_to_cart_button:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(17, 211, 199, 0.45);
}

body.single-product .single_add_to_cart_button:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(17, 211, 199, 0.35);
}

/* ===== MOBILE: STACK EVERYTHING ===== */
@media (max-width: 900px) {
  body.single-product table.variations tr {
    flex-direction: column;
    gap: 8px;
  }
  
  body.single-product .variations select {
    width: 100%;
  }
  
  body.single-product div.product form.cart {
    flex-direction: column;
    align-items: stretch;
  }
  
  body.single-product .quantity {
    width: 100%;
  }
  
  body.single-product .quantity .qty {
    width: 100%;
  }
  
  body.single-product .single_add_to_cart_button {
    width: 100%;
  }
}






/* ===== FORCE STACK ON MOBILE (one column) ===== */
@media (max-width: 900px){
  /* kill any two-column grids */
  .single-wrap,
  body.single-product div.product{
    display:block !important;
  }

  /* make both panes full-width and in order: gallery first, then summary */
  body.single-product div.product .woocommerce-product-gallery,
  body.single-product div.product .summary.entry-summary{
    width:100% !important;
    max-width:none !important;
    grid-column: 1 / -1 !important;
    float:none !important;         /* just in case core floats ever slip in */
    margin:0 !important;
  }

  /* spacing between stacked panes */
  body.single-product div.product .woocommerce-product-gallery{ margin-bottom:16px !important; }
  body.single-product div.product .summary.entry-summary{ margin-top:0 !important; }

  /* tabs sit under both panes */
  body.single-product .woocommerce-tabs{
    grid-column: 1 / -1 !important;
    margin-top:16px !important;
  }

  /* make variation controls and ATC full width on mobile */
  body.single-product table.variations td.value{ flex-direction:column; align-items:stretch; gap:8px; }
  body.single-product .variations select,
  body.single-product .quantity .qty,
  body.single-product .single_add_to_cart_button{ width:100% !important; }
}








/* ===== NEAT VARIATION FIELDS (BRJ-style) ===== */

/* Stack each field: LABEL on its own line, SELECT below it */
body.single-product table.variations{ width:100%; border:0; margin:12px 0 6px; }
body.single-product table.variations tr{
  display:block;               /* one field per row */
  margin:0 0 12px 0;
}
body.single-product table.variations td{ border:0; padding:0; display:block; }

/* Label */
body.single-product table.variations td.label{
  margin:0 0 6px 0;
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  opacity:.9;
}

/* Value row holds select + “Clear” */
body.single-product table.variations td.value{
  display:flex; align-items:center; gap:10px;
}

/* Control width (desktop) */
:root{ --var-field-w: 280px; }           /* tweak this number to taste */
body.single-product .variations select{
  width:var(--var-field-w);
  height:44px;
  padding:0 12px;
  border-radius:10px;
  border:2px solid rgba(17,211,199,.40);
  background:#1a1a1a;
  color:#fff;
  font-size:15px; font-weight:500;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.30);
  transition: all .18s ease;
  appearance:auto;
}
body.single-product .variations select:hover{ border-color:rgba(17,211,199,.60); background:#222; }
body.single-product .variations select:focus{
  outline:none; background:#222; border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(17,211,199,.20), inset 0 2px 8px rgba(0,0,0,.30);
}

/* “Clear” link tucked to the right of the select line */
body.single-product a.reset_variations{
  margin-left:auto;
  font-size:.85rem;
  color:var(--teal);
  text-decoration:underline;
  opacity:.9;
}
body.single-product a.reset_variations:hover{ opacity:1; text-shadow:0 0 6px var(--teal); }

/* Qty + button on one tidy line */
body.single-product div.product form.cart{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:14px 0 18px;
}
body.single-product .quantity .qty{
  width:80px; height:44px; text-align:center;
  border-radius:10px; border:2px solid rgba(17,211,199,.40);
  background:#1a1a1a; color:#fff; font-weight:700; transition:all .18s ease;
}
body.single-product .quantity .qty:hover{ border-color:rgba(17,211,199,.60); background:#222; }
body.single-product .quantity .qty:focus{
  outline:none; border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(17,211,199,.20), inset 0 2px 8px rgba(0,0,0,.30);
}

body.single-product .single_add_to_cart_button{
  height:44px; padding:0 18px; border-radius:10px;
  font-weight:800; letter-spacing:.02em; font-size:15px;
  background:var(--teal) !important; color:#0a0a0a !important; border:none !important;
  box-shadow:0 6px 18px rgba(17,211,199,.35); transition:all .18s ease;
}
body.single-product .single_add_to_cart_button:hover{ filter:brightness(1.08); transform:translateY(-1px); }
body.single-product .single_add_to_cart_button:active{ transform:translateY(0); }

/* Dark native dropdown panels where supported */
body.single-product,
body.single-product .variations select{ color-scheme:dark; }

/* Mobile: full width controls */
@media (max-width:900px){
  :root{ --var-field-w: 100%; }
  body.single-product table.variations td.value{ flex-direction:column; align-items:stretch; gap:8px; }
  body.single-product div.product form.cart{ flex-direction:column; align-items:stretch; }
  body.single-product .single_add_to_cart_button{ width:100%; }
}



/* ===== CART PAGE – POLISHED & CONSISTENT ===== */
/* Force the entire cart page to centre */
body.woocommerce-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.woocommerce-cart .site-content,
body.woocommerce-cart .entry-content,
body.woocommerce-cart main {
  width: 100%;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Cart title */
body.woocommerce-cart .entry-header,
body.woocommerce-cart h1 {
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto 1rem;
  padding: 0 1rem;
}

/* The cart block wrapper */
.wp-block-woocommerce-cart {
  container-type: normal !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto 2rem !important;
  padding: 0 1rem !important;
}
/* ===== CENTRE THE ENTIRE CART ===== */
.wp-block-woocommerce-cart {
  container-type: normal !important;
  max-width: 1200px !important;
  margin: 2rem auto !important;
  padding: 0 1rem !important;
}

/* Override theme content width for cart page */
body.woocommerce-cart .entry-content,
body.woocommerce-cart .site-content {
  max-width: 100% !important;
}

/* The cart grid itself */
.wc-block-cart,
.wp-block-woocommerce-cart > div {
  display: grid !important;
  grid-template-columns: 1fr 450px !important;
  gap: 2rem !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  align-items: start;
}

/* Cart items column */
.wc-block-cart__main,
.wc-block-cart-items {
  width: 100% !important;
  max-width: none !important;
}

/* Cart items column - more generous padding */
.wc-block-cart-items {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid var(--mid);
  border-radius: 14px;
  padding: 2.5rem;
}

/* Table header - force proper layout */
.wc-block-cart-items thead tr.wc-block-cart-items__header {
  display: grid;
  grid-template-columns: 120px 1fr 150px;
  gap: 1.5rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
  border-bottom: 2px solid var(--teal);
}

/* Header cells */
.wc-block-cart-items__header th {
  padding: 0.5rem 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--teal);
  border: none;
}

.wc-block-cart-items__header-image {
  text-align: left;
}

.wc-block-cart-items__header-product {
  text-align: left;
}

.wc-block-cart-items__header-total {
  text-align: right;
}

/* Product rows - MATCHING grid */
.wc-block-cart-items tbody tr.wc-block-cart-items__row {
  display: grid;
  grid-template-columns: 120px 1fr 150px;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--mid);
  align-items: start;
}

/* Product row cells */
.wc-block-cart-item__image {
  padding: 0;
}

.wc-block-cart-item__product {
  padding: 0;
}

/* Price in product row */
.wc-block-cart-item__total {
  padding: 0;
  text-align: right;
  font-weight: 900;
  font-size: 1.1rem;
}

.wc-block-cart-items__row:first-child {
  padding-top: 0;
}

.wc-block-cart-items__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Product image - bigger and better spaced */
.wc-block-components-product-image {
  width: 100px;
  height: 100px;
}

.wc-block-components-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--mid);
}

/* Product details section */
.wc-block-cart-item__wrap {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* Product name - more prominent */
.wc-block-components-product-name a {
  text-decoration: none;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.3;
  color: #fff;
  transition: color .2s ease;
  display: block;
  margin-bottom: .5rem;
}

.wc-block-components-product-name a:hover {
  color: var(--teal);
}

/* Product price under name */
.wc-block-components-product-price {
  font-weight: 900;
  font-size: 1.1rem;
  margin-bottom: .5rem;
}

/* Product metadata (colour, size) - clear spacing */
.wc-block-components-product-metadata {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: .75rem;
}

.wc-block-components-product-metadata p {
  margin: .25rem 0;
}

/* Quantity controls - better spacing */
.wc-block-components-quantity-selector {
  border: 2px solid var(--mid);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  display: inline-flex;
  margin-top: .5rem;
  min-width: 120px;
}

.wc-block-components-quantity-selector input {
  background: transparent;
  color: #fff;
  font-weight: 700;
  border: none;
}

.wc-block-components-quantity-selector button {
  background: transparent;
  color: var(--teal);
  border: none;
  font-weight: 900;
  transition: color .2s ease;
}

.wc-block-components-quantity-selector button:hover {
  color: #fff;
}

/* Remove link - give it space */
.wc-block-cart-item__remove-link {
  color: #ff4444 !important;
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  margin-top: .75rem;
  display: inline-block;
  transition: color .2s ease;
}

.wc-block-cart-item__remove-link:hover {
  color: #ff0000 !important;
}

/* Totals sidebar */
.wc-block-cart__sidebar,
.wp-block-woocommerce-cart-totals-block {
  width: 100% !important;
  max-width: 450px !important;
}

.wp-block-woocommerce-cart-totals-block {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid var(--mid);
  border-radius: 14px;
  padding: 2rem;
}

/* Basket totals heading */
.wp-block-woocommerce-cart-totals-block h2 {
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 0;
  font-size: 1.5rem;
}

/* Totals rows */
.wc-block-components-totals-item {
  padding: .75rem 0;
  border-bottom: 1px solid var(--mid);
  display: flex;
  justify-content: space-between;
  font-size: .95rem;
}

/* Estimated total - make it stand out */
.wc-block-components-totals-footer-item {
  padding: 1.5rem 0 1rem;
  border-top: 2px solid var(--teal);
  border-bottom: none;
  margin-top: 1rem;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--teal);
}

/* Coupon section */
.wc-block-components-totals-coupon {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--mid);
}

.wc-block-components-totals-coupon__button {
  background: transparent !important;
  color: var(--teal) !important;
  border: none !important;
  text-decoration: underline;
  font-weight: 700;
  padding: 0 !important;
  transition: color .2s ease;
}

.wc-block-components-totals-coupon__button:hover {
  color: #fff !important;
}

/* Checkout button - centred with no underline */
.wc-block-cart__submit-container {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}


.wc-block-cart__submit-container .wc-block-components-button {
  width: 100%;
  max-width: 350px;
  padding: 1.2rem;
  background: var(--teal) !important;
  border: 2px solid var(--teal) !important;
  border-radius: 10px;
  color: #000 !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 1rem;
  text-decoration: none !important; /* kills the underline */
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.6),
              0 0 40px rgba(0, 255, 255, 0.3);
  transition: all .2s ease;
}

.wc-block-cart__submit-container .wc-block-components-button:hover {
  text-decoration: none !important; /* no underline on hover either */
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.8),
              0 0 60px rgba(0, 255, 255, 0.4);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 900px) {
  .wc-block-cart,
  .wp-block-woocommerce-cart > div {
    grid-template-columns: 1fr !important;
  }
  
  .wc-block-cart__sidebar,
  .wp-block-woocommerce-cart-totals-block {
    max-width: none !important;
  }
}












/* ===== CHECKOUT PAGE – BLOCK-BASED CHECKOUT FIX ===== */

/* Centre the entire checkout page */
body.woocommerce-checkout {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.woocommerce-checkout .site-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout main {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Checkout title */
body.woocommerce-checkout .entry-header,
body.woocommerce-checkout h1 {
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto 1rem;
  padding: 0 1rem;
}

/* The block checkout wrapper */
.wp-block-woocommerce-checkout {
  container-type: normal !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto 2rem !important;
  padding: 0 1rem !important;
}

/* Apply grid to the checkout */
.wp-block-woocommerce-checkout > .wc-block-checkout {
  display: grid !important;
  grid-template-columns: 550px 500px !important;
  gap: 2rem !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  justify-content: center !important;
  align-items: start !important;
}

/* Left column */
.wc-block-components-main {
  grid-column: 1 !important;
  width: 100% !important;
}

/* Right column */
.wc-block-components-sidebar {
  grid-column: 2 !important;
  width: 100% !important;
  position: sticky !important;
  top: 2rem !important;
}

/* Form sections styling */
.wc-block-components-checkout-step {
  background: rgba(0, 0, 0, 0.7) !important;
  border: 2px solid var(--mid) !important;
  border-radius: 14px !important;
  padding: 2rem !important;
  margin-bottom: 1.5rem !important;
}

/* Section headings */
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step h2,
.wc-block-components-order-summary h2 {
  color: var(--teal) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 1.2rem !important;
  margin-top: 0 !important;
}

/* Form inputs */
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-components-select select,
.wc-block-components-textarea textarea {
  background: rgba(0, 0, 0, 0.5) !important;
  border: 2px solid var(--mid) !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: .8rem 1rem !important;
  font-size: 1rem !important;
  width: 100% !important;
  transition: border-color .2s ease;
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-select select:focus,
.wc-block-components-textarea textarea:focus {
  border-color: var(--teal) !important;
  outline: none !important;
}

/* Labels */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-select label,
.wc-block-components-textarea label {
  color: #fff !important;
  font-weight: 700 !important;
  margin-bottom: .5rem !important;
  display: block !important;
}

/* Order summary sidebar */
.wc-block-components-order-summary {
  background: rgba(0, 0, 0, 0.7) !important;
  border: 2px solid var(--mid) !important;
  border-radius: 14px !important;
  padding: 2rem !important;
}

/* Order summary items */
.wc-block-components-order-summary-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--mid);
}

.wc-block-components-order-summary-item__image img {
  border-radius: 8px;
  border: 2px solid var(--mid);
}

.wc-block-components-order-summary-item__description a {
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  transition: color .2s ease;
}

.wc-block-components-order-summary-item__description a:hover {
  color: var(--teal);
}

/* Totals */
.wc-block-components-totals-item {
  padding: .75rem 0;
  border-bottom: 1px solid var(--mid);
  display: flex;
  justify-content: space-between;
  font-size: .95rem;
}

.wc-block-components-totals-footer-item {
  padding: 1.5rem 0 1rem;
  border-top: 2px solid var(--teal);
  border-bottom: none;
  margin-top: 1rem;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--teal);
}

/* Coupon button */
.wc-block-components-totals-coupon__button {
  background: transparent !important;
  color: var(--teal) !important;
  border: none !important;
  text-decoration: underline;
  font-weight: 700;
  padding: 0 !important;
  transition: color .2s ease;
}

.wc-block-components-totals-coupon__button:hover {
  color: #fff !important;
}

/* Shipping/payment options */
.wc-block-components-radio-control__option {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--mid);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: .5rem;
}

/* Place order button */
.wc-block-components-checkout-place-order-button {
  width: 100% !important;
  padding: 1.2rem !important;
  background: var(--teal) !important;
  border: 2px solid var(--teal) !important;
  border-radius: 10px !important;
  color: #000 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.6),
              0 0 40px rgba(0, 255, 255, 0.3) !important;
  transition: all .2s ease !important;
  margin-top: 1.5rem !important;
}

.wc-block-components-checkout-place-order-button:hover {
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.8),
              0 0 60px rgba(0, 255, 255, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Responsive */
/* Hide duplicate order summary on mobile */
@media (max-width: 1150px) {
  .wp-block-woocommerce-checkout > .wc-block-checkout {
    grid-template-columns: 1fr !important;
    max-width: 600px !important;
  }
  
  .wc-block-components-main,
  .wc-block-components-sidebar {
    grid-column: 1 !important;
    width: 100% !important;
  }
  
  .wc-block-components-sidebar {
    position: static !important;
  }
  
  /* Hide duplicate order summary below button */
  #rf-wc-block-components-checkout-order-summary__content,
  [id*="order-summary__content"],
  .wc-block-components-checkout-order-summary__content {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  /* Hide the order summary title that appears below button */
  .wc-block-components-checkout-order-summary__title,
  [class*="checkout-order-summary__title"] {
    display: none !important;
  }
}

/* Ensure WooCommerce pages use same header layout as homepage */
body.woocommerce-cart,
body.woocommerce-checkout {
  /* If your theme has a different container on WooCommerce pages */
  --content-width: 100% !important;
}




/* Cart + Checkout: make header full-width so logo↔links spacing matches home */
body.woocommerce-cart nav.site-nav,
body.woocommerce-checkout nav.site-nav{
  width: 100vw !important;                           /* ignore parent clamp */
  margin-left: calc(50% - 50vw) !important;          /* full-bleed trick */
  margin-right: calc(50% - 50vw) !important;
  padding-left: 5vw !important;                      /* same as home */
  padding-right: 5vw !important;
  justify-content: space-between !important;         /* keep ends apart */
}

/* kill block theme padding that crowds the nav */
body.woocommerce-cart .wp-site-blocks,
body.woocommerce-checkout .wp-site-blocks{ padding-top:0 !important; }