@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Spartan', sans-serif;
}

h1 {
    font-size: 50px;
    line-height: 64px;
    color: #222;
}

h2 {
    font-size: 46px;
    line-height: 54px;
    color: #222;
}

h4 {
    font-size: 20px;
    color: #222;
}

h6 {
    font-weight: 700;
    font-size: 12px;
}

p {
    font-size: 16px;
    color: #465b52;
    margin: 15px 0 20px 0;
}

.section-p1 {
    padding: 40px 80px;
}

.section-m1 {
    margin: 40px 0;
}

body {
    width: 100%;
}

body {
    width: 100%;
}

.logo {
    width: 98px;
    height: 90px;
    margin-left: 50px;
    margin-top: 5px;
}

#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    background: #db8d33;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    height: 100px;
    z-index: 999;
    position: sticky;
    top: 0;
    left: 0;
}

#navbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#navbar li {
    list-style: none;
    padding: 0 30px;
    position: relative;
}

#navbar li a{
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

#navbar li a:hover {
   color: #f9f9fb;
   transition: 0.3s;
}

#navbar li a.active {
   color: #f9f9fb;
}

#navbar li a.active::after {
    content: "";
    width: 30%;
    height: 2px;
    background: #f9f9fb;
    position: absolute;
    bottom: -4px;
    left: 20px;
    transform: translateX(50%);
}

#navbar li a:hover::after {
    content: "";
    width: 30%;
    height: 2px;
    background: #f9f9fb;
    position: absolute;
    bottom: -4px;
    left: 20px;
    transform: translateX(50%);
}

/* =====================================================
   TILAK BOOK DEPOT — SLIM, ACTIVE ADMIN BANNER CAROUSEL
   Matches the actual index.html and script.js classes
===================================================== */

#hero.hero-carousel {
    position: relative;
    display: block;
    width: 100%;
    height: clamp(250px, 25vw, 390px);
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: #fff4e7;
}

/* Slider viewport */
#hero #homeHeroSlides.hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Every slide occupies the same banner area */
#hero #homeHeroSlides > .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;

    display: flex;
    align-items: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;

    transition:
        opacity 650ms ease,
        visibility 650ms ease;
}

/* JavaScript activates this class */
#hero #homeHeroSlides > .hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

/* -----------------------------------------
   DEFAULT / FALLBACK SLIDE
----------------------------------------- */

#hero .hero-slide:not(.hero-slide--admin) {
    justify-content: space-between;
    background:
        radial-gradient(circle at 78% 50%,
            #f6dfc2 0,
            #fff3e5 42%,
            #fffaf4 100%);
}

#hero .hero-slide:not(.hero-slide--admin)::before {
    content: "";
    position: absolute;
    width: 34%;
    aspect-ratio: 1;
    right: 9%;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid rgba(193, 100, 30, 0.10);
    border-radius: 50%;
    box-shadow:
        0 0 0 28px rgba(193, 100, 30, 0.035),
        0 0 0 55px rgba(193, 100, 30, 0.025);
    pointer-events: none;
}

/* Fallback text area */
#hero .hero-slide:not(.hero-slide--admin) .hero-content {
    position: relative;
    z-index: 3;
    flex: 1 1 50%;
    max-width: 55%;
    padding: 24px 0 24px clamp(28px, 5.8vw, 100px);
    box-sizing: border-box;
}

/* Small eyebrow */
#hero .hero-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 13px;

    border: 1px solid rgba(190, 87, 17, 0.22);
    border-radius: 30px;

    color: #a84b0c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
    line-height: 1.3;
}

/* Main heading */
#hero .hero-content h1 {
    margin: 0 0 12px;
    color: #19243a;
    font-size: clamp(26px, 3.5vw, 52px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.5px;
}

/* Highlight the fallback heading */
#hero .hero-content h1 span {
    color: #bd4c09;
}

/* Supporting text */
#hero .hero-content p {
    max-width: 540px;
    margin: 10px 0 18px;
    color: #697386;
    font-size: clamp(12px, 1.15vw, 16px);
    font-weight: 400;
    line-height: 1.7;
}

/* Explore / Shop button */
#hero .hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: fit-content;
    margin: 0;
    padding: 12px 21px;

    border: 0;
    border-radius: 9px;
    background: #ed7414;
    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;

    box-shadow: 0 7px 18px rgba(237, 116, 20, 0.16);
    transition:
        background 200ms ease,
        transform 200ms ease;
}

#hero .hero-btn:hover {
    background: #ce5d08;
    color: #fff;
    transform: translateY(-2px);
}

/* Fallback image on the right */
#hero .hero-visual {
    position: relative;
    z-index: 1;
    flex: 0 1 45%;
    width: 45%;
    height: 78%;
    margin-right: clamp(24px, 5.5vw, 100px);
    overflow: hidden;
}

#hero .hero-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 18px 40px rgba(65, 43, 22, 0.13);
    transform: scale(1);
    transition: transform 5s ease;
}

#hero .hero-slide.is-active .hero-visual img {
    transform: scale(1.045);
}

/* -----------------------------------------
   ADMIN-MANAGED BANNERS
   Image fills the whole slim banner
----------------------------------------- */

#hero .hero-slide--admin {
    display: block;
    background: #f8ead8;
}

#hero .hero-slide--admin > img.admin-banner-image {
    position: absolute;
    inset: 0;
    z-index: 0;

    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;

    object-fit: cover;
    object-position: center;

    transform: scale(1);
    transition: transform 5s ease;
}

#hero .hero-slide--admin.is-active > img.admin-banner-image {
    transform: scale(1.035);
}

/* Subtle overlay behind admin banner text */
#hero .hero-slide--admin .admin-banner-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(15, 20, 32, 0.58) 0%,
        rgba(15, 20, 32, 0.32) 34%,
        rgba(15, 20, 32, 0.04) 68%,
        rgba(15, 20, 32, 0) 100%
    );
}

/* Admin banner text */
#hero .hero-slide--admin .hero-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: 54%;
    max-width: 720px;
    height: 100%;
    padding: 22px clamp(24px, 5.5vw, 90px);
    box-sizing: border-box;
}

#hero .hero-slide--admin .hero-eyebrow {
    margin-bottom: 10px;
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    background: rgba(0, 0, 0, 0.14);
}

#hero .hero-slide--admin .hero-content h1 {
    max-width: 600px;
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(25px, 3.1vw, 46px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.8px;
    overflow-wrap: anywhere;
}

#hero .hero-slide--admin .hero-content p {
    max-width: 440px;
    margin: 0 0 15px;
    color: rgba(255, 255, 255, 0.95);
    font-size: clamp(12px, 1.1vw, 15px);
    line-height: 1.6;
}

#hero .hero-slide--admin .hero-btn {
    padding: 10px 18px;
    background: #ed7414;
    color: #fff;
}

/* -----------------------------------------
   PREVIOUS / NEXT ARROWS
----------------------------------------- */

#hero .hero-arrow--prev,
#hero .hero-arrow--next {
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #293347;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    cursor: pointer;

    transition:
        background 180ms ease,
        transform 180ms ease;
}

#hero .hero-arrow--prev {
    left: 16px;
}

#hero .hero-arrow--next {
    right: 16px;
}

#hero .hero-arrow--prev:hover,
#hero .hero-arrow--next:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}

/* -----------------------------------------
   PAGINATION DOTS
   JavaScript uses .hero-dot and .is-active
----------------------------------------- */

#hero #homeHeroDots.hero-pagination {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 10;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin: 0;
    padding: 0;
}

#hero #homeHeroDots .hero-dot {
    display: block;
    width: 8px;
    min-width: 8px;
    height: 8px;
    min-height: 8px;

    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 20px;

    background: rgba(80, 80, 80, 0.28);
    cursor: pointer;
    transition:
        width 220ms ease,
        background 220ms ease;
}

#hero #homeHeroDots .hero-dot.is-active {
    width: 25px;
    background: #ed7414;
}

/* Slide counter */
#hero .hero-count {
    position: absolute;
    right: clamp(24px, 5.5vw, 95px);
    bottom: 14px;
    z-index: 10;

    display: flex;
    align-items: center;
    gap: 10px;

    color: #263247;
    font-size: 11px;
    font-weight: 800;
}

#hero .hero-count-line {
    display: block;
    width: 32px;
    height: 1px;
    background: rgba(38, 50, 71, 0.3);
}

/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 768px) {
    #hero.hero-carousel {
        height: clamp(200px, 34vw, 270px);
    }

    #hero .hero-slide:not(.hero-slide--admin) .hero-content {
        max-width: 58%;
        padding: 18px 0 18px 5%;
    }

    #hero .hero-content h1 {
        font-size: clamp(22px, 4vw, 31px);
        letter-spacing: -0.6px;
    }

    #hero .hero-content p {
        font-size: 12px;
        line-height: 1.5;
        margin: 7px 0 12px;
    }

    #hero .hero-visual {
        flex-basis: 40%;
        width: 40%;
        height: 72%;
        margin-right: 5%;
    }

    #hero .hero-slide--admin .hero-content {
        width: 65%;
        padding: 18px 5%;
    }

    #hero .hero-slide--admin .hero-content h1 {
        font-size: clamp(21px, 3.8vw, 30px);
    }

    #hero .hero-slide--admin .hero-content p {
        font-size: 12px;
        margin-bottom: 10px;
    }

    #hero .hero-eyebrow {
        font-size: 9px;
        padding: 5px 9px;
        margin-bottom: 8px;
    }

    #hero .hero-btn {
        padding: 9px 13px;
        font-size: 12px;
    }

    #hero .hero-arrow--prev,
    #hero .hero-arrow--next {
        width: 32px;
        height: 32px;
    }

    #hero .hero-arrow--prev {
        left: 8px;
    }

    #hero .hero-arrow--next {
        right: 8px;
    }

    #hero .hero-count {
        display: none;
    }
}

/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 480px) {
    #hero.hero-carousel {
        height: 165px;
    }

    #hero .hero-slide:not(.hero-slide--admin) .hero-content {
        max-width: 61%;
        padding: 12px 0 12px 5%;
    }

    #hero .hero-content h1 {
        font-size: 19px;
        line-height: 1.12;
        letter-spacing: -0.4px;
        margin-bottom: 6px;
    }

    #hero .hero-content p {
        font-size: 10px;
        line-height: 1.4;
        margin: 5px 0 8px;
    }

    #hero .hero-eyebrow {
        font-size: 8px;
        letter-spacing: 0.6px;
        padding: 4px 7px;
        margin-bottom: 6px;
    }

    #hero .hero-visual {
        flex-basis: 36%;
        width: 36%;
        height: 66%;
        margin-right: 4%;
    }

    #hero .hero-slide--admin .hero-content {
        width: 76%;
        padding: 12px 7%;
    }

    #hero .hero-slide--admin .hero-content h1 {
        font-size: 19px;
        line-height: 1.15;
        margin-bottom: 5px;
    }

    #hero .hero-slide--admin .hero-content p {
        max-width: 95%;
        font-size: 10px;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    #hero .hero-slide--admin .hero-eyebrow {
        font-size: 7px;
        padding: 4px 6px;
        margin-bottom: 6px;
    }

    #hero .hero-btn {
        gap: 7px;
        padding: 7px 10px;
        font-size: 10px;
        border-radius: 6px;
    }

    #hero .hero-arrow--prev,
    #hero .hero-arrow--next {
        width: 27px;
        height: 27px;
        font-size: 10px;
    }

    #hero .hero-arrow--prev {
        left: 4px;
    }

    #hero .hero-arrow--next {
        right: 4px;
    }

    #hero #homeHeroDots.hero-pagination {
        bottom: 6px;
        gap: 5px;
    }

    #hero #homeHeroDots .hero-dot {
        width: 6px;
        min-width: 6px;
        height: 6px;
        min-height: 6px;
    }

    #hero #homeHeroDots .hero-dot.is-active {
        width: 18px;
    }
}

/* Respect visitors who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    #hero .hero-slide,
    #hero .hero-slide img,
    #hero .hero-slide .hero-visual img {
        transition: none !important;
    }

    #hero .hero-slide--admin.is-active > img.admin-banner-image,
    #hero .hero-slide.is-active .hero-visual img {
        transform: none !important;
    }
}

.section-p1 {
  padding: 40px 80px;
}

#feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #eceae5;
}

#feature .fe-box {
  width: 180px;
  text-align: center;
  padding: 25px 15px;
  box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
  border: 1px solid #cce7d0;
  border-radius: 4px;
  margin: 15px 0;
}

#feature .fe-box:hover {
  box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.1);
}

#feature .fe-box img {
  width: 100%;
  margin-bottom: 10px;
}

#feature .fe-box h6 {
  display: inline-block;
  padding: 9px 8px 6px 8px;
  line-height: 1;
  border-radius: 4px;
  color: #1f2a73;
  background-color: #fddde4;
}

#feature .fe-box:nth-child(2) h6 {
  background-color: #cdebbc;
}

#feature .fe-box:nth-child(3) h6 {
  background-color: #d1e8f2;
}

#feature .fe-box:nth-child(4) h6 {
  background-color: #cdd4f8;
}

#feature .fe-box:nth-child(5) h6 {
  background-color: #f6dbf6;
}

#feature .fe-box:nth-child(6) h6 {
  background-color: #fff2e5;
}

.section-p1 {
  padding: 40px 80px 0 80px;
}

#product1 {
  text-align: center;
  background-color: #f3f1ac;
  padding-bottom: 80px;
  margin-bottom: 0;
}

#product1 h2 {
  font-size: 46px;
  color: #1363df;
}

#product1 h2 span {
  color: #101827;
}

#product1 p {
  color: #6b7280;
  font-size: 18px;
  margin-bottom: 35px;
}

#product1 .pro-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 30px;
}

#product1 .pro {
  width: 23%;
  min-width: 250px;
  padding: 15px;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  transition: 0.3s ease;
  position: relative;
  background: #fff;
}

#product1 .pro:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.12);
}

#product1 .pro img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  border-radius: 18px;
  background: #f8f8f8;
}

#product1 .pro .des {
  text-align: start;
  padding: 12px 0;
}

#product1 .pro .des span {
  color: #6b7280;
  font-size: 14px;
}

#product1 .pro .des h5 {
  color: #111827;
  font-size: 16px;
  margin: 8px 0;
}

#product1 .pro .star {
  color: #f5b301;
  font-size: 14px;
}

#product1 .pro .des h4 {
  font-size: 20px;
  color: #088178;
  margin-top: 8px;
}

#product1 .pro .cart {
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50%;
  background-color: #e8f6ea;
  color: #088178;
  position: absolute;
  bottom: 25px;
  right: 18px;
}

.price{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.price .mrp{
    color: #f01202;
    text-decoration: line-through;
    font-size: 15px;
}

.price h4{
    color: #088178;
    font-size: 20px;
    font-weight: 700;
}

#explore-banner{
    width: 100%;
    min-height: 520px;
    background-image:
    linear-gradient(rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)),
    url("img/banner.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 60px 70px;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.banner-content {
  position: relative;
  max-width: 720px;
  color: white;
  z-index: 2;
}

.tagline {
  display: flex;
  color: #ffd76a;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
}

.banner-content h1 {
  font-size: 58px;
  line-height: 1.08;
  color: #fff;
  margin: 10px 0 25px;
  font-weight: 800;
}

.banner-content h1 span {
  color: #ffd76a;
}

.banner-text {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: 28px;
  margin-top: -20px;
}

.explore-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background-color: #ffd76a;
  color: #111827;
  text-decoration: none;
  padding: 18px 38px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  transition: 0.3s ease;
  margin-top: 20px;
}

.explore-btn:hover {
  background-color: #ffc93c;
  transform: translateY(-3px);
}

.explore-btn span {
  font-size: 24px;
}

#shop-category{
    position: relative;
    padding: 50px 50px 20px 50px;
    border-radius: 18px;
    overflow: hidden;
    margin-top: 0;
    background-color: #f7f7f7;
    background-image: url("img/shop\ by\ category\ background.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.category-title{
    text-align: center;
    margin-bottom: 35px;
}

.category-title h2{
    font-size: 38px;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.category-title p{
    color: #6b7280;
    margin-top: 8px;
    font-size: 16px;
}

.category-wrapper{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:18px;
}

.cat-box{
    border-radius:16px;
    text-align:center;
    padding:10px 8px;
    transition:0.3s ease;
    text-decoration:none !important;
    color:#000;
    min-height:200px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.cat-box:hover{
    transform:translateY(-8px);
}

.cat-box img{
    width:120px;
    height:120px;
    object-fit:contain;
    margin-bottom:5px;
}

.cat-box h3{
    font-size:17px;
    line-height:1.4;
    color:#000;
    margin:0;
    text-decoration:none !important;
}

.cat-box,
.cat-box h3{
    text-decoration:none !important;
}

.green{
    background:#dff5e3;
}

.peach{
    background:#ffe7d6;
}

.purple{
    background:#ece3ff;
}

.yellow{
    background:#fff1c9;
}

.pink{
    background:#ffe0ea;
}

.blue{
    background:#e2f0ff;
}

.mint{
    background:#d1f7eb;
}

@media(max-width:799px){

    .category-wrapper{
        justify-content: center;
    }

    .cat-box{
        width: 30%;
    }

}

@media(max-width:477px){

    #shop-category{
        padding: 50px 20px;
    }

    .cat-box{
        width: 100%;
    }

}

/* =========================
   SHOP BY PUBLISHER
========================= */

#publisher-section {
    position: relative;
    padding: 45px 40px;

    background-image:
    linear-gradient(rgba(255,255,255,0.92),
    rgba(255,255,255,0.92)),url("img/publisher-section-background.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    text-align: center;
    overflow: hidden;
}

/* HEADING */

.publisher-heading h2{
    font-size: 42px;
    color: #1f2937;
    margin-bottom: 8px;
    font-weight: 700;
}

.publisher-heading p{
    color: #6b7280;
    font-size: 16px;
    margin-bottom: 35px;
}

/* CONTAINER */

.publisher-container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 25px;
}

/* BOX */

.publisher-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    text-decoration: none;
    color: #222;
    width: 200px;
    

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.publisher-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* Publisher Image */

.publisher-card img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    margin-bottom: 15px;
}

/* Publisher Name */

.publisher-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 5px;
    text-decoration: none;
}

/* Book Count */

.publisher-card span {
    font-size: 14px;
    color: #777;
}

/* Remove Underlines */

.publisher-card,
.publisher-card:hover,
.publisher-card h4,
.publisher-card span {
    text-decoration: none;
}

/* BUTTON */

.publisher-btn{
    margin-top: 30px;
}

.publisher-btn a{
    background: #0d5b3d;
    color: white;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    transition: 0.3s ease;
}

.publisher-btn a:hover{
    background: #08442d;
    transform: translateY(-3px);
}




/* ===============================
   FULL MOBILE RESPONSIVE CSS
================================ */

@media (max-width: 799px) {

  .section-p1 {
    padding: 30px 18px;
  }

  #header {
    padding: 10px 18px;
    height: auto;
    flex-direction: column;
    gap: 10px;
  }

  .logo {
    width: 130px;
    margin-left: 0;
    height: 70px;
    margin-top: 20px;
    margin-bottom: 15px;
  }

  #navbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  #navbar li {
    padding: 0 8px;
  }

  #navbar li a {
    font-size: 13px;
  }

  #navbar li a.active::after,
  #navbar li a:hover::after {
    left: 8px;
  }


  #feature {
    justify-content: center;
    gap: 18px;
  }

  #feature .fe-box {
    width: 45%;
    margin: 0;
  }

  #product1 h2 {
    font-size: 34px;
    line-height: 42px;
  }

  #product1 p {
    font-size: 15px;
  }

  #product1 .pro-container {
    justify-content: center;
    gap: 22px;
  }

  #product1 .pro {
    width: 45%;
    min-width: unset;
  }

  #product1 .pro img {
    height: 190px;
  }

  #explore-banner {
    min-height: 430px;
    padding: 45px 22px;
    background-position: center;
  }

  .banner-content h1 {
    font-size: 38px;
  }

  .tagline {
    font-size: 16px;
  }

  .banner-text {
    font-size: 17px;
  }

  .explore-btn {
    font-size: 15px;
    padding: 14px 26px;
  }

  #shop-category {
    padding: 45px 18px 30px;
    background-size: cover;
  }

  .category-title h2 {
    font-size: 30px;
    line-height: 38px;
    flex-wrap: wrap;
  }

  .category-wrapper {
    justify-content: center;
    gap: 18px;
  }

  .cat-box {
    width: 45%;
    min-width: unset;
  }

  .cat-box img {
    width: 120px;
    height: 120px;
  }

  .cat-box h3 {
    font-size: 16px;
  }

  #publisher-section {
    padding: 40px 18px;
  }

  .publisher-heading h2 {
    font-size: 32px;
    line-height: 40px;
  }

  @media (max-width: 768px) {
  #publishers .publisher-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  #publishers .publisher-box {
    width: 45%;
  }

  #publishers .publisher-card {
    height: 100px;
  }

}}


@media (max-width: 477px) {

  #header {
    position: sticky;
    padding: 8px 10px;
  }

  .logo {
    width: 85px;
  }

  #navbar {
    gap: 8px;
  }

  #navbar li {
    padding: 0 5px;
  }

  #navbar li a {
    font-size: 11px;
  }

  #feature .fe-box {
    width: 100%;
  }

  #product1 {
    padding: 35px 16px 60px;
  }

  #product1 h2 {
    font-size: 28px;
  }

  #product1 .pro {
    width: 100%;
  }

  #product1 .pro img {
    height: 220px;
  }

  #explore-banner {
    min-height: 420px;
    padding: 40px 18px;
  }

  .banner-content h1 {
    font-size: 31px;
    line-height: 1.15;
  }

  .banner-text {
    font-size: 15px;
    margin-top: 0;
  }

  .explore-btn {
    font-size: 14px;
    padding: 13px 22px;
  }

  .category-title h2 {
    font-size: 26px;
  }

  .cat-box {
    width: 100%;
  }

  .publisher-heading h2 {
    font-size: 27px;
  }

  .publisher-box {
    width: 100%;
  }
}

/* CATEGORY MOBILE SLIDER */

@media (max-width: 799px) {

  .category-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 15px;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
  }

  .category-wrapper::-webkit-scrollbar {
    display: none;
  }

  .cat-box {
    min-width: 230px;
    width: 230px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .cat-box img {
    width: 120px;
    height: 120px;
  }
}

/* PUBLISHER MOBILE SLIDER */

@media (max-width: 799px) {

  .publisher-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 15px;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
  }

  .publisher-container::-webkit-scrollbar {
    display: none;
  }

  .publisher-box {
    min-width: 170px;
    width: 170px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .publisher-box img {
    width: 80px;
    height: 80px;
  }
}

/* FEATURE SECTION MOBILE SLIDER */

@media (max-width: 799px) {

  #feature {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 15px;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
  }

  #feature::-webkit-scrollbar {
    display: none;
  }

  #feature .fe-box {
    min-width: 220px;
    width: 220px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* FEATURED BOOKS MOBILE SLIDER */

@media (max-width: 799px) {

  #product1 .pro-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 18px;
    padding-bottom: 15px;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
  }

  #product1 .pro-container::-webkit-scrollbar {
    display: none;
  }

  #product1 .pro {
    min-width: 260px;
    width: 260px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  #product1 .pro img {
    height: 230px;
  }
}

/*header settings mobile view */

@media (max-width: 477px) {

  #header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 8px 10px;
    height: 70px;
  }

  .logo{
    width: 65px;
    margin-left: 0;
  }

  #navbar{
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;
    flex-wrap: nowrap;
  }

  #navbar li{
    padding: 0;
  }

  #navbar li a{
    font-size: 10px;
    font-weight: 600;
  }

  #navbar li a.active::after,
  #navbar li a:hover::after{
    width: 16px;
    left: 50%;
    transform: translateX(-50%);
  }
}



/*Footer*/

.footer{
    background: #2b1408;
    padding: 55px 75px 20px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.footer-container{
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    gap: 40px;
    align-items: flex-start;
}

/* FIRST COLUMN */

.footer-box h2{
    color: #d89a62;
    font-size: 26px;
    margin-bottom: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.footer-box p{
    font-size: 12px;
    line-height: 2;
    color: #f5f5f5;
}

/* HEADINGS */

.footer-box h3{
    color: #d89a62;
    font-size: 24px;
    margin-bottom: 22px;
    font-weight: 700;
}

/* LINKS */

.footer-box ul{
    padding-left: 28px;
}

.footer-box ul li{
    margin-bottom: 18px;
}

.footer-box ul li a{
    color: white;
    text-decoration: none;
    font-size: 12px;
    transition: 0.3s ease;
}

.footer-box ul li a:hover{
    color: #d89a62;
}

/* CONTACT */

.contact p{
    margin-bottom: 24px;
    line-height: 1.8;
    text-decoration: none;
}

.store{
    margin-top: 25px;
}

.store h3{
    margin-bottom: 20px;
    color: #d89a62;
}


/* BOTTOM */

.footer-bottom{
    border-top: 1px solid rgba(164, 159, 159, 0.403);
    margin-top: 5px;
    padding-top: 0;
    text-align: center;
    margin-bottom: 0;
}

.footer-bottom p{
    font-size: 12px;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 0;
    color: #dde1e0d4;
}

/* MOBILE */

@media(max-width:799px){

  .footer{
    background:#2b1408;
    padding:45px 28px 35px;
  }

  .footer-container{
    display:block;
  }

  .footer-box{
    margin-bottom:32px;
  }

  .footer-box h2{
    font-size:18px !important;
    line-height:1.3;
  }

  .footer-box h3{
    font-size:15px !important;
    margin-bottom:12px;
  }

  .footer-box p,
  .footer-box ul li a{
    font-size:14px !important;
    line-height:1.8;
  }

  .footer-box ul{
    padding-left:18px;
  }

  .footer-bottom p{
    font-size:8px !important;
  }
}

.footer-social{
    display: flex;
    gap: 18px;
    margin-top: 20px;
}

.footer-social a{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #d89a62;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    transition: 0.3s ease;
}

.footer-social a:hover{
    background: white;
    color: #2b1408;
    transform: translateY(-3px);
}

@media(max-width:799px){

  .footer-box h2{
    font-size: 15px !important;
  }

  .footer-box h3{
    font-size: 12px !important;
  }

  .footer-box p,
  .footer-box ul li a,
  .footer-bottom p{
    font-size: 11px !important;
    line-height: 1.6 !important;
  }

  .contact p{
    margin-bottom: 10px !important;
  }

  .store p{
    margin-bottom: 8px !important;
  }

  .footer-social a{
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

}

/*About Us*/

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Poppins',sans-serif;
}

.about-page{
  width:100%;
  min-height:100vh;
  background:url("img/about-img.jpeg");
  background-size:cover;
  background-position:center;
  position:relative;
}

.overlay{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.05);
}

.about-content{
  position:relative;
  z-index:2;
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
}

.about-left{
  width:58%;
  padding:60px;
  color:#3b2416;
}

/* BRAND */

.brand{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:15px;
}

.logo-icon{
  font-size:38px;
  color:#7a4b22;
}

.brand h3{
  font-size:28px;
  font-weight:600;
  letter-spacing:2px;
  font-family:Georgia,serif;
}

.brand p{
  font-size:13px;
  letter-spacing:4px;
  margin-top:3px;
}

/* TITLE */

.about-left h1{
  font-size:90px;
  font-family:Georgia,serif;
  line-height:1;
  margin-bottom:10px;
  color:#24150d;
}

.small-line{
  width:65px;
  height:3px;
  background:#9c5b2d;
  margin-bottom:28px;
}

.about-left h2{
  font-size:34px;
  font-family:Georgia,serif;
  margin-bottom:18px;
  color:#5a3217;
}

.about-text{
  font-size:18px;
  line-height:1.9;
  max-width:650px;
  margin-bottom:40px;
}

/* FEATURES */

.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
  margin-bottom:45px;
}

.feature-box{
  text-align:center;
  padding:0 10px;
}

.circle{
  width:65px;
  height:65px;
  border-radius:50%;
  background:#eee2d2;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:auto;
  margin-bottom:15px;
  font-size:28px;
}

.feature-box h4{
  font-size:16px;
  color:#7b471f;
  margin-bottom:10px;
}

.feature-box p{
  font-size:13px;
  line-height:1.7;
}

/* WHY */

.why-title{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:28px;
}

.why-title span{
  flex:1;
  height:1px;
  background:#9c5b2d;
}

.why-title h3{
  font-size:26px;
  font-family:Georgia,serif;
  white-space:nowrap;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.why-box{
  text-align:center;
}

.why-icon{
  font-size:32px;
  margin-bottom:12px;
}

.why-box h4{
  color:#7b471f;
  margin-bottom:10px;
}

.why-box p{
  font-size:13px;
  line-height:1.7;
}

/* MOBILE */

@media(max-width:799px){

  .about-page{
    background-position:center;
  }

  .about-left{
    width:100%;
    padding:35px 22px;
  }

  .brand h3{
    font-size:18px;
  }

  .logo-icon{
    font-size:28px;
  }

  .brand p{
    font-size:10px;
    letter-spacing:2px;
  }

  .about-left h1{
    font-size:52px;
  }

  .about-left h2{
    font-size:20px;
    line-height:1.4;
  }

  .about-text{
    font-size:13px;
    line-height:1.8;
  }

  .features{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
  }

  .why-grid{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }

  .feature-box h4,
  .why-box h4{
    font-size:14px;
  }

  .feature-box p,
  .why-box p{
    font-size:11px;
  }

  .circle{
    width:55px;
    height:55px;
    font-size:22px;
  }

  .why-title h3{
    font-size:18px;
  }

}

/* NEW HEADER + SIDE PANEL */

#header {
  height: 95px;
  padding: 12px 55px;
  background: #d3750a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left-header {
  display: flex;
  align-items: center;
  gap: 35px;
}

.logo {
  width: 130px;
  margin-left: 0;
}

#bar {
  display: block;
  font-size: 32px;
  color: #733711;
  cursor: pointer;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 55px;
}

.header-icons a {
  color: #733711;
  font-size: 32px;
  text-decoration: none;
}

#navbar {
  position: fixed;
  top: 0;
  left: -360px;
  width: 360px;
  height: 100vh;
  background: #d3750a;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 80px 30px 30px;
  transition: 0.3s ease;
  box-shadow: 8px 0 25px rgba(0,0,0,0.12);
}

#navbar.active {
  left: 0;
}

#navbar li {
  width: 100%;
  list-style: none;
  padding: 20px 0;
  border-bottom: 1px solid #eee3dd;
}

#navbar li a {
  font-size: 19px;
  font-weight: 700;
  color: #7a421f;
  text-decoration: none;
}

#close {
  display: block;
  position: absolute;
  top: 25px;
  left: 30px;
  font-size: 32px;
  color: #7a421f;
  cursor: pointer;
}

.login-link {
  margin-top: auto;
  border-bottom: none !important;
}

#navbar li a.active::after,
#navbar li a:hover::after {
  display: none;
}

/* MOBILE */

@media (max-width: 477px) {
  #header {
    height: 85px;
    padding: 10px 16px;
  }

  .left-header {
    gap: 15px;
  }

  .logo {
    width: 82px;
  }

  #bar {
    font-size: 28px;
  }

  .header-icons {
    gap: 18px;
  }

  .header-icons a {
    font-size: 24px;
  }

  #navbar {
    left: -85%;
    width: 85%;
    justify-content: flex-start;
  }

  #navbar.active {
    left: 0;
  }

  #navbar li a {
    font-size: 16px;
  }
}

#navbar li a.active::after,
#navbar li a:hover::after {
  display: none !important;
  content: none !important;
}

/* PAYMENT METHODS FOOTER*/

.payment-methods{
    margin-top: 0;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom: 0;
}

.payment-methods img{
    width: 200px;
    max-width:100%;
    object-fit:contain;
    margin-top: 40px;
    margin-bottom: -35px;
}

/* MOBILE VIEW */

@media(max-width:477px){

    .payment-methods{
        margin-top: 0;
        margin-bottom: 0;
    }

    .payment-methods img{
        width:120px;
        margin-bottom: -25px;
        margin-top: -10;
    }

}

/*mobile view side panel correction */

@media(max-width:477px){

  #navbar{
    width:78% !important;
    height:100vh !important;

    top:0;
    left:-78% !important;

    padding:65px 22px 25px !important;

    overflow-y:auto;
  }

  #navbar.active{
    left:0 !important;
  }

  #navbar li{
    width:100%;
    padding:16px 0 !important;

    border-bottom:1px solid rgba(255,255,255,0.5);
  }

  #navbar li a{
    font-size:16px !important;
    font-weight:600;
  }

  #close{
    top:18px !important;
    left:20px !important;

    font-size:28px !important;
  }

}

/*navbar correction */

@media(max-width:477px){

  body{
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
  }

  #header{
    height:72px !important;
    padding:6px 14px !important;
  }

  .logo{
    width:70px !important;
  }

  #bar{
    font-size:28px !important;
  }

  .header-icons{
    gap:18px !important;
  }

  .header-icons a{
    font-size:24px !important;
  }

}

/*contact page*/

.contact-page{
  padding:60px 80px;
  background:#f4d9a4;
}

.contact-heading{
  text-align:center;
  margin-bottom:45px;
}

.contact-heading h1{
  font-size:48px;
  color:#2b1408;
}

.contact-heading p{
  color:#7a421f;
  font-size:18px;
}

.contact-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.contact-info,
.contact-form{
  background:#fff;
  padding:35px;
  border-radius:16px;
  box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.contact-info h2,
.contact-form h2{
  color:#7a421f;
  margin-bottom:25px;
  font-size:28px;
}

.contact-box{
  display:flex;
  gap:16px;
  margin-bottom:22px;
  align-items:flex-start;
}

.contact-box i{
  color:#d3750a;
  font-size:22px;
  margin-top:5px;
}

.contact-box p{
  margin:0;
  color:#333;
  line-height:1.7;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:14px;
  margin-bottom:16px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:15px;
}

.contact-form textarea{
  height:130px;
  resize:none;
}

.contact-form button{
  background:#d3750a;
  color:#fff;
  border:none;
  padding:14px 28px;
  border-radius:8px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

@media(max-width:799px){
  .contact-page{
    padding:40px 18px;
  }

  .contact-container{
    grid-template-columns:1fr;
  }

  .contact-heading h1{
    font-size:36px;
  }
}

/* PRIVACY POLICY PAGE */

.policy-page{
    width:100%;
    background:#f4d9a4;
    padding:70px 80px;
}

.policy-container{
    max-width:1100px;
    margin:auto;
    background:#fff;
    padding:55px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.policy-container h1{
    font-size:52px;
    color:#2b1408;
    margin-bottom:28px;
    text-align:center;
}

.intro{
    font-size:17px;
    line-height:1.9;
    color:#444;
    margin-bottom:22px;
}

.policy-box{
    margin-top:40px;
}

.policy-box h2{
    font-size:30px;
    color:#7a421f;
    margin-bottom:20px;
}

.policy-box p{
    font-size:16px;
    line-height:1.9;
    color:#444;
    margin-bottom:18px;
}

.policy-box ul{
    padding-left:22px;
}

.policy-box ul li{
    margin-bottom:16px;
    font-size:16px;
    line-height:1.8;
    color:#444;
}

/* MOBILE */

@media(max-width:799px){

    .policy-page{
        padding:40px 18px;
    }

    .policy-container{
        padding:30px 22px;
    }

    .policy-container h1{
        font-size:34px;
    }

    .policy-box h2{
        font-size:22px;
        line-height:1.4;
    }

    .intro,
    .policy-box p,
    .policy-box ul li{
        font-size:14px;
        line-height:1.8;
    }

}

/* TERMS & CONDITIONS PAGE */

.terms-page{
    width:100%;
    background:#f4d9a4;
    padding:70px 80px;
}

.terms-container{
    max-width:1100px;
    margin:auto;

    background:#fff;

    padding:55px;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.terms-container h1{
    font-size:52px;
    color:#2b1408;
    margin-bottom:28px;
    text-align:center;
}

.intro{
    font-size:17px;
    line-height:1.9;
    color:#444;
    margin-bottom:22px;
}

.terms-box{
    margin-top:40px;
}

.terms-box h2{
    font-size:30px;
    color:#7a421f;
    margin-bottom:20px;
}

.terms-box p{
    font-size:16px;
    line-height:1.9;
    color:#444;
    margin-bottom:18px;
}

.terms-box ul{
    padding-left:22px;
}

.terms-box ul li{
    margin-bottom:16px;
    font-size:16px;
    line-height:1.8;
    color:#444;
}

/* MOBILE */

@media(max-width:799px){

    .terms-page{
        padding:40px 18px;
    }

    .terms-container{
        padding:30px 22px;
    }

    .terms-container h1{
        font-size:34px;
    }

    .terms-box h2{
        font-size:22px;
        line-height:1.4;
    }

    .intro,
    .terms-box p,
    .terms-box ul li{
        font-size:14px;
        line-height:1.8;
    }

}

/* RETURN & REPLACEMENT PAGE */

.return-page{
    width:100%;
    background:#f4d9a4;
    padding:70px 80px;
}

.return-container{
    max-width:1100px;
    margin:auto;
    background:#fff;
    padding:55px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.return-container h1{
    font-size:52px;
    color:#2b1408;
    margin-bottom:28px;
    text-align:center;
}

.return-box{
    margin-top:38px;
}

.return-box h2{
    font-size:30px;
    color:#7a421f;
    margin-bottom:18px;
}

.return-box p,
.return-box ul li{
    font-size:16px;
    line-height:1.8;
    color:#444;
}

.return-box ul{
    padding-left:22px;
}

.return-box ul li{
    margin-bottom:14px;
}

.important-note{
    background:#fff7ef;
    padding:25px;
    border-left:5px solid #d3750a;
    border-radius:12px;
}

@media(max-width:799px){
    .return-page{
        padding:40px 18px;
    }

    .return-container{
        padding:30px 22px;
    }

    .return-container h1{
        font-size:34px;
    }

    .return-box h2{
        font-size:22px;
        line-height:1.4;
    }

    .return-box p,
    .return-box ul li{
        font-size:14px;
        line-height:1.8;
    }
}

.search-popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:0vh;
    background:rgba(0,0,0,0);

    display:none;
    justify-content:center;
    align-items: flex-start; /* Move to top */
    padding-top: 20px; /* Distance from top */
    padding-right: 50px;

    z-index:9999;
}

.search-popup.active{
    display:flex;
}

.search-box-popup{
    width:100%;
    max-width:850px;

    background:white;
    padding:10px;
    border-radius:18px;

    position:relative;
}

.search-box-popup h3{
    text-align:center;
    margin-bottom:10px;
    color:#2b1408;
}

.close-search{
    position:absolute;
    right:15px;
    top:15px;

    border:none;
    background:none;

    font-size:20px;
    cursor:pointer;
}

.popup-search-row{
    display:flex;
}

.popup-search-row input{
    flex:1;
    height:40px;

    border:1px solid #ddd;
    border-right:none;

    padding:0 15px;

    border-radius:10px 0 0 10px;

    outline:none;
}

.popup-search-row button{
    width:60px;

    border:none;

    background:#d3750a;
    color:white;

    border-radius:0 10px 10px 0;

    cursor:pointer;
}

#popupVoiceSearch{
    width:55px;
    border:none;
    background:#2b1408;
    color:white;
    cursor:pointer;
    border-radius:0 10px 10px 0;
}

#goSearch{
    width:55px;
    border:none;
    background:#d3750a;
    color:white;
    cursor:pointer;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.popup-search-row input{
    flex:1;
}

/* CART OVERLAY */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: 9998;
}

/***********************
   CART PANEL
************************/

.cart-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:9998;
}

.cart-overlay.active{
    opacity:1;
    visibility:visible;
}

.cart-panel{
    position:fixed;
    top:0;
    right: -100%;
    width: 80%;
    max-width:360px;
    height:100vh;
    background:#fff;
    z-index:9999;
    display:flex;
    flex-direction:column;
    transition:.35s;
    box-shadow:-5px 0 25px rgba(0,0,0,.15);
}

.cart-panel.active{
    right:0;
}

/* HEADER */

.cart-panel-header{
    background:#d95a0c;
    color:#fff;
    padding:22px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.cart-panel-header h2{
    margin:0;
    color:#fff;
    font-size:28px;
    line-height:1;
}

#closeCart{
    border:none;
    background:none;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

/* PRODUCT TOTAL */

.cart-head{
    display:flex;
    justify-content:space-between;
    padding:15px 24px;
    border-bottom:1px solid #eee;
    font-size:11px;
    letter-spacing:4px;
    color:#777;
}

/* ITEMS */

.cart-items{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:0 24px;
}

.cart-item{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:18px 0;
    border-bottom:1px solid #eee;
    position:relative;
}

.cart-product-left{
    display:flex;
    gap:14px;
    flex:1;
}

.cart-product-left a{
    width:80px;
    min-width:80px;
    height:100px;
    display:block;
}


.cart-item-info{
    flex:1;
}

.cart-item-info h4{
    font-size:16px;
    margin:0 0 6px;
    line-height:1.35;
}

.cart-item-info p{
    margin:0 0 6px;
    font-size:14px;
}

.cart-price{
    font-weight:700;
    color:#111;
}

.cart-item-total{
    min-width:55px;
    text-align:right;
    font-weight:700;
    font-size:15px;
}

/* QTY */

.qty-box{
    display:flex;
    width:110px;
    height:34px;
    border:1px solid #ddd;
    border-radius:8px;
    overflow:hidden;
    margin-top:8px;
}

.qty-box button{
    width:32px;
    border:none;
    background:#f7f7f7;
    cursor:pointer;
    font-size:16px;
}

.qty-box input{
    width:46px;
    border:none;
    text-align:center;
    outline:none;
    font-size:15px;
    font-weight:600;
}

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

.remove-cart-item{
    position:absolute;
    right:0;
    bottom:18px;
    width:30px;
    height:30px;
    border:none;
    border-radius:50%;
    background:#fff2eb;
    color:#d95a0c;
    cursor:pointer;
}

/* FOOTER */

.cart-bottom{
    border-top:1px solid #eee;
    padding:22px 24px;
}

.cart-total-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

.cart-total-row span{
    font-size:20px;
}

.cart-total-row strong{
    font-size:22px;
    font-weight:700;
}

.tax-line{
    font-size:12px;
    line-height:1.7;
    margin-bottom:20px;
    margin-top: -10px;
}

.checkout-btn{
    width:90%;
    height:52px;
    border:none;
    border-radius:10px;
    background:#d95a0c;
    color:#fff;
    font-size:18px;
    cursor:pointer;
}

.checkout-btn:hover{
    background:#bf4d08;
}

/* MOBILE */

@media(max-width:600px){

    .cart-panel{
        width: 75%;
        right: -100%;
        
    }

    .cart-panel.active{
        right:0;
    }

    .cart-items{
        padding:0 16px;
    }

    .cart-panel-header{
        padding:20px 16px;
    }

    .cart-bottom{
        padding:18px 16px;
    }

    .cart-product-left a{
        width:70px;
        min-width:70px;
        height:90px;
    }

    .cart-product-left img{
        width:70px;
        height:90px;
    }

    .cart-item-info h4{
        font-size:15px;
    }

    .cart-item-total{
        font-size:14px;
    }

}



.cart-item a {
  text-decoration: none;
  color: inherit;
}

.cart-item a:hover {
  text-decoration: none;
}

.header-icons a,
.cart-icon,
#openCart {
  position: relative;
}

#cartCount {
  position: absolute;
  top: 1px;
  right: 5px;

  min-width: 18px;
  height: 18px;

  color: #fff;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  padding: 0 4px;
}

.footer-box a{
    color: #fff;
    text-decoration: none;
}

.footer-box a:hover{
    color: #f4c27a;
}

.footer-box p{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.footer-box i{
    color: #f4c27a;
}

.floating-cart-btn{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 62px;
  height: 62px;
  border: none;
  border-radius: 50%;
  background: #e85d04;
  color: #fff;
  font-size: 24px;
  z-index: 9997;
  box-shadow: 0 8px 24px rgba(232,93,4,.35);
  cursor: pointer;
}

.floating-cart-btn #cartCount{
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #e85d04;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info a {
  color: inherit;
  text-decoration: none;
}

.contact-info a:hover {
  color: inherit;
  text-decoration: none;
}

.pro {
  position: relative;
}

.discount-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #e85d04;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 20px;
  z-index: 5;
}

.home-cart-action {
  position: absolute;
  right: 18px;
  bottom: -2px;
}

.featured-qty-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 90px;
  height: 42px;
  position: absolute;
  top: -65px;
  right: 5px;
  border-radius: 25px;
  background: #e8fff4;
  border: 2px solid #1c7c54;
}

.featured-qty-box button {
  border: none;
  background: transparent;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  color: #1c7c54;
}

.featured-qty-box button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.featured-qty-box span {
  font-size: 15px;
  font-weight: 700;
  color: #1c7c54;
}

.out-stock-btn {
  background: #e5e5e5 !important;
  color: #777 !important;
  border: 2px solid #686868 !important;
  font-size: 12px !important;
  line-height: 1.1;
  cursor: not-allowed !important;
  opacity: 1 !important;
  position: absolute;
  top: -70px;
  right: 18px;
}

.out-stock-btn span {
  display: block;
  text-align: center;
  font-size: 10px;
  line-height: 1.1;
  color: #636363;
}

@media (max-width:799px){
  .home-cart-action {
  right: 2px;
  bottom: 10px;
  }

 .featured-qty-box {
  top: -48px;
  right: 5px;
  width: 60px;
  height: 30px;
  }

 .out-stock-btn {
  top: -70px;
  right: 18px;
  }

}

.account-menu {
  position: relative;
}

.account-icon {
  background: none;
  border: none;
  font-size: 27px;
  cursor: pointer;
  color: #65371a;
}

.account-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 38px;
  background: #d3b3b3;
  min-width: 170px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  border-radius: 10px;
  overflow: hidden;
  z-index: 9999;
}

.account-dropdown.show {
  display: block;
}

.account-dropdown a,
.account-dropdown button {
  width: 100%;
  padding: 12px 15px;
  background: #d3b3b3;
  border: none;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  color: #833a24;
  text-decoration: none;
  display: block;
}

.account-dropdown a:hover,
.account-dropdown button:hover {
  background: #ec801b;
}

.founder-section{
    background:#efddad;
    padding:30px 10px;
    height: 2450px;
}

.founder-card{
    max-width:1400px;
    margin:auto;
    border-radius:20px;
    overflow:hidden;
    background:#fff;

    background-image:url("img/my.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    height: 2400px;

    box-shadow:0 10px 30px rgba(0,0,0,0);
}

.founder-overlay{
    min-height:900px;

    background:
    linear-gradient(
      90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 0%
    );
}

.founder-content{
    width:70%;
    padding:80px 70px;
}

  .founder-content h1{
    font-size:88px !important;
    line-height:1.25 !important;
    margin: 45px 0 15px !important;
  }

  .founder-content h1 span{
    display:block;
  }

  .founder-content h1 br{
    display:none;
  }

  .founder-content h4{
      font-size:35px;
      margin-top:-12px;
      margin-bottom: -2px;
      text-align: end;
      margin-right: 250px;
  }

  .founder-content p{
      font-size:45px;
      width:68%;
      margin-bottom: 30px;
      line-height:1.4;
  }

  .founder-content h3{
      font-size:45px;
      margin-bottom: 40px;
      margin-top: 45px;
      color: #703c17;
  }

  .founder-content h6{
    font-size:40px;
    text-align: end;
    margin-right: 130px;
    margin-top: 10px;
    margin-right: 540px;
    color: #703c17;
  }

  .founder-content h5{
    font-size:62px;
    text-align: start;
    margin-right: 130px;
    margin-top: 70px;
    color: #703c17;
  }

@media(max-width:768px){

  .founder-card{
      min-height:auto;
      background-position:center top;
      background-size: 100%;
  }

  .founder-overlay{
      background:transparent;
      color: rgb(132, 71, 30);
      background-position: top;
  }

  .founder-content{
      width:60%;
      padding:20px 0px;
      padding-left: 10px;
  }

  .founder-content h1{
    font-size:22px !important;
    line-height:1.25 !important;
    margin:10px 0 15px !important;
  }

  .founder-content h1 span{
    display:block;
  }

  .founder-content h1 br{
    display:none;
  }

  .founder-content h4{
      font-size:10px;
      margin-top:-25px;
      margin-bottom: -2px;
      text-align: end;
      margin-right: 50px;
  }

  .founder-content p{
      font-size:12px;
      width:75%;
      margin-top: -20px;
      line-height: 1.25;
  }

  .founder-content h3{
      font-size:12px;
      margin-bottom: 26px;
      margin-top: -2px;
  }

  .founder-section{
    height: 583px;
  }

  .founder-content h6{
    font-size:12px;
    text-align: end;
    margin-right: 130px;
    margin-top: 3px;
  }

  .founder-content h5{
    font-size:12px;
    margin-top: 5px;
  }

  
}

.feature-box-1 h3{
    font-size:35px;
    font-weight:600;
    text-align: center;
    margin-top: 100px;
    margin-right: 960px;
    margin-top: 150px;
    color: #ecae7f;
}

.feature-box-1 p{
    font-size:30px;
    line-height:1.7;
    max-width:380px;
    text-align: center;
    margin-right: 350px;
    margin-left: 30px;
    margin-top: 15px;
    color: #ffffff;
}

.feature-box-2 h3{
    font-size:35px;
    margin-bottom:0px;
    font-weight:600;
    text-align: center;
    margin-top: -280px;
    margin-right: 30px;
    color: #ecae7f;
}

.feature-box-2 p{
    font-size:30px;
    line-height:1.7;
    max-width: 430px;
    text-align: center;
    margin-left: 470px;
    margin-top: 15px;
    color: #ffffff;
}

.feature-box-3 h3{
    font-size:35px;
    margin-bottom:0px;
    font-weight:600;
    text-align: center;
    margin-top: -280px;
    margin-right: -950px;
    color: #ecae7f;
}

.feature-box-3 p{
    font-size:30px;
    line-height:1.7;
    max-width:390px;
    text-align: center;
    margin-left: 980px;
    margin-top: 15px;
    color: #ffffff;
}

@media(max-width:768px){

    .feature-box-1 h3{
        font-size:12px;
        text-align: center;
        margin-right: 240px;
        margin-top: 25px;
        margin-bottom: 5px;
    }

    .feature-box-1 p{
        font-size:8px;
        width:30%;
        text-align: center;
        margin-right: 240px;
        margin-left: 8px;
        margin-top: -2px;
        padding: 0 -40px;
        
    }

    .feature-box-2 h3{
        font-size:12px;
        text-align: center;
        margin-right: 5px;
        margin-top: -79px;
        margin-bottom: 5px;
    }

    .feature-box-2 p{
        font-size:8px;
        max-width: 112px;
        text-align: center;
        margin-right: 5px;
        margin-left: 125px;
        margin-top: -4px;
        padding: 0 -40px;
        line-height: 1.5;
    }

    .feature-box-3 h3{
        font-size: 12px;
        text-align: center;
        margin-right: -240px;
        margin-top: -82px;
        margin-bottom: 5px;
    }

    .feature-box-3 p{
        font-size:8px;
        max-width:112px;
        text-align: center;
        margin-left: 250px;
        margin-top: -2px;
        line-height: 1.5;
    }
}

@media(max-width:768px){
  .account-icon {
  font-size: 24px;
  }

  #accountDropdown {
    width: 120px;
  }

  #accountDropdown a,
  #accountDropdown button {
    font-size: 11px !important;
    padding: 6px 10px;
  }
}


/*search bar mobile view*/

@media (max-width: 768px) {

  .search-popup {
    padding-top: 8px;
    padding-right: 0;
    justify-content: center;
    align-items: flex-start;
  }

  .search-box-popup {
    width: 86%;
    max-width: 330px;
    padding: 8px;
    border-radius: 14px;
  }

  .popup-search-row input {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  #goSearch {
    width: 45px;
    height: 36px;
  }

  #popupVoiceSearch {
    width: 42px;
    height: 36px;
  }

}

.checkout-btn{
    width:100%;
    background:#d95a0c;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:12px 16px 24px;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:.25s;
}

.checkout-btn:hover{
    background:#111;
}

.checkout-main{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.checkout-text{
    font-size:15px;
    font-weight:700;
    letter-spacing:.5px;
}

.checkout-icons img{
    height:18px;
}

.checkout-arrow{
    font-size:14px;
}

.powered-by{
    position:absolute;
    right:10px;
    bottom:5px;
    display:flex;
    align-items:center;
    gap:4px;
    font-size:10px;
    color:#ddd;
}

.powered-by img{
    height:10px;
}



/* =========================================================
   TILAK BOOK DEPOT — HOMEPAGE E-COMMERCE REDESIGN
   Appended overrides intentionally leave .footer and the
   floating cart / cart panel styles untouched.
========================================================= */
:root {
  --tbd-ink: #172238;
  --tbd-muted: #657084;
  --tbd-orange: #e87818;
  --tbd-orange-deep: #b94e0b;
  --tbd-cream: #fff8ee;
  --tbd-line: #e8eaf0;
  --tbd-shadow: 0 18px 55px rgba(27, 37, 57, .10);
}
html { scroll-behavior: smooth; }
body { color: var(--tbd-ink); background: #fff; overflow-x: hidden; }

/* Compact feature presentation: no individual cards, no large image blocks. */
#feature.feature-highlights { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:center; gap:0; padding:18px clamp(18px,4vw,64px); margin:0; background:#fff; border-bottom:1px solid var(--tbd-line); }
.feature-highlight { min-width:0; display:flex; align-items:center; justify-content:center; gap:10px; padding:5px 12px; border-right:1px solid var(--tbd-line); }
.feature-highlight:last-child { border-right:0; }
.feature-icon { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:#fff1e4; color:var(--tbd-orange-deep); font-size:15px; }
.feature-highlight strong, .feature-highlight small { display:block; white-space:nowrap; }
.feature-highlight strong { color:#28344a; font-size:10px; font-weight:800; }
.feature-highlight small { color:#858d9b; font-size:9px; margin-top:4px; }

/* Product discovery */
#product1.section-p1 { padding:66px clamp(18px,5vw,76px) 64px; background:#fff; text-align:left; }
#product1 h2 { color:#1a263b; font-size:clamp(28px,3vw,38px); line-height:1.2; letter-spacing:-1.2px; }
#product1 h2 span { color:var(--tbd-orange-deep); }
#product1 > p { color:#7a8291; font-size:14px; margin:10px 0 27px; }
#product1 .pro-container { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
#product1 .pro { width:auto; min-width:0; padding:13px; border:1px solid #eceef2; border-radius:15px; box-shadow:0 6px 20px rgba(22,35,56,.045); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
#product1 .pro:hover { transform:translateY(-5px); border-color:#f3d0b1; box-shadow:0 16px 34px rgba(22,35,56,.10); }
#product1 .pro img { height:220px; border-radius:10px; background:#f7f7f8; }
#product1 .pro .des { padding:13px 2px 4px; }
#product1 .pro .des span { font-size:11px; color:#81899a; }
#product1 .pro .des h5 { min-height:38px; font-size:13px; line-height:1.45; color:#273348; margin:7px 0; }
#product1 .pro .star { font-size:12px; }
#product1 .pro .des h4 { color:#b9500a; font-size:16px; }
#product1 .pro .cart { width:37px; height:37px; line-height:37px; right:14px; bottom:18px; border:1px solid #d6ecdf; background:#effaf2; color:#16804a; }
#product1 .price { flex-wrap:wrap; gap:7px; }
#product1 .price .mrp { font-size:12px; color:#8a91a0; }
#product1 .price h4 { font-size:16px; }

/* Slim single-line shopping promises — desktop and mobile */
.shop-promise-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px;
    width: 100%;
    padding: 6px 12px;
    background: #fff8f0;
    border-top: 1px solid #f8e6d3;
    border-bottom: 1px solid #f8e6d3;
    box-sizing: border-box;
}

.shop-promise-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
}

.shop-promise-item > i {
    color: var(--tbd-orange-deep);
    font-size: 15px;
    flex-shrink: 0;
}

.shop-promise-item span {
    min-width: 0;
}

.shop-promise-item strong,
.shop-promise-item small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-promise-item strong {
    font-size: 10px;
    line-height: 1.1;
    color: #26344a;
}

.shop-promise-item small {
    font-size: 8px;
    line-height: 1.1;
    color: #7b8492;
    margin-top: 1px;
}

@media (max-width: 768px) {
  .shop-promise-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    padding: 3px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .shop-promise-row::-webkit-scrollbar {
    display: none;
  }

  .shop-promise-item {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 6px;
    padding: 0;
    margin-right: 15px;
  }

  .shop-promise-item > i {
    font-size: 12px;
  }

  .shop-promise-item strong {
    font-size: 10px;
  }

  .shop-promise-item small {
    font-size: 8px;
    margin-top: 1px;
  }
}

/* Existing promotional banner, categories and publisher section retain their markup. */
#explore-banner { min-height:390px; padding:55px clamp(22px,6vw,88px); background-position:center; }
.banner-content h1 { font-size:clamp(36px,4vw,54px); }
#shop-category { padding:48px clamp(18px,4vw,60px) 34px; border-radius:0; }
.category-title { margin-bottom:25px; }
.category-title h2 { font-size:clamp(27px,3vw,36px); letter-spacing:-.8px; }
.category-wrapper { grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; }
.cat-box { min-width:0; min-height:155px; border:1px solid rgba(23,34,56,.035); border-radius:14px; padding:13px 7px; }
.cat-box:hover { transform:translateY(-4px); box-shadow:0 12px 25px rgba(23,34,56,.08); }
.cat-box img { width:86px; height:86px; }
.cat-box h3 { font-size:12px; line-height:1.4; }
#publisher-section { padding:48px clamp(18px,4vw,60px); }
.publisher-heading h2 { font-size:clamp(28px,3vw,36px); }
.publisher-container { grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.publisher-card { width:auto; min-width:0; padding:15px 12px; border:1px solid #edf0f4; border-radius:13px; box-shadow:0 6px 18px rgba(23,34,56,.05); }
.publisher-card img { height:82px; }
.publisher-card h4 { font-size:14px; }
.publisher-card span { font-size:11px; }

@media (max-width:1100px) {

  #feature.feature-highlights { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:12px; }
  .feature-highlight:nth-child(3) { border-right:0; }
  .feature-highlight:nth-child(4), .feature-highlight:nth-child(5), .feature-highlight:nth-child(6) { padding-top:10px; }
  #product1 .pro-container { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .category-wrapper { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hero-side-note { right:70px; }
}
@media (max-width:799px) {

  #feature.feature-highlights { padding:14px 16px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 0; }
  .feature-highlight { justify-content:flex-start; padding:6px 8px; gap:7px; }
  .feature-icon { width:29px; height:29px; flex-basis:29px; font-size:12px; border-radius:9px; }
  .feature-highlight strong { font-size:9px; }
  .feature-highlight small { font-size:8px; }
  #product1.section-p1 { padding:43px 18px 44px; }
  #product1 .pro-container { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
  #product1 .pro { padding:9px; border-radius:12px; }
  #product1 .pro img { height:175px; }
  #product1 .pro .des h5 { font-size:12px; }
  #product1 .pro .cart { width:32px; height:32px; line-height:32px; right:11px; bottom:13px; }
  .shop-promise-row { padding:14px 16px; gap:6px; }
  .shop-promise-item { justify-content:flex-start; gap:8px; padding:5px; }
  .shop-promise-item > i { font-size:16px; }
  .shop-promise-item strong { font-size:10px; }
  .shop-promise-item small { font-size:8px; line-height:1.4; }
  #explore-banner { min-height:340px; padding:40px 24px; }
  .banner-content h1 { font-size:36px; }
  #shop-category { padding:36px 16px 26px; }
  .category-wrapper { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
  .cat-box { min-height:130px; }
  .cat-box img { width:68px; height:68px; }
  .cat-box h3 { font-size:11px; }
  #publisher-section { padding:36px 16px; }
  .publisher-container { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
  .publisher-card { padding:10px 7px; }
  .publisher-card img { height:60px; }
  .publisher-card h4 { font-size:11px; }
  .publisher-card span { font-size:9px; }
}
@media (max-width:520px) {
  #feature.feature-highlights { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px 10px; gap:5px 0; }
  .feature-highlight { border-right:0; padding:6px 5px; }
  .feature-highlight strong { font-size:9px; }
  .feature-highlight small { font-size:8px; }
  .shop-promise-row { grid-template-columns:1fr; gap:5px; padding:13px 20px; }
  .shop-promise-item { justify-content:flex-start; padding:5px 0; }
  .shop-promise-item small { font-size:9px; }
  #explore-banner { min-height:315px; padding:34px 20px; }
  .banner-content h1 { font-size:31px; }
  .banner-text { font-size:13px; }
  .category-title h2 { font-size:25px; }
  .category-title p { font-size:12px; }
  .category-wrapper { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cat-box { min-height:140px; }
  .cat-box img { width:78px; height:78px; }
  .cat-box h3 { font-size:12px; }
  .publisher-container { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .publisher-card img { height:72px; }
  .publisher-card h4 { font-size:12px; }
  .publisher-card span { font-size:10px; }
}

/* Reference-inspired polish for homepage content only. Existing header is untouched. */

.home-category-quicklinks { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; padding:17px clamp(14px,4vw,60px); border-bottom:1px solid #f0f1f4; background:#fff; }
.home-category-quicklinks .quicklinks-label { color:#8b92a0; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; margin-right:3px; }
.home-category-quicklinks a { display:inline-flex; align-items:center; min-height:32px; padding:7px 13px; border:1px solid #e8ebf0; border-radius:999px; background:#fff; color:#39455a; font-size:10px; font-weight:700; text-decoration:none; transition:all .2s ease; }
.home-category-quicklinks a:hover { color:#a94b0b; border-color:#efbd91; background:#fff7ef; transform:translateY(-1px); }
#product1.section-p1 { position:relative; }
.featured-view-all { position:absolute; top:72px; right:clamp(18px,5vw,76px); display:inline-flex; align-items:center; gap:8px; color:#b9500a; font-size:11px; font-weight:800; text-decoration:none; }
.featured-view-all:hover { color:#172238; }
.home-promo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:0 clamp(18px,5vw,76px) 42px; background:#fff; }
.home-promo-card { min-height:158px; display:flex; align-items:center; gap:17px; overflow:hidden; position:relative; padding:23px 20px; border-radius:16px; color:#fff; text-decoration:none; isolation:isolate; transition:transform .25s ease,box-shadow .25s ease; }
.home-promo-card::after { content:""; position:absolute; z-index:-1; width:180px; height:180px; right:-42px; bottom:-95px; border:1px solid rgba(255,255,255,.22); border-radius:50%; box-shadow:0 0 0 24px rgba(255,255,255,.05),0 0 0 49px rgba(255,255,255,.035); }
.home-promo-card:hover { transform:translateY(-4px); box-shadow:0 15px 30px rgba(23,34,56,.14); color:#fff; }
.promo-school { background:linear-gradient(120deg,#183d37,#2c6a5a); }
.promo-exams { background:linear-gradient(120deg,#8d3d12,#d36d25); }
.promo-college { background:linear-gradient(120deg,#202c49,#3f537d); }
.promo-icon { flex:0 0 49px; width:49px; height:49px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:14px; background:rgba(255,255,255,.12); color:#ffe0b7; font-size:22px; }
.promo-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.promo-copy small { color:rgba(255,255,255,.72); font-size:8px; font-weight:800; letter-spacing:1px; margin-bottom:8px; }
.promo-copy strong { color:#fff; font-size:clamp(15px,1.4vw,19px); line-height:1.3; }
.promo-copy > span { display:inline-flex; align-items:center; gap:7px; margin-top:10px; color:rgba(255,255,255,.88); font-size:9px; line-height:1.5; }
.promo-copy > span i { color:#ffd3a1; }

/* Consistent spacing and product imagery inspired by curated online bookstores. */
#shop-category, #publisher-section { background:#fbfcfe; }
.category-title, .publisher-heading { text-align:left; }
.category-title h2, .publisher-heading h2 { color:#1a263b; }
.category-title h2 i, .publisher-heading h2 i { color:#b9500a; }
.cat-box { box-shadow:0 5px 18px rgba(23,34,56,.035); transition:transform .22s ease,box-shadow .22s ease; }
.publisher-card { background:#fff; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.publisher-card:hover { transform:translateY(-3px); border-color:#efc39e; box-shadow:0 13px 26px rgba(23,34,56,.09); }
#product1 .pro img { object-fit:contain; padding:8px; }
#product1 .pro .des h5 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

@media (max-width:1100px) {

  .home-promo-grid { gap:12px; }
  .home-promo-card { padding:18px 14px; gap:12px; }
  .promo-icon { flex-basis:42px; width:42px; height:42px; font-size:19px; }
}
@media (max-width:799px) {

  .home-category-quicklinks { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding:13px 15px; scrollbar-width:none; }
  .home-category-quicklinks::-webkit-scrollbar { display:none; }
  .home-category-quicklinks .quicklinks-label { flex:0 0 auto; }
  .home-category-quicklinks a { flex:0 0 auto; }
  .featured-view-all { top:49px; right:18px; font-size:10px; }
  .home-promo-grid { grid-template-columns:1fr; gap:10px; padding:0 18px 28px; }
  .home-promo-card { min-height:112px; padding:17px 18px; }
  .promo-copy strong { font-size:16px; }
}
@media (max-width:520px) {

  #product1 > p { max-width:72%; font-size:11px; }
  .home-promo-card { min-height:104px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-promo-card, .publisher-card, .home-category-quicklinks a { transition:none; }
}



/* =========================================================
   TILAK BOOK DEPOT — HEADER SEARCH + AUTOCOMPLETE
   Combined responsive layout
   - Dropdown matches the complete search bar width
   - Text-only book suggestions; no prices or images
   - Preserves existing header icons and navigation
========================================================= */

/* Header left area */
#header .left-header {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    gap: 22px;
}

#header .left-header > a {
    flex: 0 0 auto;
}

/* Main search bar */
#header .header-search-bar {
    display: flex;
    align-items: center;
    position: relative !important;
    isolation: auto;

    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 56px;

    padding: 5px 6px 5px 22px;
    gap: 0;
    margin: 0;
    box-sizing: border-box;

    border: 1px solid rgba(36, 32, 27, 0.14);
    border-radius: 999px;
    background: #fffdf9;
    box-shadow: 0 4px 14px rgba(48, 34, 18, 0.08);

    overflow: visible !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    z-index: 10000;
}

/* Focus state */
#header .header-search-bar:focus-within {
    border-color: #5b3516;
    box-shadow: 0 0 0 3px rgba(91, 53, 22, 0.12);
}

/* Hide only the decorative icon inside the search bar */
#header .header-search-bar > i {
    display: none !important;
}

/* Search input */
#header .header-search-bar input,
#header #headerSearchInput {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;

    color: #26211c;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;

    appearance: none;
}

#header .header-search-bar input:focus,
#header #headerSearchInput:focus {
    outline: none;
    box-shadow: none;
}

#header .header-search-bar input::placeholder,
#header #headerSearchInput::placeholder {
    color: #81786e;
    opacity: 1;
}

/* Search button */
#header .header-search-bar button[type="submit"] {
    display: block;
    flex: 0 0 auto;

    margin: 0 0 0 10px;
    padding: 9px 14px;

    border: 0;
    border-radius: 999px;
    background: #2f2117;
    color: #fff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;

    cursor: pointer;
    transition: background 0.2s ease;
}

#header .header-search-bar button[type="submit"]:hover {
    background: #493323;
}

/* Keep the existing right-side header icons unchanged */
#header .header-icons {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 22px;
    position: relative;
    z-index: 1;
}

/* =========================================================
   SEARCH SUGGESTIONS DROPDOWN
   Must be a direct child of .header-search-bar
========================================================= */

#header .header-search-bar > #headerSearchSuggestions {
    display: none;

    position: absolute !important;
    top: calc(100% - 1px) !important;
    left: -1px !important;
    right: -1px !important;
    bottom: auto !important;

    /* Match the entire search bar, including its button */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: 350px !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: #fff !important;
    color: #292929 !important;

    border: 1px solid #dedede !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10) !important;

    z-index: 10001 !important;
}

/* Individual book suggestion */
#header .header-search-bar
> #headerSearchSuggestions
.header-search-suggestion {
    display: block !important;
    position: relative;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0;

    margin: 0 !important;
    padding: 11px 14px !important;
    box-sizing: border-box !important;

    border: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-radius: 0 !important;

    background: #fff !important;
    color: #292929 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    text-align: left !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    cursor: pointer;
    box-shadow: none !important;
    transform: none !important;
}

/* Remove separator from final suggestion */
#header .header-search-bar
> #headerSearchSuggestions
.header-search-suggestion:last-child {
    border-bottom: 0 !important;
}

/* Hover and keyboard selection */
#header .header-search-bar
> #headerSearchSuggestions
.header-search-suggestion:hover,
#header .header-search-bar
> #headerSearchSuggestions
.header-search-suggestion.active {
    background: #f5f1eb !important;
    color: #292929 !important;
}

/* Text-only suggestions: hide all old image, author and price elements */
#header #headerSearchSuggestions .search-suggestion-image,
#header #headerSearchSuggestions .search-suggestion-author,
#header #headerSearchSuggestions .search-suggestion-price {
    display: none !important;
}

/* Suggestion details wrapper */
#header #headerSearchSuggestions .search-suggestion-details {
    display: block !important;
    flex: initial !important;
    width: 100%;
    min-width: 0 !important;
    margin: 0;
    padding: 0;
}

/* Book title */
#header #headerSearchSuggestions .search-suggestion-name {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #292929 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* No matching books / loading message */
#header #headerSearchSuggestions .search-no-results {
    display: block;
    width: 100%;
    margin: 0;
    padding: 13px 14px;
    box-sizing: border-box;

    background: #fff;
    color: #666;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
}

/* Dropdown scrollbar */
#header #headerSearchSuggestions {
    scrollbar-width: thin;
    scrollbar-color: #c4c4c4 #fff;
}

#header #headerSearchSuggestions::-webkit-scrollbar {
    width: 6px;
}

#header #headerSearchSuggestions::-webkit-scrollbar-track {
    background: #fff;
}

#header #headerSearchSuggestions::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 8px;
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1100px) {
    #header .left-header {
        gap: 12px;
    }

    #header .header-search-bar {
        height: 48px;
        padding-left: 16px;
    }

    #header .header-icons {
        margin-left: 12px;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 768px) {
    #header .header-search-bar {
        height: 40px;
        padding-left: 12px;
    }

    #header .header-search-bar input,
    #header #headerSearchInput {
        font-size: 11px;
    }

    #header .header-search-bar button[type="submit"] {
        padding: 8px 10px;
        margin-left: 5px;
        font-size: 11px;
    }

    #header .header-icons {
        margin-left: 8px;
    }

    #header .header-search-bar
    > #headerSearchSuggestions {
        max-height: 300px !important;
    }

    #header .header-search-bar
    > #headerSearchSuggestions
    .header-search-suggestion {
        padding: 10px 11px !important;
        font-size: 13px !important;
    }

    #header #headerSearchSuggestions .search-suggestion-name {
        font-size: 13px !important;
    }
}

/* Small mobile screens */
@media (max-width: 420px) {
    #header .left-header {
        gap: 7px;
    }

    #header .header-search-bar {
        height: 36px;
        padding-left: 9px;
    }

    #header .header-search-bar button[type="submit"] {
        padding: 7px 8px;
        margin-left: 5px;
        font-size: 10px;
    }
}

/* Admin-managed image-only homepage banners */

#hero .hero-slide--admin {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

#hero .hero-slide--admin .admin-banner-click-target {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
}

#hero .hero-slide--admin img.admin-banner-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition: transform 5s ease;
}

#hero .hero-slide--admin.is-active img.admin-banner-image {
    transform: scale(1.035);
}

@media (max-width: 768px) {
    #hero .hero-slide--admin img.admin-banner-image {
        object-fit: cover;
    }
}

@media (prefers-reduced-motion: reduce) {
    #hero .hero-slide--admin img.admin-banner-image {
        transition: none;
        transform: none;
    }
}





/* HOMEPAGE DESKTOP NAVIGATION — CLEAN SEPARATE ROW */
@media (min-width: 769px) {
body:has(#hero.hero-carousel) #header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0;
height: auto;
padding-bottom: 0;
}

body:has(#hero.hero-carousel) #header .left-header,
body:has(#hero.hero-carousel) #header .header-icons {
    flex: 0 0 auto;
}
body:has(#hero.hero-carousel) #header #navbar {
    order: 3;
    position: static;
    inset: auto;
    transform: none;
    display: flex;
    flex: 0 0 calc(100% + 2 * clamp(18px, 4vw, 64px));
    width: calc(100% + 2 * clamp(18px, 4vw, 64px));
    box-sizing: border-box;
    height: auto;
    min-height: 44px;
    margin: 10px calc(-1 * clamp(18px, 4vw, 64px)) 0;
    padding: 8px 12px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    background: #ffa500;
    border-top: 1px solid #eee1d1;
    border-bottom: 1px solid #eee1d1;
    box-shadow: none;
}
body:has(#hero.hero-carousel) #header #navbar li {
    display: block;
    width: auto;
    margin: 0;
    padding: 5px 12px;
    border: 0;
}
body:has(#hero.hero-carousel) #header #navbar li + li {
    border-left: 1px solid #d5c8b8;
}
body:has(#hero.hero-carousel) #header #navbar li a {
    display: block;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.4;
}
body:has(#hero.hero-carousel) #header #navbar #close,
body:has(#hero.hero-carousel) #header #bar {
    display: none;
}

}



/* FIX HOMEPAGE HEADER WIDTH AND NAVIGATION OVERLAP */
@media (min-width: 769px) {
body:has(#hero.hero-carousel) #header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
height: auto !important;
min-height: 0;
overflow: visible;
padding-bottom: 0;
}

/* Keep logo and search area spacious */
body:has(#hero.hero-carousel) #header .left-header {
    flex: 1 1 auto;
    min-width: 0;
    gap: 24px;
}
body:has(#hero.hero-carousel) #header .header-search-bar {
    flex: 1 1 420px;
    width: auto;
    min-width: 280px;
    max-width: 650px;
}
body:has(#hero.hero-carousel) #header .header-search-bar input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
body:has(#hero.hero-carousel) #header .header-icons {
    flex: 0 0 auto;
    margin-left: 16px;
}
/* Navigation gets its own full-width row */
body:has(#hero.hero-carousel) #header #navbar {
    order: 3;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    flex: 0 0 calc(100% + 2 * clamp(18px, 4vw, 64px));
    width: calc(100% + 2 * clamp(18px, 4vw, 64px));
    box-sizing: border-box;
    height: auto !important;
    min-height: 46px;
    margin: 12px calc(-1 * clamp(18px, 4vw, 64px)) 0;
    padding: 8px 12px;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    background: #fff8ee;
    border-top: 1px solid #eee1d1;
    border-bottom: 1px solid #eee1d1;
    box-shadow: none;
}
body:has(#hero.hero-carousel) #header #navbar li {
    display: flex !important;
    align-items: center;
    width: auto !important;
    margin: 0;
    padding: 5px 12px;
    border-bottom: 0;
}
body:has(#hero.hero-carousel) #header #navbar li + li {
    border-left: 1px solid #d5c8b8;
}
body:has(#hero.hero-carousel) #header #navbar li a {
    white-space: nowrap;
    line-height: 1.5;
    font-size: 13px;
}
body:has(#hero.hero-carousel) #header #navbar #close,
body:has(#hero.hero-carousel) #header #bar {
    display: none !important;
}
/* Keep the banner in normal document flow below the navigation */
body:has(#hero.hero-carousel) #hero.hero-carousel {
    position: relative;
    clear: both;
    margin-top: 0;
    z-index: 1;
}

}

/* Make homepage navigation strip thinner */
@media (min-width: 769px) {
body:has(#hero.hero-carousel) #header #navbar {
min-height: 0 !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
margin-top: 6px !important;
border-top-width: 1px;
border-bottom-width: 1px;
}

body:has(#hero.hero-carousel) #header #navbar li {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

}

/* HOMEPAGE DESKTOP: FULL SEARCH + ORANGE NAVIGATION /
@media (min-width: 769px) {
/ Give the search bar all available space */
body:has(#hero.hero-carousel) #header .left-header {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 24px;
}

body:has(#hero.hero-carousel) #header .header-search-bar {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}
body:has(#hero.hero-carousel) #header .header-search-bar input {
    width: 100% !important;
    box-sizing: border-box;
}
body:has(#hero.hero-carousel) #header .header-icons {
    flex-shrink: 0;
}
/* Keep the separate navigation strip orange */
body:has(#hero.hero-carousel) #header #navbar {
    background: #ed9121 !important;
    border-top: 1px solid #e99500 !important;
    border-bottom: 1px solid #e99500 !important;
}
body:has(#hero.hero-carousel) #header #navbar:hover,
body:has(#hero.hero-carousel) #header #navbar:active,
body:has(#hero.hero-carousel) #header #navbar:focus-within {
    background: #ed9121 !important;
}
/* Prevent white backgrounds on individual links */
body:has(#hero.hero-carousel) #header #navbar li,
body:has(#hero.hero-carousel) #header #navbar li a,
body:has(#hero.hero-carousel) #header #navbar li a:hover,
body:has(#hero.hero-carousel) #header #navbar li a:focus,
body:has(#hero.hero-carousel) #header #navbar li a:active,
body:has(#hero.hero-carousel) #header #navbar li a.active {
    background: transparent !important;
}
body:has(#hero.hero-carousel) #header #navbar li + li {
    border-left-color: rgba(255, 255, 255, 0.55) !important;
}

}


/* MOBILE HOMEPAGE: SEARCH ROW BELOW NAVBAR */
@media (max-width: 768px) {
    body:has(#hero.hero-carousel) .mobile-home-search-row {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 14px;
        margin: 0;
        background: #fff;
        position: relative;
        z-index: 10;
    }

    body:has(#hero.hero-carousel) .mobile-home-search-row .header-search-bar {
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 1 1 100%;
        margin: 0;
        box-sizing: border-box;
    }

    body:has(#hero.hero-carousel) .mobile-home-search-row .header-search-bar input {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    body:has(#hero.hero-carousel) .mobile-home-search-row .header-search-suggestions {
        position: absolute;
        top: calc(100% - 4px);
        left: 14px;
        right: 14px;
        z-index: 20;
    }
    
 /* Compact, horizontally scrolling feature cards */
    body:has(#hero.hero-carousel) #feature.feature-highlights {
        display: flex !important;
        flex-wrap: nowrap !important;
        position: relative;
        gap: 10px;
        overflow-x: auto !important;
        overflow-y: hidden;
        padding: 12px 36px !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body:has(#hero.hero-carousel) #feature.feature-highlights::-webkit-scrollbar {
        display: none;
    }

    body:has(#hero.hero-carousel) #feature .feature-highlight {
        flex: 0 0 78% !important;
        min-width: 5px;
        box-sizing: border-box;
        scroll-snap-align: start;
    }

    body:has(#hero.hero-carousel) #feature .feature-carousel-prev {
        left: 3px;
    }

    body:has(#hero.hero-carousel) #feature .feature-carousel-next {
        right: 3px;
    }
}    

/* HOMEPAGE MOBILE: SEARCH BAR SPACING */
@media (max-width: 768px) {
    body:has(#hero.hero-carousel) .homepage-search-wrap,
    body:has(#hero.hero-carousel) #header + .homepage-search-wrap {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
        background: #fff;
    }

    body:has(#hero.hero-carousel) .homepage-search-trigger {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 8px 14px !important;
        box-sizing: border-box !important;
        border: 1px solid #e5e5e5 !important;
        border-radius: 24px !important;
        background: #fff !important;
    }

    body:has(#hero.hero-carousel) #header .header-search-bar {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
    }

    body:has(#hero.hero-carousel) #header .header-search-bar input {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
    }
}


/* Mobile spacing: navbar and homepage hero */
@media (max-width: 768px) {

    #hero {
        margin-top: 18px !important;
    }
}

/* FORCE HIDE SEARCH BAR ON MOBILE HOMEPAGE */
@media screen and (max-width: 768px) {
    #header .header-search-bar,
    #headerSearchForm,
    #headerSearchSuggestions {
        display: none !important;
    }
}



/* Independent mobile homepage search bar */
.tbd-mobile-home-search {
    display: none;
}

@media screen and (max-width: 768px) {
    /* Hide the old header search on mobile homepage only */
    body:has(#hero.hero-carousel) #header .header-search-bar {
        display: none !important;
    }

    /* Show the new independent search row */
    body:has(#hero.hero-carousel) .tbd-mobile-home-search {
        display: block !important;
        width: auto !important;
        margin: 12px 14px 16px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .tbd-mobile-home-search__form {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 5px 6px 5px 13px !important;
        box-sizing: border-box !important;
        border: 1px solid #e4d7c8 !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 3px 12px rgba(60, 35, 15, 0.08) !important;
    }

    .tbd-mobile-home-search__form > i {
        flex: 0 0 auto;
        color: #8b4b18;
        font-size: 16px;
    }

    .tbd-mobile-home-search__form input {
        flex: 1 1 auto !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: none !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #292929 !important;
        font-size: 14px !important;
    }

    .tbd-mobile-home-search__form button {
        flex: 0 0 auto !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 13px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: #8b4513 !important;
        color: #fff !important;
        font-size: 13px !important;
        cursor: pointer;
    }
}

/* Separate mobile homepage search only */
@media (max-width: 768px) {
    body:has(#hero.hero-carousel) .tbd-mobile-home-search {
        position: relative;
        display: block !important;
        margin: 12px 14px 16px !important;
        z-index: 30;
    }

    body:has(#hero.hero-carousel) #header .header-search-bar,
    body:has(#hero.hero-carousel) #header #headerSearchSuggestions {
        display: none !important;
    }

    .tbd-mobile-home-search__form {
        position: relative;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }

    .tbd-mobile-home-search__placeholder {
        position: absolute;
        left: 40px;
        right: 105px;
        top: 50%;
        transform: translateY(-50%);
        overflow: hidden;
        white-space: nowrap;
        pointer-events: none;
        font-size: 13px;
        color: #888;
    }

    .tbd-mobile-home-search__placeholder span {
        display: inline-block;
        white-space: nowrap;
        animation: none !important;
    }

    .tbd-mobile-home-search__form input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .tbd-mobile-home-search__suggestions[hidden] {
        display: none !important;
    }

    .tbd-mobile-home-search__suggestions:not([hidden]) {
        position: absolute;
        top: calc(100% + 7px);
        left: 0;
        right: 0;
        max-height: 280px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid #eadfd3;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
        z-index: 9999;
    }

    .tbd-mobile-home-search__suggestion {
        display: block;
        width: 100%;
        padding: 12px 14px;
        border: 0;
        border-bottom: 1px solid #f0ebe5;
        background: #fff;
        color: #30251d;
        text-align: left;
        font-size: 14px;
    }

    .tbd-mobile-home-search__suggestion small {
        display: block;
        margin-top: 3px;
        color: #888;
        font-size: 11px;
    }
}

/* ==========================================
   TILAK BOOK DEPOT — SLIM SEAMLESS TICKER
========================================== */

.tbd-topbar {
    width: 100%;
    height: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    z-index: 1001;
    background: #e2edf0;
    box-sizing: border-box;
}

/* Moving area */
.tbd-topbar-marquee {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    box-sizing: border-box;
}

.tbd-topbar-marquee[hidden] {
    display: none !important;
}

/* One shared track containing both identical message groups */
.tbd-announcement-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    height: 28px;
    margin: 0;
    padding: 0;
    gap: 0;
    transform: translateX(0);
    animation: tbdSeamlessTicker 22s linear infinite;
    will-change: transform;
}

/* Each group must have exactly the same width and content */
.tbd-topbar-messages {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: max-content;
    min-width: 0;
    height: 28px;
    margin: 0;
    padding: 0;
    gap: 0;
    white-space: nowrap;
    animation: none !important;
    transform: none !important;
}

/* Individual announcement */
.tbd-topbar-messages span {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 35px;
    color: #333;
    font-size: 11px;
    font-weight: 600;
    line-height: 28px;
    white-space: nowrap;
}

/* The second group follows immediately after the first */
#tbdAnnouncementMessagesDuplicate {
    margin-left: 0;
}

/* Move exactly one complete group width */
@keyframes tbdSeamlessTicker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--ticker-distance, 0px)));
    }
}

/* Pause the entire track on hover */
.tbd-topbar-marquee:hover .tbd-announcement-track {
    animation-play-state: paused;
}

/* Social icons remain stationary on the right */
.tbd-topbar-social {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 28px;
    margin: 0;
    padding: 0 12px;
    background: #e2edf0;
    box-sizing: border-box;
}

.tbd-topbar-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}

.tbd-topbar-social a:hover {
    color: #222;
}

/* Smaller screens */
@media (max-width: 600px) {
    .tbd-topbar,
    .tbd-topbar-marquee,
    .tbd-announcement-track,
    .tbd-topbar-messages,
    .tbd-topbar-social {
        height: 28px;
        min-height: 28px;
    }

    .tbd-topbar-messages span {
        padding: 0 22px;
        font-size: 10px;
        line-height: 28px;
    }

    .tbd-topbar-social {
        gap: 8px;
        padding: 0 9px;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .tbd-announcement-track {
        animation-duration: 60s;
    }
}

/* SAFE MOBILE FEATURE STRIP */
@media screen and (max-width: 768px) {
    #feature.feature-highlights {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 8px 12px !important;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    #feature.feature-highlights > .feature-highlight {
        flex: 0 0 50% !important;
        width: 40% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 10px !important;
    }
}
/*
/* ========================================
   SHOP BY EXAMS
======================================== */

#shop-by-exams.shop-by-exams {
    width: 100%;
    padding: 32px 5%;
    margin: 0;
    background: #fff;
}

.shop-exams-heading {
    margin-bottom: 24px;
}

.shop-exams-heading h2 {
    margin: 0;
    color: #263248;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 700;
    line-height: 1.3;
}

.shop-exams-heading h2 span {
    color: #e87518;
}

.shop-exams-heading p {
    margin: 8px 0 0;
    color: #727989;
    font-size: 14px;
    line-height: 1.5;
}

.shop-exams-list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.shop-exam-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 8px 4px;
    color: #424b5b;
    text-align: center;
    text-decoration: none;
    border-radius: 14px;
    transition: transform 0.25s ease, color 0.25s ease;
}

.shop-exam-item:hover {
    color: #e87518;
    transform: translateY(-5px);
}

.shop-exam-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(64px, 6.5vw, 88px);
    height: clamp(64px, 6.5vw, 88px);
    flex-shrink: 0;
    border-radius: 50%;
    font-size: clamp(24px, 2.5vw, 32px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.shop-exam-item:hover .shop-exam-icon {
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(30, 40, 60, 0.12);
}

.shop-exam-icon.teal {
    background: #d9f4ee;
    color: #299e91;
}

.shop-exam-icon.purple {
    background: #e8e5ff;
    color: #7664d8;
}

.shop-exam-icon.peach {
    background: #ffeadf;
    color: #d87b54;
}

.shop-exam-icon.blue {
    background: #dcecff;
    color: #3989e8;
}

.shop-exam-icon.pink {
    background: #f8e0f3;
    color: #c65cae;
}

.shop-exam-icon.green {
    background: #e1f3d6;
    color: #70a84e;
}

.shop-exam-icon.yellow {
    background: #fff0c9;
    color: #b98a20;
}

.shop-exam-icon.mint {
    background: #d8f4e8;
    color: #299d78;
}

.shop-exam-label {
    display: block;
    max-width: 100%;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* TABLET */
@media (max-width: 900px) {
    .shop-exams-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    #shop-by-exams.shop-by-exams {
        padding: 28px 4%;
    }
}

/* MOBILE */
@media (max-width: 480px) {
    #shop-by-exams.shop-by-exams {
        padding: 24px 16px;
    }

    .shop-exams-heading {
        margin-bottom: 16px;
    }

    .shop-exams-heading h2 {
        font-size: 23px;
    }

    .shop-exams-heading p {
        font-size: 12px;
    }

    .shop-exams-list {
        display: flex;
        gap: 22px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 2px 14px;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .shop-exam-item {
        flex: 0 0 82px;
        gap: 9px;
        padding: 4px 0;
        scroll-snap-align: start;
    }

    .shop-exam-icon {
        width: 62px;
        height: 62px;
        font-size: 24px;
    }

    .shop-exam-label {
        font-size: 12px;
    }
}

/* Shop By Exams — horizontal scroll on mobile */
@media (max-width: 768px) {
  #shop-by-exams .shop-exams-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: 12px;
    padding: 6px 16px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #shop-by-exams .shop-exams-list::-webkit-scrollbar {
    display: none;
  }

  #shop-by-exams .shop-exam-item {
    flex: 0 0 115px;
    width: 115px;
    min-width: 115px;
    scroll-snap-align: start;
  }
}

/* Featured Books — horizontal auto-scrolling row */
#product1 .pro-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 14px;
  padding: 8px 4px 14px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#product1 .pro-container::-webkit-scrollbar {
  display: none;
}

#product1 .pro-container .pro {
  flex: 0 0 220px;
  min-width: 220px;
  scroll-snap-align: start;
}

@media (max-width: 768px) {
  #product1 .pro-container .pro {
    flex-basis: 155px;
    min-width: 155px;
  }
}

/* Fix Featured Books card layout on mobile */
@media (max-width: 768px) {
  #product1 .pro-container .pro {
    box-sizing: border-box;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  #product1 .pro-container .pro img {
    max-width: 100%;
    height: 210px !important;
    object-fit: contain;
  }

  #product1 .pro-container .pro .des {
    width: 100%;
    min-width: 0;
    padding-top: 10px !important;
  }

  #product1 .pro-container .pro .des h5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.35;
    min-height: 2.7em;
  }
}

/* Featured Books — reduce card border and inner whitespace */
#product1 .pro-container .pro {
  padding: 10px !important;
  border-width: 1px !important;
  border-color: #e9e9ed !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* Reduce image container whitespace */
#product1 .pro-container .pro .product-image,
#product1 .pro-container .pro .image-container {
  padding: 4px !important;
  margin-bottom: 6px !important;
}

/* Reduce spacing between book details */
#product1 .pro-container .pro .des {
  padding-top: 6px !important;
}

@media (max-width: 768px) {
  #product1 .pro-container .pro {
    padding: 8px !important;
    border-radius: 14px !important;
  }
}

/* Compact Featured Books section — desktop and mobile */
#product1 {
  padding-bottom: 12px !important;
  margin-bottom: 0 !important;
}

#product1 .pro-container {
  margin-bottom: 0 !important;
  padding-bottom: 6px !important;
}

#product1 .featured-view-all {
  margin-bottom: 8px;
}

#product1 + .home-promo-grid {
  margin-top: 12px !important;
}

@media (max-width: 768px) {
  #product1 {
    padding-top: 12px !important;
    padding-bottom: 8px !important;
  }

  #product1 .pro-container {
    padding-bottom: 4px !important;
  }

  #product1 + .home-promo-grid {
    margin-top: 8px !important;
  }
}


/* Featured Books — desktop and mobile quantity alignment */

/* DESKTOP */
@media (min-width: 769px) {
  #product1 .pro .des {
    position: relative;
  }

  #product1 .pro .des .star {
    position: relative;
    min-height: 34px;
    display: flex;
    align-items: center;
  }

  #product1 .pro .featured-qty-box {
    position: absolute !important;
    right: 0 !important;
    top: 60% !important;
    transform: translateY(-250%) !important;
    width: 82px !important;
    height: 32px !important;
    margin: 0 !important;
  }

  #product1 .pro .price {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    margin-top: 2px !important;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  #product1 .pro .des {
    position: relative;
  }

  #product1 .pro .price {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 4px !important;
    row-gap: 1px !important;
    margin-top: 5px !important;
  }

  #product1 .pro .price .mrp {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  #product1 .pro .price h4 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    font-size: 18px !important;
    white-space: nowrap;
  }

  #product1 .pro .featured-qty-box {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    justify-self: end !important;
    position: relative !important;
    top: -22px !important;
    right: auto !important;
    transform: none !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 30px !important;
    margin: 0 !important;
  }
}


/* Featured Books — modern card design on mobile only */
@media (max-width: 768px) {
  #product1 .pro {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    padding: 12px !important;
    border: 1px solid #eeeef2 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  #product1 .pro > a {
    display: block;
    margin-bottom: 10px;
  }

  #product1 .pro > a img {
    width: 100% !important;
    height: 155px !important;
    object-fit: contain !important;
    border-radius: 8px;
  }

  #product1 .pro .des {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex: 1 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  #product1 .pro .des > span {
    color: #858b99 !important;
    font-size: 12px !important;
    line-height: 1.4;
  }

  #product1 .pro .des h5 {
    margin: 5px 0 8px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  #product1 .pro .star {
    display: flex !important;
    align-items: center !important;
    gap: 2px;
    margin: 0 0 8px !important;
    color: #f4b323 !important;
  }

  #product1 .pro .des h4 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin: 0 0 12px !important;
    color: #b4531a !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  #product1 .pro .des h4 .mrp {
    color: #9398a5 !important;
    font-size: 12px !important;
  }

  #product1 .pro .home-cart-action {
    position: static !important;
    width: 100% !important;
    margin-top: auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: stretch !important;
  }

  #product1 .pro .home-cart-action > .cart {
    width: 100% !important;
    height: 36px !important;
    border: none !important;
    border-radius: 24px !important;
    background: #BF5E0A !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  #product1 .pro .featured-qty-box {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
    justify-content: space-evenly !important;
  }
}


/* Mobile Featured Books — consistent card layout */
@media (max-width: 768px) {
  #product1 .pro {
    display: flex !important;
    flex-direction: column !important;
  }

  #product1 .pro .des {
    flex: 1 0 auto !important;
  }

  /* Keep MRP and selling price close together */
  #product1 .pro .des h4 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin: 4px 0 10px !important;
    line-height: 1.2 !important;
  }

  #product1 .pro .des h4 .mrp {
    display: block !important;
    margin: 0 !important;
    font-size: 12px !important;
  }

  /* Same full-width action area on every card */
  #product1 .pro .home-cart-action {
    width: 100% !important;
    margin-top: auto !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: stretch !important;
  }

  #product1 .pro .home-cart-action > .cart,
  #product1 .pro .home-cart-action .featured-qty-box {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 22px !important;
  }

  #product1 .pro .home-cart-action .featured-qty-box {
    display: flex !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    padding: 0 12px !important;
  }
}

/* Mobile Featured Books — fit cart button inside each card */
@media (max-width: 768px) {
  #product1 .pro {
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #product1 .pro .home-cart-action {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #product1 .pro .home-cart-action > .cart,
  #product1 .pro .home-cart-action .featured-qty-box {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 22px !important;
  }

  #product1 .pro .home-cart-action .featured-qty-box {
    justify-content: space-evenly !important;
    padding: 0 10px !important;
  }
}

/* =========================================
   MISSION GOVERNMENT JOB
========================================= */

#government-exam-books {
    padding: 28px clamp(18px, 5vw, 76px) 18px;
    background: #fff;
    color: #19243a;
    overflow: hidden;
}

#government-exam-books .gov-exam-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

#government-exam-books .gov-exam-heading-copy {
    min-width: 0;
}

#government-exam-books .gov-exam-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #c65b12;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

#government-exam-books h2 {
    margin: 0;
    color: #19243a;
    font-size: clamp(23px, 2.7vw, 34px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.8px;
}

#government-exam-books h2 span {
    color: #e87920;
}

#government-exam-books .gov-exam-heading p {
    margin: 7px 0 0;
    color: #777f8e;
    font-size: 12px;
    line-height: 1.5;
}

#government-exam-books .gov-exam-view-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 3px;
    color: #c65b12;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

#government-exam-books .gov-exam-view-all:hover {
    color: #19243a;
}

#government-exam-books .gov-exam-divider {
    width: 100%;
    height: 2px;
    margin-bottom: 18px;
    background: linear-gradient(90deg, #e87920, #f6c99e 70%, #fff);
    border-radius: 10px;
}

/* Slider and centered side arrows */
#government-exam-books .gov-exam-slider {
    position: relative;
    min-width: 0;
}

#government-exam-books .gov-exam-track {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px 3px 12px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

#government-exam-books .gov-exam-track::-webkit-scrollbar {
    display: none;
}

#government-exam-books .gov-exam-track .gov-book-card {
    position: relative;
    display: flex;
    flex: 0 0 190px;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eceef2;
    border-radius: 14px;
    scroll-snap-align: start;
    transition: border-color .2s ease, box-shadow .2s ease,
                transform .2s ease;
}

#government-exam-books .gov-book-card:hover {
    transform: translateY(-3px);
    border-color: #f0c49f;
    box-shadow: 0 8px 22px rgba(30, 40, 60, .08);
}

#government-exam-books .gov-book-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 175px;
    margin-bottom: 10px;
    background: #fafafa;
    border-radius: 9px;
}

#government-exam-books .gov-book-image-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#government-exam-books .gov-book-publisher {
    margin-bottom: 6px;
    overflow: hidden;
    color: #858b98;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#government-exam-books .gov-book-name {
    display: -webkit-box;
    min-height: 38px;
    margin: 0 0 9px;
    overflow: hidden;
    color: #263247;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#government-exam-books .gov-book-name:hover {
    color: #c65b12;
}

#government-exam-books .gov-book-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    margin-top: auto;
    margin-bottom: 10px;
}

#government-exam-books .gov-book-price strong {
    color: #b9500a;
    font-size: 15px;
}

#government-exam-books .gov-book-price s {
    color: #9298a3;
    font-size: 11px;
}

#government-exam-books .gov-book-cart {
    width: 100%;
    min-height: 34px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: #e87920;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

#government-exam-books .gov-book-cart:hover {
    background: #c65b12;
}

#government-exam-books .gov-book-cart:disabled {
    background: #e6e6e6;
    color: #777;
    cursor: not-allowed;
}

#government-exam-books .gov-exam-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid #eee;
    border-radius: 50%;
    background: #fff;
    color: #d96c17;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .14);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

#government-exam-books .gov-exam-prev {
    left: -12px;
}

#government-exam-books .gov-exam-next {
    right: -12px;
}

#government-exam-books .gov-exam-arrow:hover {
    background: #e87920;
    color: #fff;
}

#government-exam-books .gov-exam-arrow:disabled {
    opacity: .35;
    cursor: default;
}

#government-exam-books .gov-exam-loading,
#government-exam-books .gov-exam-empty {
    padding: 18px 8px;
    color: #777f8e;
    font-size: 13px;
}

@media (max-width: 768px) {
    #government-exam-books {
        padding: 20px 18px 10px;
    }

    #government-exam-books .gov-exam-heading {
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    #government-exam-books .gov-exam-eyebrow {
        font-size: 8px;
        letter-spacing: 1px;
    }

    #government-exam-books h2 {
        font-size: clamp(20px, 5vw, 27px);
        letter-spacing: -.5px;
    }

    #government-exam-books .gov-exam-heading p {
        max-width: 260px;
        font-size: 10px;
    }

    #government-exam-books .gov-exam-view-all {
        font-size: 10px;
    }

    #government-exam-books .gov-exam-divider {
        margin-bottom: 12px;
    }

    #government-exam-books .gov-exam-track {
        gap: 12px;
        padding-bottom: 10px;
    }

    #government-exam-books .gov-exam-track .gov-book-card {
        flex-basis: 155px;
        padding: 9px;
        border-radius: 12px;
    }

    #government-exam-books .gov-book-image-link {
        height: 145px;
    }

    #government-exam-books .gov-exam-arrow {
        width: 30px;
        height: 30px;
    }

    #government-exam-books .gov-exam-prev {
        left: -9px;
    }

    #government-exam-books .gov-exam-next {
        right: -9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #government-exam-books .gov-exam-track {
        scroll-behavior: auto;
    }
}

#product1 .featured-title-divider {
    width: 100%;
    height: 2px;
    margin-bottom: 18px;
    background: linear-gradient(90deg, #e87920, #f6c99e 70%, #fff);
    border-radius: 10px;
}

@media (max-width: 768px) {
    #product1 .featured-title-divider {
        margin-bottom: 12px;
    }
}

.gov-book-card {
  position: relative;
}

.gov-discount-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: #ff5722;
  color: #fff;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}


/* SECOND HOMEPAGE BANNER */

#explore-banner:has(.second-banner-track) {
    padding: 0;
    min-height: auto;
    overflow: hidden;
    background: transparent;
}

.second-banner-track {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.second-banner-track::-webkit-scrollbar {
    display: none;
}

.second-banner-slide {
    flex: 0 0 100%;
    display: block;
    scroll-snap-align: start;
    overflow: hidden;
}

.second-banner-slide img {
    display: block;
    width: 100%;
    height: clamp(180px, 30vw, 420px);
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .second-banner-slide img {
        height: auto;
        min-height: 150px;
        max-height: 260px;
        object-fit: cover;
    }
}

/* SECOND HOMEPAGE BANNER — THIN & RESPONSIVE */

#explore-banner {
    position: relative;
    width: 100%;
    height: clamp(90px, 13vw, 180px);
    min-height: 0;
    margin-top: 10px;
    padding: 0;
    overflow: hidden;
    background: #f5f5f5;
    border-radius: 8px;
    box-sizing: border-box;
}

#explore-banner .second-banner-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#explore-banner .second-banner-slide {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#explore-banner .second-banner-track > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#explore-banner .second-banner-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Navigation arrows */
#explore-banner .second-banner-prev,
#explore-banner .second-banner-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 23px;
    line-height: 30px;
    cursor: pointer;
}

#explore-banner .second-banner-prev {
    left: 8px;
}

#explore-banner .second-banner-next {
    right: 8px;
}

/* Mobile */
@media (max-width: 768px) {
    #explore-banner {
        height: 90px;
        margin-top:1px;
        border-radius: 5px;
    }

    #explore-banner .second-banner-prev,
    #explore-banner .second-banner-next {
        width: 25px;
        height: 25px;
        font-size: 19px;
        line-height: 25px;
    }
}

/* Very small screens */
@media (max-width: 380px) {
    #explore-banner {
        height: 75px;
    }
}

/* Smooth transition for second homepage banner */

#explore-banner .second-banner-track {
    position: relative;
    overflow: hidden;
}

#explore-banner .second-banner-track > img,
#explore-banner .second-banner-track > .second-banner-slide {
    animation: secondBannerFadeIn 0.4s ease-in-out;
}

#explore-banner .second-banner-track > img,
#explore-banner .second-banner-track > .second-banner-slide img {
    transition: transform 0.4s ease-in-out;
}

#explore-banner .second-banner-track > img,
#explore-banner .second-banner-track > .second-banner-slide img {
    transform: scale(1);
}

@keyframes secondBannerFadeIn {
    from {
        opacity: 0.3;
        transform: scale(1.025);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    #explore-banner .second-banner-track > img,
    #explore-banner .second-banner-track > .second-banner-slide {
        animation: none;
        transition: none;
    }
}

/* MATCH SHOP BY EXAMS HEADING */

#shop-category .section-heading-premium,
#publisher-section .section-heading-premium,
#shop-category .category-title,
#publisher-section .publisher-heading {
    text-align: left !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

#shop-category .section-heading-premium h2,
#publisher-section .section-heading-premium h2,
#shop-category .category-title h2,
#publisher-section .publisher-heading h2 {
    display: block !important;
    margin: 0 !important;
    color: #19243a !important;
    font-size: clamp(27px, 3vw, 38px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.7px !important;
}

#shop-category .section-heading-premium h2 span,
#publisher-section .section-heading-premium h2 span,
#shop-category .category-title h2 span,
#publisher-section .publisher-heading h2 span {
    color: #ed7414 !important;
}

#shop-category .section-heading-premium p,
#publisher-section .section-heading-premium p,
#shop-category .category-title p,
#publisher-section .publisher-heading p {
    margin: 12px 0 0 !important;
    color: #788193 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Hide the extra underline so spacing matches Shop By Exams */
#shop-category .section-heading-underline,
#publisher-section .section-heading-underline {
    display: none !important;
}

/* Mobile sizing */
@media (max-width: 600px) {
    #shop-category .section-heading-premium h2,
    #publisher-section .section-heading-premium h2,
    #shop-category .category-title h2,
    #publisher-section .publisher-heading h2 {
        font-size: 25px !important;
    }

    #shop-category .section-heading-premium p,
    #publisher-section .section-heading-premium p,
    #shop-category .category-title p,
    #publisher-section .publisher-heading p {
        font-size: 12px !important;
    }
}

/* =========================================
   PREMIUM SHOP BY CATEGORY TILES
========================================= */

#shop-category .category-wrapper {
    gap: 16px !important;
}

#shop-category .cat-box {
    position: relative;
    isolation: isolate;
    min-height: 175px !important;
    padding: 22px 12px 17px !important;
    border: 1px solid rgba(255,255,255,.9) !important;
    border-radius: 20px !important;
    overflow: hidden;
    background: var(--tile-bg, #fff7ed) !important;
    box-shadow:
        0 7px 20px rgba(28, 39, 60, .055),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease !important;
}

/* Decorative background circle */
#shop-category .cat-box::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 125px;
    height: 125px;
    top: -48px;
    right: -38px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transition: transform .4s ease;
}

/* Small decorative circle */
#shop-category .cat-box::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 55px;
    height: 55px;
    right: 10px;
    bottom: 10px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 50%;
    opacity: .8;
    transition: transform .4s ease;
}

#shop-category .cat-box:hover {
    transform: translateY(-7px);
    border-color: rgba(232, 111, 27, .25) !important;
    box-shadow: 0 17px 32px rgba(28, 39, 60, .12) !important;
}

#shop-category .cat-box:hover::before {
    transform: scale(1.25);
}

#shop-category .cat-box:hover::after {
    transform: scale(1.2);
}

/* Floating category artwork */
#shop-category .cat-box img {
    position: relative;
    z-index: 1;
    width: 82px !important;
    height: 82px !important;
    margin-bottom: 12px !important;
    object-fit: contain;
    filter: drop-shadow(0 7px 6px rgba(34, 42, 55, .09));
    transition: transform .35s ease;
}

#shop-category .cat-box:hover img {
    transform: translateY(-4px) scale(1.08);
}

#shop-category .cat-box h3 {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    padding: 0 3px;
    color: #243149 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
}

/* Unique soft colour themes */
#shop-category .cat-box.green  { --tile-bg: linear-gradient(145deg,#dff8eb,#f4fff9); }
#shop-category .cat-box.peach  { --tile-bg: linear-gradient(145deg,#ffe5d3,#fff7f0); }
#shop-category .cat-box.purple { --tile-bg: linear-gradient(145deg,#e9e2ff,#f8f5ff); }
#shop-category .cat-box.yellow { --tile-bg: linear-gradient(145deg,#fff0b8,#fffbed); }
#shop-category .cat-box.pink   { --tile-bg: linear-gradient(145deg,#ffdfeb,#fff5f9); }
#shop-category .cat-box.blue   { --tile-bg: linear-gradient(145deg,#dcecff,#f4f9ff); }
#shop-category .cat-box.mint   { --tile-bg: linear-gradient(145deg,#d8f6f1,#f1fffc); }


/* =========================================
   PREMIUM SHOP BY PUBLISHER TILES
========================================= */

#publisher-section .publisher-container {
    gap: 16px !important;
}

#publisher-section .publisher-card {
    position: relative;
    isolation: isolate;
    min-height: 160px !important;
    padding: 20px 12px !important;
    border: 1px solid #edf0f5 !important;
    border-radius: 19px !important;
    background: linear-gradient(145deg, #ffffff 35%, #fff8f1 100%) !important;
    box-shadow: 0 7px 22px rgba(28, 39, 60, .055) !important;
    overflow: hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease !important;
}

/* Publisher card decorative accent */
#publisher-section .publisher-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 95px;
    height: 95px;
    top: -42px;
    right: -28px;
    border-radius: 50%;
    background: #fff0e1;
    transition: transform .35s ease;
}

#publisher-section .publisher-card::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(90deg, #ed7414, #ffc078);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s ease;
}

#publisher-section .publisher-card:hover {
    transform: translateY(-6px);
    border-color: #f5c9a7 !important;
    box-shadow: 0 16px 30px rgba(28, 39, 60, .11) !important;
}

#publisher-section .publisher-card:hover::before {
    transform: scale(1.3);
}

#publisher-section .publisher-card:hover::after {
    transform: scaleX(1);
}

/* Logo area */
#publisher-section .publisher-card img {
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: 135px !important;
    height: 68px !important;
    margin-bottom: 12px !important;
    object-fit: contain;
    transition: transform .3s ease;
}

#publisher-section .publisher-card:hover img {
    transform: scale(1.06);
}

#publisher-section .publisher-card h4 {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    color: #1d2a40 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

#publisher-section .publisher-card span {
    position: relative;
    z-index: 1;
    margin-top: 5px !important;
    color: #7a8495 !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
}


/* =========================================
   MOBILE TILES
========================================= */

@media (max-width: 600px) {
    #shop-category .category-wrapper,
    #publisher-section .publisher-container {
        gap: 11px !important;
    }

    #shop-category .cat-box {
        min-height: 145px !important;
        padding: 15px 8px !important;
        border-radius: 16px !important;
    }

    #shop-category .cat-box img {
        width: 72px !important;
        height: 72px !important;
    }

    #publisher-section .publisher-card {
        min-height: 135px !important;
        padding: 14px 8px !important;
        border-radius: 15px !important;
    }

    #publisher-section .publisher-card img {
        height: 58px !important;
        margin-bottom: 9px !important;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    #shop-category .cat-box,
    #shop-category .cat-box img,
    #shop-category .cat-box::before,
    #shop-category .cat-box::after,
    #publisher-section .publisher-card,
    #publisher-section .publisher-card img,
    #publisher-section .publisher-card::before,
    #publisher-section .publisher-card::after {
        transition: none !important;
    }
}




/* =========================================
   TILAK BOOK DEPOT — CATEGORY & PUBLISHER
   PREMIUM SLIDER DESIGN
========================================= */

/* Section layout */
#shop-category,
#publisher-section {
    position: relative;
    padding: 35px clamp(20px, 4vw, 65px) !important;
    overflow: hidden;
    background: #fff;
}

/* Preserve heading style */
#shop-category .category-title,
#publisher-section .publisher-heading {
    text-align: left !important;
    margin-bottom: 25px !important;
}

#shop-category .category-title h2,
#publisher-section .publisher-heading h2 {
    color: #19243a !important;
    font-size: clamp(27px, 3vw, 38px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

#shop-category .category-title h2 span,
#publisher-section .publisher-heading h2 span {
    color: #ed7414 !important;
}

#shop-category .category-title p,
#publisher-section .publisher-heading p {
    color: #788193 !important;
    font-size: 14px !important;
    margin-top: 10px !important;
}

/* Slider wrappers */
.category-slider,
.publisher-slider {
    position: relative;
    width: 100%;
}

/* Horizontal scrolling tracks */
#shop-category .category-wrapper,
#publisher-section .publisher-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100%;
    padding: 6px 3px 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

#shop-category .category-wrapper::-webkit-scrollbar,
#publisher-section .publisher-container::-webkit-scrollbar {
    display: none;
}

/* Colorful category cards */
#shop-category .cat-box {
    position: relative;
    isolation: isolate;
    flex: 0 0 155px !important;
    min-width: 155px !important;
    min-height: 205px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 18px 12px !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    border-radius: 20px !important;
    overflow: hidden;
    text-decoration: none;
    scroll-snap-align: start;
    box-shadow: 0 8px 22px rgba(28,39,60,.07) !important;
    transition: transform .28s ease, box-shadow .28s ease !important;
}

#shop-category .cat-box::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 125px;
    height: 125px;
    top: -38px;
    right: -30px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transition: transform .35s ease;
}

#shop-category .cat-box::after {
    content: "↗";
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: rgba(25,36,58,.5);
    font-size: 16px;
    font-weight: 800;
}

#shop-category .cat-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(28,39,60,.13) !important;
}

#shop-category .cat-box:hover::before {
    transform: scale(1.25);
}

#shop-category .cat-box img {
    position: relative;
    z-index: 1;
    width: 105px !important;
    height: 112px !important;
    margin: 2px 0 14px !important;
    object-fit: contain;
    transition: transform .3s ease;
}

#shop-category .cat-box:hover img {
    transform: scale(1.08) rotate(-2deg);
}

#shop-category .cat-box h3 {
    position: relative;
    z-index: 1;
    margin: auto 0 0 !important;
    color: #19243a !important;
    text-align: center;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
}

/* Distinct category color palettes */
#shop-category .cat-box.green {
    background: linear-gradient(145deg,#c9f5df,#f0fff7) !important;
}
#shop-category .cat-box.peach {
    background: linear-gradient(145deg,#ffd8bc,#fff3e8) !important;
}
#shop-category .cat-box.purple {
    background: linear-gradient(145deg,#ded4ff,#f5f1ff) !important;
}
#shop-category .cat-box.yellow {
    background: linear-gradient(145deg,#ffe99a,#fff9dc) !important;
}
#shop-category .cat-box.pink {
    background: linear-gradient(145deg,#ffd5e5,#fff0f6) !important;
}
#shop-category .cat-box.blue {
    background: linear-gradient(145deg,#cfe9ff,#eff8ff) !important;
}
#shop-category .cat-box.mint {
    background: linear-gradient(145deg,#c8f2eb,#effdfa) !important;
}

/* Publisher cards */
#publisher-section .publisher-card {
    position: relative;
    flex: 0 0 165px !important;
    min-width: 165px !important;
    min-height: 190px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 12px !important;
    border: 1px solid #edf0f5 !important;
    border-radius: 18px !important;
    background: linear-gradient(150deg,#fff 55%,#fff3e5) !important;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    scroll-snap-align: start;
    box-shadow: 0 8px 22px rgba(28,39,60,.06) !important;
    transition: transform .28s ease, box-shadow .28s ease !important;
}

#publisher-section .publisher-card::before {
    content: "";
    position: absolute;
    top: -35px;
    right: -35px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff0df;
    z-index: 0;
}

#publisher-section .publisher-card::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 4px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(90deg,#ed7414,#ffc078);
    transform: scaleX(0);
    transition: transform .28s ease;
}

#publisher-section .publisher-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px rgba(28,39,60,.12) !important;
}

#publisher-section .publisher-card:hover::after {
    transform: scaleX(1);
}

#publisher-section .publisher-card img {
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: 135px !important;
    height: 78px !important;
    object-fit: contain;
    margin-bottom: 14px !important;
    transition: transform .3s ease;
}

#publisher-section .publisher-card:hover img {
    transform: scale(1.07);
}

#publisher-section .publisher-card h4 {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    color: #19243a !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}

#publisher-section .publisher-card span {
    position: relative;
    z-index: 1;
    margin-top: 6px !important;
    color: #788193 !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
}

/* Slider navigation arrows */
.category-arrow,
.publisher-arrow {
    position: absolute;
    top: 42%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #edf0f5;
    border-radius: 50%;
    background: #fff;
    color: #19243a;
    box-shadow: 0 5px 16px rgba(26,40,60,.14);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.category-prev,
.publisher-prev {
    left: -15px;
}

.category-next,
.publisher-next {
    right: -15px;
}

.category-arrow:hover,
.publisher-arrow:hover {
    background: #ed7414;
    color: #fff;
}

.category-arrow:disabled,
.publisher-arrow:disabled {
    opacity: .35;
    cursor: default;
}

/* Pagination dots */
.category-dots,
.publisher-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 18px;
    margin-top: 0;
}

.category-dots button,
.publisher-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #d4d9e1;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}

.category-dots button.active,
.publisher-dots button.active {
    width: 23px;
    background: #ed7414;
}

/* View all publishers */
#publisher-section .publisher-btn {
    margin-top: 20px;
}

/* Mobile */
@media (max-width: 600px) {
    #shop-category,
    #publisher-section {
        padding: 27px 16px !important;
    }

    #shop-category .cat-box {
        flex-basis: 140px !important;
        min-width: 140px !important;
        min-height: 175px !important;
        padding: 13px 9px !important;
        border-radius: 16px !important;
    }

    #shop-category .cat-box img {
        width: 88px !important;
        height: 92px !important;
    }

    #publisher-section .publisher-card {
        flex-basis: 145px !important;
        min-width: 145px !important;
        min-height: 165px !important;
        padding: 13px 9px !important;
    }

    #publisher-section .publisher-card img {
        height: 65px !important;
    }

    .category-arrow,
    .publisher-arrow {
        width: 31px;
        height: 31px;
    }

    .category-prev,
    .publisher-prev {
        left: -8px;
    }

    .category-next,
    .publisher-next {
        right: -8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #shop-category .cat-box,
    #shop-category .cat-box img,
    #publisher-section .publisher-card,
    #publisher-section .publisher-card img {
        transition: none !important;
    }
}


/* =========================================
   PREMIUM SHOP BY CATEGORY TILES
========================================= */

#shop-category .category-wrapper {
    align-items: stretch;
    gap: 18px;
    padding: 18px 8px 24px;
}

#shop-category .cat-box {
    position: relative;
    isolation: isolate;
    flex: 0 0 190px;
    min-height: 175px;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    overflow: hidden;

    background: linear-gradient(145deg, #fffaf3 0%, #f8e8d6 100%);
    border: 1px solid #f0d7bd;
    border-radius: 20px;
    box-shadow: 0 5px 16px rgba(74, 39, 15, 0.08);

    color: #2b1408;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

/* Soft decorative glow */
#shop-category .cat-box::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 135px;
    height: 135px;
    top: -48px;
    right: -35px;
    border-radius: 50%;
    background: rgba(211, 117, 10, 0.12);
    transition: transform 0.35s ease;
}

#shop-category .cat-box::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 85px;
    height: 85px;
    top: 18px;
    right: 18px;
    border: 1px solid rgba(211, 117, 10, 0.17);
    border-radius: 50%;
}

/* Category title */
#shop-category .cat-box h3,
#shop-category .cat-box h4,
#shop-category .cat-box .category-name {
    margin: 0;
    max-width: 100%;
    color: #3b200f;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: -0.25px;
    overflow-wrap: anywhere;
    transition: color 0.3s ease;
}

/* Supporting text, if present */
#shop-category .cat-box p {
    margin: 0;
    color: #79563c;
    font-size: 12px;
    line-height: 1.5;
    transition: color 0.3s ease;
}

/* Hover effect */
@media (hover: hover) {
    #shop-category .cat-box:hover {
        transform: translateY(-6px);
        background: linear-gradient(145deg, #fff0dc 0%, #f5d4ad 100%);
        border-color: #e7b477;
        box-shadow: 0 14px 28px rgba(74, 39, 15, 0.15);
    }

    #shop-category .cat-box:hover::before {
        transform: scale(1.2);
    }
}

/* Keyboard accessibility */
#shop-category .cat-box:focus-visible {
    outline: 3px solid #d3750a;
    outline-offset: 3px;
}

/* Category carousel spacing */
#shop-category .category-slider {
    position: relative;
}

#shop-category .category-arrow {
    z-index: 2;
}

/* Mobile */
@media (max-width: 768px) {
    #shop-category .category-wrapper {
        gap: 12px;
        padding: 14px 5px 20px;
    }

    #shop-category .cat-box {
        flex-basis: 165px;
        min-height: 155px;
        padding: 19px 15px;
        border-radius: 17px;
    }

    #shop-category .cat-box h3,
    #shop-category .cat-box h4,
    #shop-category .cat-box .category-name {
        font-size: 15px;
    }
}


/* =========================================
   COMPACT CATEGORY CAROUSEL
========================================= */

#shop-category .category-slider {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

#shop-category .category-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 12px;
    padding: 12px 4px 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

#shop-category .category-wrapper::-webkit-scrollbar {
    display: none;
}

#shop-category .cat-box {
    flex: 0 0 155px;
    width: 155px;
    min-width: 0;
    min-height: 145px;
    height: 145px;
    padding: 12px;
    border-radius: 17px;
    gap: 7px;
    box-sizing: border-box;
    justify-content: space-between;
}

/* Keep category illustrations compact */
#shop-category .cat-box img {
    display: block;
    width: 100%;
    height: 82px;
    max-width: 110px;
    object-fit: contain;
    margin: 0 auto;
}

/* Compact category names */
#shop-category .cat-box h3,
#shop-category .cat-box h4,
#shop-category .cat-box .category-name {
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    width: 100%;
    overflow-wrap: anywhere;
}

/* Smaller carousel arrows */
#shop-category .category-arrow {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
}

/* Less space below the carousel */
#shop-category .category-dots {
    margin-top: 0;
}

@media (min-width: 1200px) {
    #shop-category .category-wrapper {
        gap: 14px;
    }

    #shop-category .cat-box {
        flex-basis: 155px;
    }
}

@media (max-width: 600px) {
    #shop-category .category-slider {
        gap: 5px;
    }

    #shop-category .category-wrapper {
        gap: 10px;
        padding: 10px 3px 15px;
    }

    #shop-category .cat-box {
        flex-basis: 135px;
        width: 135px;
        height: 135px;
        min-height: 135px;
        padding: 10px;
    }

    #shop-category .cat-box img {
        height: 76px;
    }

    #shop-category .cat-box h3,
    #shop-category .cat-box h4,
    #shop-category .cat-box .category-name {
        font-size: 12px;
    }

    #shop-category .category-arrow {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        min-width: 30px;
    }
}


/* FINAL FIX: make category tiles fill desktop track */
@media (min-width: 1200px) {
    #shop-category .category-wrapper {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
        justify-content: stretch !important;
        gap: 12px !important;
    }

    #shop-category .cat-box {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}


/* Slim shopping promise row on mobile */
@media (max-width: 767px) {
    .shop-promise-row {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        min-height: 0 !important;
        gap: 10px !important;
    }

    .shop-promise-item {
        gap: 6px !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .shop-promise-item i {
        font-size: 15px !important;
    }

    .shop-promise-item strong {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .shop-promise-item small {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .shop-promise-item span {
        line-height: 1.2 !important;
    }
}

/* =========================================
   NEW HOMEPAGE BOOK SECTIONS
========================================= */

#write-it-beautiful,
#art-of-colouring,
#top-novels {
    margin: 24px auto;
    padding: 24px 4%;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
}

#write-it-beautiful .gov-exam-heading,
#art-of-colouring .gov-exam-heading,
#top-novels .gov-exam-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

#write-it-beautiful .gov-exam-heading-copy,
#art-of-colouring .gov-exam-heading-copy,
#top-novels .gov-exam-heading-copy {
    min-width: 0;
}

#write-it-beautiful .gov-exam-eyebrow,
#art-of-colouring .gov-exam-eyebrow,
#top-novels .gov-exam-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #e85d04;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

#write-it-beautiful .gov-exam-heading h2,
#art-of-colouring .gov-exam-heading h2,
#top-novels .gov-exam-heading h2 {
    margin: 0 0 8px;
    color: #171717;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    line-height: 1.2;
}

#write-it-beautiful .gov-exam-heading h2 span,
#art-of-colouring .gov-exam-heading h2 span,
#top-novels .gov-exam-heading h2 span {
    color: #e85d04;
}

#write-it-beautiful .gov-exam-heading-copy p,
#art-of-colouring .gov-exam-heading-copy p,
#top-novels .gov-exam-heading-copy p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.5;
}

#write-it-beautiful .gov-exam-view-all,
#art-of-colouring .gov-exam-view-all,
#top-novels .gov-exam-view-all {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    color: #e85d04;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

#write-it-beautiful .gov-exam-divider,
#art-of-colouring .gov-exam-divider,
#top-novels .gov-exam-divider {
    width: 100%;
    height: 2px;
    margin-bottom: 18px;
    background: linear-gradient(90deg, #e87920, #f6c99e 70%, #fff);
    border-radius: 10px;
}

#write-it-beautiful .gov-exam-slider,
#art-of-colouring .gov-exam-slider,
#top-novels .gov-exam-slider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

#write-it-beautiful .gov-exam-track,
#art-of-colouring .gov-exam-track,
#top-novels .gov-exam-track {
    display: flex;
    flex: 1;
    gap: 16px;
    min-width: 0;
    padding: 6px 2px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #e85d04 #f2f2f2;
}

#write-it-beautiful .gov-book-card,
#art-of-colouring .gov-book-card,
#top-novels .gov-book-card {
    position: relative;
    display: flex;
    flex: 0 0 190px;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.045);
    scroll-snap-align: start;
    box-sizing: border-box;
}

#write-it-beautiful .gov-book-image-link,
#art-of-colouring .gov-book-image-link,
#top-novels .gov-book-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fafafa;
    border-radius: 9px;
}

#write-it-beautiful .gov-book-image-link img,
#art-of-colouring .gov-book-image-link img,
#top-novels .gov-book-image-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

#write-it-beautiful .gov-book-card:hover .gov-book-image-link img,
#art-of-colouring .gov-book-card:hover .gov-book-image-link img,
#top-novels .gov-book-card:hover .gov-book-image-link img {
    transform: scale(1.05);
}

#write-it-beautiful .gov-discount-badge,
#art-of-colouring .gov-discount-badge,
#top-novels .gov-discount-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1;
    padding: 5px 8px;
    color: #fff;
    background: #e85d04;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
}

#write-it-beautiful .gov-book-publisher,
#art-of-colouring .gov-book-publisher,
#top-novels .gov-book-publisher {
    display: block;
    margin-bottom: 6px;
    overflow: hidden;
    color: #888;
    font-size: 11px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

#write-it-beautiful .gov-book-name,
#art-of-colouring .gov-book-name,
#top-novels .gov-book-name {
    display: -webkit-box;
    min-height: 40px;
    margin-bottom: 10px;
    overflow: hidden;
    color: #222;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#write-it-beautiful .gov-book-price,
#art-of-colouring .gov-book-price,
#top-novels .gov-book-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 12px;
}

#write-it-beautiful .gov-book-price s,
#art-of-colouring .gov-book-price s,
#top-novels .gov-book-price s {
    color: #999;
    font-size: 12px;
}

#write-it-beautiful .gov-book-price strong,
#art-of-colouring .gov-book-price strong,
#top-novels .gov-book-price strong {
    color: #171717;
    font-size: 16px;
}

#write-it-beautiful .gov-book-cart,
#art-of-colouring .gov-book-cart,
#top-novels .gov-book-cart {
    width: 100%;
    min-height: 38px;
    padding: 9px 6px;
    color: #fff;
    background: #e85d04;
    border: 0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#write-it-beautiful .gov-book-cart:hover,
#art-of-colouring .gov-book-cart:hover,
#top-novels .gov-book-cart:hover {
    background: #c94b00;
}

#write-it-beautiful .gov-book-cart:disabled,
#art-of-colouring .gov-book-cart:disabled,
#top-novels .gov-book-cart:disabled {
    color: #777;
    background: #eee;
    cursor: not-allowed;
}

#write-it-beautiful .gov-exam-arrow,
#art-of-colouring .gov-exam-arrow,
#top-novels .gov-exam-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid #eee;
    border-radius: 50%;
    background: #fff;
    color: #d96c17;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .14);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

#write-it-beautiful .gov-exam-arrow:disabled,
#art-of-colouring .gov-exam-arrow:disabled,
#top-novels .gov-exam-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

#write-it-beautiful .gov-exam-empty,
#art-of-colouring .gov-exam-empty,
#top-novels .gov-exam-empty,
#write-it-beautiful .gov-exam-loading,
#art-of-colouring .gov-exam-loading,
#top-novels .gov-exam-loading {
    padding: 20px 0;
    color: #777;
    font-size: 14px;
}

@media (max-width: 600px) {
    #write-it-beautiful,
    #art-of-colouring,
    #top-novels {
        margin: 14px auto;
        padding: 18px 12px;
    }

    #write-it-beautiful .gov-exam-heading,
    #art-of-colouring .gov-exam-heading,
    #top-novels .gov-exam-heading {
        align-items: flex-start;
        gap: 8px;
    }

    #write-it-beautiful .gov-exam-heading-copy p,
    #art-of-colouring .gov-exam-heading-copy p,
    #top-novels .gov-exam-heading-copy p {
        font-size: 12px;
    }

    #write-it-beautiful .gov-exam-view-all,
    #art-of-colouring .gov-exam-view-all,
    #top-novels .gov-exam-view-all {
        margin-top: 18px;
        font-size: 11px;
    }

    #write-it-beautiful .gov-exam-slider,
    #art-of-colouring .gov-exam-slider,
    #top-novels .gov-exam-slider {
        gap: 6px;
    }

    #write-it-beautiful .gov-exam-arrow,
    #art-of-colouring .gov-exam-arrow,
    #top-novels .gov-exam-arrow {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
    }

    #write-it-beautiful .gov-exam-track,
    #art-of-colouring .gov-exam-track,
    #top-novels .gov-exam-track {
        gap: 10px;
    }

    #write-it-beautiful .gov-book-card,
    #art-of-colouring .gov-book-card,
    #top-novels .gov-book-card {
        flex-basis: 150px;
        padding: 9px;
    }

    #write-it-beautiful .gov-book-image-link,
    #art-of-colouring .gov-book-image-link,
    #top-novels .gov-book-image-link {
        height: 155px;
    }
}


/* FIX: Arrows overlay the product row in all three new sections */
#write-it-beautiful .gov-exam-slider,
#art-of-colouring .gov-exam-slider,
#top-novels .gov-exam-slider {
    position: relative !important;
    width: 100%;
    min-width: 0;
}

#write-it-beautiful .gov-exam-track,
#art-of-colouring .gov-exam-track,
#top-novels .gov-exam-track {
    display: flex;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 16px;
    padding: 5px 3px 12px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

#write-it-beautiful .gov-exam-track::-webkit-scrollbar,
#art-of-colouring .gov-exam-track::-webkit-scrollbar,
#top-novels .gov-exam-track::-webkit-scrollbar {
    display: none;
}

/* Remove arrows from normal document flow */
#write-it-beautiful .gov-exam-slider > .gov-exam-arrow,
#art-of-colouring .gov-exam-slider > .gov-exam-arrow,
#top-novels .gov-exam-slider > .gov-exam-arrow {
    position: absolute !important;
    top: 50% !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid #eee;
    border-radius: 50%;
    background: #fff;
    color: #e87920;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    cursor: pointer;
    opacity: 1 !important;
    visibility: visible !important;
}

#write-it-beautiful .gov-exam-slider > .gov-exam-arrow:hover,
#art-of-colouring .gov-exam-slider > .gov-exam-arrow:hover,
#top-novels .gov-exam-slider > .gov-exam-arrow:hover {
    background: #e87920;
    color: #fff;
}

#write-it-beautiful .gov-exam-slider > .gov-exam-arrow[data-scroll-direction="-1"],
#art-of-colouring .gov-exam-slider > .gov-exam-arrow[data-scroll-direction="-1"],
#top-novels .gov-exam-slider > .gov-exam-arrow[data-scroll-direction="-1"] {
    left: -15px !important;
    right: auto !important;
}

#write-it-beautiful .gov-exam-slider > .gov-exam-arrow[data-scroll-direction="1"],
#art-of-colouring .gov-exam-slider > .gov-exam-arrow[data-scroll-direction="1"],
#top-novels .gov-exam-slider > .gov-exam-arrow[data-scroll-direction="1"] {
    right: -15px !important;
    left: auto !important;
}

@media (max-width: 768px) {
    #write-it-beautiful .gov-exam-slider > .gov-exam-arrow,
    #art-of-colouring .gov-exam-slider > .gov-exam-arrow,
    #top-novels .gov-exam-slider > .gov-exam-arrow {
        width: 32px;
        height: 32px;
    }

    #write-it-beautiful .gov-exam-slider > .gov-exam-arrow[data-scroll-direction="-1"],
    #art-of-colouring .gov-exam-slider > .gov-exam-arrow[data-scroll-direction="-1"],
    #top-novels .gov-exam-slider > .gov-exam-arrow[data-scroll-direction="-1"] {
        left: -8px !important;
    }

    #write-it-beautiful .gov-exam-slider > .gov-exam-arrow[data-scroll-direction="1"],
    #art-of-colouring .gov-exam-slider > .gov-exam-arrow[data-scroll-direction="1"],
    #top-novels .gov-exam-slider > .gov-exam-arrow[data-scroll-direction="1"] {
        right: -8px !important;
    }
}


/* MOBILE: exactly 2 book tiles visible in all five sections */
@media screen and (max-width: 768px) {

  /* Government Exams, Colouring, Novels and Handwriting */
  #government-exam-books .gov-exam-track,
  #art-of-colouring .gov-exam-track,
  #top-novels .gov-exam-track,
  #write-it-beautiful .gov-exam-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  #government-exam-books .gov-exam-track > .gov-book-card,
  #art-of-colouring .gov-exam-track > .gov-book-card,
  #top-novels .gov-exam-track > .gov-book-card,
  #write-it-beautiful .gov-exam-track > .gov-book-card {
    flex: 0 0 calc((100% - 10px) / 2) !important;
    width: calc((100% - 10px) / 2) !important;
    min-width: 0 !important;
    max-width: calc((100% - 10px) / 2) !important;
    padding: 7px !important;
    box-sizing: border-box !important;
  }

  /* Featured Books */
  #product1 #product-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 5px 2px 12px !important;
    box-sizing: border-box !important;
  }

  #product1 #product-list > .pro {
    flex: 0 0 calc((100% - 10px) / 2) !important;
    width: calc((100% - 10px) / 2) !important;
    min-width: 0 !important;
    max-width: calc((100% - 10px) / 2) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Fit book covers inside narrower tiles */
  #government-exam-books .gov-book-image-link,
  #art-of-colouring .gov-book-image-link,
  #top-novels .gov-book-image-link,
  #write-it-beautiful .gov-book-image-link {
    height: 125px !important;
  }

  #government-exam-books .gov-book-card img,
  #art-of-colouring .gov-book-card img,
  #top-novels .gov-book-card img,
  #write-it-beautiful .gov-book-card img {
    max-width: 100% !important;
    object-fit: contain !important;
  }

  #product1 #product-list > .pro img {
    max-width: 100% !important;
  }
}


/* FINAL MOBILE FIX — TWO BOOK CARDS VISIBLE */
@media screen and (max-width: 768px) {

  #government-exam-books .gov-exam-track,
  #art-of-colouring .gov-exam-track,
  #top-novels .gov-exam-track,
  #write-it-beautiful .gov-exam-track,
  #product1 #product-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
  }

  #government-exam-books .gov-exam-track > .gov-book-card,
  #art-of-colouring .gov-exam-track > .gov-book-card,
  #top-novels .gov-exam-track > .gov-book-card,
  #write-it-beautiful .gov-exam-track > .gov-book-card,
  #product1 #product-list > .pro {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 5px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #government-exam-books .gov-exam-track > .gov-book-card {
    padding: 6px !important;
  }

  #government-exam-books .gov-book-image-link,
  #art-of-colouring .gov-book-image-link,
  #top-novels .gov-book-image-link,
  #write-it-beautiful .gov-book-image-link {
    height: 125px !important;
  }
}

/* SHOP MEGA MENU — PREMIUM DESKTOP DESIGN */
@media (min-width: 769px) {
    body:has(#hero.hero-carousel) #header #navbar > li.shop-mega-parent {
        position: relative !important;
        overflow: visible !important;
    }

    #navbar .shop-mega-parent > .shop-mega-trigger {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    #navbar .shop-mega-chevron {
        font-size: 10px;
        transition: transform .25s ease;
    }

    #navbar .shop-mega-parent:hover .shop-mega-chevron,
    #navbar .shop-mega-parent:focus-within .shop-mega-chevron {
        transform: rotate(180deg);
    }

    #navbar .shop-mega-menu {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-25%);
        width: min(1240px, calc(100vw - 36px));
        box-sizing: border-box;
        padding: 26px;
        background: linear-gradient(145deg, #fff 0%, #fffaf3 100%);
        color: #292522;
        border: 1px solid #f0dfca;
        border-top: 4px solid #ed9121;
        border-radius: 14px;
        box-shadow: 0 22px 55px rgba(73, 43, 12, .18);
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: start;
        gap: 22px;
        text-align: left;
        z-index: 99999;
        max-height: min(76vh, 720px);
        overflow-y: auto;
        overscroll-behavior: contain;
        animation: shopMegaEnter .18s ease-out;
    }

    #navbar .shop-mega-parent:hover > .shop-mega-menu,
    #navbar .shop-mega-parent:focus-within > .shop-mega-menu {
        display: grid;
    }

    #navbar .shop-mega-column {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        min-width: 0;
        padding: 15px 12px;
        background: rgba(255,255,255,.88);
        border: 1px solid #f2e9df;
        border-radius: 11px;
        box-shadow: 0 3px 12px rgba(69, 43, 15, .035);
    }

    #navbar .shop-mega-column h3 {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 7px;
        padding: 0 0 12px;
        border-bottom: 2px solid #f2b66e;
        font-size: 15px;
        line-height: 1.4;
        font-weight: 800;
        letter-spacing: .1px;
    }

    #navbar .shop-mega-column h3::before {
        content: "";
        display: inline-block;
        flex: 0 0 5px;
        width: 5px;
        height: 20px;
        border-radius: 5px;
        background: linear-gradient(180deg, #ffb347, #e77e00);
    }

    #navbar .shop-mega-column h3 a {
        color: #33271b !important;
        font-size: inherit !important;
        font-weight: inherit;
        white-space: normal !important;
        text-decoration: none;
    }

    #navbar .shop-mega-column > a {
        display: block !important;
        box-sizing: border-box;
        padding: 7px 8px !important;
        margin: 0 !important;
        border: 1px solid transparent !important;
        border-radius: 7px;
        color: #5b534b !important;
        background: transparent !important;
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        font-weight: 500;
        white-space: normal !important;
        text-decoration: none;
        transition: color .18s ease, background .18s ease,
                    border-color .18s ease, transform .18s ease;
    }

    #navbar .shop-mega-column > a:hover,
    #navbar .shop-mega-column > a:focus {
        color: #a95500 !important;
        background: #fff0dc !important;
        border-color: #f6d5ad !important;
        transform: translateX(2px);
        outline: none;
    }

    #navbar .shop-mega-column h3 a:hover {
        color: #b85f00 !important;
    }

    #navbar .shop-mega-menu::-webkit-scrollbar {
        width: 7px;
    }

    #navbar .shop-mega-menu::-webkit-scrollbar-thumb {
        background: #e9ad68;
        border-radius: 10px;
    }

    @keyframes shopMegaEnter {
        from { opacity: 0; margin-top: 5px; }
        to { opacity: 1; margin-top: 0; }
    }
}

/* Preserve the existing mobile navigation and hide its mega-menu markup */
@media (max-width: 768px) {
    #navbar .shop-mega-chevron,
    #navbar .shop-mega-menu {
        display: none !important;
    }
}




/* Desktop mega-menu: keep each title on one line */
@media (min-width: 769px) {
    #navbar .shop-mega-menu {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    #navbar .shop-mega-column > a {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* Fix account dropdown stacking on the desktop homepage only */
@media (min-width: 769px) {
    body:has(#hero.hero-carousel) #header .header-icons {
        position: relative;
        z-index: 100001;
        overflow: visible;
    }

    body:has(#hero.hero-carousel) #header .account-menu {
        position: relative;
        z-index: 100002;
    }

    body:has(#hero.hero-carousel) #header .account-dropdown {
        top: calc(100% + 8px);
        right: 0;
        z-index: 100003;
        min-width: 170px;
    }

    body:has(#hero.hero-carousel) #header #navbar {
        z-index: 999;
    }
}

/* Floating WhatsApp button above the cart */
.floating-whatsapp-btn {
    position: fixed;
    right: 22px;
    bottom: 100px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff;
    font-size: 31px;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .22);
    z-index: 9998;
    transition: transform .2s ease;
}

.floating-whatsapp-btn:hover {
    transform: scale(1.08);
    color: #fff;
}

@media (max-width: 768px) {
    .floating-whatsapp-btn {
        right: 16px;
        bottom: 88px;
        width: 50px;
        height: 50px;
        font-size: 28px;
    }
}

/* Header icon spacing fix */
.header-icons {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-icons #searchIcon,
.header-icons .account-menu,
.header-icons > a {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .header-icons {
        gap: 16px;
    }
}

/* Increase spacing between account and wishlist icons */
.header-icons .account-menu {
    margin-right: 12px;
}

.header-icons > a[href="wishlist.html"] {
    margin-left: 8px;
}


/* Balanced spacing between search, account and wishlist */
.header-icons {
    gap: 28px !important;
}

.header-icons .account-menu {
    margin-right: 0 !important;
}

.header-icons > a[href="wishlist.html"] {
    margin-left: 0 !important;
}

@media (max-width: 768px) {
    .header-icons {
        gap: 22px !important;
    }
}

/* Shorter search bar with balanced icon spacing */
.homepage-search-wrap {
    max-width: 340px;
}

.header-icons {
    gap: 26px !important;
}

@media (max-width: 768px) {
    .homepage-search-wrap {
        max-width: 100%;
    }

    .header-icons {
        gap: 18px !important;
    }
}

/* FINAL FIX: homepage header search width and icon spacing */
@media (min-width: 769px) {
    body:has(#hero.hero-carousel) #header .header-search-bar {
        flex: 0 1 320px !important;
        width: 320px !important;
        min-width: 0 !important;
    }

    body:has(#hero.hero-carousel) #header .header-search-bar input {
        width: 100% !important;
        min-width: 0 !important;
    }

    body:has(#hero.hero-carousel) #header .header-icons {
        gap: 24px !important;
        margin-left: 24px !important;
    }
}

@media (max-width: 768px) {
    body:has(#hero.hero-carousel) #header .header-icons {
        gap: 20px !important;
    }

    body:has(#hero.hero-carousel) .homepage-search-wrap {
        max-width: 100% !important;
    }
}

/* Adjust homepage search bar to a balanced width */
@media (min-width: 769px) {
    body:has(#hero.hero-carousel) #header .header-search-bar {
        flex: 0 1 400px !important;
        width: 400px !important;
        min-width: 0 !important;
        max-width: 400px !important;
    }

    body:has(#hero.hero-carousel) #header .header-icons {
        gap: 24px !important;
        margin-left: 24px !important;
    }
}

/* Increase account-to-wishlist spacing */
body:has(#hero.hero-carousel) #header .account-menu {
    margin-right: 18px !important;
}


/* Equal spacing: search → account → wishlist */
@media (min-width: 769px) {
    body:has(#hero.hero-carousel) #header .header-search-bar {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-right: 0 !important;
    }

    body:has(#hero.hero-carousel) #header .header-icons {
        gap: 0 !important;
        margin-left: 24px !important;
    }

    body:has(#hero.hero-carousel) #header .account-menu {
        margin-right: 18px !important;
    }

    body:has(#hero.hero-carousel) #header .header-search-bar {
        margin-right: 18px !important;
    }
}
CSScat >> style.css <<'CSS'

/* Equal spacing: search → account → wishlist */
@media (min-width: 769px) {
    body:has(#hero.hero-carousel) #header .header-search-bar {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-right: 0 !important;
    }

    body:has(#hero.hero-carousel) #header .header-icons {
        gap: 0 !important;
        margin-left: 24px !important;
    }

    body:has(#hero.hero-carousel) #header .account-menu {
        margin-right: 18px !important;
    }

    body:has(#hero.hero-carousel) #header .header-search-bar {
        margin-right: 18px !important;
    }
}

/* Reduce only the gap between account and wishlist */
@media (min-width: 769px) {
    body:has(#hero.hero-carousel) #header .account-menu {
        margin-right: 4px !important;
    }
}

/* Increase spacing between search, account and wishlist */
@media (min-width: 769px) {
    body:has(#hero.hero-carousel) #header .header-search-bar {
        margin-right: 24px !important;
    }

    body:has(#hero.hero-carousel) #header .account-menu {
        margin-right: 24px !important;
    }

    body:has(#hero.hero-carousel) #header .header-icons {
        gap: 0 !important;
    }
}

/* More space between account and wishlist icons */
@media (min-width: 769px) {
    body:has(#hero.hero-carousel) #header .account-menu {
        margin-right: 32px !important;
    }
}

/* Header Login button when user is logged out */
#header .account-icon.login-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 64px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #ed9121;
    border-radius: 20px;
    background: #ed9121;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

#header .account-icon.login-header-btn:hover {
    background: #d97d10;
    color: #fff;
}

/* Premium Login Button — Header */
#header .account-icon.login-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    height: 38px;
    padding: 0 18px;

    background: linear-gradient(135deg, #6c3bdb, #4420a8);
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;

    box-shadow: 0 4px 12px rgba(92, 45, 190, 0.28);
    cursor: pointer;
    white-space: nowrap;

    transition: background 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease;
}

#header .account-icon.login-header-btn:hover {
    background: linear-gradient(135deg, #8055f0, #5930c4);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(92, 45, 190, 0.42);
    transform: translateY(-2px);
}

#header .account-icon.login-header-btn:active {
    transform: translateY(0) scale(0.97);
}

@media (max-width: 768px) {
    #header .account-icon.login-header-btn {
        min-width: 64px;
        height: 34px;
        padding: 0 12px;
        font-size: 13px;
        border-radius: 8px;
    }
}


/* Mobile: Reduce spacing between Login, Wishlist and header icons */
@media (max-width: 768px) {
    #header .header-icons {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        column-gap: 8px !important;
    }

    #header .account-menu {
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    #header .wishlist,
    #header .wishlist-icon,
    #header .wishlist-btn,
    #header .wishlist-link {
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex: 0 0 auto !important;
    }

    #header .account-icon.login-header-btn {
        min-width: 60px !important;
        padding: 0 10px !important;
        margin: 0 !important;
    }
}

/* Mobile header: close Login-Wishlist gap and preserve right padding */
@media (max-width: 768px) {
    #header .header-icons {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        column-gap: 10px !important;
        padding-right: 12px !important;
        margin-right: 0 !important;
    }

    #header .account-menu {
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    #header .account-icon.login-header-btn {
        margin: 0 !important;
    }

    #header .wishlist,
    #header .wishlist-icon,
    #header .wishlist-btn,
    #header .wishlist-link {
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
}

/* =========================================
   WHATSAPP FLOAT BUTTON — DESKTOP + MOBILE
   ========================================= */

#whatsapp-float,
.whatsapp-float,
.whatsapp-floating,
.floating-whatsapp,
a[href*="wa.me"].whatsapp-button {
    position: fixed !important;
    right: 24px !important;
    bottom: 114px !important;

    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #20c96b !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;

    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.20) !important;
    z-index: 9998 !important;

    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;

    transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                background 0.25s ease !important;
}

#whatsapp-float i,
.whatsapp-float i,
.whatsapp-floating i,
.floating-whatsapp i,
a[href*="wa.me"].whatsapp-button i {
    font-size: 29px !important;
    line-height: 1 !important;
}

#whatsapp-float img,
.whatsapp-float img,
.whatsapp-floating img,
.floating-whatsapp img,
a[href*="wa.me"].whatsapp-button img {
    width: 29px !important;
    height: 29px !important;
    object-fit: contain !important;
}

#whatsapp-float:hover,
.whatsapp-float:hover,
.whatsapp-floating:hover,
.floating-whatsapp:hover,
a[href*="wa.me"].whatsapp-button:hover {
    background: #16b85b !important;
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24) !important;
}

/* Mobile: align WhatsApp with the floating cart */
@media (max-width: 768px) {
    #whatsapp-float,
    .whatsapp-float,
    .whatsapp-floating,
    .floating-whatsapp,
    a[href*="wa.me"].whatsapp-button {
        right: 16px !important;
        bottom: 116px !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    #whatsapp-float i,
    .whatsapp-float i,
    .whatsapp-floating i,
    .floating-whatsapp i,
    a[href*="wa.me"].whatsapp-button i {
        font-size: 27px !important;
    }
}

/* ==========================================
   TILAK BOOK DEPOT - WHATSAPP FLOATING BUTTON
   ========================================== */

.floating-whatsapp-btn {
    position: fixed !important;
    right: 24px !important;
    bottom: 114px !important;

    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: linear-gradient(145deg, #25D366, #12B85A) !important;
    color: #fff !important;

    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;

    padding: 0 !important;
    margin: 0 !important;

    box-shadow: 0 5px 18px rgba(18, 184, 90, 0.30) !important;
    text-decoration: none !important;
    z-index: 9998 !important;

    transition: transform 0.25s ease,
                box-shadow 0.25s ease !important;
}

.floating-whatsapp-btn i {
    font-size: 30px !important;
    line-height: 1 !important;
    color: #fff !important;
}

.floating-whatsapp-btn:hover {
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow: 0 8px 22px rgba(18, 184, 90, 0.40) !important;
}

/* Mobile-only adjustments */
@media (max-width: 768px) {
    .floating-whatsapp-btn {
        right: 16px !important;
        bottom: 116px !important;

        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    .floating-whatsapp-btn i {
        font-size: 27px !important;
    }
}


/* WhatsApp and Cart: same size and perfectly aligned */
.floating-whatsapp-btn {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;

    right: 24px !important;
    bottom: 114px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.floating-whatsapp-btn i {
    font-size: 34px !important;
}

/* Match cart alignment on mobile */
@media (max-width: 768px) {
    .floating-whatsapp-btn {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;

        right: 16px !important;
        bottom: 116px !important;
    }

    .floating-whatsapp-btn i {
        font-size: 34px !important;
    }
}

/* Fine-tune WhatsApp size to match the floating cart */
.floating-whatsapp-btn {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
    right: 24px !important;
}

.floating-whatsapp-btn i {
    font-size: 31px !important;
}

@media (max-width: 768px) {
    .floating-whatsapp-btn {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        right: 16px !important;
    }

    .floating-whatsapp-btn i {
        font-size: 28px !important;
    }
}

/* Final WhatsApp size and alignment fix */
.floating-whatsapp-btn {
    box-sizing: border-box !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    right: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.floating-whatsapp-btn i {
    font-size: 34px !important;
}

@media (max-width: 768px) {
    .floating-whatsapp-btn {
        box-sizing: border-box !important;
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        right: 27px !important;
    }

    .floating-whatsapp-btn i {
        font-size: 34px !important;
    }
}

/* Mobile: fine-tune WhatsApp position and cart spacing */
@media (max-width: 768px) {
    .floating-whatsapp-btn {
        right: 23px !important;
        bottom: 108px !important;
    }
}

@media (max-width: 768px) {
    .floating-whatsapp-btn {
        right: 15px !important;
    }
}

/* Floating action buttons — clean, matching design */
.floating-whatsapp-btn,
#floatingCart {
    box-sizing: border-box !important;
    position: fixed !important;
    right: 20px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* WhatsApp above cart */
.floating-whatsapp-btn {
    bottom: 104px !important;
    background: #20c96b !important;
    border: 2px solid #fff !important;
    box-shadow: 0 4px 14px rgba(32, 201, 107, 0.25) !important;
    z-index: 9998 !important;
}

.floating-whatsapp-btn i {
    font-size: 29px !important;
}

/* Cart below WhatsApp */
#floatingCart {
    bottom: 24px !important;
    z-index: 9997 !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .floating-whatsapp-btn,
    #floatingCart {
        right: 16px !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
    }

    .floating-whatsapp-btn {
        bottom: 92px !important;
    }

    .floating-whatsapp-btn i {
        font-size: 27px !important;
    }

    #floatingCart {
        bottom: 22px !important;
    }
}