:root{
  --bg1: #f7f9fb;
  --bg2: #ffffff;
  --card: rgba(2,6,23,0.03);
  --muted: #55606a;
  --brand: #b11c22;
  --brand-rgb: 209,123,126;
  --accent: var(--brand);
  --accent-2: rgba(var(--brand-rgb),0.85);
  --brand-subtle: #f4e9ea;
  --brand-light: rgba(209,123,126,0.1);
}

body { 
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
  margin:0; 
  padding:0; 
  box-sizing:border-box; 
  background:linear-gradient(180deg,var(--bg1),var(--bg2)); 
  color:#0b1a1f 
}

/* Bootstrap navbar customizations */
.navbar {
  padding: 1rem 0;
}

.navbar .container-fluid {
  margin: 0 auto;
  padding: 0 1.5rem;
}

.navbar-brand {
  margin-right: auto;
  display: flex;
  align-items: center;
}

.navbar-brand img{ 
  height: 40px; 
  width: auto; 
}

.btn-outline-secondary{ 
  border-color: rgba(var(--brand-rgb),0.2); 
  color: var(--brand); 
  padding: 0.5rem 0.75rem;
}

.btn-outline-secondary:hover{ 
  border-color: var(--brand); 
  background-color: rgba(var(--brand-rgb),0.06); 
  color: var(--brand); 
}

.nav-link{ 
  color: var(--muted) !important; 
  font-weight: 500; 
  padding: 0.5rem 1rem !important;
}

.nav-link:hover{ 
  color: var(--brand) !important; 
}

.dropdown-item{ 
  color: var(--muted); 
  padding: 0.5rem 1rem;
}

.dropdown-item:hover{ 
  background-color: rgba(var(--brand-rgb),0.04); 
  color: var(--brand); 
}

.dropdown-item.text-danger{ 
  color: #dc3545 !important; 
}

.dropdown-item.text-danger:hover{ 
  background-color: rgba(220,53,69,0.06); 
  color: #dc3545 !important; 
}

/* Dropdown menu spacing */
.dropdown-menu {
  margin-top: 0.5rem;
  border: 1px solid rgba(2,6,23,0.08);
  box-shadow: 0 8px 24px rgba(2,6,23,0.12);
}

.dropdown-item svg {
  margin-right: 0.5rem;
}

/* Mobile navbar adjustments */
@media (max-width: 991.98px) {
  .navbar .container-fluid {
    padding: 0 1rem;
  }
  
  .navbar-nav {
    padding: 1rem 0;
  }
  
  .nav-link {
    padding: 0.75rem 1rem !important;
  }
  
  .btn-outline-secondary {
    padding: 0.375rem 0.75rem;
  }
}

/* layout */
.container{ max-width:1200px; margin:28px auto; padding:0 18px }

/* full-bleed hero banner */
.hero-full{ width:100%; padding:80px 0 64px; border-bottom: 1px solid rgba(2,6,23,0.02); background-size:cover; background-position:center; position:relative }
.hero-full::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,0.25); }
.hero-full .hero-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:28px }

/* centered hero variant with big title and search */
.hero-centered{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; width:100% }
.hero-title{ font-size:64px; color:rgba(255,255,255,0.95); font-weight:800; margin:0; text-shadow:0 2px 8px rgba(0,0,0,0.4) }
.hero-sub{ color:rgba(255,255,255,0.9); max-width:70ch }
.hero-search{ width:100%; max-width:900px; display:flex; gap:0; box-shadow:0 8px 30px rgba(2,6,23,0.18) }
.hero-search input{ flex:1; padding:14px 18px; border:0; border-radius:8px 0 0 8px; font-size:16px }
.hero-search button{ background:var(--accent); color:#fff; border:0; padding:12px 20px; border-radius:0 8px 8px 0; cursor:pointer; font-weight:700 }
.hero-search button:hover{ opacity:0.95 }

/* Buttons */
.btn-primary{ background:var(--brand); color:#fff; border:0; padding:8px 14px; border-radius:10px; cursor:pointer; font-weight:700 }
.btn-primary:hover{ opacity:0.96 }
.btn-ghost{ display:inline-block; padding:10px 14px; border-radius:10px; color:var(--accent); border:1px solid rgba(var(--brand-rgb),0.12); background:transparent; text-decoration:none }

/* variant buttons */
.variant-selector{ margin-top:8px }
.variant-btn{ border:1px solid rgba(2,6,23,0.06); background:#fff; padding:6px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; position:relative }
.variant-btn .check{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; transition:opacity .12s }
.variant-btn .check svg{ width:44px; height:44px }
.variant-label{ display:none; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-size:0.75rem; color:var(--muted); text-transform:capitalize }

.hero{ padding:18px 0 }
.hero h1{ font-size:2rem; margin:0 0 8px; color:#071325; letter-spacing:0.2px }
.hero p{ margin:0 0 16px; color:var(--muted); max-width:56ch }

/* Product grid and cards - modern minimal */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:18px; align-items:stretch }
.product-card{ background:#fff; border-radius:12px; padding:0; display:flex; flex-direction:column; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; height:100%; width:100%; border:1px solid rgba(2,6,23,0.04); box-shadow: 0 6px 18px rgba(2,6,23,0.03); text-decoration:none; color:inherit }
a.product-card{ display:flex }
.product-card:hover{ transform: translateY(-6px); box-shadow:0 18px 30px rgba(2,6,23,0.08) }

/* complementary product card (compact) */
.product-image{ width:100%; flex:0 0 auto; position:relative; background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%); background-size: 200% 100%; }
.product-image img{ width:100%; aspect-ratio:1/1; height:auto; object-fit:cover; display:block }
.product-badge{ position:absolute; bottom:10px; right:10px; background:#fff; color:var(--brand); padding:6px 12px; border-radius:6px; font-weight:600; font-size:0.8rem; box-shadow:0 2px 8px rgba(0,0,0,0.1); letter-spacing:0.3px }
.product-badge[data-delivery="same-day"]{ background:#10b981; color:#fff }
.product-badge[data-delivery="tomorrow"]{ background:#f59e0b; color:#fff }
.product-badge[data-delivery="48h"]{ background:#3b82f6; color:#fff }
.price-badge{ position:absolute; top:10px; right:10px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; padding:6px 10px; border-radius:999px; font-weight:700; font-size:0.9rem; box-shadow:0 6px 18px rgba(0,0,0,0.06) }
.product-info{ padding:16px; display:flex; flex-direction:column; gap:6px; flex:1 }
.product-name{ margin:0; font-size:1.1rem; color:#071325; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; min-height:2.6em }
.product-description{ margin:0; color:#5c6368; font-size:0.88rem; line-height:1.4; max-height:2.8em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.product-price-wrapper{ display:flex; align-items:baseline; gap:6px; margin-top:auto; padding-top:8px; justify-content:flex-end }
.product-price-label{ font-size:0.85rem; color:#5c6368; font-weight:400 }
.product-price{ font-weight:700; color:var(--brand); font-size:1.2rem }

/* footer */
.site-footer{ margin-top:40px; background:transparent; border-top:1px solid rgba(2,6,23,0.04); color:var(--muted) }
.site-footer .footer-inner{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:18px; align-items:start; padding:28px 0 }
.site-footer .footer-col h4{ margin:0 0 8px; color:#071325 }
.site-footer .muted{ color:var(--muted); margin-top:8px; font-size:0.95rem }
.site-footer ul{ list-style:none; padding:0; margin:0 }
.site-footer ul li{ margin-bottom:6px }
.site-footer a{ color:var(--muted); text-decoration:none }
.site-footer .footer-bottom{ padding:12px 0; border-top:1px solid rgba(2,6,23,0.02); font-size:0.92rem }

/* ensure images never overflow their grid cell */
img{ max-width:100%; height:auto; display:block }

/* Fade-in effect only for product and hero images */
.product-card img,
.product-image img,
.hero-banner img,
.category-card img,
.store-card img {
  transition: opacity 0.3s ease-in-out;
}

.product-card img.loaded,
.product-image img.loaded,
.hero-banner img.loaded,
.category-card img.loaded,
.store-card img.loaded {
  opacity: 1;
}

/* responsive columns */
@media (max-width:1100px){ .product-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:900px){ .product-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:760px){ .site-footer .footer-inner{ grid-template-columns:1fr; gap:12px } }
@media (max-width:480px){ 
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:12px } 
  .product-image img{ aspect-ratio:1/1 } 
  
  /* Hero adjustments */
  .hero h1{ font-size:1.6rem }
  .hero-full .hero-inner{ flex-direction:column; align-items:flex-start }
  .hero-full{ padding:28px 0 }
  
  /* Hero refinements */
  .hero-centered .hero-title{ font-size:34px }
  .hero-sub{ font-size:0.95rem }
  .hero-search{ flex-direction:column; align-items:stretch }
  .hero-search input{ border-radius:8px; margin-bottom:8px }
  .hero-search button{ border-radius:8px }

  /* Product grid becomes two columns with compact cards */
  .product-card{ min-height:unset; border-radius:10px; padding:0; }
  .product-info{ padding:10px }
  .product-name{ font-size:0.9rem; line-height:1.25; min-height:2.5em; -webkit-line-clamp:2 }
  .product-description{ font-size:0.75rem; -webkit-line-clamp:3; max-height:4.4em; line-height:1.4; overflow:hidden;}
  .product-price-wrapper{ padding-top:4px }
  .product-price-label{ font-size:0.75rem }
  .product-price{ font-size:1rem }
  .product-badge{ bottom:6px; right:6px; padding:4px 8px; font-size:0.7rem }

  /* Variant selector: horizontal scroll and smaller icons */
  .variant-btn{ flex:0 0 auto; padding:6px; border-radius:8px }
  .variant-btn .check svg{ width:38px; height:38px }

  /* Complementary cards — compact row layout */
  .product-card-complementary{ max-width:100%; flex-direction:row; align-items:center; gap:10px }
  .product-card-complementary .check svg{ width:44px; height:44px }
  .product-card-complementary .comp-img{ width:80px; height:64px; flex:0 0 auto }
  .product-card-complementary .comp-name{ font-size:0.96rem }
  .product-card-complementary .comp-price{ font-size:0.98rem }

  /* Footer spacing */
  .site-footer .footer-inner{ padding:18px 12px }

  /* Floating cart adjustments on small screens */
  #cart-drawer { right: 8px; left: 8px; bottom: 12px; }
  #cart-drawer-sheet { width: auto; max-width: calc(100vw - 24px); }
  #floating-cart-btn{ right: 12px; bottom: 12px; width:48px; height:48px }
}

/* Dedication modal styles */
#dedication-modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1110; align-items:center; justify-content:center; padding:24px }
#dedication-modal .modal-dialog{ background:#fff; border-radius:12px; max-width:720px; width:100%; padding:18px; position:relative; box-shadow:0 18px 40px rgba(0,0,0,0.2); transform:translateY(-6px); transition:transform .18s ease, opacity .18s ease; display:flex; flex-direction:column; max-height:calc(100vh - 80px); overflow:hidden }
#dedication-modal .modal-close{ position:absolute; right:12px; top:12px; border:0; background:transparent; font-size:20px; cursor:pointer }
#dedication-modal h3{ margin:0 0 12px }
#dedication-modal .modal-body{ display:flex; flex-direction:column; gap:8px; flex:1 1 auto; overflow:auto; padding-right:6px }
#dedication-modal .dedication-textarea{ width:100%; min-height:120px; max-height:46vh; box-sizing:border-box; border-radius:8px; border:1px solid rgba(2,6,23,0.06); padding:10px; margin-bottom:0; font-size:1rem; line-height:1.3; resize:none; overflow:auto; }
#dedication-modal .modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; flex:0 0 auto }
#dedication-modal .help{ color:var(--muted); font-size:0.92rem }
#dedication-modal .counter{ color:var(--muted); font-size:0.92rem }
#dedication-modal .error{ color:crimson; font-size:0.9rem; display:none }

/* small animation */
#dedication-modal.show{ display:flex }
#dedication-modal.show .modal-dialog{ transform:translateY(0); }

/* Read-only dedication display used in cart and product lists */
.comp-dedication-text{
  font-size:0.95rem;
  color:var(--muted);
  white-space:pre-wrap;
  word-break:break-word;
  background:#fafafa;
  padding:8px;
  border-radius:8px;
  max-height:8.5em;
  overflow:auto;
  margin-top:6px;
}

/* Social buttons and divider used in login/register modal */
.social-row{ display:flex; gap:12px; align-items:center; justify-content:center; margin:8px 0 }
.social-btn{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:999px; background:#fff; border:1px solid rgba(2,6,23,0.06); box-shadow:0 10px 30px rgba(2,6,23,0.08); text-decoration:none; color:inherit; transition:transform .12s ease, box-shadow .12s ease }
.ocial-btn-small{ width:44px; height:44px }
.social-btn svg{ width:22px; height:22px }
.social-btn:hover{ transform:translateY(-4px); box-shadow:0 20px 42px rgba(2,6,23,0.12) }
.divider{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:0.95rem }
.divider:before, .divider:after{ content:''; flex:1; height:1px; background:rgba(2,6,23,0.06) }
.primary-full{ display:block; width:100%; padding:12px 16px; border-radius:28px; text-align:center; font-weight:700 }

/* small helper for password field with eye icon */
.field-with-eye{ position:relative }
.field-with-eye .toggle-eye{ position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:transparent; cursor:pointer; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center }
.field-note{ font-size:0.92rem; color:var(--muted) }


/* Stop shimmer when image is loaded */
.product-image:has(img.loaded),
.product-card:has(img.loaded) {
  animation: none;
  background: transparent;
}