/*
Theme Name: Blocksy Child
Template: blocksy
Description: Child theme for Blocksy
Version: 1.0.0
*/
/* mounts3d product links (under short description) */
/* mounts3d – light related links */

.m3d-links {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m3d-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 0;
  background: none;
  border: none;

  font-size: 14px;
  font-weight: 500;
  color: var(--theme-link-color, #1a73e8);
  text-decoration: none !important;

  transition: color .15s ease, transform .15s ease;
}

.m3d-link:hover {
  color: var(--theme-link-hover-color, #e11d2e); /* roșu mounts3d */
  transform: translateX(2px);
}

.m3d-link__label {
  color: rgba(0,0,0,.55);
  font-weight: 400;
}

.m3d-link__title {
  font-weight: 600;
}

.m3d-link__arrow {
  font-size: 14px;
  opacity: .5;
  transition: opacity .15s ease, transform .15s ease;
}

.m3d-link:hover .m3d-link__arrow {
  opacity: .9;
  transform: translateX(2px);
}

/* diferențiere subtilă */
.m3d-link--secondary {
  /* font-size: 13.5px;
  color: rgba(0,0,0,.65); */
  font-size: 14px;
  font-weight: 500;
  color: var(--theme-link-color, #1a73e8);
  text-decoration: none !important;
}

.m3d-link--secondary:hover {
  color: var(--theme-link-hover-color, #e11d2e);
}

/* end mounts3d product links */

/* Additional custom styles for Landing Page Mounts3D */

/* =========================
   Mounts3D Landing Kit
   Scoped styles (safe)
   ========================= */

/* Base container */
.m3d-container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 20px;
}
/* HERO with image background (Mounts3D) */
.m3d-hero--img{
  background: none;
  position: relative;
  overflow: hidden;
}

.m3d-hero--img::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--m3d-hero-bg);
  background-size: cover;
  background-position: 35% 35%;
  z-index: 0;
}

.m3d-hero--img::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.25) 100%),
    radial-gradient(900px 500px at 20% 20%, rgba(225,29,46,.18), transparent 60%);
  z-index: 1;
}

.m3d-hero--img .m3d-container{
  position: relative;
  z-index: 2;
}

@media (max-width: 640px){
  .m3d-hero--img::before{
    background-position: 45% 40%;
  }
}


/* Sections spacing */
.m3d-hero,
.m3d-why,
.m3d-products,
.m3d-story,
.m3d-trust,
.m3d-logistics,
.m3d-final-cta{
  position: relative;
}

/* .m3d-products,
.m3d-why{
margin-top: -54px;
} */

/* Typography tuning (avoid huge default headings) */
.m3d-hero h1{
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.08;
  margin: 0 0 18px 0;
  letter-spacing: -0.02em;
}

.m3d-container h2{
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.15;
  margin: 0 0 18px 0;
  letter-spacing: -0.015em;
}

.m3d-container h3{
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 8px 0;
}

.m3d-container p{
  margin: 0 0 14px 0;
  line-height: 1.6;
  font-size: 16px;
  color: rgba(0,0,0,0.78);
}

.m3d-hero p,
.m3d-hero li{
  color: rgba(255,255,255,0.88);
}
.m3d-hero h1{
  color: rgba(255,255,255,0.95);
}

/* HERO styling */
.m3d-hero{
  /* background: radial-gradient(1200px 600px at 20% 0%, rgba(255,59,59,0.18), transparent 55%),
              radial-gradient(1000px 500px at 85% 10%, rgba(255,255,255,0.10), transparent 50%),
              #0e0e0e; */
  color: #fff;
}

.m3d-hero .subtitle{
  max-width: 820px;
  font-size: 18px;
  margin: 0 0 18px 0;
}

.m3d-hero-bullets{
  list-style: none;
  padding: 0;
  margin: 18px 0 26px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.m3d-hero-bullets li{
  padding-left: 26px;
  position: relative;
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
}

.m3d-hero-bullets li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.9;
}

/* CTA buttons */
.m3d-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.m3d-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 12px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  transition: transform .15s ease, opacity .15s ease, background-color .15s ease, border-color .15s ease;
  will-change: transform;
}

.m3d-btn:hover{ transform: translateY(-1px); }

.m3d-btn--primary{
  background: #e11d2e;
  color: #fff;
}

.m3d-btn--primary:hover{ opacity: 0.92; }

.m3d-btn--secondary{
  background: rgba(65,65,65,1);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}

.m3d-btn--secondary:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.24);
}

/* Hero browse row: Moto / MTB chips (secondary path to the finder CTA) */
.m3d-hero-browse{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.m3d-hero-browse__label{
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}

.m3d-chip{
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.m3d-chip:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-1px);
}

/* Grids + cards */
.m3d-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.m3d-products{
  background: #fafafa;
}

.m3d-products-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.m3d-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

.m3d-card p{
  color: rgba(0,0,0,0.7);
}

/* Make your existing .card still look ok if you haven't renamed yet */
.m3d-products-grid .card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

/* Story + trust sections */
.m3d-story{
  background: #fff;
}

.m3d-trust ul{
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.m3d-trust li{
  padding-left: 26px;
  position: relative;
  margin: 0;
  color: rgba(0,0,0,0.78);
}

.m3d-trust li::before{
  content: "•";
  position: absolute;
  left: 10px;
  top: 0;
  opacity: 0.7;
}

/* Final CTA */
.m3d-final-cta{
  background: linear-gradient(135deg, rgba(225,29,46,0.10), rgba(0,0,0,0.02));
}

.m3d-final-cta .subtitle{
  max-width: 820px;
}

/* Responsive */
@media (max-width: 980px){
  .m3d-grid{ grid-template-columns: 1fr 1fr; }
  .m3d-products-grid{ grid-template-columns: 1fr 1fr; }
  .m3d-hero-bullets{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .m3d-grid,
  .m3d-products-grid,
  .m3d-trust ul{ grid-template-columns: 1fr; }
  .m3d-container{ padding: 54px 16px; }
}


/* Card with background image */
.m3d-card--bg{
  position: relative;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
}

/* background image layer */
.m3d-card--bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--m3d-card-bg);
  background-size: var(--m3d-card-size, cover);
  background-position: var(--m3d-card-pos, center);
  transform: scale(1.02);
  z-index: 0;
}

/* overlay layer — lighter default; per-card darkness via --m3d-card-shade (1 = default) */
.m3d-card--bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0, calc(0.08 * var(--m3d-card-shade, 1))) 0%,
    rgba(0,0,0, calc(0.52 * var(--m3d-card-shade, 1))) 80%);
  z-index: 1;
}

/* keep content above */
.m3d-card--bg > *{
  position: relative;
  z-index: 2;
}

/* tune typography inside bg cards */
.m3d-card--bg h3{
  color: #fff;
}

.m3d-card--bg p{
  color: rgba(255,255,255,0.88);
}

/* button on bg card */
.m3d-card--bg .m3d-btn--secondary{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
}

.m3d-card--bg .m3d-btn--secondary:hover{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.30);
}

.m3d-card__stretched{
  position:absolute;
  inset:0;
  z-index: 2;
  text-indent: -9999px;
}

/* keep buttons clickable above stretched layer */
.m3d-card--bg .m3d-btn{
  position: relative;
  z-index: 3;
}

.m3d-separator{
  height: 64px;
  /* margin-bottom: -70px; */
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.18),
      rgba(0,0,0,0.04),
      rgba(0,0,0,0.00)
    );
}

.m3d-trust-strip{
  background: #0e0e0e;
  color: rgba(255,255,255,0.75);
  font-size: 14px;
}

.m3d-trust-strip p{
  margin: 0;
  text-align: center;
  letter-spacing: 0.02em;
}

/* Mobile override (dacă ai definit --m3d-card-pos-m) */
@media (max-width: 640px){
  .m3d-card--bg::before{
    background-position: var(--m3d-card-pos-m, var(--m3d-card-pos, center));
  }
}

.m3d-card{
  display: flex;
  flex-direction: column;
  min-height: 180px; /* desktop */
}

.m3d-card--bg{
  min-height: 190px;
}

/* împinge butonul spre jos */
.m3d-card .m3d-btn{
  margin-top: auto;
  align-self: flex-start;
}

/* Un pic mai mult spațiu pentru mobile */
@media (max-width: 640px){
  .m3d-card--bg{
    min-height: 220px;
  }
}

/* ABOUT PAGE hero only */
/* Default = mobile first */
.m3d-hero--about {
  position: relative;
  overflow: hidden;
  min-height: var(--m3d-hero-minh, 420px);
}

.m3d-hero--about::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--m3d-hero-bg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--m3d-hero-pos, 50% 75%);
  z-index: 0;
}

.m3d-hero--about > .m3d-container {
  position: relative;
  z-index: 1;
}

/* Tablet */
@media (min-width: 768px){
  .m3d-hero--about{
    min-height: var(--m3d-hero-minh-t, 430px);
  }
  .m3d-hero--about::before{
    background-position: var(--m3d-hero-pos-t, 50% 60%);
  }
}

/* Desktop */
@media (min-width: 1024px){
  .m3d-hero--about{
    min-height: var(--m3d-hero-minh-d, 680px);
  }
  .m3d-hero--about::before{
    background-position: var(--m3d-hero-pos-d, 50% 45%);
  }
}


/* Founder 50/50 layout */
.m3d-founder .m3d-founder-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

@media (min-width: 900px){
  .m3d-founder .m3d-founder-grid{
    grid-template-columns: 1fr 1fr; /* 50/50 */
    gap: 40px;
  }
}

/* Ensure content doesn't look left-pulled */
.m3d-founder .m3d-founder-text{
  max-width: 640px;
}

/* Image styling */
.m3d-founder .m3d-founder-media img{
  width: 70%;
  height: auto;
  display: block;
  border-radius: 18px;
  object-fit: cover;
}

/* Optional: keep image a bit more "cinematic" on desktop */
@media (min-width: 900px){
  .m3d-founder .m3d-founder-media img{
    aspect-ratio: 3 / 4;  /* schimbă la 1/1 sau 3/4 dacă vrei portret */
  }
}

/* Optional: keep image a bit more "cinematic" on desktop */
@media (max-width: 640px){
  .m3d-founder .m3d-founder-media img{
    width: 100%;
  }
}

/* Lists spacing consistency */
.m3d-founder .m3d-founder-follow{
  margin-top: 18px;
}

.m3d-founder .m3d-founder-links{
  margin: 10px 0 0;
  padding-left: 18px;
}



/* custom css for About Mounts3D page */
/* .m3d-hero--bg{
  background-size: cover;
  background-position: center;
  position: relative;
}

.m3d-hero__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
  pointer-events:none;
}

.m3d-hero--bg .m3d-container{
  position: relative;
  z-index: 1;
} */

.mounts3d-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
    padding: 12px 15px;
    border-radius: 4px;
}


/* =========================================================
   Mounts3D — Category SEO landing (chin mounts + accessories)
   Top: short intro above products
   Bottom: H2 blocks + cross-link CTA + FAQ accordion
   ========================================================= */

/* Category H1 — injected at woocommerce_before_shop_loop priority 4 since
   Blocksy hides the native WC page title. Sits at the top of every category. */
.m3d-cat-h1 > .m3d-container{
  padding: 32px 20px 8px;
}
.m3d-cat-h1 h1{
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.015em;
  color: #1a1a1a;
}

/* Top intro: matches the bottom .m3d-cat-seo__block styling for visual consistency.
   Reduced top padding since the H1 above already provides space. */
.m3d-cat-intro > .m3d-container{
  padding: 14px 20px 8px;
}
.m3d-cat-intro .m3d-cat-seo__block{
  margin-bottom: 0;
}

/* Bottom SEO wrapper */
.m3d-cat-seo > .m3d-container{
  padding: 48px 20px 64px;
}
.m3d-cat-seo__block{
  margin: 0 0 36px 0;
  max-width: 880px;
}
.m3d-cat-seo__block:last-child{
  margin-bottom: 0;
}
.m3d-cat-seo__block h2{
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.2;
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
}
.m3d-cat-seo__block p{
  margin: 0 0 12px 0;
  line-height: 1.65;
  font-size: 16px;
  color: #333;
}

/* Numbered "how to choose" list */
.m3d-cat-seo__steps{
  margin: 0;
  padding-left: 22px;
  line-height: 1.65;
  font-size: 16px;
  color: #333;
}
.m3d-cat-seo__steps li{
  margin: 0 0 8px 0;
}

/* Cross-link CTA block */
.m3d-cat-seo__cross{
  padding: 22px 24px;
  border: 1px solid #ececec;
  background: #fafafa;
  border-radius: 8px;
}
.m3d-cat-seo__cross h2{
  font-size: 20px;
  margin-bottom: 8px;
}
.m3d-cat-seo__cross p{
  margin-bottom: 14px;
}

/* FAQ accordion via native <details> */
.m3d-cat-seo__faq .m3d-faq__item{
  border-bottom: 1px solid #ececec;
  padding: 14px 0;
}
.m3d-cat-seo__faq .m3d-faq__item:first-of-type{
  border-top: 1px solid #ececec;
}
.m3d-cat-seo__faq summary{
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  list-style: none;
  position: relative;
  padding-right: 28px;
  color: #1a1a1a;
}
.m3d-cat-seo__faq summary::-webkit-details-marker{ display: none; }
.m3d-cat-seo__faq summary::after{
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  color: #888;
  transition: transform .15s ease;
}
.m3d-cat-seo__faq details[open] > summary::after{
  content: "−";
  color: #444;
}
.m3d-cat-seo__faq .m3d-faq__answer{
  padding: 10px 0 4px 0;
}
.m3d-cat-seo__faq .m3d-faq__answer p{
  margin: 0;
  font-size: 15.5px;
  color: #555;
  line-height: 1.6;
}

@media (max-width: 640px){
  .m3d-cat-seo > .m3d-container{ padding: 32px 16px 48px; }
  .m3d-cat-h1 > .m3d-container{ padding: 24px 16px 6px; }
  .m3d-cat-intro > .m3d-container{ padding: 12px 16px 4px; }
  .m3d-cat-seo__cross{ padding: 18px 16px; }
}

/* Hide empty products UL on landing-only category pages (chin mounts root) */
ul.products:empty{
  display: none;
}

/* Brand grid (links to helmet brand subcategories) */
.m3d-brand-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.m3d-brand-tile{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 12px;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  background: #fff;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.m3d-brand-tile:hover{
  border-color: #c9c9c9;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transform: translateY(-1px);
  text-decoration: none;
  color: #1a1a1a;
}
.m3d-brand-tile__name{
  display: inline-block;
}

@media (max-width: 640px){
  .m3d-brand-grid{
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }
  .m3d-brand-tile{ padding: 12px 10px; font-size: 14px; }
}


/* Header search layout override - Blocksy desktop middle row */
/* Header search layout override - Blocksy desktop middle row */
[data-device="desktop"] [data-row="middle"][data-column-set="3"] > .ct-container {
    display: grid !important;
    grid-template-columns: auto minmax(300px, 650px) auto !important;
    justify-content: space-between;
    align-items: center !important;
    column-gap: 24px !important;
}

[data-device="desktop"] [data-row="middle"] [data-column="middle"] {
    width: 100% !important;
    min-width: 0 !important;
}

[data-device="desktop"] [data-row="middle"] [data-column="middle"] > div,
[data-device="desktop"] [data-row="middle"] .ct-header-text,
[data-device="desktop"] [data-row="middle"] .entry-content,
[data-device="desktop"] [data-row="middle"] .header-search-wide,
[data-device="desktop"] [data-row="middle"] .aws-container,
[data-device="desktop"] [data-row="middle"] .aws-search-form {
    width: 100% !important;
    max-width: none !important;
}

[data-device="desktop"] [data-row="middle"] [data-column="start"],
[data-device="desktop"] [data-row="middle"] [data-column="end"] {
    width: auto !important;
    flex: 0 0 auto !important;
}
/* ============================================================
 * Metode de livrare la checkout - chenare + logo-uri curieri
 * (markup logo injectat in inc/checkout-shipping-logos.php)
 * ============================================================ */
ul#shipping_method {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul#shipping_method li {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #dcdfe3;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 10px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    cursor: pointer;
}

ul#shipping_method li:hover {
    border-color: #b9c0c8;
}

/* Optiunea selectata (browsere cu :has - majoritatea actuale) */
ul#shipping_method li:has(input.shipping_method:checked) {
    border-color: #2b6cb0;
    box-shadow: 0 0 0 1px #2b6cb0 inset;
    background-color: #f3f8ff;
}

ul#shipping_method li input.shipping_method {
    margin: 0;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: #2b6cb0;
    cursor: pointer;
}

ul#shipping_method li label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    margin: 0;
    cursor: pointer;
}

/* Casuta logo - latime fixa pentru aliniere consistenta */
.m3d-ship-logo {
    flex: 0 0 56px;
    width: 56px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.m3d-ship-logo img {
    max-width: 100%;
    max-height: 30px;
    width: auto;
    height: auto;
    display: block;
}

.m3d-ship-logo--icon {
    color: #2b6cb0;
}

.m3d-ship-logo--icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

/* Nume metoda + pret (pret impins la dreapta) */
.m3d-ship-text {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.m3d-ship-text .woocommerce-Price-amount {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 480px) {
    ul#shipping_method li {
        padding: 10px 12px;
        gap: 10px;
    }
    .m3d-ship-logo {
        flex-basis: 44px;
        width: 44px;
    }
}

/* ============================================================
 * Metode de plata la checkout - acelasi format ca livrarea
 * (logo injectat in inc/checkout-payment-logos.php; metodele
 * indisponibile randate de woocommerce/checkout/payment.php)
 * ============================================================ */
#payment ul.wc_payment_methods {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

#payment ul.wc_payment_methods li.wc_payment_method {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    border: 1px solid #dcdfe3;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 10px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    cursor: pointer;
}

#payment ul.wc_payment_methods li.wc_payment_method:hover {
    border-color: #b9c0c8;
}

#payment ul.wc_payment_methods li.wc_payment_method:has(input.input-radio:checked) {
    border-color: #2b6cb0;
    box-shadow: 0 0 0 1px #2b6cb0 inset;
    background-color: #f3f8ff;
}

#payment ul.wc_payment_methods li.wc_payment_method input.input-radio {
    margin: 0;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: #2b6cb0;
    cursor: pointer;
}

#payment ul.wc_payment_methods li.wc_payment_method > label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* Descrierea/campurile metodei (ex. formular card Stripe) - rand intreg, sub label */
#payment ul.wc_payment_methods li.wc_payment_method .payment_box {
    flex: 1 1 100%;
    order: 10;
    margin: 2px 0 0;
}

/* Casuta logo - template-ul o tipareste DUPA titlu; order:-1 o muta in fata */
.m3d-pay-logo {
    order: -1;
    flex: 0 0 56px;
    width: 56px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.m3d-pay-logo img {
    max-width: 100%;
    max-height: 30px;
    width: auto;
    height: auto;
    display: block;
}

.m3d-pay-logo--icon {
    color: #2b6cb0;
}

.m3d-pay-logo--icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

/* Iconitele proprii ale gateway-ului (ex. branduri de card Stripe) raman
 * dupa titlu, aliniate la dreapta */
#payment ul.wc_payment_methods li.wc_payment_method > label > img {
    max-height: 24px;
    width: auto;
    margin-left: auto;
}

/* Badge de brand (ex. logo Stripe la plata cu cardul) - capatul din dreapta */
.m3d-pay-brand {
    order: 5;
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.m3d-pay-brand img {
    height: 24px;
    width: auto;
    display: block;
    border-radius: 5px;
}

/* Daca gateway-ul isi tipareste si el iconitele, badge-ul nu mai impinge */
.m3d-pay-brand ~ img {
    margin-left: 8px;
}

/* Metoda indisponibila pentru comanda curenta - dezactivata, cu mesaj */
#payment ul.wc_payment_methods li.wc_payment_method.m3d-pay-disabled {
    cursor: not-allowed;
    background-color: #f6f7f8;
    border-style: dashed;
}

#payment ul.wc_payment_methods li.m3d-pay-disabled:hover {
    border-color: #dcdfe3;
}

#payment ul.wc_payment_methods li.m3d-pay-disabled > label,
#payment ul.wc_payment_methods li.m3d-pay-disabled input.input-radio {
    cursor: not-allowed;
}

.m3d-pay-disabled .m3d-pay-logo,
.m3d-pay-disabled .m3d-pay-brand,
.m3d-pay-disabled .m3d-pay-text {
    opacity: .55;
}

.m3d-pay-unavailable-msg {
    order: 6; /* dupa badge-ul de brand, mereu ultimul pe rand */
    margin-left: auto;
    flex: 0 1 auto;
    font-size: 12px;
    font-style: italic;
    color: #8a919a;
    text-align: right;
}

@media (max-width: 480px) {
    #payment ul.wc_payment_methods li.wc_payment_method {
        padding: 10px 12px;
        gap: 10px;
    }
    .m3d-pay-logo {
        flex-basis: 44px;
        width: 44px;
    }
    .m3d-pay-unavailable-msg {
        flex-basis: 100%;
        margin-left: 0;
        text-align: left;
    }
}

/* ============================================================
 * Chenar "Acorduri si confirmari" la checkout - grupeaza
 * checkbox-urile de dinaintea butonului de comanda
 * (markup deschis/inchis in inc/checkout-agreements.php)
 * ============================================================ */
fieldset.m3d-agreements {
    border: 1px solid #dcdfe3;
    border-radius: 10px;
    padding: 4px 16px 12px;
    margin: 0 0 18px;
    min-width: 0;
}

fieldset.m3d-agreements > legend {
    font-size: 15px;
    font-weight: 600;
    padding: 0 8px;
    margin-left: -8px;
    width: auto;
    float: none;
}

/* Randurile de checkbox: spatiere uniforma + text lizibil */
fieldset.m3d-agreements p.form-row {
    margin: 10px 0 0;
    padding: 0;
}

fieldset.m3d-agreements .woocommerce-terms-and-conditions-wrapper {
    margin: 0;
}

fieldset.m3d-agreements label.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    cursor: pointer;
}

fieldset.m3d-agreements label.checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: #2b6cb0;
    cursor: pointer;
}

/* Notele informative (import UE/non-UE, concediu) din chenar */
fieldset.m3d-agreements .mounts3d-import-notice {
    font-size: 13px;
}

@media (max-width: 480px) {
    fieldset.m3d-agreements {
        padding: 2px 12px 10px;
    }
}

/* "In stoc" ca badge verde pe pagina de produs (element nativ p.stock.in-stock) */
.single-product p.stock.in-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #1b7a3d;
    background: #e8f6ee;
    border: 1px solid #bfe6cd;
    border-radius: 999px;
}

/* Bulina verde inaintea textului */
.single-product p.stock.in-stock::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22a85a;
    flex: 0 0 auto;
}

/* Ascunde "în stoc" redundant de la fiecare produs din interiorul unui bundle
   (woosb = Product Bundles, woobt = Bought Together). Pastram "out of stock"
   vizibil, ca info utila daca un articol e chiar epuizat. */
.woosb-products .woosb-product .stock.in-stock,
.woobt-products .woobt-product .stock.in-stock {
    display: none !important;
}

/* Link "Găsește pentru altă cască" pe paginile de produs chin mount */
.m3d-finder-link {
    margin: 10px 0;
}

.m3d-finder-link a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: 14px;
    color: var(--theme-link-color, #1a73e8);
    text-decoration: none;
}

.m3d-finder-link a:hover {
    text-decoration: underline;
}

.m3d-finder-link svg {
    flex: 0 0 auto;
}

/* Trust badges — shared component (product pages + homepage trust section) */
.m3d-trust-badges {
    margin: 16px 0 6px;
    padding: 14px 16px;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    background: #fbfbfc;
}
.m3d-trust-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    width: 100%;
}
.m3d-trust-rating:hover { opacity: .85; }
.m3d-trust-rating__stars { position: relative; display: inline-flex; line-height: 0; }
.m3d-trust-rating__stars-empty,
.m3d-trust-rating__stars-fill { display: inline-flex; line-height: 0; }
.m3d-trust-rating__stars-empty { color: rgba(0,0,0,.18); }
.m3d-trust-rating__stars-fill {
    position: absolute; top: 0; left: 0;
    overflow: hidden; color: #FFBC00; white-space: nowrap;
}
.m3d-trust-rating__label { font-size: 13px; font-weight: 600; color: rgba(0,0,0,.7); }

.m3d-tb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 16px;
}
.m3d-tb__item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: rgba(0,0,0,.8);
    margin: 0;
}
.m3d-tb__ico { flex: 0 0 auto; color: #1f9d73; }

/* Homepage context: drop the boxed card — badges blend into the section like the
   other homepage paragraphs. Also neutralize the section's <ul>/<li> bullets. */
.m3d-trust .m3d-trust-badges {
    max-width: 820px;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    text-align: left;
}
.m3d-trust .m3d-tb__list { margin: 0; }
.m3d-trust .m3d-tb__item { padding-left: 0; }
.m3d-trust .m3d-tb__item::before { content: none; }

/* Tighten the gap between the reviews slider and the story section that follows */
.m3d-reviews + .m3d-story .m3d-container { padding-top: 24px; }

/* Mesaj livrare (ETA) ca badge verde "outline", mutat sub badge-ul "în stoc".
   Element din pluginul m3d-shipping-eta-vacation, relocat via woobt-ui.js. */
.single-product .m3d-single-slim {
    margin: 6px 0 12px;
}

.single-product .m3d-single-slim .m3d-line--eta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 5px 13px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #1b7a3d;
    background: #f0faf4;
    border: 1px solid #bfe6cd;
    border-radius: 999px;
}

.single-product .m3d-single-slim .m3d-line--eta .m3d-eta-ico {
    flex: 0 0 auto;
    color: #22a85a;
}

/* Linie cost transport "de la X", sub badge-ul de livrare (pill neutru) */
.single-product .m3d-single-slim .m3d-line--ship {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0 0;
    padding: 5px 13px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(0,0,0,.7);
    background: #f4f5f6;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 999px;
}

.single-product .m3d-single-slim .m3d-line--ship .m3d-ship-ico {
    flex: 0 0 auto;
    color: rgba(0,0,0,.5);
}

/* Safety notice under Add to Cart (inc/m3d-product-safety-notice.php).
   Amber, low-key: must read as a caution without competing with the CTA. */
.m3d-safety-notice {
    margin: 14px 0 0;
    padding: 10px 12px;
    background: #fff8ed;
    border-left: 3px solid #e8a33d;
    border-radius: 4px;
}

.m3d-safety-notice p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(0, 0, 0, .75);
}

.m3d-safety-notice a {
    text-decoration: underline;
}

/* =====================================================================
   Code-added product tabs (inc/m3d-product-tabs.php).
   Blocksy does not style <table> inside tab content at all, and a 16-row
   spec table has to survive a 360px viewport, so the table gets its own
   rules plus a stacked mobile layout.
   ===================================================================== */
.m3d-tab {
    max-width: 900px;
    font-size: 15px;
    line-height: 1.6;
}

.m3d-tab h3 {
    margin: 28px 0 12px;
    font-size: 19px;
}

.m3d-tab h3:first-child {
    margin-top: 0;
}

.m3d-tab h4 {
    margin: 22px 0 8px;
    font-size: 16px;
}

.m3d-tab ul,
.m3d-tab ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.m3d-tab li {
    margin: 0 0 6px;
}

/* Lead-in that points at the binding PDF: must not be skimmed past. */
.m3d-tab-lead {
    margin: 0 0 22px;
    padding: 10px 12px;
    background: #fff8ed;
    border-left: 3px solid #e8a33d;
    border-radius: 4px;
}

/* Callout for the downward-facing mounting warning. */
.m3d-tab-callout {
    margin: 0 0 22px;
    padding: 10px 12px;
    background: #f4f5f6;
    border-left: 3px solid rgba(0, 0, 0, .35);
    border-radius: 4px;
}

.m3d-tab-lead p:last-child,
.m3d-tab-callout p:last-child {
    margin-bottom: 0;
}

/* Own scroll container: the page body must never scroll sideways. */
.m3d-tab-tablewrap {
    margin: 0 0 20px;
    overflow-x: auto;
}

.m3d-tab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.m3d-tab-table th,
.m3d-tab-table td {
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(0, 0, 0, .10);
}

.m3d-tab-table th {
    width: 42%;
    font-weight: 600;
    color: rgba(0, 0, 0, .75);
    background: #fafafa;
}

.m3d-tab-table tr:last-child th,
.m3d-tab-table tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 600px) {
    .m3d-tab-table th,
    .m3d-tab-table td {
        display: block;
        width: auto;
    }

    .m3d-tab-table th {
        border-bottom: 0;
        padding-bottom: 2px;
        font-size: 13px;
    }

    .m3d-tab-table td {
        padding-top: 0;
    }
}

/* =====================================================================
   Sale deadline under the price (inc/m3d-sale-end-notice.php).
   inline-block so the tint hugs the sentence instead of running the full
   width of the summary column and competing with the price itself.
   ===================================================================== */
.m3d-sale-until {
    display: inline-block;
    margin: 0 0 15px;
    padding: 5px 10px;
    background: #fff8ed;
    border-left: 3px solid #e8a33d;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    color: rgba(0, 0, 0, .75);
}

/* =====================================================================
   Sale deadline slanted across the card thumbnail (same PHP file).

   Anchored to the card <figure>, which Blocksy already makes relative for
   its own badges. Bled past both edges (left/right negative) so the tilt
   cuts the card cleanly instead of leaving two triangles of background.
   Sits below the middle, where the top corner stays free for an out-of-
   stock badge and the bottom stays free for the hover toolbar.

   z-index 1 matches the theme badges: same layer, and because the ribbon
   is printed before the toolbar in the DOM, the toolbar still paints over
   it on hover instead of fighting it.

   The orange is darker than the theme's badge orange on purpose: white on
   #d47616 is 3.3:1, which fails AA for the small CTA line. #b45f0c is
   4.6:1 and passes for every size in here.
   ===================================================================== */
.m3d-sale-ribbon {
    position: absolute;
    z-index: 1;
    top: 58%;
    left: -14%;
    right: -14%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 8px;
    transform: rotate(-8deg);
    background: rgba(180, 95, 12, .95);
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    /* The card is one link; the ribbon must not swallow the click. */
    pointer-events: none;
}

/* Discount and deadline share the first line; the percentage is the thing the
   eye lands on, so it is the only element allowed to be large. Wrapping is
   permitted — on a narrow card the percentage drops to its own line rather
   than shrinking both parts into illegibility. */
.m3d-sale-ribbon__headline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 6px;
}

.m3d-sale-ribbon__off {
    font-size: clamp(15px, 3.4vw, 21px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.3px;
}

/* Uppercase so the sentence reads the same whether or not the percentage sits
   in front of it — "-25% Până la 31 aug" would carry a capital in mid-line. */
.m3d-sale-ribbon__when {
    font-size: clamp(10px, 2.2vw, 13px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.m3d-sale-ribbon__cta {
    margin-top: 1px;
    font-size: clamp(9px, 1.9vw, 11px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .8px;
    text-transform: uppercase;
    opacity: .9;
}

/* Two-per-row phone grids: the same ribbon on half the width. Tighter, and
   the tilt is reduced so the text does not run off the corners. */
@media (max-width: 689px) {
    .m3d-sale-ribbon {
        top: 60%;
        padding: 4px 6px;
        transform: rotate(-6deg);
    }
}

/* The bleed has to be clipped, or the ribbon's ends stick out into the grid
   gutter and over the neighbouring card. Only cards that actually carry a
   ribbon are clipped, so nothing else in the theme changes behaviour. */
.products figure:has(.m3d-sale-ribbon) {
    overflow: hidden;
    border-radius: var(--theme-border-radius, 3px);
}


/* ===========================================================================
   Sidebar product categories — woocommerce/product-categories block, list mode
   ===========================================================================
   The block renders parents and children with identical type and no bullets,
   so the hierarchy is invisible: every line reads with the same importance.
   These rules give it a quiet hierarchy — semibold parents separated by a
   hairline, lighter children held by a left rail — without introducing any
   colour of its own. Nothing here depends on the block's settings, so
   toggling counts or images in the editor will not break it.

   Markup (see WC src/Blocks/BlockTypes/ProductCategories.php::renderListItems):
     .wc-block-product-categories.is-list
       > ul.wc-block-product-categories-list--depth-0
         > li.wc-block-product-categories-list-item
           > a > span.wc-block-product-categories-list-item__name
           > ul.wc-block-product-categories-list--depth-1 > li …

   NOTE: the block hardcodes the <li> class and never marks the current term,
   so there is deliberately no "you are here" state below — it is not
   expressible in CSS. It needs a render_block filter to add the class first.
   --------------------------------------------------------------------------- */

.wc-block-product-categories.is-list ul.wc-block-product-categories-list,
.wc-block-product-categories.is-list .wc-block-product-categories-list-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Top level carries all the weight. A hairline between groups does the
   separating, so no cards, boxes or fills are needed. */
.wc-block-product-categories.is-list
  > ul.wc-block-product-categories-list--depth-0
  > .wc-block-product-categories-list-item
  + .wc-block-product-categories-list-item {
    border-top: 1px solid var(--theme-border-color, rgba(0, 0, 0, .08));
}

.wc-block-product-categories.is-list
  > ul.wc-block-product-categories-list--depth-0
  > .wc-block-product-categories-list-item > a {
    display: block;
    padding: 11px 0 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--theme-text-color, #192a3d);
    text-decoration: none;
    transition: color .15s ease;
}

/* Children: smaller, lighter, and grouped by the rail rather than by indent
   alone — the rail is what makes the nesting readable at a glance. */
.wc-block-product-categories.is-list ul.wc-block-product-categories-list--depth-1 {
    margin: 0 0 12px;
    padding-left: 14px;
    border-left: 1px solid var(--theme-border-color, rgba(0, 0, 0, .1));
}

.wc-block-product-categories.is-list
  ul.wc-block-product-categories-list--depth-1
  > .wc-block-product-categories-list-item > a {
    display: block;
    padding: 6px 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--theme-text-color, #192a3d);
    opacity: .68;
    text-decoration: none;
    transition: opacity .15s ease, color .15s ease;
}

.wc-block-product-categories.is-list .wc-block-product-categories-list-item > a:hover,
.wc-block-product-categories.is-list .wc-block-product-categories-list-item > a:focus-visible {
    color: var(--theme-link-hover-color, var(--theme-link-color, #1a73e8));
    opacity: 1;
}

.wc-block-product-categories.is-list .wc-block-product-categories-list-item > a:focus-visible {
    outline: 2px solid var(--theme-link-color, #1a73e8);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Long child lists (moto chin mounts is ~35 helmet brands) otherwise turn the
   sidebar into a wall of links taller than the product grid. Only lists that
   are genuinely long get capped: :has() tests for a 14th item, so the short
   ones (MTB has two) keep their natural height.
     - raise/lower the nth-child(14) threshold to cap later/sooner
     - drop this whole block to restore full-height lists
   Desktop only on purpose — a nested scroll area inside a touch page traps
   the swipe, and below 1000px Blocksy stacks the sidebar under the content
   where the extra height costs nothing. */
@media (min-width: 1000px) {
    .wc-block-product-categories.is-list
      ul.wc-block-product-categories-list--depth-1:has(
        > .wc-block-product-categories-list-item:nth-child(14)
      ) {
        max-height: 330px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--theme-border-color, rgba(0, 0, 0, .22)) transparent;
    }
}