/*
  File: style.css
  Purpose: Global stylesheet for Sasti Tiles. Defines colours, typography,
           layout, and component styles (header, product cards, drawers,
           wishlist, footer). Also contains the header-white and
           header-yellow colour-switcher utility classes.
*/

/* ─────────────────────────────────────────────
   Global Reset & Base
   ───────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #ffffff;
  color: #3d2c00;
  -webkit-font-smoothing: antialiased;
}

/* ── Color — Light Yellow Theme ── */
:root {
  --slate: #ca8a04;
  --navy: #d97706;
  --navy-dark: #b45309;
  --navy-light: #f59e0b;
}

/* ─────────────────────────────────────────────
   Logo Mark
   ───────────────────────────────────────────── */
.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.logo-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  background: #fff;
}
.logo-icon {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #e3d9cfbe;
  letter-spacing: 1px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.45);
}
.logo-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.logo-text strong { font-weight: 900; color: #fbbf24; }
.logo-text-dark { color: #322097 !important; }

/* ─────────────────────────────────────────────
   Announcement Bar
   ───────────────────────────────────────────── */
.announcement-bar {
  background: #f59e0b;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
  padding: 7px 16px;
}
.announcement-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.announcement-inner span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ann-dot { opacity: 0.5; }

/* ─────────────────────────────────────────────
   Category Pill Styles
   ───────────────────────────────────────────── */
.cat-pill {
  flex-shrink: 0;
  padding: 0.45rem 1.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  border-radius: 50px;
  transition: all 0.3s ease;
  background: transparent;
  border: 1.5px solid transparent;
  cursor: pointer;
  letter-spacing: 0.2px;
}
.cat-pill:hover {
  color: #fff;
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
}
.cat-pill.active {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 4px 18px rgba(202, 130, 48, 0.358);
}

/* ─────────────────────────────────────────────
   Search Inputs
   ───────────────────────────────────────────── */
#searchInput,
#mobileSearchInput {
  color: #1e1e1e;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid rgba(255,255,255,0.2);
}
#searchInput::placeholder,
#mobileSearchInput::placeholder { color: #0c0a08; }
#searchInput:focus,
#mobileSearchInput:focus {
  background: #fff;
  border-color: #2365d0;
}

/* ─────────────────────────────────────────────
   Hero Banner
   Video or image feature:
   - For a hero video background, use a <video> inside .hero-banner.
   - Use URL-encoded paths for files with spaces, e.g. video/Hero%20Banner.mp4.
   - For a static image fallback, set background: url('images/hero-fallback.jpg') center/cover no-repeat;
   - Keep .hero-banner as a container with an absolutely positioned .hero-video.
   ───────────────────────────────────────────── */
.hero-banner {
  position: relative;
  width: 100%;
  /* Height follows the artwork's own ratio (banner0.2.png is 2043x770),
     so the image is never cropped at any viewport width. If you swap the
     image, update this ratio to match the new file. */
  aspect-ratio: 2043 / 770;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(2rem, 6vw, 4rem);
  background: #000;
  overflow: hidden;
}
.hero-banner .hero-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* contain guarantees nothing is ever cropped. Because .hero-banner's
     aspect-ratio matches the file exactly, there are no letterbox bars
     either — the image lands flush on all four edges. */
  object-fit: contain;
  object-position: center center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(255, 252, 252, 0) 0%,
    rgba(221, 214, 214, 0) 55%,
    rgba(232, 229, 229, 0) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 5rem);
}
.hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fbbf24;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero-title {
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: -1px;
}
.hero-sub {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.68);
  margin-bottom: 28px;
  max-width: 420px;
  line-height: 1.7;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #076207;
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 13px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.25s;
  box-shadow: 0 6px 24px rgba(52, 173, 16, 0.896);
}
.hero-btn-primary:hover {
  background: #08651b;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(72, 171, 35, 0.863);
}
.hero-btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(236, 238, 240, 0.945);
  color: #106f38;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 13px 28px;
  border-radius: 50px;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.28);
  transition: all 0.25s;
}
.hero-btn-wa:hover {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────
   Collections Mosaic
   ───────────────────────────────────────────── */
.collections-mosaic-section {
  background: #b7b1a700;
  padding: 52px 0 56px;
}
.coll-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: #df951c;
  margin-bottom: 0;
}
.coll-view-all {
  font-size: 0.78rem;
  font-weight: 700;
  color: #555555;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
}
.coll-view-all:hover { color: #51c942; }
.coll-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px)  { .coll-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .coll-grid { grid-template-columns: repeat(4, 1fr); } }

.coll-card {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.35s;
}
.coll-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.2);
}
.coll-living   { background-image: url('images/Living\ Room\ Jun\ 24\,\ 2026\,\ 12_52_01\ PM.png'); background-size: cover; background-position: center; }
.coll-kitchen  { background-image: url('images/Jun\ 24\,\ 2026\,\ 12_39_03\ PM.png');background-size: cover;background-position: center; }
.coll-bath     { background-image: url('images/Screenshot 2026-06-24 112317.png');background-size: cover; background-position: center;}
.coll-outdoor  { background: url('images/Outdoor\ Tiles.png'); background-size: cover; background-position: center; }
.coll-wall     { background: url('images/Wall\ Tiles.png'); background-size: cover; background-position: center; }
.coll-floor    { background: url('images/Floor\ Tiles.png'); background-size: cover; background-position: center; }
.coll-parking  { background: url('images/Parking\ Tiles.png'); background-size: cover; background-position: center; }
.coll-vitrified{ background: url('images/Vitrified\ Tiles.png'); background-size: cover; background-position: center; }

/* tile-grid texture overlay */
.coll-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.coll-card-body {
  position: relative;
  z-index: 2;
  padding: 1.1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
}
.coll-icon {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
  display: block;
}
.coll-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.coll-sub {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.coll-hover-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(30,30,30,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.coll-hover-overlay span {
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
}
.coll-card:hover .coll-hover-overlay { opacity: 1; }

/* ─────────────────────────────────────────────
   Trust Bar
   ───────────────────────────────────────────── */
.trust-bar {
  background: #fff;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  padding: 22px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
}
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trust-icon {
  font-size: 1.3rem;
  color: #1e1e1e;
  flex-shrink: 0;
}
.trust-item div {
  display: flex;
  flex-direction: column;
}
.trust-item strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e1e1e;
  line-height: 1.2;
}
.trust-item span {
  font-size: 0.72rem;
  color: #6a6a8a;
  margin-top: 2px;
}

/* ─────────────────────────────────────────────
   Tab Buttons
   ───────────────────────────────────────────── */
.tab-btn {
  padding: 0.5rem 1.6rem;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 2px solid #e2e2e2;
  background: #fff;
  color: #4a4a6a;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  box-shadow: 0 4px 28px rgba(0,0,0,0.06);
}
.tab-btn:hover { border-color: var(--navy); color: #1e1e1e; }
.tab-btn.active {
  background: var(--slate);
  color: #fff;
  border-color: var(--slate);
  box-shadow: 0 4px 20px rgba(30,30,30,0.2);
}

/* ─────────────────────────────────────────────
   Product Card
   ───────────────────────────────────────────── */
.pcard {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e2e2e2;
  transition: all 0.4s cubic-bezier(0.22,0.61,0.36,1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 28px rgba(0,0,0,0.06);
}
.pcard:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 56px rgba(0,0,0,0.10);
  border-color: rgba(30,30,30,0.20);
}
.pcard-img-placeholder {
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 900;
  color: rgba(255,255,255,0.45);
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
}
.pcard-img-placeholder img.pcard-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pcard-img-placeholder img + * {
  z-index: 1;
}
.pcard-img-placeholder button {
  z-index: 2;
}
.pcard-img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 18px 18px;
}
.pcard-body {
  padding: 1rem 1.1rem 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pcard-brand {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 2px;
}
.pcard-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1e1e1e;
  margin-bottom: 1px;
  line-height: 1.3;
}
.pcard-specs {
  font-size: 0.76rem;
  color: #6a6a8a;
  margin-bottom: 6px;
}
.pcard-price {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}
.pcard-boxpieces {
  font-size: 0.74rem;
  font-weight: 700;
  color: #0f766e;
  margin-bottom: 10px;
}
.pcard-wa {
  width: 100%;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 10px 0;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  margin-top: auto;
  box-shadow: 0 4px 16px rgba(30,30,30,0.25);
}
.pcard-wa:hover { background: var(--navy-dark); transform: scale(1.01); }

/* ─────────────────────────────────────────────
   Toast
   ───────────────────────────────────────────── */
#toastBox .toast {
  background: var(--slate);
  color: #fff;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  animation: tIn 0.3s cubic-bezier(0.22,0.61,0.36,1);
  pointer-events: all;
}
#toastBox .toast.out { animation: tOut 0.3s cubic-bezier(0.22,0.61,0.36,1) forwards; }
@keyframes tIn { from { opacity:0; transform:translateY(14px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes tOut { to { opacity:0; transform:translateY(10px) scale(0.95); } }

/* ─────────────────────────────────────────────
   Mobile Drawer
   ───────────────────────────────────────────── */
.mob-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,30,30,0.60);
  backdrop-filter: blur(6px);
  z-index: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.mob-overlay.open { opacity: 1; pointer-events: all; }
.mob-drawer {
  position: fixed;
  top: 0; left: 0;
  width: min(340px, 86vw);
  height: 100%;
  background: #fff;
  z-index: 900;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1);
  overflow-y: auto;
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 48px rgba(0,0,0,0.12);
}
.mob-drawer.open { transform: translateX(0); }
.mob-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ffffff;
}
.mob-close-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f0f2f5;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #4a4a6a;
  font-size: 0.85rem;
  transition: background 0.2s;
}
.mob-close-btn:hover { background: #e0e2e8; }
.mob-nav { flex: 1; }
.mob-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e4771e;
  text-decoration: none;
  border-bottom: 1px solid #f5f5f8;
  transition: color 0.2s;
}
.mob-nav-link:hover { color: #d97706; }
.mob-nav-link i { color: #010808; width: 18px; text-align: center; }
.mob-nav-divider { height: 1px; background: #e2e2e2; margin: 8px 0; }
.mob-drawer-footer { padding-top: 20px; }
.mob-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #d97706;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 13px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s;
}
.mob-wa-btn:hover { background: #2e2e2e; }
.mob-contact { text-align: center; font-size: 0.78rem; color: #6a6a8a; margin-top: 8px; }

/* ─────────────────────────────────────────────
   Cart Drawer
   ───────────────────────────────────────────── */
#cartWrap { pointer-events: none; }
#cartWrap.open { pointer-events: all; }
#cartBg { opacity: 0; transition: opacity 0.3s; }
#cartWrap.open #cartBg { opacity: 1; }
#cartPanel {
  transform: translateX(105%);
  transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1);
}
#cartWrap.open #cartPanel { transform: translateX(0); }

/* ─────────────────────────────────────────────
   Wishlist Full Page
   ───────────────────────────────────────────── */
.wish-page {
  position: fixed;
  inset: 0;
  z-index: 850;
  background: #f4f4f6;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
}
.wish-page.open { transform: translateX(0); }

.wish-page-header {
  background: #fff;
  border-bottom: 1px solid #e8e8ee;
  padding: 0 16px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.wish-page-back-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: #f0f0f4;
  color: #d18a07;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.88rem;
  flex-shrink: 0;
  transition: background 0.2s;
}
.wish-page-back-btn:hover { background: #e4e4ea; }
.wish-page-header-info { flex: 1; }
.wish-page-title {
  font-size: 1rem;
  font-weight: 800;
  color: #1e1e1e;
  line-height: 1.2;
}
.wish-page-count-label {
  font-size: 0.72rem;
  color: #888;
  font-weight: 500;
}
.wish-page-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.wish-page-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 480px)  { .wish-page-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .wish-page-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .wish-page-grid { grid-template-columns: repeat(5, 1fr); } }

.wish-pg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 24px;
}
.wish-pg-empty-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #fce8ec;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: #e06070;
  margin-bottom: 16px;
}
.wish-pg-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 6px;
}
.wish-pg-empty-sub {
  font-size: 0.82rem;
  color: #888;
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 260px;
}
.wish-pg-browse-btn {
  background: #1e1e1e;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.wish-pg-browse-btn:hover { background: #2e2e2e; }

.wish-page-footer {
  background: #fff;
  border-top: 1px solid #e8e8ee;
  padding: 14px 16px;
  flex-shrink: 0;
}
.wish-enquire-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #25d366;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 14px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s;
  box-shadow: 0 4px 18px rgba(37,211,102,0.3);
}
.wish-enquire-all-btn:hover { background: #1fba5a; }

.wish-pg-remove {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  color: #e55;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: all 0.2s;
}
.wish-pg-remove:hover { background: #fee2e2; transform: scale(1.12); }

/* ─────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────── */
.site-footer { background: #ebe5e5f1; }
/* The footer sits on a light background, so the logo wordmark needs the
   dark treatment instead of the white one used in the header. */
.site-footer .logo-text { color: #111111; }
.footer-top {
  padding: 52px 0 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.119);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 24px;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.5fr; }
}
.footer-tagline {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.529);
  line-height: 1.65;
  margin-top: 12px;
  margin-bottom: 18px;
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(16, 15, 15, 0.264);
  color: rgba(3, 2, 2, 0.895);
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  transition: all 0.2s;
  text-decoration: none;
}
.footer-social a:hover { background: #1e1e1e; color: #fff; }
.footer-heading {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgb(15, 13, 13);
  margin-bottom: 14px;
}
.footer-link {
  display: block;
  font-size: 0.83rem;
  color: rgba(22, 9, 9, 0.752);
  text-decoration: none;
  margin-bottom: 9px;
  transition: color 0.2s;
}
.footer-link:hover { color: #1e1e1e; }
.footer-contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
  color: rgba(16, 16, 16, 0.8);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.2s;
}
.footer-contact-link:hover { color: #1e1e1e; }
.footer-contact-link i { color: #1e1e1e; width: 14px; flex-shrink: 0; }
.footer-hours {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(230, 8, 8, 0.993);
  margin-top: 4px;
}
.footer-hours i { width: 14px; }
.footer-bottom {
  padding: 16px 0;
}
.footer-bottom > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.849);
}

/* ─────────────────────────────────────────────
   Product Card — action row (WA + add-to-list)
   ───────────────────────────────────────────── */
.pcard-actions {
  display: flex;
  gap: 7px;
  margin-top: auto;
}
.pcard-wa {
  flex: 1;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 10px 0;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(30,30,30,0.25);
}
.pcard-wa:hover { background: var(--navy-dark); }
.pcard-cart {
  min-width: 90px;
  height: 38px;
  border-radius: 999px;
  border: 2px solid #e2e2e2;
  background: #fff;
  color: #a0a0c0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s;
}
.pcard-cart span {
  white-space: nowrap;
}
.pcard-cart:hover           { border-color: var(--navy); color: var(--navy); }
.pcard-cart.in-cart         { border-color: var(--navy); background: var(--navy); color: #fff; }

/* ─────────────────────────────────────────────
   Cart Drawer — item rows
   ───────────────────────────────────────────── */
.cart-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f8;
}
.cart-swatch {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
/* Product photo fills the swatch; the category gradient stays as the fallback. */
.cart-swatch-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: #1e1e1e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-item-spec {
  font-size: 0.7rem;
  color: #6a6a8a;
  margin-top: 2px;
}
.cart-remove {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #f5f5f8;
  color: #a0a0c0;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  flex-shrink: 0;
  transition: all 0.2s;
}
.cart-remove:hover { background: #fee2e2; color: #ef4444; }

/* ─────────────────────────────────────────────
   Wishlist Heart Button (on product card image)
   ───────────────────────────────────────────── */
.wish-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  color: #c0c0d0;
  transition: color 0.2s, transform 0.2s;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.wish-btn:hover        { color: #1e1e1e; transform: scale(1.15); }
.wish-btn.wished       { color: #1e1e1e; }
.wish-btn:active       { transform: scale(0.9); }

/* ─────────────────────────────────────────────
   Scroll-Reveal Animation
   ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,0.61,0.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────
   Product Card Entry Animation
   ───────────────────────────────────────────── */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    }
}
.card-enter {
  animation: cardEnter 0.38s cubic-bezier(0.22,0.61,0.36,1) both;
}

/* ─────────────────────────────────────────────
   Header Scroll Shadow
   ───────────────────────────────────────────── */
header.scrolled {
  box-shadow: 0 4px 32px rgba(0,0,0,0.35);
}

/* ─────────────────────────────────────────────
   Category Strip — hide scrollbar (Chrome)
   ───────────────────────────────────────────── */
#categoryStrip::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────────
   Floating WhatsApp — tooltip on hover
   ───────────────────────────────────────────── */
#floatingWhatsApp {
  position: fixed;
}
#floatingWhatsApp::before {
  content: 'Chat with us';
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: #5bdf71;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
#floatingWhatsApp::after {
  content: '';
  position: absolute;
  right: calc(100% + 2px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  border: 5px solid transparent;
  border-left-color: #1e1e1e;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
#floatingWhatsApp:hover::before,
#floatingWhatsApp:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ─────────────────────────────────────────────
   Back to Top Button
   ───────────────────────────────────────────── */
#backToTop {
  position: fixed;
  bottom: 88px;
  right: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1e1e1e;
  color: rgba(255,255,255,0.8);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  z-index: 490;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
#backToTop.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
#backToTop:hover { background: #2e2e2e; color: #fff; }

/* ─────────────────────────────────────────────
   Small Screen Fixes
   ───────────────────────────────────────────── */
@media (max-width: 400px) {
  .announcement-inner .ann-dot { display: none; }
}

/* ── Hero on phones: whole image visible, content stacked below ──
   The artwork is 2.65:1. Any box taller than that ratio can only be
   filled by cropping the sides, so on phones the image keeps its own
   ratio (~150px tall at 390px wide) and the text/CTAs sit underneath
   it rather than on top. Nothing is cut off at any width.
   Do NOT set a min-height or a taller aspect-ratio here with
   object-fit: cover — that is what caused the original cropping. */
@media (max-width: 767px) {
  .hero-banner {
    display: block;
    aspect-ratio: auto;
    min-height: 0;
    padding-bottom: 0;
    /* Transparent so the banner sits flush on the page background
       instead of on a dark letterbox slab. */
    background: transparent;
  }
  .hero-banner .hero-video {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 2043 / 770;
    object-fit: contain;
  }
  .hero-overlay { display: none; }
  .hero-content {
    padding: clamp(14px, 4vw, 20px) clamp(0.9rem, 4vw, 1.25rem)
             clamp(18px, 5vw, 26px);
  }

  /* The text now sits on the page's own (light) background, so the
     white-on-dark desktop colours are re-tinted for contrast, and every
     size is fluid between a 320px and a 767px viewport. */
  .hero-eyebrow {
    font-size: clamp(0.6rem, 2.6vw, 0.72rem);
    letter-spacing: 1.2px;
    margin-bottom: clamp(8px, 2.5vw, 14px);
    color: #b45309;
  }
  .hero-title {
    font-size: clamp(1.35rem, 6.4vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: clamp(8px, 2.5vw, 14px);
    color: #1a1a1a;
  }
  .hero-sub {
    max-width: none;
    font-size: clamp(0.78rem, 3.2vw, 0.92rem);
    line-height: 1.6;
    margin-bottom: clamp(16px, 4.5vw, 28px);
    color: rgba(0, 0, 0, 0.62);
  }

  .hero-ctas { gap: clamp(8px, 2.5vw, 12px); }
  .hero-ctas > a {
    flex: 1 1 auto;
    justify-content: center;
    font-size: clamp(0.76rem, 3vw, 0.88rem);
    padding: clamp(10px, 2.8vw, 13px) clamp(12px, 4vw, 24px);
    gap: 6px;
  }
  /* The translucent-white border is invisible on a light background. */
  .hero-btn-wa { border-color: rgba(16, 111, 56, 0.35); }
  .hero-btn-primary { box-shadow: 0 4px 16px rgba(52, 173, 16, 0.45); }
}

/* ── Hero on very small phones (≤ 360px) ──
   Below this width the two CTAs can no longer share a row without the
   labels wrapping mid-word, so they stack full-width. */
@media (max-width: 360px) {
  .hero-ctas > a {
    flex: 1 1 100%;
    padding: 11px 14px;
  }
}

/* ─────────────────────────────────────────────
   Header Colour Switcher
   Add "header-white" OR "header-yellow" to the
   <header> element in index.html to switch away
   from the default dark header.
   Remove both classes to restore the dark header.
   ───────────────────────────────────────────── */

/* — White header — */
.header-white {
  background-color: #ffffff !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
.header-white #mobOpenBtn,
.header-white #mobileSearchToggle,
.header-white #wishOpenBtn {
  color: rgba(0, 0, 0, 0.50) !important;
}
.header-white #mobOpenBtn:hover,
.header-white #mobileSearchToggle:hover,
.header-white #wishOpenBtn:hover {
  color: #000 !important;
}
.header-white .logo-text { color: #1a1a1a !important; }
.header-white .logo-text strong { color: #d97706 !important; }
.header-white #searchInput,
.header-white #mobileSearchInput {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  color: #1a1a1a !important;
}
/* Category ribbon inside white header */
.header-white > div:last-child {
  background-color: #f0f0f0 !important;
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}
.header-white .cat-pill { color: rgba(0, 0, 0, 0.55) !important; }
.header-white .cat-pill:hover {
  background: rgba(0, 0, 0, 0.07) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  color: #000 !important;
}

/* — Yellow header — */
.header-yellow {
  background-color: #ffeb3b !important;
  border-bottom-color: rgba(0, 0, 0, 0.10) !important;
}
.header-yellow #mobOpenBtn,
.header-yellow #mobileSearchToggle,
.header-yellow #wishOpenBtn {
  color: rgba(0, 0, 0, 0.60) !important;
}
.header-yellow #mobOpenBtn:hover,
.header-yellow #mobileSearchToggle:hover,
.header-yellow #wishOpenBtn:hover {
  color: #000 !important;
}
.header-yellow .logo-text { color: #1a1a1a !important; }
.header-yellow .logo-text strong { color: #b45309 !important; }
.header-yellow #searchInput,
.header-yellow #mobileSearchInput {
  background: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
  color: #1a1a1a !important;
}
/* Category ribbon inside yellow header */
.header-yellow > div:last-child {
  background-color: #fdd835 !important;
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}
.header-yellow .cat-pill { color: rgba(0, 0, 0, 0.65) !important; }
.header-yellow .cat-pill:hover {
  background: rgba(0, 0, 0, 0.07) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  color: #000 !important;
}

/* ═════════════════════════════════════════════
   MOBILE / TABLET RESPONSIVE LAYER
   Everything below is inside a max-width query,
   so the desktop layout above is untouched.
   ═════════════════════════════════════════════ */

/* ── Phones: the 2-column product grid (≤ 639px) ──
   At 390px a card is only ~175px wide. The desktop action row
   (Enquire + a 90px-min "Add to cart" side by side) cannot fit,
   so on phones the two buttons stack full-width instead. The
   card body padding and type scale are tightened to buy back
   horizontal room for the product name and price. */
@media (max-width: 639px) {

  /* Tighter gutter = wider tiles. #id beats Tailwind's .gap-4 class. */
  #productGrid { gap: 10px; }

  .pcard { border-radius: 14px; }
  .pcard-body { padding: 0.7rem 0.75rem 0.85rem; }

  /* Brand row: let the Sale/Premium badge wrap instead of
     squeezing the series name, and scale it down to match. */
  .pcard-brand {
    flex-wrap: wrap;
    gap: 3px 5px;
    font-size: 0.56rem;
    letter-spacing: 1.2px;
    margin-bottom: 3px;
  }
  .pcard-brand span {
    font-size: 0.58rem;
    line-height: 1.4;
    padding: 1px 6px;
    margin-left: 0;
  }

  /* Name: clamp to 2 lines AND reserve those 2 lines, so every
     tile in a row lines up whether the name is short or long. */
  .pcard-name {
    font-size: 0.85rem;
    line-height: 1.32;
    min-height: calc(0.85rem * 1.32 * 2);
    margin-bottom: 2px;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pcard-specs {
    font-size: 0.7rem;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
  }
  .pcard-price {
    font-size: 0.95rem;
    margin-bottom: 4px;
  }
  .pcard-boxpieces {
    font-size: 0.68rem;
    margin-bottom: 8px;
  }

  /* Stacked, full-width, equal-height buttons with 38px tap targets. */
  .pcard-actions {
    flex-direction: column;
    gap: 6px;
  }
  .pcard-wa,
  .pcard-cart {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 8px;
    font-size: 0.74rem;
    gap: 6px;
  }
  .pcard-wa { box-shadow: 0 2px 10px rgba(30,30,30,0.18); }
  .pcard-cart span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Bigger heart / remove targets on touch screens. */
  .wish-btn {
    width: 34px;
    height: 34px;
    top: 8px;
    right: 8px;
    font-size: 0.85rem;
  }
  .wish-pg-remove {
    width: 30px;
    height: 30px;
    font-size: 0.72rem;
  }

  /* Cards don't lift on tap — reserve the hover transform for mice. */
  .pcard:hover {
    transform: none;
    box-shadow: 0 4px 28px rgba(0,0,0,0.06);
    border-color: #e2e2e2;
  }

  /* Section heading + count pill fit on one line. */
  #products h1,
  #products h2 { font-size: 1.4rem; line-height: 1.25; }

  /* Header: keep the logo, search, wishlist and cart on one row
     down to 320px instead of overflowing. */
  .logo-img { width: 36px; height: 36px; border-radius: 8px; }
  .logo-text { font-size: 0.92rem; }
  .cat-pill { padding: 0.4rem 1rem; font-size: 0.72rem; }

  /* Floating buttons: smaller, aligned to each other, and no
     hover tooltip (it sticks open after a tap on touch devices). */
  #floatingWhatsApp {
    width: 48px;
    height: 48px;
    bottom: 16px;
    right: 16px;
    font-size: 1.35rem;
  }
  #floatingWhatsApp::before,
  #floatingWhatsApp::after { display: none; }
  #backToTop {
    width: 38px;
    height: 38px;
    bottom: 74px;
    right: 21px;
  }
}

/* ── Small phones (≤ 380px): last squeeze on gutters and type ── */
@media (max-width: 380px) {
  #productGrid { gap: 8px; }
  .pcard-body { padding: 0.6rem 0.6rem 0.75rem; }
  .pcard-name { font-size: 0.8rem; min-height: calc(0.8rem * 1.32 * 2); }
  .pcard-wa,
  .pcard-cart { font-size: 0.7rem; }
  .logo-text { font-size: 0.85rem; }
}

/* ── Very small phones (≤ 360px) ──
   The header row (menu + logo + search + wishlist + cart) measures
   ~335px at the default sizes, which pushes the page sideways on a
   320px screen. Trimming the logo brings it back under 320px. */
@media (max-width: 360px) {
  .logo-img { width: 30px; height: 30px; }
  .logo-text { font-size: 0.78rem; }
  .logo-mark { gap: 7px; }
  .announcement-bar { font-size: 0.66rem; padding: 6px 10px; }
}

/* ── Tablets (640–1023px): 3-column grid ──
   Room for the side-by-side action row again, but not for a rigid
   90px cart button, so let it size to its own content. */
@media (min-width: 640px) and (max-width: 1023px) {
  .pcard-cart {
    min-width: 0;
    padding: 0 12px;
    font-size: 0.76rem;
  }
  .pcard-wa { font-size: 0.76rem; }
  .pcard-name {
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ── Wishlist page on phones: match the catalog grid spacing ── */
@media (max-width: 639px) {
  .wish-page-grid { gap: 10px; }
  .wish-page-body { padding: 12px; }
}