:root {
  --bg: #0f0f0f;
  --card: #151515;
  --text: #f5f5f5;
  --muted: #d4af37;
  --gold: #d4af37;
  --border: #2a2a2a;
}

* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5
}

a {
  color: inherit;
  text-decoration: none
}

a:hover {
  text-decoration: underline
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(15, 15, 15, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border)
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0
}

.brand__name {
  display: none
}

/* CRO: Remove text, only logo */
.nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  /* Fix alignment */
  font-size: 14px;
  color: var(--muted)
}

.nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  transition: all 0.2s ease;
  background: transparent;
}

.nav a:hover {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
  text-decoration: none;
}

/* Fix Dropdown Visibility & Style to Match Buttons */
.province-picker select {
  appearance: none;
  -webkit-appearance: none;
  height: 32px;
  background: #222 url('data:image/svg+xml;utf8,<svg fill="%23d4af37" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center;
  background-size: 16px;
  color: var(--gold);
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 0 30px 0 16px;
  /* Space for arrow */
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  outline: none;
  transition: all 0.2s ease;
  display: block;
  /* Override btn flex */
  width: 100%;
  /* Ensure it fills wrapper if needed, or just block */
}

.province-picker select:hover {
  border-color: var(--gold);
  background-color: rgba(212, 175, 55, 0.05);
}

.province-picker select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

/* Centered Province List */
.province-list {
  columns: 2;
  column-gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
  text-align: left;
}

.province-list li {
  margin-bottom: 5px;
}

select option {
  background: var(--card);
  color: var(--text);
}

.hero {
  padding: 30px 0 16px;
  border-bottom: 1px solid var(--border)
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: center
}

@media(max-width:900px) {
  .hero__grid {
    grid-template-columns: 1fr
  }
}

.kicker {
  font-size: 12px;
  color: var(--gold);
  letter-spacing: .15em;
  font-weight: 800
}

h1 {
  font-size: 40px;
  line-height: 1.12;
  margin: 10px 0 8px
}

@media(max-width:600px) {
  h1 {
    font-size: 32px
  }
}

.sub {
  color: var(--muted);
  max-width: 52ch
}

.hero__cta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 16px 0
}

.bullets {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted)
}

.bullets li {
  margin: 6px 0
}

.hero__media {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px;
  position: relative;
}

.hero__video {
  width: 100%;
  border-radius: 14px;
  display: block
}

.btn {
  position: relative;
  background: #080808;
  border: 1px solid #D4AF37;
  color: #D4AF37;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  cursor: pointer;
}

.btn:hover {
  border-color: #FFD700;
  transform: scale(1.02);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.6);
}

.btn--primary {
  background: #080808;
  /* Override previous gradient */
  color: #D4AF37;
  border: 1px solid #D4AF37;
}

.btn--primary:hover {
  border-color: #FFD700;
}

.btn--ghost {
  background: transparent;
  border: 2px solid #B38728;
  box-shadow: none;
}

.gold-text {
  background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Liquid Gold Premium Text - Color unificado para enlaces y textos destacados */
.text-gold-liquid {
  background: linear-gradient(135deg, #BF953F 0%, #FCF6BA 25%, #D4AF37 50%, #FBF5B7 75%, #AA771C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  text-decoration: none;
}

.text-gold-liquid:hover {
  filter: brightness(1.15);
  text-decoration: none;
}

a.text-gold-liquid {
  text-decoration: none;
}

a.text-gold-liquid:hover {
  text-decoration: underline;
}

.btn:hover .gold-text {
  filter: brightness(1.2);
}

.products {
  padding: 26px 0
}

.products h2 {
  margin: 0 0 14px
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px
}

@media(max-width:900px) {
  .grid {
    grid-template-columns: 1fr
  }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.card__img {
  width: 100%;
  height: auto;
  display: block
}

.card__body {
  padding: 14px
}

.card__body h3 {
  margin: 0 0 2px
}

.muted {
  color: var(--muted)
}

.desc {
  color: var(--muted);
  margin: 10px 0 0
}

.price-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px
}

.price__label {
  display: block;
  font-size: 12px;
  color: var(--muted)
}

.price__value {
  font-size: 22px;
  font-weight: 900
}

.price__small {
  display: block;
  font-size: 12px;
  color: var(--muted)
}

.hint {
  margin-top: 14px;
  color: var(--muted);
  border: 1px dashed var(--border);
  padding: 12px;
  border-radius: 14px
}

.local {
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.local__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px
}

@media(max-width:900px) {
  .local__grid {
    grid-template-columns: 1fr
  }
}

.faq details {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, .02);
  margin: 10px 0
}

.faq summary {
  cursor: pointer;
  font-weight: 800
}

.stickybar {
  display: none !important;
}

.stickybar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

.sep {
  opacity: .5;
  margin: 0 8px
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .6);
  padding: 20px;
  z-index: 20000 !important;
  /* Force highest z-index */
}

.modal:not([hidden]) {
  display: grid !important;
  /* Override any inline display:none remnants */
}

.modal[hidden] {
  display: none !important
}

.modal__panel {
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  margin: auto;
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--border)
}

.iconbtn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer
}

.modal__body {
  padding: 20px;
  overflow-y: auto;
}

.modal__foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px;
  border-top: 1px solid var(--border)
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px
}

@media(max-width:700px) {
  .form-grid {
    grid-template-columns: 1fr
  }
}

label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700
}

/* Dark mode optimized inputs */
input,
select,
textarea {
  color-scheme: dark;
}

/* Only text-based inputs should have full styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input:not([type]),
select,
textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #0b0b0b !important;
  background-color: #0b0b0b !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: inherit;
  font-size: 16px;
  /* Prevent zoom on iOS */
}

/* Text inputs specifically in modal forms */
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="tel"],
.modal input:not([type]),
.form-grid input {
  background: #0b0b0b !important;
  background-color: #0b0b0b !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

input::placeholder {
  color: #888;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #0b0b0b !important;
}

/* Fix for browser autofill - Stronger override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px #0b0b0b inset !important;
  box-shadow: 0 0 0px 1000px #0b0b0b inset !important;
  border: 1px solid #D4AF37 !important;
  caret-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
  color-scheme: dark;
}

/* Readonly inputs (province field) */
input[readonly] {
  background: #1a1a1a !important;
  cursor: not-allowed;
  color: #D4AF37 !important;
  border-color: #D4AF37;
  -webkit-text-fill-color: #D4AF37 !important;
}


.inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px
}

.inline input {
  width: auto;
  margin: 0
}

/* Custom Checkbox Styling - Visible gold border and checkmark */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  border: 2px solid #D4AF37 !important;
  border-radius: 4px;
  background: #1a1a1a !important;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

input[type="checkbox"]:hover {
  border-color: #FFD700 !important;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

input[type="checkbox"]:checked {
  background: #D4AF37 !important;
  border-color: #D4AF37 !important;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 16px;
  font-weight: bold;
}

/* Custom Radio Button Styling */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid #D4AF37 !important;
  border-radius: 50%;
  background: #1a1a1a !important;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

input[type="radio"]:hover {
  border-color: #FFD700 !important;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

input[type="radio"]:checked {
  border-color: #D4AF37 !important;
  background: #1a1a1a !important;
}

input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #D4AF37;
  border-radius: 50%;
}

.payrow {
  display: flex;
  gap: 12px 18px;
  flex-wrap: wrap;
  margin-top: 10px;
  align-items: center;
}

/* Fix alignment for payment options - All options should align on a single row */
.payrow .inline {
  display: inline-flex;
  align-items: flex-start;
  /* Fix: Align top for multi-line text */
  gap: 8px;
  margin-top: 0;
  white-space: normal;
  /* Allow wrap */
}

.payrow .inline input[type="radio"],
.payrow .inline input[type="checkbox"] {
  margin: 2px 0 0 0;
  /* Fix: visual alignment with first line of text */
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Fix transfer option with multiline text - keep aligned */
.payrow .inline span[style*="flex-direction:column"] {
  display: flex !important;
  /* Force flex to stack column */
  flex-direction: column;
  line-height: 1.3;
  text-align: left;
}

.payrow .inline span[style*="flex-direction:column"] small {
  display: block;
  font-size: 11px;
  opacity: 0.7;
  white-space: normal;
  margin-top: 2px;
}

.micro {
  font-size: 12px;
  color: var(--muted)
}

.cart-lines {
  display: grid;
  gap: 10px
}

.cart-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px
}

.totals {
  margin-top: 14px;
  display: grid;
  gap: 6px
}

.totals>div {
  display: flex;
  justify-content: space-between;
  color: var(--muted)
}

.totals__grand {
  color: var(--text);
  font-size: 18px;
  font-weight: 900
}

.footer {
  padding: 26px 0
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 16px
}

@media(max-width:900px) {
  .footer__grid {
    grid-template-columns: 1fr
  }
}

.trust {
  padding: 14px 0;
  border-bottom: 1px solid var(--border)
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px
}

@media(max-width:900px) {
  .trust__grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

.trust__item {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px
}

.trust__item strong {
  display: block
}

.trust__item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px
}

.chooser {
  padding: 18px 0
}

.chooser__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px
}

@media(max-width:900px) {
  .chooser__grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

.chooser__card {
  display: block;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px
}

.chooser__card strong {
  display: block;
  font-size: 16px
}

.chooser__card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px
}

.features {
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px
}

@media(max-width:900px) {
  .features__grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:600px) {
  .features__grid {
    grid-template-columns: 1fr
  }
}

.feature {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px
}

.reviews {
  padding: 18px 0
}

.reviews__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px
}

.b2b {
  padding: 22px 0;
  border-top: 1px solid var(--border)
}

.b2b__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items: start
}

@media(max-width:900px) {
  .b2b__grid {
    grid-template-columns: 1fr
  }
}

.b2b__box {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px
}

.b2b__btn {
  width: 100%;
  text-align: center
}

.step {
  padding: 0
}

.proof {
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px
}

@media(max-width:900px) {
  .proof__grid {
    grid-template-columns: 1fr
  }
}

.proof__card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px
}

.proof__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px
}

.proof__card ul.bullets {
  margin: 10px 0 0;
  padding: 0;
  list-style: none
}

p.micro {
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 0
}

/* Legal pages */
.legal {
  padding: 28px 0
}

.legal__container {
  max-width: 900px
}

.legal h1 {
  font-size: 34px;
  margin: 0 0 18px
}

.legal__section {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, .03)
}

.legal__section h2 {
  font-size: 18px;
  margin: 0 0 10px
}

.legal__list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none
}

.legal__list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.legal__list li:last-child {
  border-bottom: none
}

.legal__note {
  margin-top: 18px
}

/* Cookie banner */
#cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: rgba(10, 10, 10, .92);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(8px)
}

.cookie__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap
}

.cookie__text {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px
}

.cookie__text strong {
  color: var(--text)
}

.cookie__text a {
  color: var(--text);
  text-decoration: underline
}

.cookie__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

/* Cookie mascot (Don Goro) */
.cookie__left {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap
}

.cookie__mascot {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35)
}

/* Brand logo */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none
}

.brand__logo {
  height: 34px;
  width: auto;
  display: block
}

@media (min-width: 720px) {
  .brand__logo {
    height: 38px
  }
}

.brand__logo {
  filter: invert(76%) sepia(50%) saturate(693%) hue-rotate(358deg) brightness(89%) contrast(89%);
}

/* Social Share Buttons */
.share-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.share-buttons__label {
  font-size: 14px;
  color: var(--muted);
}

.text-gold-liquid {
  background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #d4af37;
  font-weight: 600;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}



.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.share-btn:hover {
  background: var(--gold);
  color: #111;
  border-color: var(--gold);
  transform: translateY(-2px);
}

.share-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Product Detail Styles */
.product-detail {
  padding: 40px 0;
}

.product-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media(max-width:900px) {
  .product-detail__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.product-detail__media {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px;
  position: sticky;
  top: 100px;
}

.product-detail__img {
  width: 100%;
  border-radius: 14px;
  display: block;
}

.product-detail__subtitle {
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 8px;
}

.product-detail__price-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  margin: 24px 0;
}

.product-detail__specs {
  margin-top: 30px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  list-style: none;
  padding: 0;
}

.spec-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: 12px;
}

.spec-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
}

.spec-value {
  display: block;
  font-weight: 800;
}

.product-desc {
  line-height: 1.7;
  color: var(--muted);
}

.product-desc p {
  margin-bottom: 1em;
}

/* Tabs Mockup Style (Optional for better UI) */
.tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.tab-btn {
  background: none;
  border: none;
  color: var(--muted);
  padding: 10px 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}

.tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* WhatsApp Float Gold - Ultimate Liquid Gold */
.whatsapp-float {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 60px !important;
  height: 60px !important;

  /* Ultra Vivid Liquid Gold Gradient */
  background: linear-gradient(45deg, #8a6e2f, #d4af37, #ffd700, #ffecb3, #d4af37, #8a6e2f) !important;
  background-size: 300% 300% !important;
  animation: liquidShine 3s ease-in-out infinite !important;

  color: #111 !important;
  border-radius: 50% !important;
  text-align: center !important;

  /* Deep Golden Glow & Ring */
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(255, 215, 0, 0.6),
    inset 0 0 0 2px rgba(255, 255, 255, 0.5),
    inset 0 0 15px rgba(138, 110, 47, 0.5) !important;

  z-index: 2147483647 !important;
  /* Max z-index */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes liquidShine {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.whatsapp-float:hover {
  transform: scale(1.15) translateY(-5px);
  /* Intense Solar Flare Glow on Hover */
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.5),
    0 0 35px rgba(255, 223, 0, 0.9),
    inset 0 0 0 2px rgba(255, 255, 255, 0.9) !important;
  background: linear-gradient(45deg, #996515, #daa520, #fffacd, #ffd700, #daa520, #996515) !important;
  background-size: 300% 300% !important;
}

.whatsapp-float:hover svg,
.whatsapp-float:hover img {
  fill: #111 !important;
  /* For img, we might need filter if it's an SVG loaded as img, but fill won't work.
       Assuming the SVG or IMG is already the right color or we rely on opacity/filter.
       If previous was Green button with white icon, and now we want Black icon on Gold...
       Let's try to force black on hover or always black if that's the design.
       The previous GOLD css said color: #111. */
}

.whatsapp-float svg,
.whatsapp-float img {
  width: 32px !important;
  height: 32px !important;
  fill: currentColor !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* WhatsApp Float Gold - Ultimate Liquid Gold */
.whatsapp-float {
  width: 70px !important;
  height: 70px !important;
  bottom: 25px !important;
  right: 25px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.4));
  z-index: 9999 !important;
  /* Lowered from MAX_INT to let Modal cover it */
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: axisSpin 10s linear infinite !important;
}

.whatsapp-float:hover {
  transform: scale(1.1) translateY(-5px) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
}

.whatsapp-float img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: none !important;
  margin: 0 !important;
}

/* Phone Float Gold */
.phone-float {
  position: fixed;
  bottom: 105px;
  /* Stacked above WhatsApp */
  right: 25px;
  width: 70px;
  height: 70px;
  z-index: 9999;
  /* Lowered from MAX_INT */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.4));
  animation: axisSpin 12s linear infinite reverse;
}

.phone-float:hover {
  transform: scale(1.1) translateY(-5px);
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
}

.phone-float img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Floating Cart Button Gold */
/* Wrapper removed to fix click capture issues. Button is now the fixed anchor. */

.cart-float {
  position: fixed;
  bottom: 185px;
  /* Stacked above Phone */
  right: 25px;
  width: 70px;
  height: 70px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 9999;
  /* Lowered from MAX_INT */
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.4));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modals need to be HIGHEST */
.modal {
  z-index: 10000;
  /* Ensure it covers 9999 floating buttons */
}

/* Cart Bump / Flash Animation */
@keyframes cartBumpAnim {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.4));
  }

  50% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 1)) brightness(1.3);
  }

  100% {
    transform: scale(1);
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.4));
  }
}

.cart-bump {
  animation: cartBumpAnim 0.4s ease-out !important;
}

.cart-float:hover {
  transform: scale(1.1) translateY(-5px);
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
}

.cart-float img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  /* Let clicks pass through image to button */
}

/* Wheel Spin Animation Class */
.cart-anim-spin img {
  animation: cartBump 0.5s ease-out, wheelSpin 0.8s ease-out;
}

@keyframes cartBump {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes wheelSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes axisSpin {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

/* Badge styling */
.cart-count-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #D4AF37;
  /* Gold */
  color: #000;
  font-weight: 900;
  font-size: 14px;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  /* Clicks pass through badge to button */
}

/* --- CORRECCIONES DE EMERGENCIA (Fixed Layout & Focus Ring) --- */

/* 1. RESTRICCIÓN DE IMÁGENES ELIMINADA (HTML Fix applied) */

/* 2. ELIMINAR BORDE AZUL (FOCUS RING) DEL VIDEO/POSTER */
/* Esto elimina el recuadro azul que aparece en el video */
video,
.hero__video,
.hero__media,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* Fix specific to poster image if it's being rendered as a background or separate element */
video[poster] {
  object-fit: cover;
  border: none !important;
  outline: none !important;
}

/* Protección extra contra el foco del navegador */
*:focus {
  outline: none !important;
}

/* ========================================
   SOCIAL SHARE BUTTONS
   ======================================== */

.social-share {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0;
}

.social-share__title {
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
  margin-right: 8px;
}

.social-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

.social-share__btn svg {
  width: 22px;
  height: 22px;
  transition: transform 0.2s ease;
}

.social-share__btn:hover {
  transform: scale(1.1);
  text-decoration: none;
}

.social-share__btn:hover svg {
  transform: scale(1.05);
}

/* Facebook */
.social-share__btn--facebook {
  border-color: #1877f2;
}

.social-share__btn--facebook svg {
  fill: #1877f2;
}

.social-share__btn--facebook:hover {
  background: rgba(24, 119, 242, 0.15);
  box-shadow: 0 0 20px rgba(24, 119, 242, 0.4);
}

/* Twitter/X */
.social-share__btn--twitter {
  border-color: #d4af37;
}

.social-share__btn--twitter svg {
  fill: #d4af37;
}

.social-share__btn--twitter:hover {
  background: rgba(212, 175, 55, 0.15);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

/* Instagram */
.social-share__btn--instagram {
  border-color: #e4405f;
}

.social-share__btn--instagram svg {
  fill: #e4405f;
}

.social-share__btn--instagram:hover {
  background: rgba(228, 64, 95, 0.15);
  box-shadow: 0 0 20px rgba(228, 64, 95, 0.4);
}

/* Pinterest */
.social-share__btn--pinterest {
  border-color: #bd081c;
}

.social-share__btn--pinterest svg {
  fill: #bd081c;
}

.social-share__btn--pinterest:hover {
  background: rgba(189, 8, 28, 0.15);
  box-shadow: 0 0 20px rgba(189, 8, 28, 0.4);
}

/* WhatsApp Share */
.social-share__btn--whatsapp {
  border-color: #25d366;
}

.social-share__btn--whatsapp svg {
  fill: #25d366;
}

.social-share__btn--whatsapp:hover {
  background: rgba(37, 211, 102, 0.15);
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
}

/* Footer Social Share Section */
.footer-social {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.footer-social h4 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ========================================
   TRUST BADGES (Garantías junto al producto)
   ======================================== */

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}

.trust-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

.trust-badge--highlight {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--gold);
}

@media (max-width: 600px) {
  .trust-badges {
    justify-content: center;
  }

  .trust-badge {
    font-size: 10px;
    padding: 5px 8px;
  }
}

/* ========================================
   LIQUID GOLD THEME (Moved from inline HTML)
   ======================================== */

/* Apply liquid gold ONLY to elements that were previously flat gold/yellow AND links */
.muted,
.kicker,
.nav a,
.btn,
.price__label,
.price__small,
.micro,
.desc,
label,
.trust__item span,
.chooser__card span,
.sub,
.bullets,
.bullets li,
.gold,
.gold-text,
.pro-copy a,
.feature strong,
a

/* All links */
  {
  background: linear-gradient(135deg, #BF953F 0%, #FCF6BA 25%, #D4AF37 50%, #FBF5B7 75%, #AA771C 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* CRITICAL FIX: Inputs inside labels must have visible white text, not transparent gold */
label input,
label textarea,
label select,
.form-grid input,
.form-grid textarea,
.form-grid select,
.modal input,
.modal textarea,
.modal select {
  background: #0b0b0b !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

/* Make links bold */
a {
  font-weight: 700 !important;
  /* Bold */
  text-decoration: none !important;
}

/* Ensure specific items are also handled */
.nav a {
  border-color: #D4AF37 !important;
}

body {
  color: #f5f5f5 !important;
}

/* Fix button borders to match gold theme */
.btn {
  border: 1px solid #D4AF37 !important;
  color: #D4AF37 !important;
  /* Fallback */
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.btn:hover {
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.6);
}

/* ========================================
   CHECKOUT PROGRESS BAR
   ======================================== */

.checkout-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  padding: 0 10px;
}

.checkout-progress::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 20%;
  right: 20%;
  height: 2px;
  background: rgba(212, 175, 55, 0.3);
  z-index: 0;
  transform: translateY(-50%);
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  background: #111;
  /* Match modal background */
  padding: 0 10px;
  color: #888;
  font-size: 0.85em;
  font-weight: 600;
  gap: 5px;
}

.progress-step span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 1px solid #555;
  transition: all 0.3s ease;
}

.progress-step.active {
  color: var(--gold);
}

.progress-step.active span {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.progress-step.completed span {
  background: var(--gold);
  color: #000;
}

/* ========== CHECKBOX Y RADIO GOLD VISIBLE ========== */
.modal input[type="checkbox"],
.modal input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid #D4AF37 !important;
  background: #1a1a1a !important;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin-right: 8px;
}

.modal input[type="checkbox"] {
  border-radius: 4px;
}

.modal input[type="radio"] {
  border-radius: 50%;
}

.modal input[type="checkbox"]:checked,
.modal input[type="radio"]:checked {
  background: #D4AF37 !important;
  border-color: #D4AF37 !important;
}

.modal input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 14px;
  font-weight: bold;
}

.modal input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
}

/* Inputs de texto visibles */
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="tel"],
.modal input:not([type]),
.form-grid input {
  background: #0b0b0b !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid #D4AF37 !important;
}

/* ========== PAYROW - ALINEACIÓN DE MÉTODOS DE PAGO ========== */
.payrow {
  display: flex !important;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
  align-items: center;
}

.payrow label.inline {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}

/* CHECKOUT FULL PAGE */
.checkout-page {
  padding: 40px 0;
  min-height: 100vh;
  background: var(--bg);
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

@media(max-width: 900px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }

  .checkout-summary {
    position: static !important;
    order: -1;
    /* Show summary on top on mobile? Or bottom? Usually top is better for trust */
    margin-bottom: 30px;
  }
}

.checkout-form {
  background: var(--card);
  padding: 30px;
  border-radius: 18px;
  border: 1px solid var(--border);
}

.checkout-summary {
  background: #1a1a1a;
  padding: 25px;
  border-radius: 18px;
  border: 1px solid var(--gold);
  height: fit-content;
  position: sticky;
  top: 100px;
  /* Account for topbar */
}

.checkout-summary h3 {
  margin-top: 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 15px;
  color: var(--gold);
}

.summary-items {
  margin: 20px 0;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 5px;
  /* space for scrollbar */
}

/* Reuse .cart-line styles but maybe smaller? */
.summary-items .cart-line {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 10px 0;
}

.summary-items .cart-line:last-child {
  border-bottom: none;
}

.summary-totals {
  background: rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 12px;
}

.total-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.95em;
  color: var(--muted);
}

.total-line.grand {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.2em;
  color: var(--text);
}

.total-line .discount {
  color: #27ae60;
}

.checkout-trust {
  margin-top: 20px;
  font-size: 0.85em;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
  background: rgba(212, 175, 55, 0.05);
  /* very faint gold bg */
  padding: 15px;
  border-radius: 8px;
  border: 1px dashed rgba(212, 175, 55, 0.3);
}

/* Hide Nav on Checkout Page to remove distractions */
body.is-checkout .nav,
body.is-checkout .footer,
body.is-checkout .phone-float,
body.is-checkout .whatsapp-float,
body.is-checkout #geo-banner {
  display: none !important;
}

body.is-checkout .brand__name {
  display: block !important;
  /* Maybe show brand name safely? */
}

body.is-checkout .topbar {
  position: static;
  /* No sticky topbar */
  border-bottom: none;
  background: transparent;
}

/* Center logo */
body.is-checkout .topbar__inner {
  justify-content: center;
}

/* ============================================
   BREADCRUMBS - Visual navigation
   ============================================ */
.breadcrumbs {
  background: rgba(15, 15, 15, 0.8);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs__link {
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.2s ease;
  opacity: 0.7;
}

.breadcrumbs__link:hover {
  opacity: 1;
  text-decoration: none;
}

.breadcrumbs__separator {
  color: rgba(212, 175, 55, 0.4);
  font-size: 10px;
}

.breadcrumbs__current {
  color: var(--text);
  font-weight: 600;
}

/* ============================================
   MICRO-ANIMATIONS - Premium interactions
   ============================================ */

/* Button click animation */
.btn {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn:active {
  transform: scale(0.95);
}

/* Add to cart success animation */
@keyframes cartBump {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.cart-float.cart-bump {
  animation: cartBump 0.4s ease-out;
}

/* Cart badge pop animation */
@keyframes badgePop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.cart-count-badge {
  animation: badgePop 0.3s ease-out;
}

/* Product card hover effect */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.15);
}

/* Card image zoom on hover */
.card__img {
  transition: transform 0.4s ease;
}

.card:hover .card__img {
  transform: scale(1.03);
}

/* Trust badges subtle glow */
.trust-badge {
  transition: all 0.2s ease;
}

.trust-badge:hover {
  background: rgba(212, 175, 55, 0.15);
  transform: translateY(-1px);
}

/* Modal fade in */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal:not([hidden]) {
  animation: modalFadeIn 0.2s ease-out;
}

.modal:not([hidden]) .modal__panel {
  animation: modalSlideIn 0.3s ease-out;
}

/* Floating buttons use axisSpin defined earlier in this file */

/* Price highlight animation on load */
@keyframes priceGlow {
  0% {
    text-shadow: 0 0 0 transparent;
  }

  50% {
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  }

  100% {
    text-shadow: 0 0 0 transparent;
  }
}

.price__value {
  animation: priceGlow 2s ease-out;
}

/* Checkbox/Radio check animation */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  animation: badgePop 0.2s ease-out;
}

/* Hero video container subtle border glow */
.hero__media {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero__media:hover {
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
}