/* ================= RESET ================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif;
}

/* ================= COLORS ================= */
:root{
    --primary:#FFF3AD;
    --accent:#FFEB7B;
    --light:#FFF9D6;
    --search-bg:#ffffff;
    --search-border:#e2e8f0;
    --search-focus:#FFEB7B;

    /* brand palette: navy 75%, cream 15%, navy outline 10% */
    --navy:#213B54;
    --navy-deep:#16293B;
    --cream:#FFF9D6;
}

body{
    background:var(--search-bg);
    color:white;
    overflow-x:hidden;
}

/* ================= NAVBAR (main) ================= */
.navbar{
    position:fixed;
    top:8px;
    left:4.6%;
    right:4.6%;
    height:70px;
    padding:0 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;

    background:rgba(255,255,255,0.4);
    backdrop-filter:blur(10px);
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.25);
    transition:0.4s;
    z-index:1000;
}

.navbar.scrolled{
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* Logo */
.logo img{
    height:60px;
    width: auto;
    display: block;
}

/* Nav Links */
.nav-links{
    list-style:none;
    display:flex;
    gap:30px;
}

.nav-links a{
    text-decoration:none;
    color:#111;
    font-weight:500;
    transition:0.3s;
}

.nav-links a:hover{
    color:var(--accent);
}

/* Icons */
.nav-icons{
    display:flex;
    gap:20px;
    align-items:center;
}

.nav-icons a{
    color:#111;
    font-size:18px;
    transition:0.3s;
    cursor:pointer;
}

.nav-icons a:hover{
    color:var(--accent);
    transform:translateY(-2px);
}

/* ================= HAMBURGER (original animated X restored) ================= */
.hamburger{
    display:none;
    flex-direction:column;
    gap:6px;
    cursor:pointer;
}

.hamburger span{
    width:26px;
    height:3px;
    background:#111;
    border-radius:4px;
    transition:0.4s;
}

.hamburger.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
}
.hamburger.active span:nth-child(2){
    opacity:0;
}
.hamburger.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
}

/* ================= SECONDARY SEARCH BAR (improved rectangular design) ================= */
.secondary-search-wrapper {
    position: fixed;
    top: calc(70px + 16px);   /* right below main navbar + small gap */
    left: 4.6%;
    right: 4.6%;
    z-index: 999;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.secondary-search-container {
    background: var(--search-bg);
    border-radius: 12px;        /* rectangular with subtle rounding - less than before */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
    width: 100%;
    max-width: 700px;
    padding: 0 12px 0 24px;
    display: flex;
    align-items: center;
    height: 60px;               /* slightly taller for better proportion */
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.98);
    transition: all 0.25s ease;
    pointer-events: auto;
    border: 1px solid var(--search-border);
}

.secondary-search-container:focus-within {
    border-color: var(--search-focus);
    box-shadow: 0 6px 24px rgba(255, 235, 123, 0.25), 0 0 0 3px rgba(255, 235, 123, 0.15);
}

.secondary-search-container.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    pointer-events: none;
}

/* search input - updated placeholder */
.secondary-search-container input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.05rem;
    padding: 14px 0;
    color: #1a202c;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.secondary-search-container input::placeholder {
    color: #94a3b8;
    font-weight: 400;
    font-size: 1rem;
    opacity: 0.8;
}

/* icons inside secondary bar */
.search-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-left: 12px;
}

.search-actions i {
    font-size: 1.3rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 6px;
    border-radius: 8px;
}

.search-actions i:hover {
    color: #1e293b;
    background: rgba(255, 235, 123, 0.25);
    transform: scale(1.02);
}

.search-actions .fa-xmark {
    font-size: 1.8rem;
    color: #64748b;
}

.search-actions .fa-xmark:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

/* ================= HERO (FIXED CONTENT POSITION) ================= */
.hero{
    position:relative;
    height: 570px;
    display:flex;
    align-items:center;        /* this centers content vertically */
    padding:0 4.6%;
    margin-top: 0;             /* no extra margin pushing down */
}

.hero video{
    position:absolute;
    width:100%;
    height:570px;
    object-fit:cover;
    top:0;
    left:0;
    z-index:-2;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:-1;
}

.hero-content{
    max-width:750px;
    margin-top: 0;            /* ← removed large top margin */
    transform: translateY(0);  /* ensure no shifting */
    position: relative;
    top: 0;                   /* explicit zero */
}

.typewriter{
    font-family:'League Spartan', sans-serif;
    font-size:48px;
    font-weight:800;
    margin-bottom:24px;
}

.cursor{
    color:var(--accent);
    animation:blink 0.8s infinite;
}

@keyframes blink{
    50%{opacity:0;}
}

.hero p{
    font-family:'Montserrat', sans-serif;
    font-size:18px;
    line-height:1.7;
    color:#c7d2ff;
    margin-bottom:40px;
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.btn-primary{
    padding:14px 34px;
    border-radius:8px;
    background:var(--primary);
    color:#050f1d;
    font-weight:600;
    text-decoration:none;
    transition:0.3s;
}

.btn-primary:hover{
    background:var(--accent);
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(255,235,123,0.4);
}

.btn-secondary{
    padding:14px 34px;
    border-radius:8px;
    border:1.5px solid var(--primary);
    color:white;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}

.btn-secondary:hover{
    background:var(--primary);
    color:#050f1d;
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(255,235,123,0.25);
}

.btn-primary,
.btn-secondary{
    display:inline-block;
    text-align:center;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:3px;
}
.service-section{
  width:100%;
  height: auto;
  min-height: 120px;
  background:#fff;
  padding-top: 30px;
  padding-bottom: 30px;
}

.service-wrapper{
  width:70%; /* 15% left + 15% right gap */
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.service-item{
  width:30%;
  color: #dc2626;
}

.service-content{
  display:flex;
  align-items:center;
  gap:15px;
}

.service-content i{
  font-size:40px;
  color:#011969;
}

.service-content h3{
  font-size:20px;
  margin:0;
  color: #011969;
  font-weight:600;
}

.service-content p{
  margin:6px 0 0 0;
  font-size:14px;
  color:#555;
}

.separator{
  width:1px;
  height:80px;
  background:#011969;
}
.featured-section{
  width:100%;
  padding:80px 0;
  background:#f4f4f4;
}

.featured-heading{
  width:70%;
  margin:0 auto 50px auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
}

.featured-heading h2{
  font-size:28px;
  font-weight:700;
  letter-spacing:2px;
  margin:0;
  color: #011969;
  white-space:nowrap;
}

.featured-heading .line{
  flex:1;
  height:2px;
  background:#937474;
}

/* Featured Content Grid */
.featured-content {
  width: 70%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 30px;
}

.product-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: 0.3s;
  text-align: center;
  padding: 16px 16px 20px;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.product-card .product-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #eef1f5;
  margin-bottom: 16px;
}

.product-card .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-card h3 {
  font-size: 20px;
  color: #011969;
  margin-bottom: 8px;
  font-weight: 600;
}

.product-card p {
  color: #4b5563;
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.5;
  padding: 0 5px;
}

/* Star rating */
.product-card .rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-bottom: 12px;
  font-size: 14px;
}

.product-card .rating i {
  color: #FFB020;
  font-size: 14px;
}

.product-card .rating .rating-value {
  color: #6b7280;
  font-size: 13px;
  margin-left: 4px;
}

/* Price row: selling price, regular (crossed) price, discount badge */
.product-card .price-block {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.product-card .price-block .selling-price {
  font-weight: 700;
  font-size: 20px;
  color: #1e293b;
}

.product-card .price-block .regular-price {
  font-weight: 500;
  font-size: 14px;
  color: #9ca3af;
  text-decoration: line-through;
}

.product-card .price-block .discount-badge {
  font-weight: 600;
  font-size: 12px;
  color: #ffffff;
  background: #e0523f;
  padding: 2px 8px;
  border-radius: 20px;
}

.product-card .btn-small {
  display: inline-block;
  background: var(--primary);
  color: #011969;
  text-decoration: none;
  padding: 8px 25px;
  border-radius: 30px;
  font-weight: 500;
  transition: 0.3s;
}

.product-card .btn-small:hover {
  background: var(--accent);
  transform: scale(1.05);
}


/* ================= ALL PRODUCTS (random showcase) ================= */
.all-products-section{
  width:100%;
  padding:80px 0;
  background:#ffffff;
}

.all-products-heading{
  width:70%;
  margin:0 auto 50px auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
}

.all-products-heading h2{
  font-size:28px;
  font-weight:700;
  letter-spacing:2px;
  margin:0;
  color:#011969;
  white-space:nowrap;
}

.all-products-heading .line{
  flex:1;
  height:2px;
  background:#937474;
}

.all-products-grid{
  width:70%;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:30px;
}

/* ================= ANIMATED ADD-TO-CART BUTTON ================= */
.add-to-cart {
  --color: #011969;
  --background: var(--primary);
  --drop: var(--accent);
  --background-s: 1;
  --text-o: 1;
  --text-x: 10px;
  --bottle-x: -40%;
  --bottle-y: -60px;
  --bottle-s: .4;
  --bottle-r: 0deg;
  --bottle-o: 0;
  --cart-x: -57px;
  --cart-y: -2px;
  --cart-r: 0deg;
  --cart-s: 0.8;
  --check-y: 0px;
  --check-s: 0;
  --check-offset: 8.5px;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  background: none;
  border: none;
  padding: 12px 0;
  margin: 4px auto 0;
  width: 142px;
  max-width: 100%;
  min-height: 44px;
  color: var(--color);
  cursor: pointer;
  position: relative;
  text-align: center;
  font: inherit;
  touch-action: manipulation;
}
.add-to-cart.clipped {
  -webkit-clip-path: polygon(0 -80px, 100% -80px, 100% 80px, 0 80px);
          clip-path: polygon(0 -80px, 100% -80px, 100% 80px, 0 80px);
}
.add-to-cart .background,
.add-to-cart .cart,
.add-to-cart .check {
  position: absolute;
  pointer-events: none;
}
.add-to-cart .background {
  left: 0;
  top: -4px;
  right: 0;
  bottom: 0;
  display: block;
  fill: var(--background);
  stroke: rgba(1, 25, 105, 0.14);
  stroke-width: 1.5;
  transform: scale(var(--background-s)) translateZ(0);
}
.add-to-cart span {
  position: relative;
  z-index: 1;
  line-height: 18px;
  display: block;
  font-size: 14px;
  font-weight: 600;
  opacity: var(--text-o);
  transform: translateX(var(--text-x)) translateZ(0);
}
.add-to-cart .drop {
  position: absolute;
  z-index: 1;
  left: 70px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--drop);
  box-shadow: 0 0 4px rgba(255, 235, 123, 0.8);
}
.add-to-cart .cart {
  z-index: 2;
  bottom: 11px;
  left: calc(50% - 2px);
  transform-origin: 10px 17px;
  transform: translate(var(--cart-x), var(--cart-y)) scale(var(--cart-s)) rotate(var(--cart-r)) translateZ(0);
}
.add-to-cart .cart svg {
  display: block;
  width: 24px;
  height: 19px;
  stroke: var(--color);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  position: relative;
  z-index: 1;
  transform: translateZ(0);
}
.add-to-cart .cart img {
  display: block;
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: 26px;
  height: auto;
  opacity: var(--bottle-o);
  transform-origin: 50% 100%;
  transform: translate(var(--bottle-x), var(--bottle-y)) scale(var(--bottle-s)) rotate(var(--bottle-r)) translateZ(0);
}
.add-to-cart .check {
  bottom: 0;
  left: 50%;
  padding: 2px;
  background: var(--background);
  border-radius: 50%;
  transform: translate(-50%, var(--check-y)) scale(var(--check-s)) translateZ(0);
}
.add-to-cart .check svg {
  display: block;
  width: 10px;
  height: 10px;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--color);
  stroke-dasharray: 8.5px;
  stroke-dashoffset: var(--check-offset);
}

/* Mobile Responsive for Featured grid */
@media (max-width: 768px){
  .featured-content {
    width: 90%;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .product-card {
    padding: 22px 15px 18px;
  }

  /* All Products sits in the same grid as Featured */
  .all-products-heading{
    width:90%;
  }

  .all-products-grid{
    width:90%;
  }
}

/* Animated add-to-cart button: mobile */
@media (max-width: 480px){
  .add-to-cart {
    width: 132px;
    transform-origin: center;
  }

  .add-to-cart .drop {
    left: 64px;
  }
}

@media (max-width: 360px){
  .product-card {
    padding: 20px 10px 16px;
  }

  .add-to-cart {
    width: 124px;
  }

  .add-to-cart .drop {
    left: 60px;
  }
}

/* ========== MOBILE RESPONSIVE FIXES ========== */

/* service section mobile */
@media (max-width: 768px){

  /* swipe sideways through the three promises — no tall stack */
  .service-wrapper{
    width:100%;
    flex-direction:row;
    align-items:stretch;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:14px;
    padding:4px 20px 8px;
  }
  .service-wrapper::-webkit-scrollbar{ display:none; }

  .service-item{
    flex:0 0 78%;
    width:auto;
    scroll-snap-align:center;
    text-align:center;
    background:#f7f8fa;
    border-radius:14px;
    padding:18px 16px;
  }

  .service-content{
    flex-direction:column;
    align-items:center;
  }

  .service-content i{
    font-size:32px;
    margin-bottom:8px;
  }

  .service-content p{ font-size:13.5px; }

  .separator{ display:none; }

}

/* ================= MOBILE (original restored with hamburger display) ================= */
@media(max-width:768px){

    .navbar {
        padding: 0 20px;
    }

    .nav-links{
        position:absolute;
        top:80px;
        left:0;
        right:0;
        background:rgba(255,255,255,0.98);
        backdrop-filter: blur(10px);
        flex-direction:column;
        align-items:center;
        gap:25px;
        padding:30px 0;
        border-radius:14px;
        transform:translateY(-150%);
        transition:0.4s;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        z-index: 999;
    }

    .nav-links.active{
        transform:translateY(0);
    }

    .hamburger{
        display:flex;   /* hamburger becomes visible on mobile */
    }

    .typewriter{
        font-size:32px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:flex-start;
    }
    .hero{
        height: 500px;
    }
    .hero video{
        height: 500px;        /* match hero height */
    }

    /* secondary search on mobile - rectangular shape preserved */
    .secondary-search-container {
        max-width: 95%;
        padding: 0 12px 0 20px;
        height: 56px;
    }

    .secondary-search-container input {
        font-size: 1rem;
        padding: 12px 0;
    }

    .search-actions i {
        font-size: 1.2rem;
    }
    .search-actions .fa-xmark {
        font-size: 1.6rem;
    }

    /* featured heading mobile */
    .featured-heading {
        width: 90%;
        gap: 10px;
    }

    .featured-heading h2 {
        font-size: 22px;
    }

    /* service section spacing */
    .service-section {
        padding: 30px 0;
    }

    /* logo size adjust if needed */
    .logo img {
        height: 50px;
    }

    /* ensure hero content stays centered vertically on mobile */
    .hero-content {
        margin-top: 0;
    }
}

@media(max-width:480px){
    .secondary-search-container {
        height: 52px;
        padding: 0 8px 0 16px;
    }
    .secondary-search-container input {
        font-size: 0.95rem;
    }
    .search-actions {
        gap: 8px;
    }
    .typewriter {
        font-size: 28px;
    }
}

/* ================= ABOUT SECTION ================= */
.about-section{
    background:var(--navy);
    padding:90px 4.6%;
}
.about-wrapper{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:70px;
    align-items:center;
}
.about-image{
    border:1px solid rgba(255,249,214,0.2);
    border-radius:18px;
    overflow:hidden;
    aspect-ratio:4/3;
}
.about-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.about-text .eyebrow{
    color:var(--cream);
    font-family:'Montserrat', sans-serif;
    font-size:14px;
    letter-spacing:0.5px;
    opacity:0.75;
    margin-bottom:14px;
}
.about-text h2{
    font-family:'League Spartan', sans-serif;
    font-size:36px;
    font-weight:800;
    color:var(--cream);
    line-height:1.25;
    margin-bottom:20px;
    max-width:480px;
}
.about-text p{
    font-family:'Montserrat', sans-serif;
    font-size:16px;
    line-height:1.8;
    color:#c9d5e2;
    max-width:520px;
    margin-bottom:30px;
}
.about-points{
    list-style:none;
    display:grid;
    gap:16px;
}
.about-points li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    font-family:'Montserrat', sans-serif;
    color:var(--cream);
    font-size:15px;
    border-top:1px solid rgba(255,249,214,0.15);
    padding-top:16px;
}
.about-points li:first-child{
    border-top:none;
    padding-top:0;
}
.about-points i{
    color:var(--accent);
    margin-top:3px;
}

/* ================= PROCESS SECTION ================= */
.process-section{
    background:var(--cream);
    padding:90px 4.6%;
}
.process-heading{
    max-width:1180px;
    margin:0 auto 55px auto;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    border-bottom:1px solid rgba(33,59,84,0.15);
    padding-bottom:26px;
}
.process-heading h2{
    font-family:'League Spartan', sans-serif;
    font-size:34px;
    font-weight:800;
    color:var(--navy);
}
.process-heading p{
    font-family:'Montserrat', sans-serif;
    font-size:15px;
    color:#3f5875;
    max-width:340px;
    line-height:1.7;
}
.process-grid{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:36px;
}
.process-card{
    background:#fff;
    border:1px solid rgba(33,59,84,0.12);
    border-radius:16px;
    overflow:hidden;
}
.process-card .process-img{
    aspect-ratio:4/3;
    overflow:hidden;
}
.process-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.process-card .process-body{
    padding:26px 24px 30px;
}
.process-step{
    font-family:'Montserrat', sans-serif;
    font-size:13px;
    font-weight:600;
    color:var(--navy);
    opacity:0.55;
    margin-bottom:10px;
}
.process-card h3{
    font-family:'League Spartan', sans-serif;
    font-size:21px;
    font-weight:700;
    color:var(--navy);
    margin-bottom:10px;
}
.process-card p{
    font-family:'Montserrat', sans-serif;
    font-size:14.5px;
    line-height:1.7;
    color:#4b5f76;
}

/* ================= CTA BANNER ================= */
.cta-banner{
    position:relative;
    background:var(--navy-deep) url('../images/img-automation-cta.png') center/cover no-repeat;
    padding:110px 4.6%;
    text-align:center;
}
.cta-banner::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(22,41,59,0.88), rgba(22,41,59,0.72));
}
.cta-inner{
    position:relative;
    z-index:1;
    max-width:640px;
    margin:0 auto;
}
.cta-inner h2{
    font-family:'League Spartan', sans-serif;
    font-size:34px;
    font-weight:800;
    color:var(--cream);
    margin-bottom:18px;
}
.cta-inner p{
    font-family:'Montserrat', sans-serif;
    font-size:16px;
    line-height:1.7;
    color:#c9d5e2;
    margin-bottom:34px;
}

/* ================= FOOTER ================= */
.site-footer{
    background:var(--navy-deep);
    border-top:1px solid rgba(255,249,214,0.1);
    padding:70px 4.6% 0;
}
.footer-top{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.2fr 0.9fr 0.9fr 1.1fr;
    gap:40px;
    padding-bottom:50px;
}
.footer-brand .logo img{
    height:46px;
    filter:brightness(0) invert(1);
    margin-bottom:18px;
}
.footer-brand p{
    font-family:'Montserrat', sans-serif;
    font-size:14px;
    line-height:1.8;
    color:#9fb0c2;
    max-width:280px;
    margin-bottom:22px;
}
.footer-social{
    display:flex;
    gap:12px;
}
.footer-social a{
    width:38px;
    height:38px;
    border:1px solid rgba(255,249,214,0.25);
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--cream);
    text-decoration:none;
    transition:0.3s;
}
.footer-social a:hover{
    background:var(--accent);
    color:var(--navy-deep);
    border-color:var(--accent);
    transform:translateY(-3px);
}
.footer-col h4{
    font-family:'League Spartan', sans-serif;
    font-size:15px;
    letter-spacing:0.4px;
    color:var(--cream);
    margin-bottom:20px;
}
.footer-col ul{
    list-style:none;
    display:grid;
    gap:13px;
}
.footer-col a{
    font-family:'Montserrat', sans-serif;
    font-size:14px;
    color:#9fb0c2;
    text-decoration:none;
    transition:0.25s;
}
.footer-col a:hover{
    color:var(--accent);
}
.footer-contact{
    list-style:none;
    display:grid;
    gap:14px;
}
.footer-contact li{
    display:flex;
    align-items:center;
    gap:10px;
}
.footer-contact i{
    width:32px;
    height:32px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,249,214,0.25);
    border-radius:8px;
    color:var(--accent);
    font-size:14px;
}
.footer-contact a{
    font-family:'Montserrat', sans-serif;
    font-size:14px;
    color:#9fb0c2;
    text-decoration:none;
    transition:0.25s;
    word-break:break-word;
}
.footer-contact a:hover{
    color:var(--accent);
}
.footer-bottom{
    max-width:1180px;
    margin:0 auto;
    border-top:1px solid rgba(255,249,214,0.1);
    padding:24px 0 20px;
}
.footer-bottom-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}
.footer-credit{
    margin:16px 0 0;
    padding-top:14px;
    border-top:1px solid rgba(255,249,214,0.08);
    text-align:center;
    opacity:.9;
}
.footer-bottom p{
    font-family:'Montserrat', sans-serif;
    font-size:13px;
    color:#7e93a9;
}

.footer-legal{
    display:flex;
    gap:24px;
}
.footer-legal a{
    font-family:'Montserrat', sans-serif;
    font-size:13px;
    color:#7e93a9;
    text-decoration:none;
}
.footer-legal a:hover{
    color:var(--cream);
}

@media(max-width:900px){
    .about-wrapper{
        grid-template-columns:1fr;
    }
    .about-image{
        aspect-ratio:16/9;
    }
    .process-grid{
        grid-template-columns:1fr;
    }
    .process-heading{
        flex-direction:column;
        align-items:flex-start;
    }
    .footer-top{
        grid-template-columns:1fr 1fr;
        row-gap:40px;
    }
}
@media(max-width:480px){
    .footer-top{
        grid-template-columns:1fr;
    }
    .cta-inner h2{
        font-size:27px;
    }
    .about-text h2{
        font-size:28px;
    }
}


/* ==========================================================================
   MULTI-PAGE ADDITIONS  (Shop, About Us, Contact, Privacy Policy)
   Uses the existing palette: --navy, --navy-deep, --cream, --accent, --primary
   NOTE: body text color is white globally, so every light section below sets
   its own text colors explicitly.
   ========================================================================== */

/* ---------- Accessibility helpers ---------- */
.skip-link{
    position:fixed;
    top:-70px;
    left:16px;
    z-index:2000;
    background:var(--navy);
    color:var(--cream);
    padding:10px 18px;
    border-radius:8px;
    font-family:'Montserrat', sans-serif;
    font-weight:600;
    text-decoration:none;
    transition:top 0.2s;
}
.skip-link:focus{ top:12px; }

.navbar a:focus-visible,
.hamburger:focus-visible{
    outline:2px solid #011969;
    outline-offset:3px;
    border-radius:4px;
}

.logo a{ display:block; line-height:0; }

/* current page indicator in the navbar */
.nav-links a[aria-current="page"]{
    color:#011969;
    font-weight:600;
    border-bottom:2px solid #011969;
    padding-bottom:2px;
}

/* On inner pages the navbar starts in its solid ("scrolled") look, because it
   sits on a navy banner instead of the hero video */
body:not([data-page="home"]) .navbar{
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,0.4);
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

/* four nav links + icons on small tablets */
@media (min-width:769px) and (max-width:900px){
    .nav-links{ gap:20px; }
    .nav-icons{ gap:14px; }
}

/* ---------- Page banner (top of every inner page) ---------- */
.page-hero{
    background:var(--navy-deep);
    padding:150px 4.6% 70px;
}
.page-hero-inner{
    max-width:1180px;
    margin:0 auto;
}
.breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Montserrat', sans-serif;
    font-size:13px;
    color:#9fb0c2;
    margin-bottom:18px;
}
.breadcrumb a{
    color:var(--cream);
    text-decoration:none;
}
.breadcrumb a:hover{ color:var(--accent); }
.page-hero h1{
    font-family:'League Spartan', sans-serif;
    font-size:46px;
    font-weight:800;
    color:var(--cream);
    line-height:1.2;
    margin-bottom:16px;
}
.page-hero p{
    font-family:'Montserrat', sans-serif;
    font-size:16px;
    line-height:1.8;
    color:#c9d5e2;
    max-width:620px;
}

/* ---------- Generic content sections ---------- */
.content-section{
    background:#fff;
    padding:90px 4.6%;
}
.content-section.alt{ background:var(--cream); }
.content-inner{
    max-width:1180px;
    margin:0 auto;
}
.section-head{
    max-width:640px;
    margin-bottom:46px;
}
.section-head .eyebrow{
    font-family:'Montserrat', sans-serif;
    font-size:14px;
    letter-spacing:0.5px;
    color:var(--navy);
    opacity:0.6;
    margin-bottom:12px;
}
.section-head h2{
    font-family:'League Spartan', sans-serif;
    font-size:34px;
    font-weight:800;
    color:var(--navy);
    line-height:1.25;
    margin-bottom:14px;
}
.section-head p{
    font-family:'Montserrat', sans-serif;
    font-size:16px;
    line-height:1.8;
    color:#4b5f76;
}

/* Cards with an icon (What we do, help cards, etc.) */
.info-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(205px, 1fr));
    gap:28px;
}
.info-card{
    background:#fff;
    border:1px solid rgba(33,59,84,0.12);
    border-radius:16px;
    padding:30px 26px 32px;
    transition:0.3s;
}
.info-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 26px rgba(33,59,84,0.1);
}
.info-card .icon{
    width:48px;
    height:48px;
    border-radius:12px;
    background:var(--navy);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin-bottom:20px;
}
.info-card h3{
    font-family:'League Spartan', sans-serif;
    font-size:21px;
    font-weight:700;
    color:var(--navy);
    margin-bottom:10px;
}
.info-card p{
    font-family:'Montserrat', sans-serif;
    font-size:14.5px;
    line-height:1.7;
    color:#4b5f76;
}
.info-card .text-link{ margin-top:18px; }

/* ---------- Buttons / links for light backgrounds ---------- */
.btn-dark,
.btn-outline-dark{
    display:inline-block;
    text-align:center;
    padding:14px 34px;
    border-radius:8px;
    font-weight:600;
    text-decoration:none;
    transition:0.3s;
}
.btn-dark{
    background:var(--navy);
    color:var(--cream);
    border:1.5px solid var(--navy);
}
.btn-dark:hover{
    background:var(--accent);
    color:var(--navy-deep);
    border-color:var(--accent);
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(255,235,123,0.4);
}
.btn-outline-dark{
    border:1.5px solid var(--navy);
    color:var(--navy);
}
.btn-outline-dark:hover{
    background:var(--navy);
    color:var(--cream);
    transform:translateY(-3px);
}
.btn-dark:focus-visible,
.btn-outline-dark:focus-visible,
.text-link:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:3px;
}

.text-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:26px;
    padding-bottom:3px;
    font-family:'Montserrat', sans-serif;
    font-size:15px;
    font-weight:600;
    color:var(--cream);
    text-decoration:none;
    border-bottom:1px solid rgba(255,249,214,0.4);
    transition:0.25s;
}
.text-link:hover{
    color:var(--accent);
    border-color:var(--accent);
}
.text-link.dark{
    color:var(--navy);
    border-color:rgba(33,59,84,0.35);
}
.text-link.dark:hover{
    color:#011969;
    border-color:#011969;
}

.section-cta{
    text-align:center;
    margin-top:46px;
    padding:0 20px;
}

.cta-buttons{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
}

/* ---------- Home page contextual links ---------- */
.about-text .text-link{ margin-top:30px; }

/* ---------- SHOP ---------- */
.shop-section{
    background:#f4f4f4;
    padding:70px 4.6% 90px;
}
.shop-grid{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(205px, 1fr));
    gap:30px;
}
.shop-grid .product-card{ scroll-margin-top:110px; }
.shop-grid .product-card:target{
    box-shadow:0 0 0 3px var(--accent), 0 15px 30px rgba(0,0,0,0.1);
}

/* ---------- ABOUT ---------- */
.mission-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:70px;
    align-items:start;
}
.mission-statement{
    font-family:'League Spartan', sans-serif;
    font-size:30px;
    font-weight:700;
    line-height:1.4;
    color:var(--navy);
}
.pillar-list{
    list-style:none;
    display:grid;
    gap:22px;
}
.pillar-list li{
    display:flex;
    gap:18px;
    align-items:flex-start;
    border-top:1px solid rgba(33,59,84,0.15);
    padding-top:22px;
}
.pillar-list li:first-child{
    border-top:none;
    padding-top:0;
}
.pillar-num{
    font-family:'League Spartan', sans-serif;
    font-size:22px;
    font-weight:800;
    color:var(--navy);
    opacity:0.35;
    min-width:34px;
}
.pillar-list h3{
    font-family:'League Spartan', sans-serif;
    font-size:20px;
    color:var(--navy);
    margin-bottom:6px;
}
.pillar-list p{
    font-family:'Montserrat', sans-serif;
    font-size:14.5px;
    line-height:1.7;
    color:#4b5f76;
}

.why-section{
    background:var(--navy);
    padding:90px 4.6%;
}
.why-section .section-head .eyebrow{ color:var(--cream); }
.why-section .section-head h2{ color:var(--cream); }
.why-section .section-head p{ color:#c9d5e2; }
.about-points.two-col{
    grid-template-columns:1fr 1fr;
    gap:22px 70px;
}
.about-points.two-col li{
    padding-top:16px;
    border-top:1px solid rgba(255,249,214,0.15);
}
.about-points.two-col li:first-child{
    border-top:1px solid rgba(255,249,214,0.15);
    padding-top:16px;
}
.about-points.two-col li strong{
    display:block;
    color:var(--cream);
    font-weight:600;
    margin-bottom:4px;
}
.about-points.two-col li span{
    color:#c9d5e2;
    font-size:14px;
    line-height:1.7;
}

/* ---------- CONTACT ---------- */
.contact-grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:40px;
    align-items:stretch;
}
.contact-list{
    display:grid;
    gap:20px;
    align-content:start;
}
.contact-item{
    display:flex;
    gap:18px;
    align-items:flex-start;
    background:#fff;
    border:1px solid rgba(33,59,84,0.12);
    border-radius:16px;
    padding:24px;
}
.contact-item[hidden]{ display:none; }
.contact-item .icon{
    width:48px;
    height:48px;
    flex-shrink:0;
    border-radius:12px;
    background:var(--navy);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}
.contact-item h3{
    font-family:'League Spartan', sans-serif;
    font-size:19px;
    color:var(--navy);
    margin-bottom:4px;
}
.contact-item p{
    font-family:'Montserrat', sans-serif;
    font-size:14px;
    line-height:1.6;
    color:#4b5f76;
    margin-bottom:8px;
}
.contact-item a.contact-value{
    font-family:'Montserrat', sans-serif;
    font-weight:600;
    font-size:15.5px;
    color:#011969;
    text-decoration:none;
    word-break:break-word;
}
.contact-item a.contact-value:hover{ text-decoration:underline; }
.contact-item address{
    font-style:normal;
    font-family:'Montserrat', sans-serif;
    font-weight:600;
    font-size:15.5px;
    color:#011969;
}

.contact-side{
    background:var(--navy);
    border-radius:18px;
    padding:42px 36px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.contact-side h2{
    font-family:'League Spartan', sans-serif;
    font-size:28px;
    font-weight:800;
    color:var(--cream);
    line-height:1.3;
    margin-bottom:14px;
}
.contact-side p{
    font-family:'Montserrat', sans-serif;
    font-size:15px;
    line-height:1.8;
    color:#c9d5e2;
    margin-bottom:28px;
}
.contact-side .btn-primary{ margin-bottom:34px; }
.contact-side h3{
    font-family:'League Spartan', sans-serif;
    font-size:15px;
    letter-spacing:0.4px;
    color:var(--cream);
    margin-bottom:14px;
}

/* ---------- PRIVACY POLICY ---------- */
.legal{
    max-width:820px;
    margin:0 auto;
}
.legal .meta{
    font-family:'Montserrat', sans-serif;
    font-size:14px;
    color:#6b7f95;
    margin-bottom:30px;
}
.legal-toc{
    background:var(--cream);
    border-radius:14px;
    padding:24px 30px;
    margin-bottom:10px;
}
.legal .legal-toc h2{
    font-family:'League Spartan', sans-serif;
    font-size:17px;
    color:var(--navy);
    margin:0 0 12px;
}
.legal-toc ol{
    padding-left:20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 30px;
    font-family:'Montserrat', sans-serif;
    font-size:14px;
}
.legal-toc a{
    color:var(--navy);
    text-decoration:none;
}
.legal-toc a:hover{ text-decoration:underline; }
.legal h2{
    font-family:'League Spartan', sans-serif;
    font-size:26px;
    font-weight:700;
    color:var(--navy);
    margin:46px 0 14px;
    scroll-margin-top:110px;
}
.legal h3{
    font-family:'League Spartan', sans-serif;
    font-size:18px;
    color:var(--navy);
    margin:24px 0 8px;
}
.legal p,
.legal li{
    font-family:'Montserrat', sans-serif;
    font-size:15.5px;
    line-height:1.85;
    color:#3f5875;
}
.legal p{ margin-bottom:14px; }
.legal ul{
    padding-left:22px;
    margin:12px 0 16px;
    display:grid;
    gap:8px;
}
.legal a{
    color:#011969;
    text-decoration:underline;
    word-break:break-word;
}
.legal a:hover{ color:var(--navy-deep); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
    .mission-grid,
    .contact-grid{
        grid-template-columns:1fr;
        gap:40px;
    }
    .about-points.two-col{
        grid-template-columns:1fr;
        gap:18px;
    }
}

@media (max-width:768px){
    .page-hero{
        padding:130px 4.6% 54px;
    }
    .page-hero h1{ font-size:34px; }
    .content-section,
    .why-section{
        padding:64px 4.6%;
    }
    .section-head{ margin-bottom:34px; }
    .section-head h2{ font-size:28px; }
    .mission-statement{ font-size:24px; }
    .shop-section{ padding:50px 4.6% 64px; }
    .shop-grid{ gap:20px; }
    .contact-side{ padding:34px 26px; }
    .legal-toc ol{ grid-template-columns:1fr; }
    .legal h2{ font-size:23px; }
}

@media (max-width:480px){
    /* stacked hero buttons share one clean width */
    .hero-buttons{
        align-items:stretch;
        width:100%;
        max-width:340px;
    }
    .page-hero h1{ font-size:30px; }
    .cta-buttons{
        flex-direction:column;
        align-items:stretch;
        max-width:320px;
        margin:0 auto;
    }
    .contact-item{ padding:20px 18px; gap:14px; }
}

/* ---------- Mobile hero: never let the headline slide under the fixed navbar ----------
   (previously a fixed 500px height; the 3-line headline overflowed upward on phones) */
@media (max-width:768px){
    .hero{
        height:auto;
        min-height:500px;
        padding-top:104px;
        padding-bottom:56px;
    }
    .hero video{
        height:100%;
    }
}

/* ==========================================================
   STORE (PHP backend): product page, cart, checkout, shop toolbar
   ========================================================== */

/* ---------- Flash messages ---------- */
.site-flash{
    max-width:1180px;
    margin:0 auto 20px;
    padding:14px 20px;
    border-radius:10px;
    font-family:'Montserrat', sans-serif;
    font-size:14.5px;
    font-weight:500;
    color:var(--navy-deep);
    background:var(--cream);
    border:1px solid rgba(33,59,84,0.15);
}
.site-flash-success{ background:#e8f7ee; border-color:#9fd8b4; color:#14532d; }
.site-flash-error{ background:#fdecea; border-color:#f3b1a8; color:#8a1c10; }
.site-flash-warning{ background:#fff7db; border-color:#f1d77a; color:#6b4f00; }

/* Session flashes float under the navbar and fade out on their own */
.site-flash-stack{
    position:fixed;
    top:90px;
    left:50%;
    transform:translateX(-50%);
    z-index:1500;
    width:min(560px, calc(100% - 32px));
    display:grid;
    gap:10px;
    pointer-events:none;
}
.site-flash-stack .site-flash{
    margin:0;
    box-shadow:0 12px 28px rgba(0,0,0,0.15);
    animation:flashIn .3s ease-out, flashOut .4s ease-in 6s forwards;
}
@keyframes flashIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@keyframes flashOut{ to{ opacity:0; visibility:hidden; } }

/* ---------- Page hero variants ---------- */
.page-hero.compact{ padding:118px 4.6% 22px; }
.page-hero.compact .breadcrumb{ margin-bottom:0; flex-wrap:wrap; }
.page-hero.compact-title{ padding:130px 4.6% 44px; }
.page-hero.compact-title h1{ font-size:38px; margin-bottom:8px; }
.page-hero .accent{ color:var(--accent); }

/* ---------- Product cards: link + stock ---------- */
.product-card .product-link{
    display:block;
    color:inherit;
    text-decoration:none;
}
.product-card .product-link:hover h3{ text-decoration:underline; text-underline-offset:3px; }
.card-cart-form{ margin:0; }
.stock-out-label{
    display:inline-block;
    margin-top:6px;
    padding:10px 22px;
    border-radius:30px;
    background:#eef1f5;
    color:#6b7280;
    font-size:14px;
    font-weight:600;
}

/* ---------- Navbar cart badge ---------- */
.nav-icons .cart-link{ position:relative; }
.cart-badge{
    position:absolute;
    top:-8px;
    right:-10px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:9px;
    background:#e0523f;
    color:#fff;
    font-size:11px;
    font-weight:700;
    line-height:18px;
    text-align:center;
}
.cart-badge[hidden]{ display:none; }

/* ---------- Toast ---------- */
.cart-toast{
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    z-index:2000;
    display:flex;
    align-items:center;
    gap:12px;
    max-width:calc(100% - 32px);
    padding:14px 18px;
    border-radius:12px;
    background:var(--navy-deep);
    color:var(--cream);
    font-family:'Montserrat', sans-serif;
    font-size:14px;
    box-shadow:0 12px 30px rgba(0,0,0,0.25);
    animation:toastIn .25s ease-out;
}
.cart-toast[hidden]{ display:none; }
.cart-toast.ok i{ color:#7ee2a8; }
.cart-toast.error i{ color:#ff9b8c; }
.cart-toast a{ color:var(--accent); font-weight:600; white-space:nowrap; }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%, 12px); } to{ opacity:1; transform:translate(-50%, 0); } }

/* ---------- SINGLE PRODUCT ---------- */
.product-detail{
    background:#f4f4f4;
    padding:40px 4.6% 70px;
    color:var(--navy);
}
.pd-wrap{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:56px;
    align-items:start;
}
.pd-gallery{ position:sticky; top:100px; }
.pd-main-image{
    position:relative;
    aspect-ratio:1 / 1;
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 30px rgba(33,59,84,0.08);
}
.pd-main-image img{ width:100%; height:100%; object-fit:contain; display:block; }
.pd-sale-tag{
    position:absolute;
    top:16px;
    left:16px;
    z-index:1;
    padding:5px 12px;
    border-radius:20px;
    background:#e0523f;
    color:#fff;
    font-weight:700;
    font-size:13px;
}
.pd-thumbs{
    display:flex;
    gap:12px;
    margin-top:14px;
    overflow-x:auto;
    padding-bottom:4px;
}
.pd-thumb{
    flex:0 0 78px;
    height:78px;
    padding:0;
    border-radius:12px;
    border:2px solid transparent;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    transition:border-color .2s;
}
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb.active,
.pd-thumb:hover{ border-color:var(--navy); }
.pd-thumb:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

.pd-info{ padding-top:6px; }
.pd-category{
    display:inline-block;
    font-family:'Montserrat', sans-serif;
    font-size:13px;
    font-weight:600;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--navy);
    opacity:.65;
    text-decoration:none;
    margin-bottom:10px;
}
.pd-category:hover{ opacity:1; }
.pd-info h1{
    font-family:'League Spartan', sans-serif;
    font-size:44px;
    font-weight:800;
    line-height:1.1;
    color:var(--navy-deep);
    margin-bottom:14px;
}
.pd-meta-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:18px;
}
.pd-rating{ display:flex; align-items:center; gap:3px; }
.pd-rating i{ color:#FFB020; font-size:15px; }
.pd-rating .rating-value{ color:#6b7280; font-size:13px; margin-left:4px; }
.pd-sku{ font-family:'Montserrat', sans-serif; font-size:13px; color:#6b7280; }

.pd-price{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:18px;
}
.pd-price .selling-price{ font-size:34px; font-weight:700; color:#1e293b; }
.pd-price .regular-price{ font-size:18px; color:#9ca3af; text-decoration:line-through; }
.pd-price .discount-badge{
    font-size:13px; font-weight:600; color:#fff; background:#e0523f;
    padding:3px 10px; border-radius:20px; align-self:center;
}
.pd-short{
    font-family:'Montserrat', sans-serif;
    font-size:16px;
    line-height:1.75;
    color:#4b5f76;
    margin-bottom:18px;
}
.pd-stock{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:600;
    padding:6px 14px;
    border-radius:20px;
    margin-bottom:24px;
}
.pd-stock.in{ background:#e8f7ee; color:#15803d; }
.pd-stock.low{ background:#fff4d6; color:#a16207; }
.pd-stock.out{ background:#fdecea; color:#b42318; }

.pd-buy{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    padding:22px 0;
    border-top:1px solid rgba(33,59,84,0.12);
    border-bottom:1px solid rgba(33,59,84,0.12);
}
.pd-buy .add-to-cart{ margin:0; width:160px; }
.pd-buy .pd-buy-now{
    flex:1 1 140px;
    padding:13px 24px;
    font:inherit;
    font-weight:600;
    cursor:pointer;
}
.pd-buy .btn-outline-dark{ display:inline-flex; gap:8px; align-items:center; }

.qty-stepper{
    display:inline-flex;
    align-items:center;
    height:48px;
    border:1.5px solid rgba(33,59,84,0.25);
    border-radius:10px;
    background:#fff;
    overflow:hidden;
}
.qty-stepper button{
    width:42px;
    height:100%;
    border:none;
    background:transparent;
    color:var(--navy);
    cursor:pointer;
    font-size:13px;
}
.qty-stepper button:hover{ background:var(--cream); }
.qty-stepper input{
    width:48px;
    height:100%;
    border:none;
    text-align:center;
    font:inherit;
    font-weight:600;
    color:var(--navy-deep);
    -moz-appearance:textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-stepper input:focus{ outline:none; background:var(--cream); }
.qty-stepper.small{ height:40px; }
.qty-stepper.small button{ width:34px; }
.qty-stepper.small input{ width:40px; }

.pd-perks{
    list-style:none;
    display:grid;
    gap:14px;
    margin-top:24px;
}
.pd-perks li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    font-family:'Montserrat', sans-serif;
    font-size:14px;
    color:#4b5f76;
}
.pd-perks i{
    width:38px; height:38px; flex:0 0 38px;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px;
    background:var(--navy);
    color:var(--accent);
    font-size:15px;
}
.pd-perks strong{ display:block; color:var(--navy-deep); font-size:14.5px; }
.pd-perks a{ color:var(--navy); font-weight:600; }

/* Details tabs */
.pd-details{ background:#fff; padding:60px 4.6% 70px; color:var(--navy); }
.pd-details-inner{ max-width:900px; margin:0 auto; }
.pd-tabs{
    display:flex;
    gap:6px;
    border-bottom:2px solid rgba(33,59,84,0.1);
    margin-bottom:30px;
    overflow-x:auto;
}
.pd-tabs button{
    padding:14px 20px;
    border:none;
    background:none;
    font:inherit;
    font-weight:600;
    font-size:15px;
    color:#6b7f95;
    cursor:pointer;
    white-space:nowrap;
    border-bottom:3px solid transparent;
    margin-bottom:-2px;
}
.pd-tabs button[aria-selected="true"]{ color:var(--navy-deep); border-bottom-color:var(--navy); }
.pd-tabs button:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; }
.pd-prose p{
    font-family:'Montserrat', sans-serif;
    font-size:16px;
    line-height:1.85;
    color:#3c5068;
    margin-bottom:16px;
}
.pd-spec-table{ width:100%; border-collapse:collapse; font-family:'Montserrat', sans-serif; font-size:15px; }
.pd-spec-table th,
.pd-spec-table td{ padding:14px 16px; text-align:left; border-bottom:1px solid rgba(33,59,84,0.1); }
.pd-spec-table th{ width:38%; color:var(--navy-deep); font-weight:600; background:#fafbfc; }
.pd-spec-table td{ color:#3c5068; }
.pd-box-list{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
.pd-box-list li{
    display:flex; align-items:center; gap:12px;
    padding:14px 16px;
    border-radius:10px;
    background:var(--cream);
    font-family:'Montserrat', sans-serif;
    font-size:14.5px;
    color:var(--navy-deep);
}
.pd-box-list i{ color:#15803d; }

.related-section{ padding-top:60px; }
.related-head{
    max-width:1180px;
    margin:0 auto 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}
.related-head h2{ font-family:'League Spartan', sans-serif; font-size:30px; font-weight:800; color:var(--navy); }
.related-head .text-link{ margin-top:0; }

/* ---------- Shop toolbar, pager, empty state ---------- */
.shop-toolbar{
    max-width:1180px;
    margin:0 auto 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
.category-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
    padding:8px 18px;
    border-radius:30px;
    border:1.5px solid rgba(33,59,84,0.2);
    background:#fff;
    color:var(--navy);
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    transition:.2s;
}
.chip:hover{ border-color:var(--navy); }
.chip.active{ background:var(--navy); border-color:var(--navy); color:var(--cream); }
.sort-form{ display:flex; align-items:center; gap:10px; color:var(--navy); font-size:14px; }
.sort-form select{
    padding:9px 12px;
    border-radius:8px;
    border:1.5px solid rgba(33,59,84,0.2);
    background:#fff;
    color:var(--navy-deep);
    font:inherit;
}
.pager{ display:flex; justify-content:center; gap:8px; margin-top:40px; }
.pager a{
    min-width:40px; height:40px; line-height:40px; text-align:center;
    border-radius:8px; background:#fff; color:var(--navy); text-decoration:none; font-weight:600;
    border:1px solid rgba(33,59,84,0.15);
}
.pager a.active{ background:var(--navy); color:var(--cream); }
.empty-state{
    max-width:520px;
    margin:0 auto;
    text-align:center;
    padding:50px 20px;
    color:var(--navy);
}
.empty-state i{ font-size:46px; color:var(--navy); opacity:.35; margin-bottom:18px; }
.empty-state h2{ font-family:'League Spartan', sans-serif; font-size:28px; margin-bottom:8px; }
.empty-state p{ font-family:'Montserrat', sans-serif; color:#4b5f76; margin-bottom:24px; }

/* ---------- CART + CHECKOUT ---------- */
.checkout-section{
    background:#f4f4f4;
    padding:50px 4.6% 80px;
    color:var(--navy);
}
.checkout-grid{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:30px;
    align-items:start;
}
.panel{
    background:#fff;
    border-radius:16px;
    padding:28px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}
.panel-title{
    font-family:'League Spartan', sans-serif;
    font-size:22px;
    font-weight:700;
    color:var(--navy-deep);
    margin-bottom:20px;
}
.cart-line{
    display:grid;
    grid-template-columns:84px 1fr auto 90px;
    gap:18px;
    align-items:center;
    padding:16px 0;
    border-top:1px solid rgba(33,59,84,0.1);
}
.cart-line-img{ width:84px; height:84px; border-radius:12px; overflow:hidden; background:#eef1f5; display:block; }
.cart-line-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cart-line-name{ font-weight:600; color:var(--navy-deep); text-decoration:none; font-size:16px; }
.cart-line-name:hover{ text-decoration:underline; }
.cart-line-unit{ font-size:13.5px; color:#6b7280; margin:4px 0 6px; }
.cart-line-total{ font-weight:700; text-align:right; color:#1e293b; }
.link-btn{
    border:none;
    background:none;
    padding:0;
    font:inherit;
    font-size:13px;
    color:#b42318;
    cursor:pointer;
}
.link-btn:hover{ text-decoration:underline; }
.cart-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding-top:18px;
    border-top:1px solid rgba(33,59,84,0.1);
}
.cart-actions .text-link{ margin-top:0; }
.btn-sm{ padding:9px 20px !important; font-size:14px; cursor:pointer; background:#fff; font-family:inherit; }
.btn-block{ display:block; width:100%; margin-top:18px; cursor:pointer; font:inherit; font-weight:600; }

.order-summary{ position:sticky; top:100px; }
.sum-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:10px 0;
    font-size:15px;
    color:#3c5068;
}
.sum-row.discount{ color:#15803d; }
.sum-row.muted span:last-child{ color:#6b7280; font-size:13.5px; }
.sum-row.total{
    margin-top:6px;
    padding-top:16px;
    border-top:1px solid rgba(33,59,84,0.12);
    font-size:18px;
    font-weight:700;
    color:var(--navy-deep);
}
.sum-row.total small{ font-size:12px; font-weight:500; color:#6b7280; }
.inline-form{ display:inline; margin-left:6px; }
.coupon-form{ display:flex; gap:8px; margin:8px 0; }
.coupon-form input{
    flex:1;
    min-width:0;
    padding:9px 12px;
    border-radius:8px;
    border:1.5px solid rgba(33,59,84,0.2);
    font:inherit;
    text-transform:uppercase;
}
.summary-note{
    display:flex;
    gap:8px;
    align-items:flex-start;
    margin-top:16px;
    font-family:'Montserrat', sans-serif;
    font-size:13px;
    line-height:1.6;
    color:#6b7280;
}
.summary-note a{ color:var(--navy); font-weight:600; }

.form-row{ margin-bottom:18px; border:none; }
.form-row label,
.form-row legend{
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--navy-deep);
    margin-bottom:7px;
}
.form-row input,
.form-row textarea{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1.5px solid rgba(33,59,84,0.2);
    background:#fff;
    color:var(--navy-deep);
    font:inherit;
    font-size:15px;
    transition:border-color .2s, box-shadow .2s;
}
.form-row input:focus,
.form-row textarea:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(255,235,123,0.6); }
.form-row [aria-invalid="true"]{ border-color:#e0523f; }
.form-2col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.req{ color:#e0523f; }
.opt{ font-weight:400; color:#6b7280; font-size:13px; }
.field-error{ color:#b42318; font-size:13px; margin-top:6px; }
.area-choice{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0; }
.area-choice legend{ grid-column:1 / -1; }
.radio-card{
    display:flex !important;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:12px;
    border:1.5px solid rgba(33,59,84,0.2);
    cursor:pointer;
    font-weight:400 !important;
    margin:0 !important;
}
.radio-card input{ width:auto; accent-color:var(--navy); }
.radio-card span{ display:flex; flex-direction:column; }
.radio-card strong{ color:var(--navy-deep); }
.radio-card small{ color:#6b7280; font-size:13px; }
.radio-card:has(input:checked){ border-color:var(--navy); background:var(--cream); }
.payment-box{
    display:flex;
    gap:14px;
    align-items:center;
    padding:16px;
    border-radius:12px;
    background:var(--cream);
    color:var(--navy-deep);
}
.payment-box i{ font-size:22px; }
.payment-box span{ display:block; font-size:13.5px; color:#4b5f76; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.mini-line{
    display:grid;
    grid-template-columns:48px 1fr auto;
    gap:12px;
    align-items:center;
    padding:8px 0;
    font-size:14px;
    color:#3c5068;
}
.mini-line.no-img{ grid-template-columns:1fr auto; }
.mini-line img{ width:48px; height:48px; border-radius:8px; object-fit:cover; background:#eef1f5; }
.mini-name small{ color:#6b7280; }
.mini-line + .sum-row{ margin-top:8px; border-top:1px solid rgba(33,59,84,0.1); padding-top:14px; }
.next-steps{ padding-left:20px; display:grid; gap:14px; font-family:'Montserrat', sans-serif; color:#3c5068; line-height:1.7; }
.next-steps strong{ color:var(--navy-deep); }
.cta-row{ margin-top:24px; }
.ship-to{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(33,59,84,0.12); font-size:14px; color:#3c5068; line-height:1.6; }
.ship-to strong{ display:block; color:var(--navy-deep); margin-bottom:4px; }

/* ---------- Store responsive ---------- */
@media (max-width:900px){
    .pd-wrap{ grid-template-columns:1fr; gap:32px; }
    .pd-gallery{ position:static; }
    .checkout-grid{ grid-template-columns:1fr; }
    .order-summary{ position:static; }
}
@media (max-width:768px){
    .site-flash-stack{ top:84px; }
    .page-hero.compact{ padding:104px 4.6% 18px; }
    .page-hero.compact-title{ padding:112px 4.6% 34px; }
    .page-hero.compact-title h1{ font-size:30px; }
    .product-detail{ padding:24px 4.6% 50px; }
    .pd-info h1{ font-size:34px; }
    .pd-price .selling-price{ font-size:28px; }
    .pd-details{ padding:44px 4.6% 50px; }
    .panel{ padding:22px 18px; }
    .shop-toolbar{ flex-direction:column; align-items:stretch; }
    .category-chips{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
    .chip{ white-space:nowrap; }
}
@media (max-width:560px){
    .pd-buy .add-to-cart{ width:142px; }
    .pd-buy .pd-buy-now{ flex-basis:100%; }
    .form-2col,
    .area-choice{ grid-template-columns:1fr; }
    .cart-line{ grid-template-columns:64px 1fr; gap:12px; }
    .cart-line-img{ width:64px; height:64px; }
    .cart-line .qty-stepper{ grid-column:2; justify-self:start; }
    .cart-line-total{ grid-column:2; text-align:left; }
}

/* ==========================================================
   CUSTOMER ACCOUNTS — sign in / register / code, My account,
   order tracking, wishlist hearts
   ========================================================== */
.site-flash.inline{ margin:0 0 16px; }

/* ---------- Auth pages ---------- */
.auth-section{
    background:#f4f4f4;
    padding:130px 4.6% 90px;          /* clears the fixed navbar */
    color:var(--navy);
    display:flex;
    justify-content:center;
}
.auth-panel{
    width:100%;
    max-width:440px;
    background:#fff;
    border-radius:20px;
    padding:36px 32px 30px;
    box-shadow:0 12px 34px rgba(22,41,59,0.08);
    text-align:center;
}
.auth-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:60px; height:60px; margin-bottom:14px;
    border-radius:50%;
    background:var(--primary);
    color:var(--navy-deep);
    font-size:24px;
}
.auth-panel h1{
    font-family:'League Spartan', sans-serif;
    font-size:30px;
    color:var(--navy-deep);
    margin-bottom:8px;
}
.auth-lead{ font-family:'Montserrat', sans-serif; font-size:15px; line-height:1.6; color:#4b5f76; margin-bottom:22px; }
.auth-lead strong{ color:var(--navy-deep); }
.auth-form{ text-align:left; }
.auth-form .btn-block{ margin-top:6px; }
.auth-switch{ margin-top:22px; font-size:14px; color:#4b5f76; }
.auth-foot{ margin-top:10px; font-size:13px; color:#6b7280; }
.auth-foot.small{ margin:0 0 14px; }
.auth-switch a, .auth-foot a, .signin-hint a, .check-line a{ color:var(--navy); font-weight:600; }

.check-line{
    display:flex; align-items:flex-start; gap:10px;
    margin:4px 0 16px;
    font-size:14px; line-height:1.5; color:#3c5068; cursor:pointer;
}
.check-line input{ width:18px; height:18px; margin-top:1px; flex:none; accent-color:var(--navy); }
.check-line + .field-error{ margin:-10px 0 14px; }
.field-help{ font-size:13px; color:#6b7280; margin-top:7px; }

.form-row select{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1.5px solid rgba(33,59,84,0.2);
    background:#fff;
    color:var(--navy-deep);
    font:inherit; font-size:15px;
}
.form-row select:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(255,235,123,0.6); }
.form-row input[readonly]{ background:#f4f6f9; color:#4b5f76; }

.otp-input{
    text-align:center;
    font-size:28px !important;
    font-weight:700;
    letter-spacing:12px;
    padding:14px 10px 14px 22px !important;
    font-variant-numeric:tabular-nums;
}
.otp-input::placeholder{ color:rgba(33,59,84,0.25); }

.resend-row{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px;
    margin-top:20px; font-size:14px; color:#6b7280;
}
.resend-row a{ color:var(--navy); font-weight:600; }
.link-btn{
    background:none; border:0; padding:0;
    font:inherit; font-weight:600; color:var(--navy);
    cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.link-btn:disabled{ color:#9aa5b1; cursor:not-allowed; text-decoration:none; }
.link-btn:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:4px; }

.signin-hint{
    display:flex; gap:10px; align-items:flex-start;
    margin:4px 0 18px; padding:12px 14px;
    background:var(--cream); border-radius:10px;
    font-size:14px; line-height:1.5; color:#3c5068;
}
.signin-hint i{ margin-top:3px; color:var(--navy); }

/* ---------- My account ---------- */
.account-grid{
    max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:24px; align-items:start;
}
.account-side{ display:flex; flex-direction:column; gap:24px; }
.panel-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; }
.panel-head .panel-title{ margin-bottom:0; }
.panel-sub{ font-size:14px; color:#6b7280; margin:-8px 0 16px; }
.panel-title.spaced{ margin-top:30px; }
.link-arrow{ color:var(--navy); font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; }
.link-arrow i{ font-size:12px; margin-left:4px; transition:transform .2s; }
.link-arrow:hover i{ transform:translateX(3px); }

.order-list{ list-style:none; margin:10px 0 0; padding:0; }
.order-list li + li{ border-top:1px solid rgba(33,59,84,0.08); }
.order-row{
    display:grid; grid-template-columns:minmax(0,1fr) auto auto 14px; gap:16px; align-items:center;
    padding:16px 6px; color:var(--navy-deep); text-decoration:none; border-radius:10px;
    transition:background .15s;
}
.order-row:hover{ background:#f8f9fb; }
.order-main strong{ display:block; font-size:15px; }
.order-main small{ color:#6b7280; font-size:13px; }
.order-total{ font-weight:700; white-space:nowrap; }
.order-row > i{ color:#9aa5b1; font-size:12px; }

.status-pill{
    display:inline-block; padding:3px 12px; border-radius:999px;
    font-size:12px; font-weight:700; white-space:nowrap; line-height:1.6;
    background:#e2e8f0; color:#475569;
}
.status-pill.st-pending{ background:#fef3c7; color:#92400e; }
.status-pill.st-confirmed{ background:#dbeafe; color:#1d4ed8; }
.status-pill.st-processing{ background:#ede9fe; color:#6d28d9; }
.status-pill.st-shipped{ background:#cffafe; color:#0e7490; }
.status-pill.st-delivered{ background:#dcfce7; color:#15803d; }
.status-pill.st-cancelled{ background:#fee2e2; color:#b91c1c; }
.page-hero .status-pill{ vertical-align:middle; }

.empty-state.small{ padding:30px 10px; }
.empty-state.small p{ max-width:360px; margin-left:auto; margin-right:auto; }

.account-links{ display:flex; flex-direction:column; padding:10px 18px; }
.account-links > a, .account-links .link-btn{
    display:flex; align-items:center; gap:12px;
    padding:14px 4px; font-weight:600; font-size:15px;
    color:var(--navy-deep); text-decoration:none;
}
.account-links > a + a, .account-links form{ border-top:1px solid rgba(33,59,84,0.08); }
.account-links i{ width:18px; text-align:center; color:var(--navy); }
.account-links .link-btn{ width:100%; text-decoration:none; color:#b42318; }
.account-links .link-btn i{ color:#b42318; }
.count-pill{
    margin-left:auto; min-width:26px; padding:0 8px;
    background:var(--primary); color:var(--navy-deep);
    border-radius:999px; font-size:12px; line-height:22px; text-align:center;
}
.crumb{ margin-bottom:6px; font-size:14px; }
.crumb a{ color:var(--accent); text-decoration:none; font-weight:600; }

.account-cta{
    display:flex; gap:14px; align-items:flex-start;
    margin-top:24px; padding:16px 18px;
    background:var(--cream); border:1px solid #f5e08a; border-radius:12px;
}
.account-cta > i{ font-size:20px; color:var(--navy); margin-top:3px; }
.account-cta p{ font-size:14px; color:#3c5068; margin:4px 0 8px; line-height:1.5; }

/* ---------- Order tracking ---------- */
.track-steps{
    list-style:none; margin:14px 0 18px; padding:0;
    display:flex;                     /* flex (not grid) so older phone browsers render it too */
}
.track-steps li{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:0 3px; }
.track-steps li::before{
    content:''; position:absolute; top:19px; right:50%; width:100%; height:3px;
    background:#e2e8f0; z-index:0;
}
.track-steps li:first-child::before{ display:none; }
.track-steps li.done::before, .track-steps li.current::before{ background:var(--navy); }
.track-dot{
    position:relative; z-index:1;
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#e2e8f0; color:#94a3b8; font-size:15px;
}
.track-steps li.done .track-dot{ background:var(--navy); color:#fff; }
.track-steps li.current .track-dot{ background:var(--accent); color:var(--navy-deep); box-shadow:0 0 0 5px rgba(255,235,123,0.45); }
.track-text strong{ display:block; font-size:13px; color:var(--navy-deep); }
.track-steps li.todo .track-text strong{ color:#94a3b8; font-weight:500; }
.track-text small{ display:block; font-size:11px; color:#6b7280; margin-top:2px; }
.mini-line .mini-name a{ color:var(--navy-deep); font-weight:600; }

/* ---------- Wishlist hearts ---------- */
.product-card{ position:relative; }
.wish-form{ margin:0; }
.wish-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:0; cursor:pointer; font:inherit;
    color:var(--navy); background:transparent;
    transition:transform .15s, color .15s, background .15s;
}
.wish-btn i{ font-size:17px; }
.wish-btn.on{ color:#e0523f; }
.wish-btn:active i{ transform:scale(1.25); }
.wish-btn:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.wish-form.on-card{ position:absolute; top:12px; right:12px; z-index:2; }
.wish-form.on-card .wish-btn{
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,0.92); box-shadow:0 2px 8px rgba(22,41,59,0.12);
}
.wish-form.on-card .wish-btn:hover{ background:#fff; transform:scale(1.08); }
.wish-form.pd-wish{ margin:14px 0 4px; }
.wish-form.pd-wish .wish-btn{ padding:6px 0; font-weight:600; font-size:15px; }
.wish-form.pd-wish .wish-btn:hover .wish-label{ text-decoration:underline; text-underline-offset:3px; }

.nav-icons .account-link.signed-in{ color:var(--accent); }

@media (max-width:900px){
    .account-grid{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:560px){
    .auth-section{ padding:108px 16px 60px; }
    .auth-panel{ padding:28px 20px 24px; border-radius:16px; }
    .auth-panel h1{ font-size:26px; }
    .order-row{ grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; }
    .order-row .status-pill{ grid-column:1; justify-self:start; }
    .order-row > i{ display:none; }
    .track-steps{ flex-direction:column; }
    .track-steps li{ flex:none; flex-direction:row; align-items:center; text-align:left; gap:14px; min-height:40px; margin-bottom:18px; padding:0; }
    .track-steps li::before{ top:-38px; left:18px; right:auto; width:3px; height:38px; }
    .track-text small{ display:inline; margin-left:6px; }
    .wish-form.on-card{ top:8px; right:8px; }
    .wish-form.on-card .wish-btn{ width:34px; height:34px; }
}

/* ---------- Auth pages: logo, Google button, perks ---------- */
.auth-logo{
    display:block;
    height:auto; width:150px; max-width:60%;
    margin:0 auto 18px;
}
.auth-icon.success{ background:#dcfce7; color:#15803d; }
.auth-panel .auth-icon.success{ margin-bottom:14px; }

.btn-google{
    display:flex; align-items:center; justify-content:center;
    width:100%; min-height:52px; padding:12px 18px;
    background:#fff; color:var(--navy-deep);
    border:1.5px solid rgba(33,59,84,0.22); border-radius:12px;
    font-family:'Montserrat', sans-serif; font-size:15px; font-weight:600;
    text-decoration:none; cursor:pointer;
    transition:border-color .18s, box-shadow .18s, transform .18s;
}
.btn-google:hover{ border-color:var(--navy); box-shadow:0 6px 18px rgba(22,41,59,0.10); transform:translateY(-1px); color:var(--navy-deep); }
.btn-google:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }
.btn-google svg{ flex:none; margin-right:12px; }   /* margin, not gap — works on older phone browsers */

.auth-divider{
    display:flex; align-items:center; gap:14px;
    margin:20px 0 18px;
    font-size:13px; color:#8a97a6; text-transform:lowercase;
}
.auth-divider::before, .auth-divider::after{
    content:''; flex:1; height:1px; background:rgba(33,59,84,0.14);
}

.auth-perks{
    list-style:none; margin:0 0 20px; padding:0;
    display:flex; flex-wrap:wrap; justify-content:center;
    font-size:13px; color:#4b5f76;
}
.auth-perks li{ display:inline-flex; align-items:center; margin:4px 8px; }
.auth-perks i{ color:var(--navy); font-size:12px; margin-right:6px; }

.auth-note{
    display:flex; align-items:center; justify-content:center;
    margin:14px 0 0; font-size:12.5px; color:#8a97a6;
}
.auth-note i{ color:var(--navy); opacity:.75; margin-right:7px; }

@media (max-width:560px){
    .auth-logo{ width:126px; margin-bottom:14px; }
    .btn-google{ font-size:14.5px; min-height:48px; }
}

/* ==========================================================
   SIGN-IN / SIGN-UP POPUP (assets/js/auth-modal.js)
   ========================================================== */
body.am-open{ overflow:hidden; }
.am-overlay{
    position:fixed; top:0; right:0; bottom:0; left:0;
    z-index:2000;
    display:flex; align-items:center; justify-content:center;
    padding:20px 16px;
    background:rgba(11,22,34,0.62);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    overflow-y:auto;
    animation:amFade .18s ease;
}
.am-overlay[hidden]{ display:none; }
@keyframes amFade{ from{opacity:0} to{opacity:1} }

.am-box{
    position:relative;
    width:100%; max-width:400px;
    margin:auto;
    background:#fff;
    border-radius:18px;
    padding:30px 28px 26px;
    box-shadow:0 24px 60px rgba(8,18,30,0.30);
    animation:amRise .22s ease;
    color:#16293B;
    font-family:'Montserrat', sans-serif;
}
@keyframes amRise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

.am-close{
    position:absolute; top:10px; right:12px;
    width:34px; height:34px;
    border:0; background:transparent;
    font-size:26px; line-height:1; color:#94a3b8;
    cursor:pointer; border-radius:50%;
}
.am-close:hover{ background:#f1f5f9; color:#16293B; }
.am-close:focus-visible{ outline:2px solid #213B54; outline-offset:2px; }

.am-logo{ display:block; height:auto; width:120px; margin:0 auto 16px; }

.am-box h2{
    font-family:'League Spartan', sans-serif;
    font-size:24px; text-align:center; color:#16293B; margin:0 0 6px;
}
.am-sub{ text-align:center; font-size:14px; line-height:1.5; color:#5b7085; margin:0 0 20px; }
.am-sub strong{ color:#16293B; }

.am-field{ margin-bottom:14px; text-align:left; }
.am-field label{ display:block; font-size:13px; font-weight:600; color:#213B54; margin-bottom:6px; }
.am-opt{ font-weight:400; color:#8494a3; }
.am-field input, .am-field textarea{
    width:100%; padding:11px 13px;
    font:inherit; font-size:15px; color:#16293B;
    background:#fff; border:1.5px solid rgba(33,59,84,0.18); border-radius:10px;
    transition:border-color .15s, box-shadow .15s;
}
.am-field textarea{ resize:vertical; min-height:56px; }
.am-field input:focus, .am-field textarea:focus{
    outline:none; border-color:#213B54; box-shadow:0 0 0 3px rgba(255,235,123,0.55);
}
.am-field input[aria-invalid="true"], .am-field textarea[aria-invalid="true"]{
    border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,0.10);
}
.am-hint{ font-size:12px; color:#8494a3; margin:6px 0 0; }
.am-hint a{ color:#213B54; font-weight:600; text-decoration:none; }
.am-hint a:hover{ text-decoration:underline; }
.am-error{ font-size:12px; color:#c0392b; font-weight:500; margin:6px 0 0; }

.am-primary{
    display:block; width:100%; margin-top:6px;
    padding:13px 16px;
    font:inherit; font-size:15px; font-weight:700;
    color:#FFEB7B; background:#213B54;
    border:0; border-radius:10px; cursor:pointer;
    transition:background .15s, transform .08s;
}
.am-primary:hover{ background:#16293B; }
.am-primary:active{ transform:translateY(1px); }
.am-primary:disabled{ opacity:.7; cursor:progress; }
.am-primary:focus-visible{ outline:2px solid #213B54; outline-offset:3px; }

.am-divider{
    display:flex; align-items:center;
    margin:16px 0 14px;
    font-size:12px; color:#9aa8b6;
}
.am-divider::before, .am-divider::after{ content:""; flex:1; height:1px; background:rgba(33,59,84,0.14); }
.am-divider::before{ margin-right:12px; }
.am-divider::after{ margin-left:12px; }

.am-google{
    display:flex; align-items:center; justify-content:center;
    width:100%; padding:11px 16px;
    font-size:14.5px; font-weight:600; color:#16293B; text-decoration:none;
    background:#fff; border:1.5px solid rgba(33,59,84,0.18); border-radius:10px;
    transition:border-color .15s, background .15s;
}
.am-google:hover{ border-color:#213B54; background:#FFF9D6; }
.am-g-icon{ display:inline-flex; margin-right:10px; }
.am-google .g{ width:18px; height:18px; display:block; }

.am-switch{ margin:18px 0 0; text-align:center; font-size:14px; color:#5b7085; }
.am-switch a{ color:#213B54; font-weight:700; text-decoration:none; }
.am-switch a:hover{ text-decoration:underline; }

.am-notice{
    margin:0 0 16px; padding:11px 13px;
    border-radius:10px; font-size:13.5px; line-height:1.5; border:1.5px solid;
}
.am-notice-error{ background:#fdecea; border-color:#f3b8b2; color:#8c2018; }
.am-notice-success{ background:#e8f6ed; border-color:#a8d9bb; color:#1b5e33; }

@media (max-width:480px){
    .am-overlay{ padding:0; align-items:flex-end; }
    .am-box{ max-width:none; border-radius:18px 18px 0 0; padding:26px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
    .am-logo{ width:104px; }
    .am-box h2{ font-size:21px; }
}

/* ==========================================================
   PRODUCT CARD — image, category, name, stars, price + Add
   (overrides the older centred card further up this file)
   ========================================================== */
.product-card{
    display:flex; flex-direction:column;
    background:#fff;
    border:1px solid rgba(33,59,84,0.10);
    border-radius:14px;
    padding:10px 10px 12px;
    text-align:left;
    box-shadow:0 2px 10px rgba(22,41,59,0.05);
    transition:transform .2s, box-shadow .2s, border-color .2s;
}
.product-card:hover{
    transform:translateY(-4px);
    border-color:rgba(33,59,84,0.18);
    box-shadow:0 14px 28px rgba(22,41,59,0.10);
}
.product-card .product-link{ display:block; text-decoration:none; }
.product-card .product-image{
    position:relative;                  /* padding-top square: works on old phones too */
    width:100%; height:0; padding-top:100%;
    background:#f3f5f8;
    border-radius:10px; overflow:hidden;
    margin-bottom:10px;
}
.product-card .product-image img{
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    object-fit:cover;                   /* fills the square neatly */
    display:block;
    transition:transform .25s;
}
.product-card:hover .product-image img{ transform:scale(1.05); }

.product-card .card-body{ display:flex; flex-direction:column; flex:1; }
.product-card .card-cat{
    display:block;
    font-family:'Montserrat', sans-serif;
    font-size:11.5px; font-weight:500; color:#8a97a6;
    margin-bottom:3px;
}
.product-card .card-title{ text-decoration:none; }
.product-card h3{
    font-family:'Poppins', sans-serif;
    font-size:15px; font-weight:600; line-height:1.3;
    color:var(--navy-deep);
    margin:0 0 6px;
    text-align:left;
}
.product-card .card-title:hover h3{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; }

.product-card .rating{
    display:flex; align-items:center; justify-content:flex-start;
    margin-bottom:9px; min-height:16px;
}
.product-card .rating i{ color:#F5C518; font-size:12px; margin-right:1px; }
.product-card .rating i.fa-regular{ color:#d7dde4; }
.product-card .rating .rating-value{
    font-family:'Montserrat', sans-serif;
    font-size:12.5px; color:#8a97a6; margin-left:6px;
}

.product-card .card-foot{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:nowrap;
    margin-top:auto; padding-top:2px;
    min-height:42px;
}
.product-card .price-block{
    display:flex; flex-direction:column; align-items:flex-start;
    justify-content:center; margin:0; min-width:0;
}
.product-card .price-block .selling-price{
    font-family:'League Spartan', sans-serif;
    font-size:20px; font-weight:700; color:var(--navy);
    line-height:1.1;
}
.product-card .price-block .regular-price{
    font-family:'Montserrat', sans-serif;
    font-size:12px; color:#9aa8b6; text-decoration:line-through;
    margin:1px 0 0;                      /* sits under the current price */
}
.product-card .price-block .discount-badge{      /* corner ribbon on the photo */
    position:absolute; top:9px; left:9px; z-index:2;
    font-family:'Montserrat', sans-serif;
    font-size:11px; font-weight:700; color:var(--navy-deep);
    background:var(--accent); border-radius:999px;
    padding:3px 9px;
    box-shadow:0 2px 6px rgba(22,41,59,0.15);
}
.product-card .card-cart-form{ margin:0; }
.product-card .stock-out-label{
    font-family:'Montserrat', sans-serif;
    font-size:12.5px; font-weight:600; color:#b42318;
    background:#fee2e2; border-radius:999px; padding:6px 12px;
}

/* The animated Add button is drawn at a fixed 142px geometry (its icon and
   check use pixel offsets), so shrink it with a transform, never with width. */
.product-card .card-cart-form{
    width:100px; height:42px;          /* 142 * .70 */
    display:flex; justify-content:flex-end; align-items:center;
    flex:none;
}
.product-card .add-to-cart{
    margin:0;
    flex:0 0 142px; width:142px; max-width:none;   /* must stay 142px: the icon uses fixed offsets */
    transform:scale(.70);
    transform-origin:100% 50%;
}

@media (max-width:620px){
    /* two per row on phones instead of one huge card */
    .featured-content, .all-products-grid, .shop-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px;
    }
    .product-card .card-foot{ flex-wrap:wrap; min-height:0; }
    .product-card .card-cart-form{ width:100%; height:38px; justify-content:center; margin-top:8px; }
    .product-card .add-to-cart{ transform:scale(.66); transform-origin:50% 50%; }
    .product-card .card-cat{ font-size:11px; }
    .product-card .rating i{ font-size:11px; }
}
@media (max-width:560px){
    .product-card{ padding:9px 9px 11px; border-radius:12px; }
    .product-card h3{ font-size:14px; }
    .product-card .price-block .selling-price{ font-size:18px; }
    .product-card .price-block .selling-price{ font-size:17px; }
}

/* dots under the mobile promises slider */
.service-dots{
    display:none;
    justify-content:center;
    margin-top:10px;
}
.service-dots button{
    width:7px; height:7px; padding:0; margin:0 4px;
    border:0; border-radius:50%;
    background:rgba(1,25,105,0.22);
    cursor:pointer;
    transition:background .2s, width .2s;
}
.service-dots button.on{ width:18px; border-radius:999px; background:var(--navy); }
@media (max-width:768px){
    .service-dots{ display:flex; }
}