/* ============================================================================
   AKS3689 Online Shopping — Custom Storefront CSS  (merged, refreshed 2026-10-27)
   ----------------------------------------------------------------------------
   Goal: modern, professional look & feel. Same functionality, same layout,
   same category auto-scroll (forward / reverse button), same footer.
   Brand palette kept: forest green + gold (from the AKS logo).
   ----------------------------------------------------------------------------
   PART A  Brand tokens
   PART B  Preserved FUNCTIONAL rules (announcement marquee, category
           auto-scroll, reverse button, category card sizing, misc)  — keep!
   PART C  New look & feel (colours, spacing, cards, headings, buttons...)
   ============================================================================ */

/* ============================================================================
   PART A — BRAND TOKENS
   ============================================================================ */
:root {
  --aks-green:        #1c7a4b;   /* refined primary (replaces harsh #008000) */
  --aks-green-dark:   #15603a;   /* hover / pressed                          */
  --aks-forest:       #244030;   /* deep forest (footer, announcement)       */
  --aks-forest-2:     #2f5440;   /* gradient partner for forest              */
  --aks-gold:         #c79a3a;   /* accent from the gold logo                */
  --aks-gold-soft:    #f3ead2;   /* soft gold wash for tags                  */
  --aks-ink:          #1a2b22;   /* primary text                             */
  --aks-muted:        #6b7b73;   /* secondary text                           */
  --aks-bg:           #f5f8f6;   /* page background (soft, not stark white)  */
  --aks-line:         #e7ece9;   /* hairline borders                         */
  --aks-shadow:       0 1px 2px rgba(16,40,28,.05), 0 6px 18px rgba(16,40,28,.07);
  --aks-shadow-hover: 0 4px 10px rgba(16,40,28,.08), 0 14px 32px rgba(16,40,28,.13);
  --aks-radius:       14px;
}

/* Soft page background so white cards gain depth */
body,
.page-container {
  background-color: var(--aks-bg) !important;
}
/* ...but the footer has its own .page-container child — keep it transparent so
   the forest-green footer shows through and the white text stays readable. */
#footer .page-container {
  background-color: transparent !important;
}

/* ============================================================================
   PART B — PRESERVED FUNCTIONAL RULES  (do not remove: the HTML/script needs
   these class names for the marquee + category auto-scroll + reverse button)
   ============================================================================ */

/* ---- Base theme carry-overs ---- */
.pr-outlined-button,
.pr-plus-minus-button { background-color: #f2f6f4 !important; }

#footer { background-color: var(--aks-forest) !important; color: #fff !important; }
.three-col-footer__heading { color: inherit !important; }
#sh-footer-git svg { color: #fff !important; }
.vertical-soc-cont .sh-social-icon { background-color: #fff !important; }
.vertical-soc-cont .sh-social-icon img { filter: invert(1); }

.app-bar { background-color: #fff !important; color: #000 !important; }
.app-bar-main svg { color: #000 !important; }
.search-container:before { background-color: #000 !important; }
.search-field .search-input { color: #000 !important; }

#sh-footer-git-payment { display: none !important; }

/* ---- 1. Announcement bar (marquee) ---- */
#notice,
.notice {
  padding: 13px 20px !important;
  overflow: hidden;
}
.aks-ann { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.aks-ann-row { display: flex; align-items: center; gap: 10px; width: 100%; overflow: hidden; }
.aks-ann-label { font-weight: 700; white-space: nowrap; flex: 0 0 auto; }
.aks-ann-track { flex: 1 1 auto; overflow: hidden; position: relative; }
.aks-ann-msg {
  display: inline-block; white-space: nowrap; padding-left: 100%;
  font-weight: 600;
  animation: aksSlide 14s linear infinite;
}
.aks-ann-track:hover .aks-ann-msg { animation-play-state: paused; }
@keyframes aksSlide { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.aks-ann-greet { display: flex; align-items: center; gap: 6px; font-size: .9em; font-weight: 600; opacity: .95; }
.aks-ann-ico { font-size: 1.15em; line-height: 1; }

/* ---- 2. Browse categories — auto scroll ---- */
.cat-section.cat-section-boxed,
.cat-section { position: relative; }
.cat-section.aks-cat-host { display: block !important; flex-wrap: nowrap !important; }
.aks-cat-viewport { overflow: hidden; width: 100%; position: relative; }
.aks-cat-track {
  display: flex; width: max-content; gap: 14px;
  animation: aksCatMove 40s linear infinite; will-change: transform;
}
.aks-cat-track.aks-rev   { animation-direction: reverse; }
.aks-cat-track.aks-pause { animation-play-state: paused; }
.aks-cat-track:hover     { animation-play-state: paused; }
.aks-cat-track .cat-card { flex: 0 0 auto; }
@keyframes aksCatMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- 3. Category cards — uniform square image ---- */
.cat-card { width: 120px !important; }
.cat-card-img-container,
.cat-card-img-root {
  width: 100px !important; height: 100px !important;
  margin-left: auto !important; margin-right: auto !important;
}
.cat-card-img { width: 100px !important; height: 100px !important; object-fit: cover !important; }

/* ============================================================================
   PART C — LOOK & FEEL REFRESH
   ============================================================================ */

/* ---- Relaxed section rhythm (was a cramped 3px) ---- */
.section { padding: 10px 14px !important; }
.section-spacing { margin-top: 8px; margin-bottom: 8px; }

/* ----------------------------------------------------------------------------
   HEADER — clean white bar with a soft lift + nicer search field
   ---------------------------------------------------------------------------- */
.app-bar,
.navbar {
  box-shadow: 0 1px 0 var(--aks-line), 0 4px 14px rgba(16,40,28,.05) !important;
}
.sh-header-search-box,
.search-container {
  border: 1px solid var(--aks-line) !important;
  border-radius: 10px !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.sh-header-search-box:focus-within,
.search-container:focus-within {
  border-color: var(--aks-green) !important;
  box-shadow: 0 0 0 3px rgba(28,122,75,.14) !important;
}

/* ----------------------------------------------------------------------------
   BANNER — rounded, framed, softly shadowed
   ---------------------------------------------------------------------------- */
.banner-root,
.banner {
  border-radius: var(--aks-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--aks-shadow) !important;
}

/* ----------------------------------------------------------------------------
   SECTION HEADINGS — stronger hierarchy with a brand accent underline
   ("Shop Here", "All products", category heading)
   ---------------------------------------------------------------------------- */
.aks-shop-heading,
.section-heading,
.sh-section-heading,
.section-heading-container h2 {
  color: var(--aks-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}
.aks-shop-heading,
.section-heading {
  font-size: 23px !important;
  position: relative;
  display: inline-block;
  padding-bottom: 10px !important;
}
/* gold-to-green accent bar under the heading text */
.aks-shop-heading::after,
.section-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--aks-green), var(--aks-gold));
}
.section-heading-container,
.sh-section-heading { align-items: center; }

/* ----------------------------------------------------------------------------
   PRODUCT CARDS — depth, hover lift, clearer price hierarchy
   ---------------------------------------------------------------------------- */
.sh-product-card {
  border: 1px solid var(--aks-line) !important;
  border-radius: var(--aks-radius) !important;
  box-shadow: var(--aks-shadow) !important;
  background: #fff !important;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sh-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--aks-shadow-hover) !important;
  border-color: #d7e5dd !important;
}
.sh-product-img {
  border-radius: 10px !important;
  background: #f4f7f5 !important;
  overflow: hidden;
}
.sh-product-card-name {
  color: var(--aks-ink) !important;
  font-weight: 600 !important;
}
.sh-product-card-price {
  color: var(--aks-green) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
}
.sh-product-card-mrp,
.pr-mrp-price {
  color: var(--aks-muted) !important;
  font-weight: 500 !important;
}
/* Discount chip — soft gold wash, reads as a highlight */
.sh-product-card-discount-tag,
.pr-discount {
  background: var(--aks-gold-soft) !important;
  color: #8a6a1f !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  letter-spacing: .01em;
}

/* ----------------------------------------------------------------------------
   BUTTONS — unified brand green, rounded, with hover feedback
   ---------------------------------------------------------------------------- */
.sh-solid-button,
.solid-button__btn,
.universal-btn-style {
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.sh-home-page-prod-section .sh-solid-button,
.solid-button__btn {
  background-color: var(--aks-green) !important;
  color: #fff !important;
  border-color: var(--aks-green) !important;
  box-shadow: 0 6px 16px rgba(28,122,75,.22) !important;
}
.sh-home-page-prod-section .sh-solid-button:hover,
.solid-button__btn:hover {
  background-color: var(--aks-green-dark) !important;
  transform: translateY(-1px);
}

/* Quantity +/- + enquiry / add buttons */
.pr-plus-minus-button {
  background-color: var(--aks-green) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
.pr-plus-minus-button:hover { background-color: var(--aks-green-dark) !important; }
.pr-outlined-button {
  background-color: #f2f6f4 !important;
  color: var(--aks-green-dark) !important;
  border: 1px solid #cfe2d8 !important;
  border-radius: 8px !important;
}
.pr-outlined-button:hover { background-color: #e7f1ec !important; }

/* Cart badge */
.badge,
.sh-header-cart-badge {
  background-color: var(--aks-green) !important;
  color: #fff !important;
}

/* Wishlist heart hover */
.header-wishlist:hover,
.sh-product-card svg:hover { color: var(--aks-green) !important; }

/* ----------------------------------------------------------------------------
   CATEGORY SECTION — cleaner cards + modern reverse button
   (scroll behaviour unchanged; only visuals)
   ---------------------------------------------------------------------------- */
.cat-card {
  padding: 10px 8px !important;
  border-radius: 14px !important;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.cat-card:hover {
  transform: translateY(-3px);
  background: #fff !important;
  box-shadow: var(--aks-shadow) !important;
}
.cat-card-img-container,
.cat-card-img-root {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(16,40,28,.10) !important;
  background: #fff !important;
}
/* drop the dated hard text-shadow; clean, clamped, centered title */
.cat-card-title {
  text-align: center;
  text-shadow: none !important;
  color: var(--aks-ink) !important;
  font-weight: 600 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  min-height: 2.6em;
  margin-top: 8px;
}

/* Modern frosted brand pill for the forward/reverse toggle */
.aks-rev-btn {
  /*position: absolute;*/
  top: 6px;
  right: 8px;
  z-index: 30;
  background: linear-gradient(135deg, var(--aks-green), var(--aks-forest));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(28,122,75,.30);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.aks-rev-btn:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(28,122,75,.38); }
.aks-rev-btn:active { transform: scale(.95); }

/* ----------------------------------------------------------------------------
   PAY USING — refined label + cards
   ---------------------------------------------------------------------------- */
.pay-section { padding: 6px 0 !important; }
.pay-label {
  color: var(--aks-ink) !important;
  font-weight: 800 !important;
}
.pay-method-card {
  border: 1px solid var(--aks-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--aks-shadow) !important;
  background: #fff !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pay-method-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--aks-shadow-hover) !important;
}

/* ----------------------------------------------------------------------------
   ANNOUNCEMENT BAR — refined forest-green gradient (keeps marquee)
   ---------------------------------------------------------------------------- */
#notice,
.notice {
  background: linear-gradient(90deg, var(--aks-forest), var(--aks-forest-2)) !important;
  color: #fff !important;
}
.aks-ann-label { color: var(--aks-gold) !important; }

/* ----------------------------------------------------------------------------
   FOOTER — keep forest base; polish links + spacing
   ---------------------------------------------------------------------------- */
#footer { padding: 46px 60px !important; }
.three-col-footer__heading {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}
.three-col-footer__link,
.sh-footer-link {
  color: rgba(255,255,255,.82) !important;
  transition: color .15s ease, opacity .15s ease;
}
.three-col-footer__link:hover,
.sh-footer-link:hover { color: var(--aks-gold) !important; opacity: 1 !important; }

/* Copyright strip sits in its own .page-container OUTSIDE #footer, so it picked
   up the light page tint and hid its white text. Extend the forest-green onto
   that strip so it reads as one footer, and keep the text light. */
.page-container:has(> .copyright-cont) {
  background-color: var(--aks-forest) !important;
}
.copyright-cont,
.copyright-cont *,
.three-col-footer__rights {
  color: rgba(255,255,255,.75) !important;
}

/* ----------------------------------------------------------------------------
   MOBILE — tighten spacing so the refresh holds on phones
   ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .aks-shop-heading,
  .section-heading { font-size: 19px !important; }
  #footer { padding: 34px 20px !important; }
  .banner-root,
  .banner { border-radius: 10px !important; }
}
.aks-ann-label {
       font-size: x-large !important;
    color:#fff !important;
}
.aks-ann-track {
        font-size: 15px!important;
}
.aks-ann-greet {
        font-size: 1.3em !important;
}
.aks-ann-ico {
    font-size: 2.20em !important;
}
/* Desktop */
.aks-ann-label {
    font-size: x-large !important;
    color: #fff !important;
}

.aks-ann-track {
    font-size: 15px !important;
}

.aks-ann-greet {
    font-size: 1.3em !important;
}

.aks-ann-ico {
    font-size: 2.20em !important;
}

/* Tablet */
@media screen and (max-width: 768px) {
    .aks-ann-label {
        font-size: 18px !important;
    }

    .aks-ann-track {
        font-size: 13px !important;
    }

    .aks-ann-greet {
        font-size: 1.1em !important;
    }

    .aks-ann-ico {
        font-size: 1.8em !important;
    }
}

/* Mobile */
@media screen and (max-width: 480px) {
    .aks-ann-label {
        font-size: 16px !important;
    }

    .aks-ann-track {
        font-size: 11px !important;
    }

    .aks-ann-greet {
        font-size: 1em !important;
    }

    .aks-ann-ico {
        font-size: 1.4em !important;
    }
}