/* ===================================================================
   Modern design pass — product cards + hero section.
   Loaded after main.css (and after header-footer-responsive.css) so
   these rules win. Targets shared classes (.product-card etc.) that
   every homepage slider (Feature Product, Deal of the Day, Best
   Seller, Children Books) already uses, so one set of rules updates
   all of them at once.
=================================================================== */

/* ===================== PRODUCT CARDS ===================== */

/* Equal-height cards everywhere: make every slide stretch to the
   tallest one in its row, then lay the card out as a column so the
   button always sits at the bottom regardless of title/price length. */
.sb-slick-slider .slick-track {
  display: flex !important;
}

.sb-slick-slider .slick-slide {
  height: auto !important;
}

.sb-slick-slider .slick-slide > div {
  height: 100%;
}

.sb-slick-slider .single-slide,
.carousel-cell .product-card {
  height: 100%;
}

.product-card {
  position: relative;
  border: none !important;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.1), 0 1px 2px rgba(17, 24, 39, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.product-card .product-card--body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* WhatsApp/Pinterest brand colors for the shared .social circle system
   (facebook/youtube/instagram/linkedin already defined in main.css) --
   used by the footer, off-canvas menu, and the homepage "Share:" rows,
   which used to be plain colored glyphs with no background, hand-set
   per icon (style="color:blue" etc.) identically in ~7 places. */
.social.whatsapp {
  background-color: #25D366;
}
.social.whatsapp:hover {
  color: #25D366;
  background-color: #ffffff;
}
.social.pinterest {
  background-color: #E60023;
}
.social.pinterest:hover {
  color: #E60023;
  background-color: #ffffff;
}

/* The homepage "Share:" row is compact and inline with a text label,
   so the default 34px circle is too heavy here -- scale it down. */
.cart-block-24.social {
  width: 26px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  margin-left: 4px;
}

/* Mobile sticky "Add to Cart" bar on the product page: hidden by
   default everywhere (including desktop, where the real buy row is
   always in view so a sticky duplicate would just be clutter); shown
   only on phone width once JS adds .is-visible (the real buy row has
   scrolled out of view). */
.pd-sticky-bar {
  display: none;
}

@media (max-width: 767.98px) {
  .pd-sticky-bar.is-visible {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: #fff;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.12);
  }

  .pd-sticky-price {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  .pd-sticky-price-value {
    font-size: 16px;
    font-weight: 800;
    color: #1f2429;
  }

  .pd-sticky-price-old {
    font-size: 12px;
    color: #a7acb5;
  }

  .pd-sticky-bar .pd-btn {
    flex: 0 0 auto;
    padding: 10px 16px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* Mobile off-canvas menu social row: was plain unstyled text-icon
   links (no background, no size) -- now uses the same brand-colored
   circle look as the footer's "FOLLOW US" row (.social + platform
   class), just a touch bigger since it's the only content on that
   line and has room to breathe. */
.off-canvas-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.off-canvas-social .social {
  width: 38px;
  height: 38px;
  line-height: 38px;
  font-size: 16px;
  margin-right: 0;
}

/* Reserve room for 2 lines (price + old-price) even when a given
   product's numbers are short enough to fit on 1 -- otherwise a card
   whose price/MRP happen to wrap taller than a row-mate's ends up
   visibly shorter/taller than cards next to it. */
.product-card .price-block {
  min-height: 52px;
}

/* Used to be margin-top:auto (push the button to the bottom of the
   card, to line up across a row of different-height cards). That kept
   producing an oversized, unpredictable gap above the button -- even
   after the whole-list slick-track stretch was turned off (see
   .sb-slick-slider .slick-track below), some residual leftover flex
   space still got eaten by "auto" every time two cards in a row weren't
   pixel-identical in height. A fixed, small gap is deterministic: the
   button always sits close to the price/rating above it, full stop --
   worth it even though cards in the same row can now end a few px
   apart when their content height genuinely differs. */
.chi1,
.fe1,
.se1 {
  margin-top: 14px !important;
}

.ct_address p,
.contact_adress p {
  text-align: justify;
}

/* Prevent a second, independent scrollbar: the off-canvas mobile menu
   panel sits off-screen (translateX + visibility:hidden) but its inner
   content still had overflow-y:scroll from the theme, which some
   browsers paint as a reserved scrollbar track even while hidden. Kill
   it whenever the panel isn't open. Also stop any stray wide element
   (long unbroken text, a fixed-width table, etc.) from creating a
   horizontal scrollbar that in turn doubles up the vertical one. */
html {
  overflow-x: hidden;
  overflow-y: visible;
}

.off-canvas-wrapper:not(.open) .off-canvas-inner {
  overflow: hidden;
}

.policy-entity-line {
  font-size: 15px;
  color: #5a636b;
  border-left: 3px solid #62ab00;
  padding: 10px 16px;
  background: #f7fbf2;
  margin-bottom: 10px;
}

.policy-highlight-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 10px;
}

.policy-highlight {
  flex: 1 1 260px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
}

.policy-highlight i {
  font-size: 26px;
  color: #62ab00;
  margin-top: 3px;
}

.policy-highlight strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

.policy-highlight span {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.6;
}

.policy-list {
  margin: 0 0 16px;
  padding-left: 20px;
}

.policy-list li {
  margin-bottom: 8px;
  color: #5a636b;
  line-height: 1.6;
}

.footer-list-icons li a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-list-icons li a i {
  width: 16px;
  text-align: center;
  color: #62ab00;
  flex-shrink: 0;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(17, 24, 39, 0.14);
}

.product-card .card-image {
  background: #f4f4f4;
}

.product-card .card-image img.image_size {
  transition: transform 0.5s ease;
}

/* .hover-image is the invisible link that sits on top of the cover so
   clicking the book image opens the detail page. It has no content of
   its own, so give it explicit full-cover sizing — otherwise it collapses
   to 0x0 and the image isn't clickable at all. It also needs its own
   visibility:visible so it stays clickable even before .hover-contents
   (hidden until :hover) appears, which is the only way this works on
   touch devices that never fire a real :hover state. */
.product-card .hover-contents .hover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
  visibility: visible;
}

/* Discount badge (top-right red circle) — content comes from JS,
   which reads the "X%" already printed near the price and stamps it
   onto the cover, one shared rule so every section's cards pick it up
   with no per-section markup changes. */
.product-card .card-image {
  position: relative;
}

.product-card .discount-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e02020;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 3px 8px rgba(224, 32, 32, 0.35);
}


/* ===================== SLIDER PAGER (Page X of Y + prev/next) ===================== */
/* Injected by custom.js next to each section's "View all" button. */

.header-actions {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.slider-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
}

.slider-pager .pager-count {
  font-size: 13px;
  color: #777;
  white-space: nowrap;
}

.slider-pager .pager-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  color: #555;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.slider-pager .pager-btn:hover {
  background: #62ab00;
  border-color: #62ab00;
  color: #fff;
}

@media (max-width: 575.98px) {
  .slider-pager .pager-count {
    font-size: 11.5px;
  }

  .slider-pager .pager-btn {
    width: 26px;
    height: 26px;
  }
}

/* On phone/tablet, browsing is swipe-first — the Page X of Y counter
   and prev/next circles make sense next to a mouse-driven "View all"
   button on desktop, but on touch they're redundant with the swipe
   gesture itself and just crowd a header that should read as
   "<Title>  ...  See All". Keep the header down to that. */
@media (max-width: 767.98px) {
  .slider-pager {
    display: none;
  }
}

/* Scroll-progress bar (mobile only) — a thin track with a shorter dark
   segment showing how far a finger-swiped row has scrolled, standing
   in for the hidden desktop pager/arrows. Built and positioned by
   custom.js from each slider's own slick state. */
.scroll-progress {
  display: none;
}

@media (max-width: 767.98px) {
  .scroll-progress {
    display: block;
    position: relative;
    height: 3px;
    background: #e5e5e5;
    border-radius: 2px;
    margin: 12px 16px 2px;
    overflow: hidden;
  }

  .scroll-progress-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #1f2429;
    border-radius: 2px;
    transition: left 0.3s ease, width 0.3s ease;
  }
}

.product-card:hover .card-image img.image_size {
  transform: scale(1.06);
}

/* Stray old rule squashed cover images at tablet width (height:120px
   with no aspect-ratio) — let the normal 2:3 cover ratio apply here too. */
@media (min-width: 795px) and (max-width: 1024px) {
  .image_size {
    height: auto !important;
  }
}

.product-card .product-header {
  padding: 14px 14px 0;
}

/* A long author name (e.g. "NORMAN VINCENT PEALE") wrapped onto 2-3
   lines with nothing to stop it, which made that one card taller than
   its row-mates — and since .chi1 uses margin-top:auto to keep every
   "VIEW BOOK" button pinned to the same bottom edge, the shorter cards
   in that row then showed an oversized empty gap above their button.
   Force one line + ellipsis so every card's header block is the same
   height regardless of author name length. */
.product-card .author {
  font-size: 12px;
  color: #8a8f98;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card h3 a {
  font-size: 14.5px !important;
  font-weight: 700;
  color: #1f2430;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
}

.product-card .price-block {
  margin-top: 10px !important;
  padding: 0 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-card .price {
  font-size: 18px !important;
  font-weight: 800;
  color: #2f8f00;
}

.product-card .price-old {
  font-size: 13px !important;
  color: #a7acb5;
}

/* Was its own red-circle badge floating near the price/rating — now
   redundant since the cover image carries the discount badge instead
   (built from this same text by custom.js). Kept in the DOM (that JS
   still reads its text) but no longer shown twice. */
.product-card .price-discount {
  display: none;
}

/* ===================== RATING ROW ===================== */

.product-card .rating-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 14px;
  margin-top: 6px;
  margin-bottom: 10px;
  text-decoration: none;
  cursor: pointer;
}

.product-card .rating-row .stars {
  color: #f5a623;
  font-size: 12px;
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}

.product-card .rating-row .rating-count {
  font-size: 11.5px;
  color: #8a8f98;
}

/* Quick-action hover icons (wishlist / compare / quick view) */
.product-card .hover-btns .single-btn {
  background: #fff;
  border-color: #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: #62ab00;
}

.product-card .hover-btns .single-btn:hover {
  background: #62ab00;
  border-color: #62ab00;
  color: #fff;
}

/* CTA button ("VIEW BOOK" / "ADD TO CART"): the old markup centered
   a fixed 190px-wide button with a different negative margin-left
   at every breakpoint (8+ media queries), and mixed an orange button
   with a clashing green icon box. Replace with simple flex centering
   and one consistent color. */
.chi1,
.fe1,
.se1,
.deal1 {
  margin-left: 0 !important;
  display: flex;
  justify-content: center;
  padding: 0 14px 16px;
}

.chi_button,
.fe_button,
.se_button,
.deal_button {
  width: 100% !important;
  max-width: 210px;
  margin-left: 0 !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #62ab00 !important;
  border-radius: 24px !important;
  padding: 10px 18px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.chi_button:hover,
.fe_button:hover,
.se_button:hover,
.deal_button:hover {
  background: #4f8c00 !important;
  transform: translateY(-2px);
}

.chi_icon,
.fe_icon,
.se_icon,
.deal_icon {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
}

.chi_heading,
.fe_heading,
.se_heading,
.deal_heading {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  /* Narrow mobile cards (2-up) were squeezing "VIEW BOOK" onto two
     lines — nowrap alone isn't enough there since the button itself
     shrinks with the card; drop the font a notch and tighten the
     side padding so the full label fits on one line. */
  .chi_heading,
  .fe_heading,
  .se_heading,
  .deal_heading {
    font-size: 11.5px !important;
  }

  .chi_button,
  .fe_button,
  .se_button,
  .deal_button {
    padding: 9px 10px;
    gap: 6px;
  }
}

/* ===================== HERO SECTION (magazine grid) ===================== */

.hero-grid-wrap {
  padding: 0 15px 6px;
}

.hero-strip {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

.hero-strip img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-main-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.hero-main-carousel {
  flex: 0 0 66.5%;
  max-width: 66.5%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1276 / 465;
  background: #f4f4f4;
}

.hero-main-carousel .single-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-side-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-side-panel {
  flex: 1;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  min-height: 0;
}

.hero-side-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.hero-side-panel:hover img {
  transform: scale(1.04);
}

.hero-bottom-row {
  display: flex;
  gap: 10px;
}

.hero-bottom-panel {
  flex: 1;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 641 / 170;
}

.hero-bottom-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.hero-bottom-panel:hover img {
  transform: scale(1.04);
}

/* The hero carousel's own arrows sit right on the panel edge —
   pull them fully inside so they don't fight the site-wide
   .pad-1 gutter rule meant for the product sliders. */
.hero-main-carousel .slick-prev {
  left: 10px;
}

.hero-main-carousel .slick-next {
  right: 10px;
}

.hero-main-carousel .slick-arrow:before {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767.98px) {
  .hero-main-row {
    flex-direction: column;
  }

  .hero-main-carousel {
    max-width: 100%;
    flex: none;
    /* Something (slick's own runtime CSS, not ours) sets a 30px
       margin-bottom on the carousel once slick-dotted is applied,
       leaving a big dead gap above the side panels stacked below it
       on mobile. Force it back to 0 -- the 10px row gap is enough. */
    margin-bottom: 0 !important;
  }

  .hero-side-col {
    flex-direction: row;
  }

  .hero-side-panel {
    aspect-ratio: 641 / 234;
  }

  .hero-bottom-row {
    flex-direction: column;
  }
}

/* ===================== CATEGORY PROMO STRIP ===================== */

/* Grid with auto-fit so any tile count (1, 2, 3, ...) lays out
   sensibly on its own: 1 tile fills the row, 2 split it in half, 3
   (the normal case, positions 5/6/7 all filled) sit evenly in one
   row -- no odd-one-out wrapping to its own row underneath. */
.category-promo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 10px 15px 0;
  box-sizing: border-box;
}

.category-promo-panel {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 501 / 301;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.1);
}

.category-promo-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.category-promo-panel:hover img {
  transform: scale(1.04);
}

@media (max-width: 767.98px) {
  .category-promo-row {
    grid-template-columns: 1fr;
  }
}

/* ===================== AWARD-WINNING BANNER ===================== */

.award-banner-row {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 15px 0;
  box-sizing: border-box;
}

.award-banner-row a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
}

.award-banner-row img {
  width: 100%;
  height: auto;
  display: block;
}

/* This banner's source image is very wide/short (built for a full
   desktop row) — scaled to phone width by aspect ratio alone it comes
   out quite thin and the text gets hard to read. Give it a bit more
   presence on mobile by cropping to a taller box instead. */
@media (max-width: 575.98px) {
  .award-banner-row img {
    height: 150px;
    object-fit: cover;
    object-position: left center;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .award-banner-row img {
    height: 190px;
    object-fit: cover;
    object-position: left center;
  }
}

/* ===================== TRUST BADGES (Free Shipping / Money Back / COD / Support) ===================== */

.feature-box {
  border: none !important;
  background: #fff;
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  position: relative;
  overflow: hidden;
}

.feature-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(98, 171, 0, 0.16);
  background: #fbfdf7;
}

.feature-box .icon {
  margin-right: 0;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, #7bc900, #4f8c00);
  color: #fff;
  font-size: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(98, 171, 0, 0.28);
  transition: transform 0.3s ease;
}

.feature-box:hover .icon {
  transform: rotate(-8deg) scale(1.08);
}

.feature-box .text h5 {
  font-size: 15px;
  font-weight: 700;
  color: #1f2429;
  margin: 0 0 3px;
}

.feature-box .text p {
  font-size: 12.5px;
  color: #8a8f94;
  margin: 0;
}

/* Vertical gap between rows on tablet/phone (2 cards per row — see
   the col-6 added alongside col-md-6 in the markup) — the row only
   ever had a horizontal gutter, so the two rows touched edge-to-edge
   with zero breathing room between them. Only the bottom row (the
   last 2 of the 4 cards) should skip the gap. */
@media (max-width: 991.98px) {
  .feature-box {
    margin-bottom: 16px;
  }

  .trust-badges-row > div:nth-last-child(-n+2) .feature-box {
    margin-bottom: 0;
  }
}

/* At 2-per-row width (col-6), side-by-side icon+text was too tight —
   long labels like "Money Back Guarantee" wrapped awkwardly and threw
   each card's text out of vertical alignment with its neighbor.
   Stack icon above text, centered, instead. */
@media (max-width: 767.98px) {
  .feature-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 12px;
    gap: 10px;
  }

  .feature-box .icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    font-size: 18px;
    border-radius: 13px;
    margin: 0 auto;
  }

  .feature-box .text h5 {
    font-size: 13.5px;
    line-height: 1.3;
  }

  .feature-box .text p {
    font-size: 11.5px;
  }
}

/* The mobile account-flyout JS (code.js) toggles a .force-open class on
   .account-dropdown-panel to reveal it on tap, since touch devices don't
   reliably trigger the :hover CSS main.css otherwise depends on
   (.cart-block:hover .cart-dropdown-block { opacity:1; ... }). That JS
   was shipped without this matching CSS rule, so adding the class had
   no visible effect at all -- the actual bug behind "mobile login popup
   still doesn't open". */
.cart-dropdown-block.force-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ===================== HEADER ICON GROUP (Wishlist / Login / Cart) ===================== */

.header-icon-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  flex-wrap: nowrap;
}

.header-icon-group .cart-widget {
  margin: 0 !important;
}

.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #62ab00 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.cart-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  width: 22px;
}

.cart-count {
  position: absolute;
  top: -9px;
  right: -11px;
  background: #d92d20;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1.5px solid #fff;
}

.cart-label {
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
}

@media (max-width: 1300px) {
  .header-icon-group {
    gap: 14px;
  }

  .cart-label {
    display: none;
  }
}

/* ===================== ACCOUNT DROPDOWN (hover panel) ===================== */
/* Reuses the same .cart-block / .cart-dropdown-block hover mechanism
   already used for the "My Cart" preview right next to it, so hovering
   the account icon opens a compact panel instead of jumping straight
   to the login modal — same interaction, just different content. */

.account-widget .cart-link {
  color: #62ab00 !important;
}

.account-dropdown-panel {
  width: 280px;
  padding: 20px 22px;
  text-align: center;
}

/* The base .cart-dropdown-block sits flush (top:100%) and right-aligns
   to its own trigger box — fine for the wide cart icon, but the
   account icon's box is narrow, so right:0 dragged the panel left,
   off-center from "Login" and flush against the nav bar below with no
   breathing room. Center it under the icon instead, with a small gap. */
.account-widget .cart-dropdown-block {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 12px;
}

.account-widget .cart-dropdown-block:before,
.account-widget .cart-dropdown-block:after {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.account-panel-login-btn {
  display: block;
  width: 100%;
  margin-bottom: 12px;
}

/* .btn--primary:hover turns dark grey (#333) site-wide, which is fine
   for buttons the cursor passes over on its way somewhere else, but
   this button sits directly under the icon that opens the panel — the
   cursor lands right on it, so it needs its own on-brand hover color
   instead of going black. */
.account-panel-login-btn:hover {
  background: #4d8c00 !important;
  color: #fff !important;
}

.account-panel-signup {
  font-size: 13px;
  color: #666;
  margin-bottom: 14px;
}

.account-panel-signup a {
  color: #62ab00;
  font-weight: 700;
}

.account-panel-greet {
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
  text-align: left;
}

.account-panel-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 10px 0 0;
  border-top: 1px solid #ececec;
}

.account-panel-list li {
  border-bottom: 1px solid #f2f2f2;
}

.account-panel-list li:last-child {
  border-bottom: 0;
}

.account-panel-list li a {
  display: block;
  padding: 9px 0;
  font-size: 13.5px;
  color: #555;
}

.account-panel-list li a:hover {
  color: #62ab00;
}

.account-panel-logout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 4px;
  font-size: 13.5px;
  color: #555;
}

.account-panel-logout:hover {
  color: #62ab00;
}

.account-panel-currency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #ececec;
  font-size: 12.5px;
  color: #777;
}

.account-panel-currency-value {
  font-weight: 700;
  color: #333;
}

/* ===================== HEADER CATEGORY NAV (professional style) ===================== */

.site-header .header-bottom.header-top-strip.bg-primary {
  background: #fff !important;
}

.site-header .header-bottom .main-menu > .menu-item > a {
  color: #222 !important;
  text-transform: none;
  font-weight: 500;
  font-size: 15px;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* First item ("Books") reads as the bar's anchor label, bold like the
   reference, the rest stay regular weight. */
.site-header .header-bottom .main-menu > .menu-item:first-child > a {
  font-weight: 700;
}

.site-header .header-bottom .main-menu > .menu-item > a img {
  display: none;
}

/* Only items that actually open a submenu get the caret — this used
   to target every .menu-item unconditionally, which is why plain
   links with no dropdown behind them (Books, Fiction, Manga, Today's
   Deal, ...) were showing an arrow that led nowhere. */
.site-header .header-bottom .main-menu > .menu-item.has-children > a:after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 11px;
  margin-left: 6px;
  color: #888;
}

.site-header .header-bottom .main-menu > .menu-item:hover > a,
.site-header .header-bottom .main-menu > .menu-item:hover > a:after {
  color: #62ab00 !important;
}

.site-header .header-bottom .category-nav.white-nav .category-trigger {
  color: #222 !important;
  font-weight: 600;
}

/* ===================== PRODUCT DETAILS PAGE ===================== */

/* Simple, non-slick gallery: a plain vertical thumbnail column next
   to the main image, swapped via a small click handler in custom.js.
   Slick's "vertical: true" mode needs an explicit pixel height on its
   container to lay slides out correctly — without one it silently
   fell back to unpredictable sizing, which was the cause of both the
   oversized main image and the large blank gaps reported below it. */
.pd-gallery {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 26px;
  box-sizing: border-box;
}

.pd-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 72px;
  width: 72px;
  max-height: 460px;
  overflow-y: auto;
  align-self: flex-start;
}

.pd-gallery-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: zoom-in;
}

/* Small magnifier badge hinting the cover is tappable/clickable to view
   larger -- fades in on hover for mouse users, always visible on touch
   (no hover state there) so the affordance isn't hidden. */
.pd-zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(31, 36, 41, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.pd-gallery-main:hover .pd-zoom-hint {
  opacity: 1;
}

@media (hover: none) {
  .pd-zoom-hint {
    opacity: 1;
  }
}

.pd-image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(17, 20, 24, 0.92);
  align-items: center;
  justify-content: center;
  padding: 30px;
  cursor: zoom-out;
}

.pd-image-lightbox.is-open {
  display: flex;
}

.pd-image-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
}

.pd-image-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.pd-image-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* No fixed aspect-ratio box here — book covers vary in proportion, and
   forcing one letterboxed the image inside a grey frame that didn't
   match the actual artwork, which combined with the row stretching
   this column to match the (taller) info card on the right, showed up
   as a large mismatched empty grey area. Let the image size itself
   naturally and just cap how big it can get. */
.pd-main-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 440px;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}

.pd-thumb-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s ease;
  background: #f4f4f4;
}

.pd-thumb-image.active,
.pd-thumb-image:hover {
  border-color: #62ab00;
}

@media (max-width: 767.98px) {
  .pd-gallery {
    flex-direction: column-reverse;
  }

  .pd-gallery-thumbs {
    flex-direction: row;
    width: 100%;
    max-height: none;
    overflow-x: auto;
  }

  .pd-gallery-thumbs .pd-thumb-image {
    flex: 0 0 64px;
    width: 64px;
  }

  .pd-gallery-main {
    max-width: 100%;
  }

  .pd-main-image {
    max-height: 360px;
  }
}

/* Quick-specs strip (Language / Publisher / Weight / Dimension) */
.pd-quickspecs-strip {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 18px 24px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.pd-quickspecs {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 26px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pd-quickspecs::-webkit-scrollbar {
  display: none;
}

.pd-quickspecs-scroll {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  color: #555;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pd-quickspecs-scroll:hover {
  background: #62ab00;
  border-color: #62ab00;
  color: #fff;
}

.pd-quickspec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 90px;
  flex: 0 0 auto;
}

.pd-quickspec-item i {
  font-size: 18px;
  color: #62ab00;
  margin-bottom: 2px;
}

.pd-quickspec-label {
  font-size: 11.5px;
  color: #8a8f98;
}

.pd-quickspec-item strong {
  font-size: 13px;
  color: #1f2429;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-quickspecs-more {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: #62ab00;
  text-decoration: underline;
  white-space: nowrap;
}

/* About the Book (with read more/less) */
.pd-about-strip {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 22px 24px;
  margin-bottom: 16px;
}

.pd-about-strip h4 {
  font-size: 16px;
  font-weight: 800;
  color: #1f2429;
  margin: 0 0 12px;
}

.pd-about-text {
  font-size: 13.5px;
  color: #555;
  line-height: 1.8;
  margin: 0;
  position: relative;
}

.pd-about-text.pd-clamped {
  max-height: 5.4em;
  overflow: hidden;
}

.pd-about-text.pd-clamped::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.8em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%);
  pointer-events: none;
}

.pd-about-toggle {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #62ab00;
  cursor: pointer;
}

/* Trust badges strip */
.pd-trust-strip {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 16px 24px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.pd-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-width: 90px;
}

.pd-trust-item i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fdecea;
  color: #e02020;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.pd-trust-item span {
  font-size: 11.5px;
  font-weight: 600;
  color: #555;
}

@media (max-width: 767.98px) {
  .pd-quickspecs-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Touch already scrolls this row directly — the arrow buttons are a
     mouse-hover affordance that doesn't add much on a phone, and
     stacking them full-width in the column layout looked odd. */
  .pd-quickspecs-scroll {
    display: none;
  }

  .pd-quickspecs {
    gap: 18px;
  }

  .pd-quickspec-item {
    min-width: 70px;
  }

  .pd-quickspecs-more {
    align-self: flex-end;
  }

  .pd-trust-strip {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .pd-trust-item {
    flex: 0 0 auto;
  }
}

.pd-info-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 28px 30px;
  height: 100%;
}

.pd-title {
  font-size: 24px;
  font-weight: 800;
  color: #1f2429;
  margin: 0 0 6px;
  line-height: 1.3;
}

.pd-byline {
  font-size: 13.5px;
  color: #777;
  margin-bottom: 10px;
}

.pd-byline a {
  color: #555;
  text-decoration: underline;
}

.pd-info-card .rating-row {
  justify-content: flex-start;
  padding: 0;
  margin: 0 0 18px;
}

/* Click-to-open rating popover (real review counts, not the old
   placeholder count the .rating-row partial used to show on its own) */
.pd-rating-trigger {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
}

.pd-rating-trigger .rating-row {
  cursor: pointer;
  margin: 0;
}

.pd-rating-trigger .rating-row .stars i {
  color: #f5a623;
}

.pd-rating-popover {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 20;
  width: 280px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.14);
  padding: 16px 18px;
}

.pd-rating-trigger.pd-open .pd-rating-popover {
  display: block;
}

.pd-rating-popover-arrow {
  position: absolute;
  top: -7px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #eee;
  border-top: 1px solid #eee;
  transform: rotate(45deg);
}

.pd-rating-popover .pd-snapshot-row {
  cursor: default;
  padding: 3px 0;
}

.pd-rating-popover .pd-snapshot-row:hover {
  background: transparent;
}

.pd-rating-popover-btn {
  display: block;
  text-align: center;
  margin-top: 12px;
  background: #d9822b;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  padding: 10px;
  border-radius: 8px;
}

.pd-rating-popover-btn:hover {
  background: #c07220;
}

.pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid #f0f0f0;
}

.pd-price {
  font-size: 30px;
  font-weight: 800;
  color: #2f8f00;
}

.pd-price-old {
  font-size: 16px;
  color: #a7acb5;
}

.pd-discount-pill {
  background: #fdecea;
  color: #e02020;
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.pd-tax-note {
  font-size: 12px;
  color: #8a8f98;
  margin: 4px 0 20px;
}

.pd-buy-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.pd-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pd-qty label {
  margin: 0;
  font-weight: 700;
  font-size: 13.5px;
  color: #333;
}

.pd-qty select {
  width: 70px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.pd-btn {
  border-radius: 24px !important;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  border: 2px solid #62ab00;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pd-btn-outline {
  background: #fff;
  color: #62ab00 !important;
}

.pd-btn-outline:hover {
  background: #eef7e2;
  color: #4f8c00 !important;
}

.pd-btn-solid {
  background: #62ab00;
  color: #fff !important;
}

.pd-btn-solid:hover {
  background: #4f8c00;
  border-color: #4f8c00;
  color: #fff !important;
}

.pd-delivery-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 18px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.pd-delivery-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #555;
  font-weight: 600;
}

.pd-delivery-item i {
  color: #62ab00;
  font-size: 18px;
}

.pd-print-on-demand {
  display: inline-block;
  font-size: 12.5px;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 20px;
}

.pd-side-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.pd-panel {
  background: #fff;
  border: 1px solid #e3e6e1;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: none;
}

.pd-panel-title {
  font-weight: 700;
  font-size: 13.5px;
  color: #1f2429;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf0ea;
}

.pd-panel-title i {
  color: #62ab00;
  margin-right: 6px;
}

.pd-pincode-box {
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-bottom: 8px;
  gap: 10px;
}

.pd-pincode-box input {
  flex: 1 1 auto;
  border: 0;
  padding: 0;
  font-size: 13px;
  min-width: 0;
  color: #1f2429;
  font-weight: 500;
  background: transparent;
}

.pd-pincode-box input::placeholder {
  color: #9aa0a6;
  font-weight: 400;
}

.pd-pincode-box input:focus {
  outline: none;
}

.pd-pincode-box button {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: #62ab00;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 0;
  transition: color .15s ease;
}

.pd-pincode-box button:hover {
  color: #4f8c00;
}

.pd-panel small {
  color: #8a8f98;
  font-size: 11.5px;
  line-height: 1.4;
}

.pd-offer-text {
  font-size: 12.5px;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

.pd-share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.pd-share-row span {
  font-weight: 700;
  font-size: 13px;
  color: #333;
}

.pd-share-row a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f4f6f4;
  color: #555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.pd-share-row a:hover {
  background: #62ab00;
  color: #fff;
}

.pd-share-row a.share-facebook:hover {
  background: #1877F2;
}

.pd-share-row a.share-whatsapp:hover {
  background: #25D366;
}

.pd-share-row a.share-instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.pd-share-row a.share-pinterest:hover {
  background: #E60023;
}

/* Description / Specifications / Reviews tabs */
.pd-tabs-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 6px 30px 30px;
}

.pd-tabs-card .nav-tabs {
  border-bottom: 1px solid #eee;
}

.pd-tabs-card .nav-link {
  border: 0 !important;
  font-weight: 700;
  font-size: 13.5px;
  color: #8a8f98;
  padding: 18px 4px;
  margin-right: 28px;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
}

.pd-tabs-card .nav-link.active {
  color: #1f2429 !important;
  border-bottom: 2px solid #62ab00 !important;
}

.pd-description {
  font-size: 14px;
  color: #555;
  line-height: 1.8;
  margin: 22px 0 26px;
}

.pd-spec-heading {
  font-size: 15px;
  font-weight: 800;
  color: #1f2429;
  margin-bottom: 14px;
}

.pd-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 24px;
}

.pd-spec-grid-2col {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 60px;
}

.pd-spec-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #eee;
}

.pd-spec-label {
  color: #8a8f98;
  font-weight: 600;
}

/* ===== Site-satisfaction strip (above the review summary) ===== */
.pd-satisfaction-strip {
  text-align: center;
  padding: 22px 16px 26px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.pd-satisfaction-question {
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  color: #c94b4b;
  margin-bottom: 18px;
}

.pd-satisfaction-scale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 420px;
  margin: 0 auto;
}

.pd-satisfaction-scale label {
  flex: 1;
  position: relative;
  height: 1px;
  background: #d8dcd5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pd-satisfaction-scale label:first-child {
  flex: 0 0 0;
}

.pd-satisfaction-scale input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.pd-satisfaction-scale span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #b7bdb2;
  background: #fff;
  display: block;
  flex: 0 0 auto;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.pd-satisfaction-scale input:checked + span {
  border-color: #62ab00;
  background: #62ab00;
}

.pd-satisfaction-labels {
  display: flex;
  justify-content: space-between;
  max-width: 420px;
  margin: 8px auto 0;
  font-size: 13px;
  color: #1f2429;
}

.pd-satisfaction-labels span:nth-child(2) {
  color: #2764c9;
}

/* ===== Review summary / snapshot ===== */
.pd-review-summary-bar {
  background: #f8faf6;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
}

.pd-review-summary-score {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #333;
}

.pd-review-summary-score strong {
  font-size: 18px;
  color: #1f2429;
}

.pd-review-recommend {
  font-size: 12.5px;
  color: #666;
  margin: 8px 0 0;
}

.pd-review-snapshot-row {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.pd-review-snapshot {
  flex: 1 1 320px;
}

.pd-snapshot-hint {
  font-size: 12px;
  color: #8a8f98;
  margin: -8px 0 12px;
}

.pd-snapshot-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.pd-snapshot-row:hover,
.pd-snapshot-row.pd-snapshot-active {
  background: #eef7e2;
}

.pd-snapshot-star {
  flex: 0 0 32px;
  font-size: 12.5px;
  color: #555;
}

.pd-snapshot-star i {
  color: #f5a623;
  font-size: 10px;
}

.pd-snapshot-track {
  flex: 1 1 auto;
  height: 8px;
  background: #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}

.pd-snapshot-fill {
  display: block;
  height: 100%;
  background: #2f8f00;
  border-radius: 4px;
}

.pd-snapshot-count {
  flex: 0 0 24px;
  text-align: right;
  font-size: 12.5px;
  color: #555;
}

.pd-review-average {
  flex: 0 0 auto;
  text-align: left;
}

.pd-write-review-btn {
  display: inline-block;
  margin-top: 14px;
  background: #62ab00;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: 24px;
  cursor: pointer;
}

.pd-write-review-btn:hover {
  background: #4f8c00;
}

.pd-review-list-header {
  font-weight: 700;
  font-size: 13.5px;
  color: #1f2429;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid #eee;
}

/* ===== Individual review ===== */
.pd-review {
  display: flex;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid #f0f0f0;
}

.pd-review-name-col {
  flex: 0 0 140px;
  font-size: 13.5px;
  color: #1f2429;
}

.pd-review-body-col {
  flex: 1 1 auto;
  min-width: 0;
}

.pd-review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.pd-review-stars {
  color: #f5a623;
  font-size: 13px;
}

.pd-review-date {
  font-size: 12px;
  color: #8a8f98;
}

.pd-review p {
  font-size: 13.5px;
  color: #555;
  margin: 0;
  line-height: 1.6;
}

.pd-no-reviews {
  font-size: 13.5px;
  color: #8a8f98;
  padding: 20px 0;
}

.pd-load-more-wrap {
  text-align: center;
  padding: 18px 0 4px;
}

.pd-load-more-btn {
  display: inline-block;
  border: 1px solid #62ab00;
  color: #62ab00 !important;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 24px;
  border-radius: 22px;
  cursor: pointer;
}

.pd-load-more-btn:hover {
  background: #62ab00;
  color: #fff !important;
}

/* ===== Write-a-review form ===== */
.pd-write-review-form {
  display: none;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.pd-write-review-form.pd-open {
  display: block;
}

.pd-review-posted-msg {
  background: #eef7e2;
  color: #2f8f00;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.pd-star-picker {
  font-size: 22px;
  color: #ddd;
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.pd-star-picker i {
  cursor: pointer;
  transition: color 0.15s ease;
}

.pd-star-picker i.pd-star-filled {
  color: #f5a623;
}

.pd-tabs-card .form-group label {
  font-size: 12.5px;
  font-weight: 700;
  color: #333;
}

.pd-tabs-card .form-control {
  border-radius: 8px;
  border: 1px solid #ddd;
}

@media (max-width: 767.98px) {
  .pd-spec-grid-2col {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pd-review {
    flex-direction: column;
    gap: 6px;
  }

  .pd-review-name-col {
    flex: 0 0 auto;
  }

  .pd-review-average {
    text-align: left;
  }
}

/* ---- Mobile responsive ---- */
@media (max-width: 991.98px) {
  .pd-info-card {
    padding: 22px 20px;
    margin-top: 16px;
  }

  .pd-side-panels {
    grid-template-columns: 1fr;
  }

  .pd-spec-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pd-tabs-card {
    padding: 6px 18px 22px;
    margin-top: 16px;
  }
}

@media (max-width: 575.98px) {
  .pd-title {
    font-size: 19px;
  }

  .pd-price {
    font-size: 24px;
  }

  .pd-buy-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pd-buy-row .pd-qty {
    justify-content: space-between;
  }

  .pd-btn {
    text-align: center;
  }

  .pd-delivery-row {
    gap: 14px 18px;
  }

  .pd-spec-grid {
    grid-template-columns: 1fr;
  }

  .pd-tabs-card .nav-link {
    margin-right: 18px;
    padding: 14px 2px;
  }
}

/* ===================== CART PAGE ===================== */
.cart-items-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 8px 24px;
  margin-bottom: 16px;
}

.cart-items-head {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #ececec;
  font-size: 13px;
  font-weight: 700;
  color: #8a8f98;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cih-product {
  flex: 1 1 auto;
}

.cih-price,
.cih-qty,
.cih-total {
  flex: 0 0 140px;
  text-align: center;
}

.cih-action {
  flex: 0 0 40px;
}

.cart-item-row {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f1f1f1;
  flex-wrap: wrap;
  gap: 10px;
}

.cart-item-row:last-child {
  border-bottom: none;
}

.cir-index {
  flex: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
  color: #9aa0a8;
  align-self: flex-start;
  margin-top: 4px;
}

.cir-product {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
}

.cir-thumb {
  position: relative;
  flex: 0 0 64px;
  width: 64px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee;
  display: block;
}

.cir-thumb .discount-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e02020;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(224, 32, 32, 0.35);
}

.cir-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cir-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cir-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #1f2429;
  line-height: 1.4;
}

.cir-name:hover {
  color: #62ab00;
}

.cir-author {
  font-size: 12.5px;
  color: #8a8f98;
}

.cir-price,
.cir-qty,
.cir-total {
  flex: 0 0 140px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #1f2429;
}

.cir-price-old {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #9aa0a8;
  margin-top: 2px;
}

.cir-total {
  color: #2f8f00;
  font-weight: 800;
}

.cir-action {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cir-wishlist-btn,
.cir-remove-btn {
  display: block;
  text-align: center;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.cir-wishlist-btn {
  background: #62ab00;
  color: #fff !important;
}

.cir-wishlist-btn:hover {
  background: #4f8c00;
}

.cir-remove-btn {
  border: 1px solid #e2b6b6;
  color: #c94b4b !important;
}

.cir-remove-btn:hover {
  background: #fdf1f1;
  color: #a13636 !important;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e2e5e9;
  border-radius: 8px;
  overflow: hidden;
}

.qty-btn {
  border: none;
  background: #f7f8fa;
  width: 30px;
  height: 32px;
  font-size: 16px;
  font-weight: 700;
  color: #444;
  cursor: pointer;
}

.qty-btn:hover {
  background: #eef1f4;
}

.qty-input {
  width: 40px;
  height: 32px;
  border: none;
  border-left: 1px solid #e2e5e9;
  border-right: 1px solid #e2e5e9;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-continue-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1f2429;
}

.cart-continue-link:hover {
  color: #62ab00;
}

.cart-summary-card,
.checkout-summary-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 24px;
}

.cart-summary-card h4,
.checkout-summary-card h4 {
  font-size: 16px;
  font-weight: 800;
  color: #1f2429;
  margin: 0 0 16px;
}

.cs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  color: #555;
  border-bottom: 1px dashed #eee;
}

.cs-free {
  color: #2f8f00;
  font-weight: 700;
}

.cs-discount span:last-child {
  color: #c94b4b;
  font-weight: 700;
}

.coupon-box {
  margin-bottom: 16px;
}

.coupon-form {
  display: flex;
  gap: 8px;
}

.coupon-form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  border: 1px solid #e2e5e9 !important;
  border-radius: 8px;
  padding: 11px 14px !important;
  font-size: 13.5px;
  text-transform: uppercase;
  background: #fbfbfc !important;
  box-sizing: border-box;
}

.coupon-form input[type="text"]:focus {
  outline: none;
  border-color: #62ab00 !important;
  background: #fff !important;
}

.coupon-form button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border: none !important;
  border-radius: 8px;
  padding: 0 20px;
  background: #1f2429 !important;
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.2s ease;
}

.coupon-form button:hover {
  background: #000 !important;
}

.coupon-error-text {
  display: block;
  margin-top: 8px;
  color: #c94b4b;
  font-size: 12px;
  font-weight: 600;
}

.coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f5faee;
  border: 1px solid #cfe8a8;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #3a6b00;
}

.coupon-applied i {
  color: #62ab00;
  margin-right: 4px;
}

.coupon-remove-link {
  color: #c94b4b;
  font-size: 12px;
  font-weight: 700;
}

.coupon-remove-link:hover {
  color: #a13636;
}

.cs-total {
  border-bottom: none;
  padding-top: 14px;
  font-size: 16px;
  font-weight: 800;
  color: #1f2429;
}

.cs-total span:last-child {
  color: #2f8f00;
  font-size: 19px;
}

.cs-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
  padding: 13px 20px;
  border: none;
  border-radius: 10px;
  background: #62ab00;
  color: #fff !important;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cs-checkout-btn:hover {
  background: #4f8c00;
}

.cs-checkout-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.cs-trust {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #ececec;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: #555;
}

.cs-trust > div {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.cs-trust i {
  color: #62ab00;
  width: 18px;
  text-align: center;
  margin-right: 6px;
}

.cart-empty-state {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 70px 20px;
  text-align: center;
}

.cart-empty-state i {
  font-size: 56px;
  color: #d7dbe0;
  margin-bottom: 18px;
}

.cart-empty-state h3 {
  font-size: 20px;
  font-weight: 800;
  color: #1f2429;
  margin-bottom: 8px;
}

.cart-empty-state p {
  color: #8a8f98;
  margin-bottom: 22px;
}

.cart-continue-btn,
.cs-checkout-btn.cart-continue-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 10px;
  background: #62ab00;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
}

.cart-continue-btn:hover {
  background: #4f8c00;
}

/* ===================== CHECKOUT PAGE ===================== */
.checkout-alert {
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
}

.checkout-alert-error {
  background: #fdecec;
  color: #b53434;
  border: 1px solid #f6c8c8;
}

.checkout-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 24px;
  margin-bottom: 20px;
}

.checkout-card-title {
  font-size: 16px;
  font-weight: 800;
  color: #1f2429;
  margin: 0 0 20px;
}

.checkout-card label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #555;
  margin-bottom: 6px;
}

.checkout-card input[type="text"],
.checkout-card input[type="email"],
.checkout-card input[type="password"],
.checkout-card select,
.checkout-card textarea {
  width: 100%;
  height: 46px;
  border: 1px solid #e2e5e9 !important;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13.5px;
  color: #1f2429;
  background: #fbfbfc !important;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.checkout-card textarea {
  height: auto;
}

.checkout-card select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23777' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}

.checkout-card input:focus,
.checkout-card select:focus,
.checkout-card textarea:focus {
  outline: none !important;
  border-color: #62ab00 !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

.ship-different-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1f2429;
  cursor: pointer;
}

.address-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.address-type-option {
  margin: 0;
  cursor: pointer;
}

.address-type-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.address-type-option span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1.5px solid #e2e5e9;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.address-type-option span i {
  font-size: 12px;
  color: #9aa0a8;
}

.address-type-option input:checked + span {
  border-color: #62ab00;
  background: #f5faee;
  color: #3a6b00;
}

.address-type-option input:checked + span i {
  color: #62ab00;
}

.ship-different-check input {
  width: 16px;
  height: 16px;
  accent-color: #62ab00;
}

.payment-method-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-method-option input {
  position: absolute;
  opacity: 0;
}

.pmo-box {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1.5px solid #e2e5e9;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pmo-box i {
  font-size: 20px;
  color: #62ab00;
  width: 24px;
  text-align: center;
}

.pmo-box strong {
  display: block;
  font-size: 14px;
  color: #1f2429;
}

.pmo-box small {
  display: block;
  font-size: 12px;
  color: #8a8f98;
  margin-top: 2px;
}

.payment-method-option input:checked + .pmo-box {
  border-color: #62ab00;
  background: #f5faee;
}

.checkout-summary-items {
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.csi-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f4f4f4;
}

.csi-row img {
  width: 42px;
  height: 56px;
  object-fit: contain;
  border: 1px solid #eee;
  border-radius: 6px;
}

.csi-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.csi-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #1f2429;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.csi-qty {
  font-size: 11.5px;
  color: #8a8f98;
}

.csi-total {
  font-size: 13px;
  font-weight: 700;
  color: #2f8f00;
  flex: 0 0 auto;
}

.checkout-secure-note {
  text-align: center;
  font-size: 12px;
  color: #8a8f98;
  margin: 14px 0 0;
}

.checkout-secure-note i {
  color: #62ab00;
  margin-right: 4px;
}

/* ===================== ORDER COMPLETE PAGE ===================== */
.order-complete-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 40px;
}

.order-complete-message {
  text-align: center;
  margin-bottom: 26px;
}

.order-complete-message i {
  font-size: 56px;
  color: #62ab00;
  margin-bottom: 14px;
}

.order-complete-message h1 {
  font-size: 26px;
  font-weight: 800;
  color: #1f2429;
  margin-bottom: 6px;
}

.order-complete-message p {
  color: #8a8f98;
}

.order-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  background: #f7f8fa;
  border-radius: 12px;
  padding: 18px 24px;
  margin-bottom: 28px;
}

.order-meta-strip > div {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-meta-strip span {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8a8f98;
  font-weight: 700;
}

.order-meta-strip strong {
  font-size: 15px;
  color: #1f2429;
}

.order-table-title {
  font-size: 16px;
  font-weight: 800;
  color: #1f2429;
  margin-bottom: 14px;
}

.order-details-table-wrap {
  overflow-x: auto;
  margin-bottom: 30px;
}

.order-details-table {
  width: 100%;
  border-collapse: collapse;
}

.order-details-table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8a8f98;
  padding: 10px 8px;
  border-bottom: 1px solid #ececec;
}

.order-details-table td {
  padding: 12px 8px;
  font-size: 13.5px;
  color: #1f2429;
  border-bottom: 1px solid #f4f4f4;
}

.odt-product {
  display: flex;
  align-items: center;
  gap: 12px;
}

.odt-product img {
  width: 42px;
  height: 56px;
  object-fit: contain;
  border: 1px solid #eee;
  border-radius: 6px;
}

.odt-product a {
  font-weight: 700;
  color: #1f2429;
}

.odt-grand-total td {
  font-weight: 800;
  font-size: 15px;
  color: #1f2429;
  border-bottom: none;
}

.order-shipping-address {
  background: #f7f8fa;
  border-radius: 12px;
  padding: 18px 24px;
  margin-bottom: 26px;
}

.order-shipping-address h4 {
  font-size: 14px;
  font-weight: 800;
  color: #1f2429;
  margin-bottom: 8px;
}

.order-shipping-address p {
  font-size: 13.5px;
  color: #555;
  line-height: 1.7;
  margin: 0;
}

.order-complete-note {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eef6e0;
  color: #3d6b00;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 26px;
}

.order-complete-note i {
  font-size: 16px;
}

.order-complete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.order-complete-actions .btn {
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
}

.order-complete-actions .btn i {
  margin-right: 6px;
}

@media (max-width: 575.98px) {
  .order-complete-actions {
    flex-direction: column;
  }

  .order-complete-actions .btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 991.98px) {
  .cart-items-head {
    display: none;
  }

  .cir-price::before {
    content: attr(data-label) ": ";
    font-size: 11px;
    color: #8a8f98;
    display: block;
    font-weight: 700;
  }

  .cir-price,
  .cir-qty,
  .cir-total {
    flex: 0 0 auto;
    text-align: left;
  }

  .order-complete-card {
    padding: 24px;
  }
}

@media (max-width: 767.98px) {
  .cart-item-row {
    gap: 10px 18px;
  }

  .cir-product {
    flex: 1 1 100%;
  }

  .cart-summary-card,
  .checkout-summary-card {
    margin-top: 20px;
  }
}

/* ===================== LOGIN / REGISTER MODAL ===================== */
.form-error-text {
  display: block;
  color: #c94b4b;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 10px;
}

.form-success-text {
  display: block;
  color: #2f8f00;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* ===================== CATEGORY LISTING PAGE ===================== */
.category-hero-strip-wrap {
  padding: 0 15px;
  margin-top: 6px;
}

.category-banner {
  background: #f7f5f1;
  padding: 30px 0;
  margin-bottom: 20px;
}

.category-banner h1 {
  font-size: 26px;
  font-weight: 700;
  color: #1f2430;
  margin: 0;
}

/* When an admin uploads a per-category banner image */
.category-banner-has-image {
  position: relative;
  padding: 60px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.category-banner-has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.category-banner-has-image .container {
  position: relative;
  z-index: 1;
}

.category-banner-has-image h1 {
  color: #fff;
}

.category-sidebar {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.1), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 18px;
}

.category-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ececec;
}

.category-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2430;
  margin-bottom: 0;
}

.category-clear-filters {
  font-size: 12px;
  font-weight: 600;
  color: #c94b4b;
}

.category-clear-filters:hover {
  color: #a13636;
}

.category-filter-group {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid #ececec;
}

.category-filter-title {
  font-size: 13px;
  font-weight: 700;
  color: #1f2430;
  margin-bottom: 12px;
}

.category-filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4a4f58;
  padding: 5px 0;
  cursor: pointer;
}

.category-filter-check input {
  margin: 0;
}

.category-filter-apply {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 18px;
}

.category-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-sidebar-list li {
  border-bottom: 1px solid #f2f2f2;
}

.category-sidebar-list li:last-child {
  border-bottom: none;
}

.category-sidebar-list a {
  display: block;
  padding: 9px 4px;
  font-size: 13.5px;
  color: #4a4f58;
  transition: color 0.2s ease;
}

.category-sidebar-list a:hover {
  color: #1f2430;
}

.category-sidebar-list li.active a {
  color: #d9822b;
  font-weight: 700;
}

.category-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.1), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 14px 18px;
  margin-bottom: 20px;
}

.category-result-count {
  font-size: 13.5px;
  color: #6b7280;
}

.category-sort-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-sort-form label {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

.category-sort-form select {
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  color: #1f2430;
}

/* Same "unpredictable oversized gap" issue as .chi1/.fe1/.se1 on the
   homepage (see the note near the top of this file) -- margin-top:auto
   here too, on the category/listing page card's Add to Cart button.
   Fixed margin instead. */
.category-add-cart {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 28px);
  text-align: center;
  margin: 14px 14px 14px;
  padding: 9px 8px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 999px !important;
}

.category-add-cart i {
  font-size: 12.5px;
}

/* 5-up product grid on desktop (category, listing, and author-book
   pages) — Bootstrap's 12-col grid has no native 1/5 class, so this
   is a plain flex-basis override at the lg breakpoint; smaller
   screens keep the normal col-md-4 / col-6 fallback. */
.col-grid-5 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 992px) {
  .col-grid-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

.category-empty {
  background: #fff;
  border-radius: 14px;
  padding: 40px;
  text-align: center;
  color: #6b7280;
}

.category-pagination {
  margin-top: 10px;
}

.category-pagination ul.pagination {
  justify-content: center;
}

.category-load-more-wrap {
  text-align: center;
  margin-top: 10px;
}

.category-load-more-wrap .btn {
  padding: 12px 40px;
}

.category-price-range-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f2430;
  margin-bottom: 14px;
}

#category-price-slider {
  margin: 0 6px 6px;
}

#category-price-slider.ui-slider {
  height: 5px;
  border: none;
  background: #e7e9ec;
  border-radius: 4px;
}

#category-price-slider .ui-slider-range {
  background: #62ab00;
}

#category-price-slider .ui-slider-handle {
  width: 16px;
  height: 16px;
  top: -6px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #62ab00;
  outline: none;
}

.account-forgot-pwd-link {
  display: inline-block;
  margin-top: 8px;
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #62ab00;
  cursor: pointer;
}

.account-forgot-pwd-link:hover {
  color: #4f8c00;
  text-decoration: underline;
}

#forgot-current-pwd-msg {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
}

/* ===================== TRACK ORDER (Amazon-style stepper) ===================== */
.track-order-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 20px 24px;
  margin-bottom: 20px;
}

.track-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid #ececec;
}

.track-order-date {
  display: block;
  font-size: 12.5px;
  color: #8a8f98;
  margin-top: 2px;
}

.track-order-cancelled {
  color: #c94b4b;
  font-weight: 600;
  font-size: 14px;
}

.track-order-cancelled i {
  margin-right: 6px;
}

.track-order-strip {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 10px 10px 4px;
}

.track-order-strip::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 3px;
  background: #e2e5e9;
  z-index: 0;
}

.track-order-strip-fill {
  position: absolute;
  top: 15px;
  left: 0;
  height: 3px;
  background: #62ab00;
  z-index: 0;
  transition: width 0.3s ease;
}

.track-step {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}

.track-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #e2e5e9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  color: transparent;
  font-size: 13px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.track-step.done .track-step-dot {
  background: #62ab00;
  border-color: #62ab00;
  color: #fff;
}

.track-step.current .track-step-dot {
  border-color: #62ab00;
}

.track-step-label {
  display: block;
  font-size: 12px;
  color: #9aa0a8;
}

.track-step.done .track-step-label,
.track-step.current .track-step-label {
  color: #1f2430;
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .track-step-label {
    font-size: 10.5px;
  }
}

/* ===================== MY ACCOUNT — ORDERS & INVOICES (Amazon-style cards) ===================== */
/* Was a raw <table> with a black header row (.myaccount-table, still in
   main.css, now unused) -- replaced with the same card pattern already
   used by Track Order/Addresses on this same page. The action buttons
   below reuse the exact scoping trick from .order-complete-actions
   (main.css's own .btn is 50px-tall/0-50px-padding and was winning over
   Bootstrap's .btn-sm here too, which is why the old buttons looked
   oversized and wrapped badly) instead of inventing new button sizing. */
.myaccount-order-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 20px 24px;
  margin-bottom: 20px;
}

.myaccount-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #ececec;
}

.order-status-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.order-status-badge.is-pending {
  background: #fdf1de;
  color: #b3730a;
}

.order-status-badge.is-processing {
  background: #e3edfb;
  color: #2764c9;
}

.order-status-badge.is-completed {
  background: #eaf5dc;
  color: #4f8c00;
}

.order-status-badge.is-cancelled {
  background: #fbeaea;
  color: #c94b4b;
}

.order-status-badge.is-refunded {
  background: #eef0f2;
  color: #6b7280;
}

.myaccount-order-body {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.myaccount-order-thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  background: #f4f4f4;
}

.myaccount-order-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c2c7cc;
  font-size: 20px;
}

.myaccount-order-summary {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: #1f2429;
}

.myaccount-order-summary em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: #8a8f98;
  margin-top: 2px;
}

.myaccount-order-total {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
  color: #1f2429;
}

.myaccount-order-actions,
.myaccount-invoice-card {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.myaccount-order-actions .btn,
.myaccount-invoice-card .btn {
  padding: 9px 18px;
  min-height: 0;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.myaccount-order-actions form {
  display: inline-flex;
}

@media (max-width: 575.98px) {
  .myaccount-order-card {
    padding: 18px;
  }

  .myaccount-order-actions {
    flex-direction: column;
  }

  .myaccount-order-actions .btn {
    width: 100%;
    text-align: center;
  }
}

.myaccount-invoice-card {
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 18px 24px;
  margin-bottom: 14px;
}

.myaccount-invoice-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (max-width: 575.98px) {
  .myaccount-invoice-card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 12px;
  }
}

/* ===================== SITE TOAST ===================== */
.site-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 100000;
  background: #1f2429;
  color: #fff;
  padding: 13px 22px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.25);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.site-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.site-toast i {
  color: #62ab00;
  margin-right: 6px;
}

/* ===================== MINI CART (header dropdown) ===================== */
.mini-cart-empty {
  padding: 30px 14px;
  text-align: center;
  color: #8a8f98;
  font-size: 13px;
}

.mini-cart-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef6e0;
  color: #62ab00;
  font-size: 22px;
}

.mini-cart-empty p {
  margin: 0;
  font-weight: 600;
  color: #1f2429;
  font-size: 14px;
}

.mini-cart-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-weight: 700;
  color: #1f2429;
  border-top: 1px solid #ececec;
}

/* ===================== QUICK VIEW MODAL ===================== */
.quick-view-modal-content {
  border-radius: 16px;
  border: none;
  padding: 30px;
}

.quick-view-modal-content .close {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  font-size: 26px;
  color: #8a8f98;
  opacity: 1;
}

.quick-view-modal-content .close:hover {
  color: #1f2429;
}

.quick-view-loading {
  padding: 60px 0;
  text-align: center;
  color: #8a8f98;
}

.quick-view-image {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f4f4;
}

.quick-view-image img {
  width: 100%;
  height: auto;
  display: block;
}

.quick-view-title {
  font-size: 20px;
  font-weight: 800;
  color: #1f2430;
  margin: 6px 0 10px;
}

#quickViewBody .price-block {
  margin: 14px 0;
}

#quickViewBody .price {
  font-size: 22px;
}

.quick-view-about {
  font-size: 13.5px;
  line-height: 1.7;
  color: #666;
  margin: 14px 0 0;
}

.quick-view-qty-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.quick-view-qty-row .widget-label {
  font-size: 13px;
  font-weight: 700;
  color: #1f2430;
}

.quick-view-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 16px 0 14px;
}

.quick-view-actions .category-add-cart {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 11px 28px;
}

.quick-view-wishlist-link {
  font-size: 13.5px;
  font-weight: 600;
  color: #555;
}

.quick-view-wishlist-link:hover {
  color: #c94b4b;
}

.quick-view-wishlist-link i {
  color: #c94b4b;
  margin-right: 5px;
}

.quick-view-full-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #62ab00;
}

.quick-view-full-link:hover {
  color: #4f8c00;
}

/* ===================== AUTHOR CARDS ===================== */
.author-card {
  display: block;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.1), 0 1px 2px rgba(17, 24, 39, 0.04);
  padding: 22px 18px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.author-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(17, 24, 39, 0.14);
}

.author-card-photo {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background: #f4f4f4;
  border: 1px solid #eee;
}

.author-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #1f2430;
  margin-bottom: 8px;
}

.author-card-link {
  font-size: 12.5px;
  font-weight: 700;
  color: #62ab00;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ===================== HEADER CATEGORY DROPDOWN ===================== */
/* The "Categories" flyout (desktop, sticky, mobile) was rendering with
   an unexpected solid green fill behind its links once real <li>
   items were added — some inherited theme rule was winning over the
   base white background. Force it back to a plain white panel. */
.category-nav {
  position: relative;
}

.category-nav .category-menu {
  background: #fff !important;
  z-index: 500;
  /* This dropdown holds ~226 category rows and had no height cap.
     Even hidden via visibility (not display:none), its full natural
     height still counted toward the page's scrollable area — adding
     thousands of px of blank scroll below the real footer and showing
     as a second scrollbar. Cap it and let it scroll internally. */
  max-height: 70vh;
  overflow-y: auto;
}

.category-nav .category-menu .cat-item {
  background: transparent !important;
}

.category-nav .category-menu .cat-item > a {
  background: transparent !important;
  color: #333 !important;
}

.category-nav .category-menu .cat-item:hover > a {
  color: #62ab00 !important;
}

/* The flat "Books / Fiction / Non-Fiction / ..." nav bar (ul.main-menu)
   only ever got styling for >=992px (desktop) — the static header
   correctly hides it below that via Bootstrap's d-none/d-lg-block, but
   the scroll-triggered sticky header clone (#hide-sticky-header-m)
   has no such restriction, so on tablet-width screens it appears
   unstyled once scrolled, rendered as a plain list with a stray green
   fill from elsewhere in the cascade. Hide it there too, matching the
   static header's own behavior. */
@media (max-width: 991.98px) {
  #hide-sticky-header-m .main-navigation {
    display: none !important;
  }
}

/* ===================== CHECKOUT FORM ===================== */
.field-optional {
  font-weight: 400;
  color: #9aa0a8;
  font-size: 12px;
}

.checkout-account-note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #8a8f98;
}

/* ===================== AUTH MODAL (Login / Register / Forgot Password) ===================== */
.auth-modal-dialog {
  max-width: 820px;
}

.auth-modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.auth-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 5;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  opacity: 1;
  font-size: 20px;
  line-height: 1;
}

.auth-modal-close:hover {
  background: #ffffff;
}

.auth-modal-layout {
  display: flex;
  align-items: stretch;
  min-height: 520px;
}

.auth-modal-brand {
  flex: 0 0 280px;
  width: 280px;
  padding: 44px 32px;
  background: linear-gradient(160deg, #62ab00 0%, #2e5100 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.auth-modal-logo {
  max-width: 150px;
  padding: 8px 12px;
  margin-bottom: 22px;
  background: #ffffff;
  border-radius: 8px;
}

.auth-modal-tagline {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 28px;
}

.auth-modal-usp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth-modal-usp-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.auth-modal-usp-list i {
  margin-top: 3px;
  font-size: 15px;
  color: #d7f29a;
  flex-shrink: 0;
}

.auth-modal-usp-list strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.auth-modal-usp-list span {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
}

.auth-modal-forms {
  flex: 1 1 auto;
  padding: 44px 40px !important;
  background: #ffffff;
  overflow-y: auto;
  max-height: 640px;
}

.auth-modal-forms .nav-pills .nav-link {
  color: #6a6f78 !important;
  font-weight: 600;
  font-size: 15px !important;
  border-radius: 8px;
  border-bottom: none !important;
  padding: 10px 20px;
}

.auth-modal-forms .nav-pills .nav-link.active {
  background-color: #62ab00 !important;
  color: #ffffff !important;
  border-bottom: none !important;
}

.auth-social-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: #9aa0a8;
  font-size: 12px;
  text-transform: uppercase;
}

.auth-social-divider:before,
.auth-social-divider:after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e6e8eb;
}

.auth-social-btn {
  margin-bottom: 10px;
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2429;
  font-weight: 600;
  font-size: 14px;
  transition: background-color .15s ease, box-shadow .15s ease;
}

.btn-social:hover {
  background: #f7f8f9;
  color: #1f2429;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.btn-social-google i {
  color: #4285F4;
}

.btn-social-facebook i {
  color: #1877F2;
}

@media (max-width: 767.98px) {
  .auth-modal-content {
    max-height: 90vh;
  }

  .auth-modal-layout {
    flex-direction: column;
    min-height: 0;
    max-height: 90vh;
  }

  .auth-modal-brand {
    flex: 0 0 auto;
    width: 100%;
    padding: 16px 20px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .auth-modal-logo {
    max-width: 90px;
    margin-bottom: 0;
  }

  .auth-modal-tagline,
  .auth-modal-usp-list {
    display: none;
  }

  .auth-modal-forms {
    padding: 24px 20px !important;
    max-height: none;
    overflow-y: auto;
    flex: 1 1 auto;
  }
}

/* ===================== CAREERS PAGE ===================== */
.career-page {
  padding-top: 30px;
}

.career-hero {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.career-hero h1 {
  font-size: 28px;
  font-weight: 800;
  color: #1f2429;
  margin-bottom: 12px;
}

.career-hero p {
  color: #5a636b;
  font-size: 14.5px;
  line-height: 1.6;
}

.career-alert {
  max-width: 720px;
  margin: 0 auto 24px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13.5px;
}

.career-alert.alert-success {
  background: #eef6e0;
  color: #3d6b00;
  border: 1px solid #cfe6a3;
}

.career-alert.alert-danger {
  background: #fdecec;
  color: #a33;
  border: 1px solid #f3c2c2;
}

.career-section-title {
  font-size: 20px;
  font-weight: 700;
  color: #1f2429;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef1ec;
}

.career-vacancy-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 50px;
}

.career-vacancy-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #f8faf6;
  border: 1px solid #eef1ec;
  border-radius: 12px;
  padding: 22px 26px;
  box-shadow: 0 2px 10px rgba(31, 36, 41, 0.05);
}

.career-vacancy-info h3 {
  font-size: 17px;
  font-weight: 700;
  color: #1f2429;
  margin: 0 0 8px;
}

.career-vacancy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}

.career-vacancy-meta span {
  font-size: 12.5px;
  color: #5a636b;
}

.career-vacancy-meta i {
  color: #62ab00;
  margin-right: 4px;
}

.career-vacancy-desc {
  font-size: 13px;
  color: #5a636b;
  margin: 0;
  max-width: 560px;
}

.career-apply-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.career-no-vacancy {
  text-align: center;
  padding: 40px 20px;
  background: #f8faf6;
  border: 1px dashed #cfd8c4;
  border-radius: 12px;
  color: #5a636b;
}

.career-no-vacancy i {
  font-size: 28px;
  color: #62ab00;
  margin-bottom: 12px;
  display: block;
}

.career-apply-section {
  max-width: 720px;
  margin: 0 auto 40px;
}

.career-form {
  background: #fff;
  border: 1px solid #eef1ec;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
}

.career-form-row {
  display: flex;
  gap: 20px;
}

.career-form-group {
  flex: 1 1 0;
  margin-bottom: 18px;
}

.career-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1f2429;
  margin-bottom: 6px;
}

.career-form-group .form-control {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: #1f2429;
}

.career-submit-btn {
  width: 100%;
  padding: 12px;
  font-weight: 700;
}

.career-contact-note {
  text-align: center;
  font-size: 13.5px;
  color: #5a636b;
}

@media (max-width: 767.98px) {
  .career-vacancy-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .career-apply-btn {
    width: 100%;
    text-align: center;
  }

  .career-form-row {
    flex-direction: column;
    gap: 0;
  }
}

/* ===================== FAQ ACCORDION ===================== */
.faq-item {
  background: #fff;
  border: 1px solid #eef1ec;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 10px;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14.5px;
  color: #1f2429;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:before {
  content: "+";
  display: inline-block;
  width: 18px;
  color: #62ab00;
  font-weight: 800;
}

.faq-item[open] summary:before {
  content: "\2212";
}

.faq-item p {
  margin: 10px 0 0 18px;
  font-size: 13.5px;
  color: #5a636b;
  line-height: 1.6;
}

/* ===================== MY ACCOUNT DASHBOARD ===================== */
.dash-stat-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.dash-stat-card {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8faf6;
  border: 1px solid #eef1ec;
  border-radius: 12px;
  padding: 16px 18px;
  transition: box-shadow .15s ease, transform .15s ease;
}

.dash-stat-card:hover {
  box-shadow: 0 4px 14px rgba(31, 36, 41, 0.08);
  transform: translateY(-2px);
}

.dash-stat-card i {
  font-size: 22px;
  color: #62ab00;
  width: 36px;
  text-align: center;
}

.dash-stat-card strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #1f2429;
}

.dash-stat-card span {
  font-size: 11.5px;
  color: #8a8f98;
}

.dash-recent-order {
  margin-bottom: 22px;
}

.dash-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.dash-section-head h4 {
  font-size: 15px;
  font-weight: 700;
  color: #1f2429;
  margin: 0;
}

.dash-section-head a {
  font-size: 12.5px;
  font-weight: 700;
  color: #62ab00;
}

.dash-order-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: #fff;
  border: 1px solid #eef1ec;
  border-radius: 12px;
  padding: 16px 20px;
}

.dash-order-card strong {
  display: block;
  font-size: 14px;
  color: #1f2429;
  margin-bottom: 4px;
}

.dash-order-card span {
  font-size: 12px;
  color: #8a8f98;
}

.dash-order-card-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dash-order-status {
  font-size: 11.5px;
  font-weight: 700;
  color: #3d6b00;
  background: #eef6e0;
  padding: 4px 12px;
  border-radius: 20px;
}

.dash-footnote {
  font-size: 12.5px;
  color: #8a8f98;
}

@media (max-width: 575.98px) {
  .dash-stat-row {
    gap: 10px;
  }

  .dash-stat-card {
    flex: 1 1 100%;
  }
}

/* Plain <select> elements (Country/State) weren't covered by the
   .checkout-form input rule (that only targets <input>), so they fell
   back to bare browser styling instead of matching the rest of the form. */
.checkout-form select {
  width: 100%;
  background-color: #f4f4f4;
  border: 1px solid transparent;
  border-radius: 0;
  line-height: 23px;
  padding: 10px 20px;
  font-size: 14px;
  height: 45px;
  color: #14191e;
  margin-bottom: 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3e%3cpath fill='%23565f69' d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* ===================== BLOG LIST (grid) ===================== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-grid-two-col {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767.98px) {
  .blog-grid-two-col {
    grid-template-columns: 1fr;
  }
}

.blog-grid-card {
  display: block;
  background: #fff;
  border: 1px solid #eef1ec;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(31, 36, 41, 0.05);
  transition: box-shadow .15s ease, transform .15s ease;
}

.blog-grid-card:hover {
  box-shadow: 0 8px 22px rgba(31, 36, 41, 0.1);
  transform: translateY(-2px);
}

.blog-grid-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f4f6f4;
}

.blog-grid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-grid-body {
  padding: 18px 20px 22px;
}

.blog-grid-date {
  font-size: 11.5px;
  color: #8a8f98;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.blog-grid-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1f2429;
  margin: 6px 0 8px;
  line-height: 1.35;
}

.blog-grid-body p {
  font-size: 13px;
  color: #5a636b;
  line-height: 1.6;
  margin: 0 0 12px;
}

.blog-grid-readmore {
  font-size: 12.5px;
  font-weight: 700;
  color: #62ab00;
}

.blog-grid-readmore i {
  margin-left: 4px;
}

@media (max-width: 991.98px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================== BLOG SIDEBAR ===================== */
.blog-sidebar-widget {
  background: #fff;
  border: 1px solid #eef1ec;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(31, 36, 41, 0.05);
}

.blog-sidebar-widget h4 {
  font-size: 15px;
  font-weight: 700;
  color: #1f2429;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #62ab00;
  display: inline-block;
}

.blog-sidebar-post {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.blog-sidebar-post:last-child {
  margin-bottom: 0;
}

.blog-sidebar-post img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.blog-sidebar-post h5 {
  font-size: 13px;
  font-weight: 600;
  color: #1f2429;
  margin: 0 0 4px;
  line-height: 1.35;
}

.blog-sidebar-post span {
  font-size: 11px;
  color: #8a8f98;
}

.blog-sidebar-archive {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-sidebar-archive li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  color: #5a636b;
}

.blog-sidebar-archive li:last-child {
  border-bottom: none;
}

.blog-sidebar-archive .count {
  color: #62ab00;
  font-weight: 700;
}

.blog-sidebar-archive a {
  color: #5a636b;
  transition: color .15s ease;
}

.blog-sidebar-archive a:hover {
  color: #62ab00;
}

.blog-sidebar-archive li.active a {
  color: #62ab00;
  font-weight: 700;
}

/* Stays in view while the reader scrolls through the post/list beside it.
   The offset clears the sticky site header so it doesn't hide under it. */
.blog-sidebar-sticky {
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

.blog-category-badge {
  display: inline-block;
  background: #eef6e0;
  color: #3d6b00;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.blog-category-badge:hover {
  background: #62ab00;
  color: #fff;
}

@media (max-width: 991.98px) {
  .blog-sidebar-sticky {
    position: static;
  }
}

/* ===================== FOOTER NEWSLETTER ===================== */
.footer-newsletter {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e2e2;
}

.footer-newsletter h4 {
  font-size: 14px;
  font-weight: 700;
  color: #1f2429;
  margin: 0 0 6px;
}

.footer-newsletter p {
  font-size: 12px;
  color: #8a8f98;
  margin: 0 0 12px;
  line-height: 1.5;
}

.footer-newsletter-msg {
  font-size: 12px;
  font-weight: 600;
  color: #3d6b00;
  background: #eef6e0;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.footer-newsletter-form {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
  background: #fff;
}

.footer-newsletter-form input {
  flex: 1 1 auto;
  border: 0;
  padding: 10px 14px;
  font-size: 13px;
  min-width: 0;
}

.footer-newsletter-form input:focus {
  outline: none;
}

.footer-newsletter-form button {
  flex: 0 0 auto;
  width: 44px;
  border: 0;
  background: #62ab00;
  color: #fff;
  font-size: 14px;
  transition: background-color .15s ease;
}

.footer-newsletter-form button:hover {
  background: #4f8c00;
}

/* ===================== MY ACCOUNT SIDEBAR (sticky, Amazon-style) ===================== */
/* Long tab content (Orders, Invoices, Track Order) scrolls the page past
   the sidebar's own short height — pin it so only the content area
   effectively scrolls, like Amazon's account nav. */
.myaccount-tab-menu {
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

/* Desktop equivalent of the mobile logout-color rule further down --
   applies everywhere so it's consistent, not just on the mobile chip
   strip. */
.myaccount-tab-menu a.myaccount-logout-link {
  color: #c94b4b;
}

.myaccount-tab-menu a.myaccount-logout-link:hover {
  background-color: #c94b4b;
  color: #fff;
}

/* Below 991.98px this was a plain vertical list of 8 full-width rows
   (Dashboard/Orders/Track Order/Returns/Invoices/Payment Method/
   Address/Account Details/Logout) sitting ABOVE the tab content --
   on a phone that's a full screen of nav before any actual content is
   visible, and switching sections means scrolling all the way back up.
   Turn it into a horizontally-scrollable chip strip instead (same
   underlying Bootstrap data-toggle="tab" links, just a different
   layout), so the content starts right below it and switching tabs
   never requires a big scroll. Desktop keeps the original vertical
   sticky sidebar untouched. */
@media (max-width: 991.98px) {
  .myaccount-tab-menu {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    padding: 4px 2px 10px;
    margin-bottom: 18px;
  }

  .myaccount-tab-menu::-webkit-scrollbar {
    display: none;
  }

  .myaccount-tab-menu a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #e2e5e0;
    border-bottom: 1px solid #e2e5e0;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #5a636b;
    background: #fff;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
  }

  .myaccount-tab-menu a i {
    width: auto;
    font-size: 13px;
  }

  .myaccount-tab-menu a:hover,
  .myaccount-tab-menu a.active {
    background: linear-gradient(135deg, #7bc900, #4f8c00);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px rgba(98, 171, 0, 0.3);
  }

  /* Logout leaves the account section entirely rather than switching a
     tab -- give it its own color so it doesn't read as just another
     section next to Orders/Returns/etc. */
  .myaccount-tab-menu a.myaccount-logout-link {
    color: #c94b4b;
    border-color: #f3d9d9;
  }

  .myaccount-tab-menu a.myaccount-logout-link:hover {
    background: #c94b4b;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px rgba(201, 75, 75, 0.3);
  }
}

/* ===================== ADDRESS BOOK (Amazon-style) ===================== */
.address-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.address-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 180px;
  border: 2px dashed #cfd8c4;
  border-radius: 12px;
  color: #62ab00;
  font-weight: 700;
  font-size: 13px;
  transition: background-color .15s ease, border-color .15s ease;
}

.address-add-card:hover {
  background: #f8faf6;
  border-color: #62ab00;
  color: #62ab00;
}

.address-add-card i {
  font-size: 26px;
}

.address-card {
  position: relative;
  background: #fff;
  border: 1px solid #eef1ec;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(31, 36, 41, 0.05);
}

.address-card-default {
  border-color: #62ab00;
}

.address-default-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: #62ab00;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}

.address-card strong {
  display: block;
  font-size: 14px;
  color: #1f2429;
  margin-bottom: 6px;
}

.address-card p {
  font-size: 12.5px;
  color: #5a636b;
  line-height: 1.6;
  margin: 0 0 14px;
}

.address-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.address-card-actions a,
.address-link-btn {
  color: #62ab00;
  font-weight: 600;
}

.address-link-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.address-card-actions span {
  color: #d0d0d0;
}

/* ===================== CHECKOUT: SAVED ADDRESS PICKER ===================== */
.saved-address-picker {
  margin-bottom: 22px;
}

.saved-address-picker-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1f2429;
  margin-bottom: 10px;
}

.saved-address-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.saved-address-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: #5a636b;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.saved-address-option input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.saved-address-option strong {
  color: #1f2429;
  font-size: 13px;
}

.saved-address-option em {
  color: #62ab00;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}

.saved-address-option:has(input:checked) {
  border-color: #62ab00;
  background: #f8faf6;
}

.saved-address-option-new {
  align-items: center;
  justify-content: center;
  color: #62ab00;
}

/* ===================== SITEMAP ===================== */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 30px;
}

.sitemap-col h4 {
  font-size: 14px;
  font-weight: 700;
  color: #1f2429;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #62ab00;
  display: inline-block;
}

.sitemap-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sitemap-col li {
  margin-bottom: 10px;
}

.sitemap-col a {
  font-size: 13px;
  color: #5a636b;
}

.sitemap-col a:hover {
  color: #62ab00;
}

/* On phones (<=484px) main.css puts an 8px padding on <body> (guards
   against a stray horizontal-scroll element elsewhere), which insets
   every full-width child by that same 8px — including this green
   copyright strip, so it reads as a rounded card instead of a true
   edge-to-edge bar. Break just this element out of that padding. */
@media (max-width: 484px) {
  .footer-bottom {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* Each homepage section (New Arrivals, Deal of the Day, ...) stacks its
   own 30px .section-margin bottom-margin on top of the slider wrapper's
   own 1rem+1rem (pt-3/pb-3) padding, then the NEXT section's container
   adds another 1rem of top padding on top of that -- on a narrow phone
   screen that's 60-70px of dead space between one section's carousel
   dots and the next banner. Trim it on phones only; desktop is untouched. */
@media (max-width: 767px) {
  .section-margin {
    margin-bottom: 14px;
  }
  .section-margin .pad-1.pt-3.pb-3 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* main.css puts an unconditional 8px padding on <body> for phones
   (<=484px) -- a leftover band-aid for some now-untraceable overflow
   issue, predating the html{overflow-x:hidden} safety net already in
   this file. Every full-width element on every phone-width page (this
   trust-badge strip, the footer bar, product-card carousels, banners...)
   inherits that as extra side gutter on top of its own .my-container
   padding (Bootstrap's .container already gives 15px on its own -- the
   body padding was pure redundant inset). That compounding is the
   actual source of most of the "too much side space on mobile"
   reports. overflow-x:hidden on <html> already guards against a
   horizontal scrollbar even if something is slightly too wide, so
   removing this is safe. */
@media (max-width: 484px) {
  body {
    padding: 0 !important;
  }
}

/* Every carousel section (New Arrivals, Best Seller, ...) uses one
   .slick-track per instance holding ALL of that section's products, not
   just the visible page -- and with the track set to display:flex (see
   below), flexbox's default align-items:stretch matches EVERY card,
   including ones scrolled off-screen, to the height of the single
   tallest one in the WHOLE list. If any one product further down that
   list has a longer title/author, every card gets stretched taller and
   the "VIEW BOOK"/"ADD TO CART" button (pinned to the bottom via
   margin-top:auto below) ends up sitting far below its own content --
   the recurring "huge empty gap before the button" report, and it could
   reproduce on two side-by-side cards with IDENTICAL content, because
   the stretch was coming from a different card entirely.
   Now that the author line is forced single-line and the title already
   has a fixed min-height (see .product-card h3 a below), natural
   per-card height variance is small, so this whole-list stretch is no
   longer needed for a tidy look -- switch to flex-start so each card
   sizes to its own content instead of the tallest item anywhere in the
   list. */
.sb-slick-slider .slick-track {
  align-items: flex-start !important;
}

/* ===================== FOOTER APP DOWNLOAD BADGES ===================== */
/* No app is published yet, so these are deliberately non-interactive
   (plain <span>, not a real link to an app-store URL that doesn't
   exist) with a "Coming Soon" ribbon. Built from Font Awesome brand
   icons (already loaded site-wide) rather than the official Google
   Play / App Store artwork, which are trademarked assets this project
   doesn't have a license file for. */
.footer-app-download {
  margin-top: 18px;
}

.footer-app-title {
  color: #e53935;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

.footer-app-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 190px;
}

.app-badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #101010;
  color: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  overflow: hidden;
  cursor: default;
}

.app-badge i {
  font-size: 22px;
}

.app-badge-text {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
}

.app-badge-text small {
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #d0d0d0;
}

.app-badge-coming-soon {
  position: absolute;
  top: 0;
  right: 0;
  background: #62ab00;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 8px 2px 10px;
  border-bottom-left-radius: 8px;
}

/* ===================== RESET PASSWORD ===================== */
/* Was a completely standalone page -- its own <html>/<head>, a generic
   Bootstrap 3 CDN, no site header/footer/branding at all. Brought in
   line with the rest of the site (shared header/footer, brand colors,
   card styling matching .address-card/.about-contact-card). */
.reset-password-card {
  max-width: 440px;
  margin: 40px auto;
  background: #fff;
  border: 1px solid #eef1ec;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(31, 36, 41, 0.05);
  padding: 40px 36px;
}

.reset-password-card h2 {
  font-size: 22px;
  font-weight: 800;
  color: #1f2429;
  margin-bottom: 8px;
  text-align: center;
}

.reset-password-sub {
  font-size: 13.5px;
  color: #8a8f94;
  text-align: center;
  margin-bottom: 28px;
}

.reset-password-form .form-group {
  margin-bottom: 20px;
}

.reset-password-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1f2429;
  margin-bottom: 6px;
}

.reset-password-form input[type="password"] {
  width: 100%;
  border: 1px solid #e2e5e0;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  color: #1f2429;
}

.reset-password-form input[type="password"]:focus {
  outline: none;
  border-color: #62ab00;
}

.reset-password-error {
  color: #c94b4b;
  margin-top: 6px;
  display: block;
}

.reset-password-submit {
  width: 100%;
  margin-top: 6px;
}

.reset-password-message {
  text-align: center;
  padding: 10px 0;
}

.reset-password-message i {
  font-size: 40px;
  color: #c94b4b;
  margin-bottom: 14px;
}

.reset-password-message h3 {
  font-size: 16px;
  color: #1f2429;
  margin-bottom: 20px;
}

@media (max-width: 575.98px) {
  .reset-password-card {
    margin: 20px auto;
    padding: 30px 22px;
  }
}

/* ===================== ABOUT US PAGE ===================== */
/* Every section below shares ONE max-width column (.about-content) so
   the page reads as one consistent editorial layout instead of each
   section picking its own width (the intro text was 820px, the mission
   block and card grid ran the full container, the contact block was
   720px -- three different edges on the same page). */

.about-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 56px;
}

.about-hero img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* The source photo is light/pale, so hero text sat directly on it with
   weak contrast. A soft dark gradient from the left (where the text
   sits) fading out toward the right (where the book stack itself is)
   gives real contrast without hiding the image. */
.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 23, 15, 0.78) 0%, rgba(15, 23, 15, 0.45) 42%, rgba(15, 23, 15, 0) 72%);
}

.about-hero-text {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  max-width: 520px;
}

.about-hero-eyebrow {
  display: inline-block;
  color: #9ee23a;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

.about-hero-text h1 {
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.about-hero-text p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.88);
}

.about-content {
  max-width: 980px;
  margin: 0 auto;
}

.about-section-title {
  font-size: 26px;
  font-weight: 800;
  color: #1f2429;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.about-section-title-center {
  text-align: center;
  margin-top: 64px;
}

.about-intro p {
  font-size: 16px;
  line-height: 1.85;
  color: #5a636b;
  margin-bottom: 16px;
}

/* A large decorative quote mark plus a centered, single-column layout
   (instead of icon-beside-text) makes this read as a statement/pull-
   quote rather than just another card — meant to be the one section on
   the page that feels deliberately different, the way a mission
   statement should stand out. */
.about-mission {
  position: relative;
  text-align: center;
  background: linear-gradient(160deg, #1f2429, #12331a);
  border-radius: 20px;
  padding: 56px 60px;
  margin-top: 64px;
  overflow: hidden;
}

.about-mission-quote {
  position: absolute;
  top: 18px;
  left: 26px;
  font-size: 64px;
  color: rgba(255, 255, 255, 0.06);
}

.about-mission .about-hero-eyebrow {
  color: #9ee23a;
}

.about-mission-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #7bc900, #4f8c00);
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(98, 171, 0, 0.35);
}

.about-mission p {
  position: relative;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.7;
  color: #f3f6f0;
  max-width: 720px;
  margin: 0 auto;
}

.about-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 28px;
  margin-bottom: 10px;
}

.about-why-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 22px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
  text-align: center;
  border-top: 3px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.about-why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 32px rgba(17, 24, 39, 0.12);
  border-top-color: #62ab00;
}

.about-why-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #7bc900, #4f8c00);
  color: #fff;
  font-size: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(98, 171, 0, 0.25);
}

.about-why-card h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: #1f2429;
  margin-bottom: 8px;
}

.about-why-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #8a8f94;
  margin: 0;
}

.about-contact-card {
  max-width: 620px;
  margin: 28px auto 0;
  background: #f8faf6;
  border: 1px solid #e2ecd6;
  border-radius: 16px;
  padding: 30px 34px;
}

.about-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.about-contact-row + .about-contact-row {
  margin-top: 18px;
}

.about-contact-row i {
  color: #62ab00;
  font-size: 16px;
  margin-top: 3px;
  flex: 0 0 auto;
}

.about-contact-row strong {
  color: #1f2429;
}

@media (max-width: 991.98px) {
  .about-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .about-hero img {
    height: 260px;
  }

  .about-hero-text {
    left: 6%;
    right: 6%;
    max-width: none;
  }

  .about-hero-text h1 {
    font-size: 26px;
  }

  .about-hero-text p {
    font-size: 14px;
  }

  .about-mission {
    padding: 36px 22px;
  }

  .about-mission p {
    font-size: 16px;
  }

  .about-why-grid {
    grid-template-columns: 1fr;
  }

  .about-contact-card {
    padding: 24px 22px;
  }
}

/* ===================== HOME CATEGORY ICONS ROW ===================== */
/* Admin-managed (see HomeCategoryIconController) row of icon links near
   the top of the homepage. Desktop keeps prev/next arrows; on phones
   arrows are swapped for autoplay instead (see the data-slick-responsive
   settings on the element itself), since a tap target that small isn't
   a great fit for touch and the row can just cycle on its own there. */
.home-category-icons {
  position: relative;
  padding: 0 34px;
}

.home-category-icon-slide {
  padding: 0 8px;
}

.home-category-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  text-decoration: none;
  color: #1f2429;
}

.home-category-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.home-category-icon span {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.home-category-icons .slick-arrow {
  position: absolute;
  top: 28px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  border: 1px solid #e2e5e0;
  background: #fff;
  color: #1f2429;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-category-icons .slick-arrow:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 13px;
}

.home-category-icons .slick-arrow.slick-prev {
  left: 0;
}

.home-category-icons .slick-arrow.slick-prev:before {
  content: "\f053";
}

.home-category-icons .slick-arrow.slick-next {
  right: 0;
}

.home-category-icons .slick-arrow.slick-next:before {
  content: "\f054";
}

.home-category-icons .slick-arrow:hover {
  background: #62ab00;
  border-color: #62ab00;
  color: #fff;
}

/* Arrows are swapped for autoplay below 767px (see the slick-responsive
   settings on this element in index.blade.php), so the side padding
   reserved for them on desktop is just wasted space on phones. */
@media (max-width: 767.98px) {
  .home-category-icons {
    padding: 0 8px;
  }
}

/* Homepage section titles (New Arrivals, Deal of the Day, Best Seller,
   Children Books, etc.) all share the same bare "<h5><strong>" markup —
   bump them 3px over the theme default and force bold on both desktop
   and the <=484px mobile breakpoint (main.css shrinks h5 to 14px there).
   Every such section uses the shared .section-margin wrapper EXCEPT
   "Best Seller Books", which for some reason got its own one-off
   ".bg-image.section-padding" wrapper instead — hence it was still
   showing small/normal-weight after the .section-margin rule below;
   .section-padding is only ever used by that one section on this page,
   so it's safe to fold into the same rule rather than leave it as a
   second, easy-to-forget-again special case. */
.section-margin h5,
.section-padding h5 {
  font-size: 23px;
  font-weight: 700;
}

@media (max-width: 484px) {
  .section-margin h5,
  .section-padding h5 {
    font-size: 17px;
    font-weight: 700;
  }
}