/* ==========================================================================
   AAZHA TEMPLATE — dark, warm spice-market storefront (herbs & spices shop
   look). Near-black nav/hero/footer, warm amber/gold accent, bold rounded
   display font for headings. Fully dynamic via the `setting()` helper (logo,
   colors, contact info) and fully responsive. Loaded only by
   resources/views/storefront/templates/aazha/layouts/app.blade.php.
   ========================================================================== */

:root{
  --az-gold:       #d9861f;
  --az-gold-dark:  color-mix(in srgb, var(--az-gold) 78%, black 22%);
  --az-gold-light: color-mix(in srgb, var(--az-gold) 14%, white 86%);
  --az-gold-soft:  color-mix(in srgb, var(--az-gold) 6%, white 94%);
  --az-ink:        #201a14;
  --az-ink-soft:   #6b6155;
  --az-near-black: #17120d;
  --az-border:     #ece4d8;
  --az-cream:      #fbf7f0;
  --az-white:      #ffffff;
  --az-radius:     8px;
  --az-radius-lg:  16px;
  --az-shadow:     0 10px 28px rgba(23,18,13,.14);
  --az-nav-bg:     #17120d;
}

body{ font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--az-ink); background: var(--az-white); }
.az-serif{ font-family:'Baloo 2', cursive; font-weight:700; }

/* ---------- top promo/contact bar ---------- */
.az-topbar{ background: var(--az-near-black); color:rgba(255,255,255,.8); font-size:12.5px; padding:8px 0; }
.az-topbar a{ color:rgba(255,255,255,.85); text-decoration:none; }
.az-topbar a:hover{ color: var(--az-gold); }
.az-topbar .divider{ opacity:.5; margin:0 10px; }
.az-social a{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.1); margin-left:6px; }
.az-social a:hover{ background: var(--az-gold); }

/* ---------- sticky wrapper ---------- */
.az-sticky-wrap{ background: var(--az-nav-bg-color, var(--az-nav-bg)); }

/* ---------- header ---------- */
.az-header-main{ background: transparent; transition: box-shadow .25s ease; }
.az-header-row{
  position:relative;
  display:grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items:center; gap:12px; padding:14px 0; transition: padding .25s ease;
}
.az-header-main.az-is-scrolled{ box-shadow: var(--az-shadow); }
.az-header-main.az-is-scrolled .az-header-row{ padding:8px 0; }
.az-header-main.az-is-scrolled .az-brand img{ height:36px !important; }
/* The reserved height below is sized for the full, unscrolled logo — once
   scrolled the logo shrinks to a fixed 36px (above) but the row didn't
   shrink with it, leaving a large empty gap under the smaller logo. */
.az-header-main.az-is-scrolled .az-header-row:has(.az-brand-centered){
  min-height: calc(36px + var(--az-brand-gap-d, 8px) + var(--az-brand-text-size-d, 24px) * 1.3 + var(--az-brand-padding-d, 0px) * 2 + 16px);
}
.az-header-side{ display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:nowrap; }
.az-header-side.left{ justify-content:flex-start; }
.az-header-side.right{ justify-content:flex-end; }
.az-header-row > *{ min-width:0; }

.az-brand{
  grid-column:2; justify-self:var(--az-brand-align, center); display:flex; flex-direction:column; align-items:center;
  gap: var(--az-brand-gap-d, 8px); padding: var(--az-brand-padding-d, 0) 0;
  margin-left: var(--az-brand-offset-x-d, 0px);
  text-decoration:none; min-width:0; max-width:100%;
}
/* "Center" alignment is pulled out of the grid and centered on the header
   row's own full width instead — the left icon group (just the menu button)
   and right group (search/login/cart) are different widths, so centering
   within the leftover middle grid column visibly sits off-center from the
   header as a whole. Left/right alignment don't have this problem (they're
   anchored to an edge, not centered), so they stay on the grid as-is. */
.az-brand.az-brand-centered{
  position:absolute; left:50%; top:50%; grid-column:unset; justify-self:unset;
  transform:translate(calc(-50% + var(--az-brand-offset-x-d, 0px)), -50%);
  margin-left:0; max-width:min(60vw, 420px);
}
/* Pulling the brand out of flow (above) means it no longer sets the row's
   own height — without this the row can end up shorter than the actual
   logo+name stack (especially with a taller custom Logo Height), and the
   bottom of the text spills into the nav row below it. Sized from the same
   variables the brand itself uses, so it always covers the real content
   regardless of what's configured, not just the defaults. */
.az-header-row:has(.az-brand-centered){
  min-height: calc(min(var(--az-logo-h, 46px), 200px) + var(--az-brand-gap-d, 8px) + var(--az-brand-text-size-d, 24px) * 1.3 + var(--az-brand-padding-d, 0px) * 2 + 16px);
}
.az-brand img{ height:var(--az-logo-h, 46px); max-height:200px; width:auto; max-width:min(280px, 55vw); flex-shrink:0; transition:height .25s ease; }
.az-brand-icon{ font-size:26px; color: var(--az-gold); }
.az-brand-text{
  font-family:'Baloo 2', cursive; font-weight:700; font-size: var(--az-brand-text-size-d, 24px);
  color: var(--az-brand-text-color, var(--az-nav-text-color, #fff));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

.az-icon-btn{
  width:40px; height:40px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.18); color: var(--az-nav-text-color, #fff); background:transparent;
  position:relative; text-decoration:none;
}
.az-icon-btn:hover{ background: var(--az-gold); border-color: var(--az-gold); color:#17120d; }
.az-account-toggle{ width:auto; min-width:40px; padding:0 12px; gap:6px; font-size:13.5px; font-weight:600; white-space:nowrap; }
.az-account-toggle::after{ display:none; }
.az-cart-count{
  position:absolute; top:-4px; right:-4px; background: var(--az-gold); color:#17120d; font-size:10px; font-weight:700;
  border-radius:50%; width:17px; height:17px; display:flex; align-items:center; justify-content:center; border:2px solid var(--az-near-black);
}

/* ---------- nav row ---------- */
.az-nav-row{ background: var(--az-nav-bg-color, var(--az-nav-bg)); border-top:1px solid rgba(255,255,255,.08); }
.az-nav{ display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap; }
.az-nav a{
  color: var(--az-nav-text-color, rgba(255,255,255,.82)); text-decoration:none; font-size: var(--az-nav-font-size, 14px); font-weight:600;
  padding:13px 0; display:inline-block; border-bottom:2px solid transparent;
}
.az-nav a:hover, .az-nav a.active{ color: var(--az-gold); border-color: var(--az-gold); }
.az-nav-dropdown{ position:relative; }
.az-nav-dropdown .dropdown-toggle{ cursor:pointer; }
.az-nav-dropdown .dropdown-toggle::after{ margin-left:6px; vertical-align:2px; }
.az-nav-dropdown .dropdown-menu{ border:1px solid var(--az-border); border-radius: var(--az-radius); box-shadow: var(--az-shadow); padding:8px; margin-top:0; }
.az-nav-dropdown .dropdown-item{ border-radius:6px; padding:8px 12px; font-size:13.5px; color: var(--az-ink); font-weight:600; }
.az-nav-dropdown .dropdown-item:hover, .az-nav-dropdown .dropdown-item:focus{ background: var(--az-gold-light); color: var(--az-gold-dark); }

/* ---------- hero ---------- */
.az-hero-carousel{ overflow:hidden; }
.az-hero{
  background-color: var(--az-near-black);
  background-image: linear-gradient(160deg, #1f1811, #17120d 70%);
  overflow:hidden; position:relative; min-height: var(--az-hero-height, 560px);
  display:flex; align-items:center; justify-content:center;
}
.az-hero-has-image{ background-size: var(--az-hero-bg-size, cover); background-position:center; background-repeat:no-repeat; }
.az-hero-overlay{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); }
.az-hero-content{ position:relative; z-index:1; text-align:center; color:#fff; max-width:640px; padding:0 20px; }
.az-hero-content h1, .az-hero-content h2{ font-family:'Baloo 2', cursive; font-weight:700; font-size:clamp(34px,6vw,64px); margin-bottom:14px; text-shadow:0 4px 20px rgba(0,0,0,.4); }
.az-hero-offer{ font-family:'Baloo 2', cursive; font-size:clamp(20px,3vw,32px); color: var(--az-gold); font-weight:700; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.25); display:inline-block; margin-bottom:14px; }
.az-hero-coupon{ font-size:16px; letter-spacing:.03em; }
.az-hero-coupon strong{ color: var(--az-gold); }
@media (max-width:767.98px){ .az-hero{ min-height:360px; } }

.az-hero-carousel .carousel-control-prev, .az-hero-carousel .carousel-control-next{ width:64px; opacity:1; z-index:2; }
.az-carousel-arrow{
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; backdrop-filter: blur(4px);
}
.az-carousel-arrow:hover{ background: var(--az-gold); color:#17120d; border-color: var(--az-gold); }

/* ---------- section heading ---------- */
.az-heading{ text-align:left; margin-bottom:32px; }
.az-heading h1, .az-heading h2{ font-family:'Baloo 2', cursive; font-weight:700; font-size:clamp(24px,3vw,32px); color: var(--az-ink); margin:0; }
.az-heading p{ color: var(--az-ink-soft); }
.az-heading.left{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.az-heading.centered{ text-align:center; }
.az-star-divider{ color: var(--az-gold); display:flex; gap:8px; justify-content:center; margin-top:10px; font-size:14px; }
.az-star-divider i:nth-child(2){ color: var(--az-ink); }

.az-section-alt{ background: var(--az-cream); }

/* ---------- category tiles ---------- */
.az-cat-tile{ display:block; text-decoration:none; height:100%; text-align:center; }
.az-cat-tile .shot{
  position:relative; width:100%; aspect-ratio:1/1; border-radius: var(--az-radius-lg); background: var(--az-gold-light);
  display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:12px;
}
.az-cat-tile .shot img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease, filter .3s ease; }
.az-cat-tile:hover .shot img{ transform: scale(1.08); filter: brightness(.72); }
.az-cat-tile .shot i{ font-size:2rem; color: var(--az-gold-dark); }
.az-cat-tile h6{ margin:0; font-weight:700; color: var(--az-ink); transition: color .2s ease; }
.az-cat-tile:hover h6{ color: var(--az-gold-dark); }

/* corner-frame draw: top+right line grows from the top-left corner, then
   bottom+left line grows from the bottom-right corner, tracing the whole
   box outline on hover — same reveal used on the reference site's product
   card hover state. */
.az-cat-tile .shot::before,
.az-cat-tile .shot::after{
  content:''; position:absolute; width:0; height:0; z-index:2; pointer-events:none;
}
.az-cat-tile .shot::before{ top:10px; left:10px; border-top:2px solid var(--az-gold); border-right:2px solid transparent; transition: width .25s ease, height .25s ease .25s; }
.az-cat-tile .shot::after{ bottom:10px; right:10px; border-bottom:2px solid var(--az-gold); border-left:2px solid transparent; transition: width .25s ease, height .25s ease .25s; }
.az-cat-tile:hover .shot::before{ width: calc(100% - 20px); height: calc(100% - 20px); border-right-color: var(--az-gold); }
.az-cat-tile:hover .shot::after{ width: calc(100% - 20px); height: calc(100% - 20px); border-left-color: var(--az-gold); }

/* center icon reveal */
.az-cat-hover-icon{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  opacity:0; transform: scale(.6); transition: opacity .25s ease, transform .25s ease;
}
.az-cat-tile:hover .az-cat-hover-icon{ opacity:1; transform: scale(1); }
.az-cat-hover-icon span{
  width:44px; height:44px; border-radius:50%; background:#fff; color: var(--az-ink);
  display:flex; align-items:center; justify-content:center; box-shadow: var(--az-shadow); font-size:16px;
  transition: background .2s ease, color .2s ease;
}
.az-cat-tile:hover .az-cat-hover-icon span:hover{ background: var(--az-gold); color:#17120d; }

/* ---------- filter pills (Best Products) ---------- */
.az-filter-pills{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:32px; }
.az-filter-pill{ border:1.5px solid var(--az-ink); background:transparent; color: var(--az-ink); border-radius:999px; padding:.55rem 1.4rem; font-weight:600; font-size:.9rem; }
.az-filter-pill.active, .az-filter-pill:hover{ background: var(--az-gold); border-color: var(--az-gold); color:#17120d; }

/* ---------- product grid & card ---------- */
.az-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:left; }
@media (max-width:1199.98px){ .az-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:899.98px){ .az-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:479.98px){ .az-grid{ grid-template-columns:1fr; } }

.az-card{ background:#fff; border:1px solid var(--az-border); border-radius: var(--az-radius-lg); overflow:hidden; transition: box-shadow .2s ease, transform .2s ease; display:flex; flex-direction:column; height:100%; }
.az-card:hover{ box-shadow: var(--az-shadow); transform: translateY(-3px); }
.az-card .shot{ position:relative; aspect-ratio:1/1; background: var(--az-gold-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.az-card .shot img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease, filter .3s ease; }
.az-card:hover .shot img{ transform: scale(1.06); filter: brightness(.78); }
.az-badge-sale{ position:absolute; top:10px; left:10px; background: var(--az-near-black); color:#fff; font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px; z-index:4; }

/* corner-frame draw — same reveal as the category tiles above */
.az-card .shot::before,
.az-card .shot::after{
  content:''; position:absolute; width:0; height:0; z-index:2; pointer-events:none;
}
.az-card .shot::before{ top:10px; left:10px; border-top:2px solid var(--az-gold); border-right:2px solid transparent; transition: width .25s ease, height .25s ease .2s; }
.az-card .shot::after{ bottom:10px; right:10px; border-bottom:2px solid var(--az-gold); border-left:2px solid transparent; transition: width .25s ease, height .25s ease .2s; }
.az-card:hover .shot::before{ width: calc(100% - 20px); height: calc(100% - 20px); border-right-color: var(--az-gold); }
.az-card:hover .shot::after{ width: calc(100% - 20px); height: calc(100% - 20px); border-left-color: var(--az-gold); }

/* hover actions — centered icon row, fades/scales in over the dimmed image */
.az-hover-actions{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px;
  opacity:0; transform: scale(.85); transition: opacity .25s ease, transform .25s ease; z-index:3;
}
.az-card:hover .az-hover-actions{ opacity:1; transform: scale(1); }
.az-hover-actions form{ display:contents; }
.az-hover-btn{
  width:38px; height:38px; border-radius:50%; background:#fff; border:none; display:inline-flex; align-items:center;
  justify-content:center; color: var(--az-ink); box-shadow: var(--az-shadow); text-decoration:none; cursor:pointer;
}
.az-hover-btn:hover{ background: var(--az-gold); color:#17120d; }
.az-card .body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.az-card h5{ font-size:15px; font-weight:700; color: var(--az-ink); margin:0; line-height:1.35; }
.az-card .price{ color: var(--az-gold-dark); font-weight:800; font-size:16px; }
.az-card .price .old{ color:#9a9186; text-decoration:line-through; font-weight:400; font-size:12.5px; margin-left:6px; }

/* ---------- promo banner ---------- */
.az-promo-banner{
  position:relative; background: var(--az-near-black) center/cover no-repeat; padding:80px 0; overflow:hidden;
}
.az-promo-overlay{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,.35)); }
.az-promo-content{ position:relative; z-index:1; max-width:520px; color:#fff; }
.az-promo-content .kicker{ text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-size:13px; color: var(--az-gold); }
.az-promo-content h2{ font-family:'Baloo 2', cursive; font-weight:700; font-size:clamp(26px,3.4vw,40px); margin:10px 0 16px; line-height:1.2; }
.az-promo-content p{ color:rgba(255,255,255,.78); margin-bottom:22px; }
.az-btn-outline-light{ border:1.5px solid #fff; color:#fff; background:transparent; padding:.6rem 1.6rem; border-radius:999px; font-weight:600; text-decoration:none; }
.az-btn-outline-light:hover{ background:#fff; color: var(--az-ink); }
.az-btn-light{ border:1.5px solid var(--az-gold); color:#17120d; background: var(--az-gold); padding:.6rem 1.6rem; border-radius:999px; font-weight:600; text-decoration:none; }
.az-btn-light:hover{ background: var(--az-gold-dark); color:#fff; }

/* ---------- category mosaic ---------- */
.az-mosaic-feature{
  background: var(--az-near-black); color:#fff; border-radius: var(--az-radius-lg); padding:32px; height:100%;
  display:flex; flex-direction:column; justify-content:center;
}
.az-mosaic-feature h3{ font-family:'Baloo 2', cursive; font-weight:700; font-size:26px; color: var(--az-gold); margin-bottom:10px; }
.az-mosaic-feature p{ color:rgba(255,255,255,.7); margin-bottom:20px; }
.az-mosaic-tile{ position:relative; display:block; border-radius: var(--az-radius-lg); overflow:hidden; height:100%; min-height:170px; text-decoration:none; }
.az-mosaic-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.az-mosaic-tile:hover img{ transform: scale(1.08); }
.az-mosaic-caption{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.6), transparent 60%); display:flex; flex-direction:column; justify-content:flex-end; padding:16px; }
.az-mosaic-caption h6{ color:#fff; font-weight:700; margin-bottom:8px; }

/* ---------- about us ---------- */
.az-about{ background: var(--az-cream); padding:56px 0; }
.az-about-inner{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.az-about .kicker{ text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-size:12.5px; color: var(--az-gold-dark); }
.az-about h2{ font-family:'Baloo 2', cursive; font-weight:700; font-size:clamp(24px,3vw,32px); color: var(--az-ink); margin:10px 0 16px; }
.az-about p{ color: var(--az-ink-soft); line-height:1.75; }
.az-about-photo{ border-radius: var(--az-radius-lg); overflow:hidden; background: var(--az-gold-soft); height: var(--az-about-img-height, 320px); width:100%; max-width: var(--az-about-img-max-width, 100%); margin:0 auto; }
.az-about-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:767.98px){ .az-about-inner{ grid-template-columns:1fr; gap:28px; } .az-about-photo{ order:-1; } }

/* ---------- our team ---------- */
.az-team-card{ text-align:center; }
.az-team-photo{ width:120px; height:120px; border-radius:50%; overflow:hidden; margin:0 auto 14px; background: var(--az-gold-light); display:flex; align-items:center; justify-content:center; }
.az-team-photo img{ width:100%; height:100%; object-fit:cover; }
.az-team-photo span{ font-family:'Baloo 2', cursive; font-size:2.4rem; color: var(--az-gold-dark); }
.az-team-card h6{ font-weight:700; margin-bottom:2px; }
.az-team-card .role{ color: var(--az-ink-soft); font-size:13px; display:block; margin-bottom:10px; }
.az-team-social{ display:flex; gap:10px; justify-content:center; }
.az-team-social a{ color: var(--az-ink-soft); }
.az-team-social a:hover{ color: var(--az-gold-dark); }

/* ---------- gallery collage ---------- */
.az-gallery-tile{ display:block; aspect-ratio:1/1; border-radius: var(--az-radius); overflow:hidden; }
.az-gallery-tile img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.az-gallery-tile:hover img{ transform: scale(1.08); }
.az-gallery-cta{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; aspect-ratio:1/1;
  background: var(--az-near-black); color:#fff; border-radius: var(--az-radius); text-decoration:none; padding:16px;
}
.az-gallery-cta h6{ color: var(--az-gold); font-weight:700; margin-bottom:4px; }
.az-gallery-cta span:not(.btn){ color:rgba(255,255,255,.7); font-size:13px; }

/* ---------- blog ---------- */
.az-blog-photo{ aspect-ratio:4/3; border-radius: var(--az-radius-lg); overflow:hidden; background: var(--az-gold-soft); display:flex; align-items:center; justify-content:center; }
.az-blog-photo img{ width:100%; height:100%; object-fit:cover; }
.az-blog-cover{ border-radius: var(--az-radius-lg); overflow:hidden; max-height:420px; }
.az-blog-cover img{ width:100%; height:100%; object-fit:cover; }
.az-blog-meta{ display:flex; gap:18px; flex-wrap:wrap; color: var(--az-ink-soft); font-size:13.5px; margin-bottom:14px; }
.az-blog-meta i{ margin-right:6px; color: var(--az-gold-dark); }
.az-blog-body{ color: var(--az-ink-soft); line-height:1.8; }

/* ---------- premium products ---------- */
.az-premium-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius: var(--az-radius-lg); margin-bottom:16px; }
.az-premium-card h6{ font-weight:700; margin-bottom:8px; }
.az-premium-card p{ color: var(--az-ink-soft); font-size:13.5px; margin-bottom:14px; }

/* ---------- testimonials ---------- */
.az-testimonial{ background: var(--az-cream); border-radius: var(--az-radius-lg); padding:26px; height:100%; }
.az-testimonial .quote{ color: var(--az-gold-light); font-size:2rem; line-height:1; }
.az-testimonial p{ color: var(--az-ink-soft); font-style:italic; }
.az-testimonial .who{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.az-testimonial img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.az-testimonial .ic{ width:42px; height:42px; border-radius:50%; background: var(--az-gold-light); display:flex; align-items:center; justify-content:center; color: var(--az-gold-dark); font-weight:700; }
.az-testimonial h6{ margin:0; font-weight:700; color: var(--az-ink); }
.az-testimonial span{ font-size:12px; color: var(--az-gold-dark); }

/* ---------- filter sidebar / breadcrumb / buttons ---------- */
.az-filter{ background:#fff; border:1px solid var(--az-border); border-radius: var(--az-radius); padding:22px; }
.az-filter-title{ font-family:'Baloo 2', cursive; font-weight:700; color: var(--az-ink); margin-bottom:16px; font-size:17px; }
.az-filter-label{ font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color: var(--az-ink); display:block; margin-bottom:10px; }
.az-breadcrumb{ font-size:13px; color: var(--az-ink-soft); }
.az-breadcrumb a{ color: var(--az-ink-soft); text-decoration:none; }
.az-breadcrumb a:hover{ color: var(--az-gold-dark); }
.az-breadcrumb b{ color: var(--az-ink); }

.az-btn-brand{ background: var(--az-gold); color:#17120d !important; border:none; padding:.6rem 1.6rem; border-radius:999px; font-weight:700; text-decoration:none; }
.az-btn-brand:hover{ background: var(--az-gold-dark); color:#fff !important; }
.az-btn-outline-dark{ border:1.5px solid var(--az-ink); color: var(--az-ink); background:transparent; padding:.55rem 1.4rem; border-radius:999px; font-weight:600; text-decoration:none; }
.az-btn-outline-dark:hover{ background: var(--az-ink); color:#fff; }

/* ---------- dual-handle price range slider ---------- */
.az-price-range{ margin-bottom:20px; }
.az-price-values{ display:flex; justify-content:space-between; font-weight:700; color: var(--az-gold-dark); font-size:13px; margin-bottom:16px; }
.az-slider-wrap{ position:relative; height:16px; }
.az-slider-track{ position:absolute; top:6px; left:0; right:0; height:4px; background: var(--az-border); border-radius:2px; }
.az-slider-range{ position:absolute; top:6px; height:4px; background: var(--az-gold); border-radius:2px; }
.az-range{ position:absolute; top:0; left:0; width:100%; margin:0; height:16px; background:transparent; -webkit-appearance:none; appearance:none; pointer-events:none; }
.az-range::-webkit-slider-runnable-track{ background:transparent; height:16px; }
.az-range::-moz-range-track{ background:transparent; height:16px; }
.az-range::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:17px; height:17px; margin-top:0; border-radius:50%; background: var(--az-gold); border:3px solid #fff; box-shadow:0 0 0 1px var(--az-gold), var(--az-shadow); cursor:pointer; }
.az-range::-moz-range-thumb{ pointer-events:auto; width:17px; height:17px; border-radius:50%; background: var(--az-gold); border:3px solid #fff; box-shadow:0 0 0 1px var(--az-gold), var(--az-shadow); cursor:pointer; }

/* ---------- product detail page ---------- */
.az-main-shot{ aspect-ratio:1/1; background: var(--az-gold-soft); border-radius: var(--az-radius-lg); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.az-main-shot img{ max-width:85%; max-height:85%; object-fit:contain; cursor:zoom-in; }
.az-pdp-thumb{ width:64px; height:64px; border-radius:50%; border:2px solid transparent; object-fit:cover; padding:2px; background: var(--az-gold-soft); cursor:pointer; }
.az-pdp-thumb:hover, .az-pdp-thumb.active{ border-color: var(--az-gold); }
.az-pdp-rating{ display:flex; align-items:center; gap:10px; margin:6px 0; }
.az-pdp-rating .stars{ color: var(--az-gold); }
.az-price-lg{ font-family:'Baloo 2', cursive; font-size:28px; font-weight:700; color: var(--az-gold-dark); }
.az-badge-off{ background: var(--az-near-black); color:#fff; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.az-weight-pill{ display:inline-block; background: var(--az-ink); color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
.az-variant-pill{ border:1.5px solid var(--az-border); background:#fff; color: var(--az-ink); border-radius:999px; padding:.45rem 1rem; font-weight:600; font-size:.85rem; }
.az-variant-pill:hover{ border-color: var(--az-gold); color: var(--az-gold-dark); }
.az-variant-pill.active{ background: var(--az-gold); border-color: var(--az-gold); color:#17120d; }
.az-share-link{ color: var(--az-ink-soft); text-decoration:none; font-size:13.5px; }
.az-share-link:hover{ color: var(--az-gold-dark); }
.az-enquiry-link{ color: var(--az-gold-dark); font-weight:600; text-decoration:underline; }

.az-pdp-tabs .nav{ border-bottom:1px solid var(--az-border); gap:4px; }
.az-pdp-tabs .nav-link{ color: var(--az-ink-soft); font-weight:600; border:1px solid transparent; border-radius:6px 6px 0 0; }
.az-pdp-tabs .nav-link.active{ color: var(--az-ink); background: var(--az-gold-soft); border-color: var(--az-border) var(--az-border) transparent; }
.az-pdp-info-list{ list-style:none; padding:0; margin:0; }
.az-pdp-info-list li{ padding:8px 0; border-bottom:1px solid var(--az-border); color: var(--az-ink-soft); }

/* ---------- cart / summary ---------- */
.az-cart-row{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--az-border); align-items:center; }
.az-cart-row img{ width:82px; height:82px; object-fit:cover; border-radius:8px; background: var(--az-gold-soft); }
.az-remove-link{ color: var(--az-ink-soft) !important; font-weight:600; font-size:12.5px; }
.az-remove-link:hover{ color:#b3261e !important; }
.az-summary{ background: var(--az-cream); border:1px solid var(--az-border); border-radius: var(--az-radius); padding:24px; }
.az-summary h5{ font-family:'Baloo 2', cursive; font-weight:700; color: var(--az-ink); margin-bottom:16px; }

/* ---------- accordion (FAQ) ---------- */
.az-accordion-item{ border-color: var(--az-border) !important; border-radius: var(--az-radius) !important; overflow:hidden; }
.accordion-button:not(.collapsed){ background: var(--az-gold-soft); color: var(--az-ink); }
.accordion-button:focus{ box-shadow:none; border-color: var(--az-border); }

/* ---------- newsletter strip (footer) ---------- */
.az-newsletter-strip{
  background: var(--az-near-black); color:#fff; border-radius: var(--az-radius-lg); padding:40px 32px; margin-top:-1px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; transform: translateY(-46px);
}
.az-newsletter-strip h3{ font-family:'Baloo 2', cursive; font-weight:700; font-size:24px; margin-bottom:6px; }
.az-newsletter-strip p{ color:rgba(255,255,255,.7); margin:0; max-width:38ch; }
.az-newsletter-strip form{ display:flex; border-radius:999px; overflow:hidden; background:#fff; flex-shrink:0; }
.az-newsletter-strip input{ border:none; padding:13px 18px; font-size:14px; min-width:220px; }
.az-newsletter-strip input:focus{ outline:none; }
.az-newsletter-strip button{ background: var(--az-gold); color:#17120d; border:none; padding:0 26px; font-weight:700; }
.az-newsletter-strip button:hover{ background: var(--az-gold-dark); color:#fff; }
@media (max-width:767.98px){
  .az-newsletter-strip{ transform:none; margin-top:0; padding:28px 22px; flex-direction:column; align-items:stretch; text-align:center; }
  .az-newsletter-strip form{ width:100%; flex-shrink:1; }
  .az-newsletter-strip input{ min-width:0; flex:1 1 auto; width:auto; }
  .az-newsletter-strip p{ max-width:100%; }
}

/* ---------- footer ---------- */
.az-footer{ background: var(--az-near-black); color:rgba(255,255,255,.68); padding-top:20px; margin-top:60px; }
/* .az-brand is also reused here for the "About us" column, but it's now
   built for the header (stacked logo-over-name, centered, sized off the
   header's own admin settings) — none of that applies to a footer column
   that needs to sit top-aligned and left-aligned like its Menu/Account/
   Contact Us siblings, so it's reset back to a simple side-by-side row. */
.az-footer .az-brand{
  flex-direction:row; align-items:center; justify-content:flex-start;
  gap:10px; padding:0; margin-left:0; max-width:100%; grid-column:unset; justify-self:unset;
}
.az-footer .az-brand .az-brand-text{ color:#fff; font-size:20px; max-width:none; }
.az-footer h6{ color:#fff; font-family:'Baloo 2', cursive; font-weight:700; font-size:15.5px; margin-bottom:18px; }
.az-footer ul{ list-style:none; margin:0; padding:0; }
.az-footer li{ margin-bottom:10px; font-size:13.5px; }
.az-footer a{ color:rgba(255,255,255,.68); text-decoration:none; }
.az-footer a:hover{ color: var(--az-gold); }
.az-footer-social{ display:flex; gap:10px; }
.az-footer-social a{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; }
.az-footer-social a:hover{ background: var(--az-gold); color:#17120d; }
.az-footer-contact{ list-style:none; padding:0; margin:0; }
.az-footer-contact li{ display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-size:13.5px; }
.az-footer-contact i{ color: var(--az-gold); margin-top:3px; }
.az-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:18px 0; font-size:12.5px; color:rgba(255,255,255,.5); }
.az-payment-icons{ display:flex; gap:12px; font-size:1.1rem; color:rgba(255,255,255,.5); }

/* ---------- shared storefront components ---------- */
.btn-brand{ background: var(--az-gold) !important; color:#17120d !important; box-shadow:none !important; }
.btn-brand:hover{ background: var(--az-gold-dark) !important; color:#fff !important; }
.text-brand{ color: var(--az-gold) !important; }
.sf-bottom-nav a.active{ color: var(--az-gold) !important; }

/* ---------- responsive ---------- */
@media (max-width:767.98px){
  .az-header-row{ padding:8px 0; }
  .az-brand{ gap: var(--az-brand-gap-m, 2px); padding: var(--az-brand-padding-m, 0) 0; margin-left: var(--az-brand-offset-x-m, 0px); }
  .az-brand.az-brand-centered{ margin-left:0; transform:translate(calc(-50% + var(--az-brand-offset-x-m, 0px)), -50%); max-width:min(70vw, 300px); }
  .az-header-row:has(.az-brand-centered){
    min-height: calc(min(var(--az-logo-h, 46px), 60px) + var(--az-brand-gap-m, 2px) + var(--az-brand-text-size-m, 13px) * 1.3 + var(--az-brand-padding-m, 0px) * 2 + 10px);
  }
  .az-header-main.az-is-scrolled .az-header-row:has(.az-brand-centered){
    min-height: calc(36px + var(--az-brand-gap-m, 2px) + var(--az-brand-text-size-m, 13px) * 1.3 + var(--az-brand-padding-m, 0px) * 2 + 10px);
  }
  .az-brand img{ max-height:min(var(--az-logo-h, 46px), 60px); }
  .az-brand-text{ font-size: var(--az-brand-text-size-m, 13px); max-width:100%; }
  .az-icon-btn{ width:34px; height:34px; font-size:.9rem; flex-shrink:0; }
  .theme-toggle-btn{ width:34px; height:34px; }
  .az-header-side{ gap:4px; }

  /* The hero background images are wide desktop banners, often with text
     baked in close to the edges. "cover" (the default) crops them hard on a
     narrow phone and chops that text off — force the full image to always
     stay visible on mobile regardless of the admin's Slide Image Fit choice. */
  :root{ --az-hero-bg-size: contain; }

  /* Reset the fixed min-height and any desktop-only inline aspect-ratio
     (added when Slide Image Fit is "contain") — both fight the rule below
     on a narrow phone. Slides with no image keep their 360px floor from
     the earlier .az-hero rule (that selector doesn't match here). */
  .az-hero{ aspect-ratio:auto !important; width:100% !important; }

  /* Shape the box to the image's own ratio instead of a fixed height, so
     the image fills it exactly — no cropping (the old "cover" bug) and no
     black letterbox bars (fixed-height "contain"). --az-hero-ratio is set
     inline per slide from the image's real dimensions (see home/index.blade.php);
     falls back to the old fixed-height look if that's ever missing. */
  .az-hero-has-image{ min-height:0 !important; aspect-ratio: var(--az-hero-ratio, auto) !important; }
}
@media (max-width:359.98px){
  .az-icon-btn{ width:30px; height:30px; }
}