/* =========================
   BLACK & GOLD THEME (FULL)
   ========================= */

/* --------- Theme Tokens --------- */
:root{
  --font-text: 'Lato', sans-serif;
  --font-heading: 'Quicksand', sans-serif;

  /* Core Palette */
  --color-bg: #000000;               /* page background */
  --color-surface-1: #0b0b0b;        /* deep card */
  --color-surface-2: #111111;        /* card default */
  --color-surface-3: #171717;        /* subtle elevated */
  --color-border: #2a2a2a;           /* hairlines */
  --color-text: #ffffff;             /* primary text */
  --color-body: #d1d1d1;             /* paragraph */
  --color-muted: #9aa0a6;            /* muted copy */

  /* Brand Accents */
  --color-brand: #d8b54f;            /* gold */
  --color-brand-dark: #bfa03f;       /* hover gold */
  --color-brand-rgb: 216,181,79;

  /* Status */
  --color-success: #81B13D;
  --color-warning: #ffcc33;
  --color-danger:  #FD6E6E;
  --color-info:    #2cc1d8;

  /* Legacy aliases kept for compatibility */
  --color-heading: #ffffff;
  --color-grey-1: #dcdcdc;
  --color-grey-2: #b5b5b5;
  --color-grey-4: #8a8a8a;
  --color-grey-9: #141414;

  /* Typography scale */
  --heading-font-size: 32px;
  --body-font-size: 16px;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(var(--color-brand-rgb), .35);
}

/* --------- Global / Base --------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{
  height:100%;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 var(--body-font-size)/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; height:auto; display:block; }

a{
  color: var(--color-brand);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
a:hover{ color: var(--color-brand-dark); }

h1,h2,h3,h4,h5,h6{
  color: var(--color-heading);
  font-family: var(--font-heading);
  margin: .3em 0 .4em;
}

hr{ border:0; border-top:1px solid var(--color-border); margin:1.25rem 0; }

/* Cards / Surfaces */
.card,
.pdp .card,
.amor-card,
.detail-card.card{
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  color: var(--color-text);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Muted text utility */
.muted, .pdp .muted{ color: var(--color-muted); }

/* Focus styles */
:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

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

.social-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:8px;
  font-size:14px; font-weight:600; text-decoration:none;
  transition: transform .08s ease, filter .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
  background: transparent;
  color: var(--color-brand);
  border: 1px solid var(--color-brand);
}
.social-btn:hover{ background: var(--color-brand); color:#000; transform: translateY(-1px); }
.social-btn:active{ transform: translateY(0); }
.social-btn svg{ flex-shrink:0; }

/* Optional platform tints as outlines that still fit theme */
.social-btn.facebook{ border-color:#1877F2; color:#e6eeff; }
.social-btn.facebook:hover{ background:#1877F2; color:#fff; }
.social-btn.whatsapp{ border-color:#25D366; color:#eafff4; }
.social-btn.whatsapp:hover{ background:#25D366; color:#001b0f; }

/* =========================
   BUTTONS / CTAs
   ========================= */

.btn-pill{
  border-radius:999px !important;
  padding:.75rem 1.25rem !important;
  font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  border: none;
  background: var(--color-brand);
  color:#000;
  transition: transform .06s ease, filter .18s ease, background .2s ease;
}
.btn-pill i{ margin-right:6px; }
.btn-pill:hover{ background: var(--color-brand-dark); filter: brightness(1.02); }
.btn-pill:active{ transform: translateY(1px); }

.btn-outline{
  background: transparent;
  color: var(--color-brand);
  border:1px solid var(--color-brand);
}
.btn-outline:hover{ background: var(--color-brand); color:#000; }

/* Stacked CTA buttons (PDP) */
.pdp .action-stack{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:520px; }
.pdp .btn-stack{
  width:100%; border:none; border-radius:999px;
  padding:14px 18px; font-weight:800; font-size:16px; color:#000;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  background: var(--color-brand);
  transition: transform .04s ease, filter .18s ease, background .2s ease;
}
.pdp .btn-stack:hover{ background: var(--color-brand-dark); }
.pdp .btn-stack:active{ transform: translateY(1px); }

/* Utility solid variants that follow theme */
.pdp .btn-black{ background:#000; color:#fff; border:1px solid var(--color-border); }
.pdp .btn-black:hover{ filter:brightness(1.15); }
.pdp .btn-yellow{ background: var(--color-brand); color:#000; }
.pdp .btn-blue{ background:#1f7ae0; color:#fff; }
.pdp .btn-green{ background:#22c55e; color:#00190a; }

/* =========================
   QUANTITY STEPPER
   ========================= */

.pdp .qty-group{
  display:inline-flex; align-items:stretch;
  border:1px solid var(--color-border);
  border-radius:999px; overflow:hidden; height:44px; background: var(--color-surface-2);
}
.pdp .qty-group input{
  width:76px; min-width:64px; border:0; outline:0;
  text-align:center; font-weight:700; color:var(--color-text); background:transparent;
}
.pdp .qty-group .qty-btn{
  width:44px; border:0;
  background: var(--color-surface-3); color: var(--color-text);
  font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
}
.pdp .qty-group .qty-btn:hover{ background:#222; }
.pdp .qty-group:focus-within{ box-shadow: var(--focus-ring); }
.pdp .qty-group input::-webkit-outer-spin-button,
.pdp .qty-group input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pdp .qty-group input[type=number]{ -moz-appearance:textfield; }

/* Compact qty for mini-carts */
.qty-mini{
  display:inline-flex; border:1px solid var(--color-border); border-radius:8px; overflow:hidden; height:34px;
  background: var(--color-surface-2);
}
.qty-mini input{ width:46px; text-align:center; border:0; background:transparent; color:var(--color-text); }
.qty-mini button{ width:34px; border:0; background: var(--color-surface-3); color: var(--color-text); }

/* =========================
   PDP CORE
   ========================= */

.pdp{ --radius:14px; --brand: var(--color-brand); --ink: var(--color-text); --muted: var(--color-muted); }
.pdp .main-img{ width:100%; height:auto; border-radius:var(--radius); background:#000; }
.pdp .thumb{
  width:72px; height:72px; object-fit:cover; border-radius:10px;
  border:1px solid var(--color-border); cursor:pointer; background:#0a0a0a;
}
.pdp .thumb[aria-current="true"]{ outline:2px solid var(--color-brand); outline-offset:2px; }

.pdp .price,
.pdp .pdp-price{ font-size: clamp(22px, 3.2vw, 30px); font-weight:800; color: var(--color-brand); }
.pdp .price-old,
.pdp .pdp-price-old{ text-decoration:line-through; color:#7a7a7a; font-weight:600; margin-left:.25rem; }

.pdp .badge-soft{
  background: rgba(var(--color-brand-rgb), .14);
  color: var(--color-brand);
  border:1px solid rgba(var(--color-brand-rgb), .28);
  border-radius:999px; padding:.25rem .6rem; font-weight:800;
}

/* Title + stars */
.pdp-title{ line-height:1.25; color: var(--color-heading); }

/* Fractional stars with mask; fill uses gold */
.stars{
  --star-size: 18px;
  --star-color: #3a3a3a;   /* empty */
  --star-fill:  var(--color-brand); /* filled */
  --rating: 0;             /* 0..5 (set inline) */
  display:inline-block;
  width: calc(var(--star-size) * 5);
  height: var(--star-size);
  background:
    linear-gradient(90deg,
      var(--star-fill) calc((var(--rating) / 5) * 100%),
      var(--star-color) 0);
  -webkit-mask: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 110 20\' width=\'110\' height=\'20\'>\
    <symbol id=\'s\' viewBox=\'0 0 24 24\'>\
      <polygon points=\'12 2 15 9 22 9 17 14 19 22 12 18 5 22 7 14 2 9 9 9\'/>\
    </symbol>\
    <use href=\'#s\' x=\'0\'/>\
    <use href=\'#s\' x=\'22\'/>\
    <use href=\'#s\' x=\'44\'/>\
    <use href=\'#s\' x=\'66\'/>\
    <use href=\'#s\' x=\'88\'/>\
  </svg>') repeat;
  mask: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 110 20\' width=\'110\' height=\'20\'>\
    <symbol id=\'s\' viewBox=\'0 0 24 24\'>\
      <polygon points=\'12 2 15 9 22 9 17 14 19 22 12 18 5 22 7 14 2 9 9 9\'/>\
    </symbol>\
    <use href=\'#s\' x=\'0\'/>\
    <use href=\'#s\' x=\'22\'/>\
    <use href=\'#s\' x=\'44\'/>\
    <use href=\'#s\' x=\'66\'/>\
    <use href=\'#s\' x=\'88\'/>\
  </svg>') repeat;
  -webkit-mask-size: var(--star-size) var(--star-size);
  mask-size: var(--star-size) var(--star-size);
}

/* Discount badge */
.pdp-badge-discount{
  border-radius:999px; font-weight:800; padding:.25rem .5rem;
  background: rgba(255, 215, 130, .1);
  color: #f6d07c;
  border: 1px solid rgba(246, 208, 124, .35);
}

/* Meta block (brand & category pills) */
.pdp-meta{
  border-top:1px solid var(--color-border);
  margin-top:14px; padding-top:12px;
  color: var(--color-muted);
}
.pdp-meta .meta-row{
  display:flex; align-items:flex-start; gap:10px; margin-bottom:10px;
}
.pdp-meta .meta-label{
  flex:0 0 90px; font-weight:700; color: var(--color-muted);
}
.pdp-meta .meta-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.pdp-meta .meta-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background: var(--color-surface-2);
  border:1px solid var(--color-border);
  color: var(--color-text); text-decoration:none;
  transition: background .15s ease, border-color .15s ease, transform .03s ease, color .15s ease;
}
.pdp-meta .meta-badge:hover{
  background: #1d1d1d; border-color:#3a3a3a; transform:translateY(-1px);
}
.pdp-meta .meta-badge i{ font-size:12px; color: var(--color-brand); }

/* Brand pill variant */
.pdp-meta .meta-badge--brand{
  background: rgba(var(--color-brand-rgb), .16);
  border-color: rgba(var(--color-brand-rgb), .34);
  color: var(--color-brand);
}
.pdp-meta .meta-badge--brand i{ color:#b98c1d; }

/* TRUST LIST */
.pdp .trust{
  list-style:none; padding:0; margin:0;
  display:grid; gap:12px; grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pdp .trust{ grid-template-columns:1fr 1fr; }
}
.pdp .trust li{
  display:grid; grid-template-columns:42px 1fr;
  align-items:center; gap:12px;
  background: var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:14px; padding:12px 14px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  color: var(--color-text);
}
.pdp .trust li > i{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(var(--color-brand-rgb), .22);
  color:#000; font-weight:900; font-size:16px; line-height:1;
}
.pdp .trust li > span{
  color: var(--color-text); font-weight:600; line-height:1.45; overflow-wrap:anywhere;
  align-self:center;
}

/* =========================
   ABOUT / INFO CARDS
   ========================= */

.amor-about{ --ink: var(--color-text); --muted: var(--color-muted); --brand: var(--color-brand); --card: var(--color-surface-2); --bg: var(--color-surface-1); }
.amor-about{ background:var(--bg); padding:24px; border-radius:16px; margin:16px 0; border:1px solid var(--color-border); }
.amor-grid{ display:grid; gap:24px; }
@media(min-width:768px){ .amor-grid{ grid-template-columns:1fr 1fr; } }
.amor-card{ background:var(--card); border:1px solid var(--color-border); border-radius:14px; padding:22px; box-shadow:0 8px 24px rgba(0,0,0,.3); }
.amor-title{ margin:0 0 8px; font-size:1.25rem; font-weight:800; color:var(--ink); }
.amor-sub{ margin:0 0 12px; color:var(--muted); }
.amor-list{ margin:10px 0 0 0; padding-left:18px; color:var(--ink); }
.amor-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }

/* Call button adopts theme */
.btn-call{ background: var(--color-brand); color:#000; border:none; }
.btn-call:hover{ filter:brightness(1.06); }
.btn-outline{ background:transparent; color:var(--color-brand); border:1px solid var(--color-brand); }
.btn-outline:hover{ background: var(--color-brand); color:#000; }

/* =========================
   PRODUCT DETAILS: NOTES
   ========================= */

.note-card{ background: var(--color-surface-2); border:1px solid var(--color-border); border-radius:12px; padding:14px; }
.note-title{ margin:0 0 8px; font-weight:800; font-size:1rem; color: var(--color-text); }
.note-list{ margin:0; padding-left:18px; }
.note-list li{ margin:4px 0; line-height:1.5; color: var(--color-body); }

/* =========================
   CART DRAWER
   ========================= */

.cart-drawer{
  position:fixed; top:0; right:0; height:100vh;
  width:380px; max-width:90vw;
  background: var(--color-surface-2);
  color: var(--color-text);
  box-shadow: -12px 0 36px rgba(0,0,0,.55);
  border-left: 1px solid var(--color-border);
  display:grid; grid-template-rows:auto 1fr auto;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index:1055;
}
.cart-drawer.open{ transform: translateX(0); }

.cart-drawer__overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition: opacity .2s ease;
  z-index:1050;
}
.cart-drawer__overlay.visible{ opacity:1; visibility:visible; }

.cart-drawer__header{
  padding:12px 16px; border-bottom:1px
}
.header-bottom.header-bottom-bg-color {
    background: black;
}
h2.text-truncate.h6.mb-1 {
    color: darkslategrey;
}
.item-title {
    color: gold;
}.text-muted {
    color: #b7b326 !important;
}
button.mc-qty-down {
    background: gold;
}
.pdp .btn-black {
    background: #3d98c0;
    color: #fff;
    border: 1px solid var(--color-border);
}
.pdp-title {
    line-height: 1.25;
    color: #d8a426;
}
.page-header.breadcrumb-wrap {
    background-color: #2c260f;
    border-bottom: 1px solid gold;
    font-family: var(--font-heading), sans-serif;
    padding: 20px;
}
.header-style-1 .header-bottom-bg-color {
    border-bottom: 1px solid #ffc107;
    border-top: 1px solid #ffc107;
}
#scrollUp {
    background-color: #ffc107;
    border: 2px solid var(--color-heading);
    border-radius: 30px;
    bottom: 30px;
    color: var(--color-heading);
    height: 32px;
    overflow: hidden;
    right: 30px;
    text-align: center;
    width: 32px;
    z-index: 999 !important;
}
.product-cart-wrap {
    background-color: #fff;
    border: 1px solid #ffc107;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}
.product-cart-wrap .product-content-wrap h2 a {
    color: #ffc107;
}

.banner-left-icon .banner-text h3 {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}
.banner-left-icon .banner-text p {
    color: #000000;
    margin-bottom: 0;
}
.sticky-bar.stick {
    animation: fadeInDown .7s 
ease-in-out 0s 1 normal none running;
    background: #373434;
    border-bottom: 2px solid var(--color-brand-2);
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .05);
    left: 0;
    position: fixed;
    top: 0;
    transition: all .3s 
ease 0s;
    width: 100%;
    z-index: 999;
}
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
button.mc-qty-up {
    background: gold;
}
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #ef0000;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ffc107;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.banner-left-icon {
    background: #5e5e5e;
    border-radius: 10px;
    padding: 20px;
    position: relative;
}