/* =========================================================
   MAHALAXMI TRADERS  –  PRODUCTS PAGE
   File : css/products.css   (loaded after style.css)
   Every class starts with "pd-" so nothing here can clash
   with the rest of the site.
   ========================================================= */

.products-page {
    --pd-green: #0f3d2e;
    --pd-green-deep: #0b2f23;
    --pd-gold: #c99a44;
    --pd-gold-soft: #d9a94f;
    --pd-page: #fcfaf5;
    --pd-beige: #f5efe0;
    --pd-line: #e9e2d2;
    --pd-ink: #1b221e;
    --pd-mute: #56605a;
    --pd-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --pd-script: "Caveat", "Segoe Script", "Brush Script MT", cursive;

    background: var(--pd-page);
    color: var(--pd-ink);
}

/* style.css gives every <section> 80px of vertical padding – reset it */
.products-page main > section { padding-block: 0; }
/* (sections that need their own padding set it below with a higher-specificity selector) */

.pd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.products-page svg { display: block; }
.products-page main img { max-width: 100%; }

.pd-wrap { width: min(1360px, 94.5%); margin-inline: auto; }

.products-page h1,
.products-page h2,
.products-page h3 {
    font-family: var(--pd-serif);
    color: var(--pd-green);
    font-weight: 700;
    line-height: 1.15;
}

.products-page main a:focus-visible,
.products-page main button:focus-visible,
.products-page main input:focus-visible,
.products-page main select:focus-visible,
.pd-modal button:focus-visible,
.pd-modal a:focus-visible {
    outline: 2px solid var(--pd-gold);
    outline-offset: 2px;
}

.pd-swash { width: 100%; height: .4em; }

/* buttons */
.pd-btn,
.pd-btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.pd-btn svg,
.pd-btn-light svg,
.pd-view svg { width: 16px; height: 16px; transition: transform .25s ease; }

.pd-btn:hover svg,
.pd-btn-light:hover svg,
.pd-view:hover svg { transform: translateX(4px); }

.pd-btn {
    min-height: 44px;
    padding: 0 18px;
    font-size: clamp(13.5px, 1.05vw, 15px);
    white-space: nowrap;
    color: #fff;
    background: var(--pd-green);
}

.pd-btn:hover { background: #0a3024; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15, 61, 46, .25); }

.pd-btn--wa { background: #1fa855; }
.pd-btn--wa:hover { background: #178a45; }
.pd-btn--wa svg { transform: none !important; width: 20px; height: 20px; }

.pd-btn-light {
    min-height: 54px;
    padding: 0 38px;
    font-size: 16px;
    color: #12241c;
    background: #fcfaf5;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.pd-btn-light:hover { background: #fff; transform: translateY(-2px); }


/* =========================================================
   HERO
   ========================================================= */

.pd-hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(310px, 23vw, 340px);
    background: var(--pd-page);
}

.pd-hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 66%;
    background: url("../assets/products/hero-bowl.jpg") right -30px bottom / auto 118% no-repeat;
}

.pd-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fcfaf5 0%, rgba(252, 250, 245, .92) 14%, rgba(252, 250, 245, .4) 40%, rgba(252, 250, 245, 0) 64%);
}

.pd-hero-inner {
    position: relative;
    z-index: 1;
    padding: 22px 0 28px clamp(0px, 2vw, 30px);
}

.pd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--pd-green);
}

.pd-breadcrumb a:hover { text-decoration: underline; }

.pd-hero h1 {
    margin-top: clamp(14px, 1.9vw, 26px);
    font-size: clamp(36px, 3.7vw, 54px);
    letter-spacing: -.01em;
}

.pd-hero-sub {
    margin-top: 6px;
    font-family: var(--pd-serif);
    font-weight: 700;
    font-size: clamp(19px, 1.85vw, 26px);
    color: var(--pd-gold);
}

.pd-hero-text {
    max-width: clamp(320px, 41vw, 600px);
    margin-top: 10px;
    font-size: clamp(14.5px, 1.2vw, 17px);
    line-height: 1.65;
    color: #232a26;
}

.pd-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px clamp(14px, 1.9vw, 28px);
    margin-top: clamp(16px, 1.8vw, 24px);
    max-width: 62%;
}

.pd-badges li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(13px, 1vw, 14.5px);
    color: var(--pd-green);
}

.pd-badge-ico {
    flex: none;
    width: clamp(38px, 3.2vw, 46px);
    height: clamp(38px, 3.2vw, 46px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pd-green);
    color: var(--pd-gold-soft);
}

.pd-badge-ico svg { width: 52%; height: 52%; }

.pd-hero-script {
    position: absolute;
    z-index: 2;
    left: 58.5%;
    top: clamp(24px, 2.8vw, 40px);
    font-family: var(--pd-script);
    font-weight: 500;
    font-size: clamp(26px, 2.8vw, 40px);
    line-height: 1.1;
    color: #171c19;
    transform: rotate(-11deg);
    transform-origin: left bottom;
    pointer-events: none;
}

.pd-hero-script span { display: block; }
.pd-hero-script span:nth-child(2) { margin-left: .35em; }
.pd-hero-script span:nth-child(3) { margin-left: .7em; }
.pd-hero-script .pd-swash { width: 6em; height: .42em; margin: .3em 0 0 .5em; }

.pd-hero-note {
    position: absolute;
    z-index: 2;
    right: clamp(12px, 2.4vw, 36px);
    bottom: clamp(16px, 2.2vw, 30px);
    padding: 12px 18px 10px;
    font-family: var(--pd-script);
    font-weight: 500;
    font-size: clamp(17px, 1.7vw, 24px);
    line-height: 1.1;
    color: #1d2320;
    background: linear-gradient(180deg, #fbf5e6, #f4ead3);
    box-shadow: 0 8px 20px rgba(60, 40, 10, .25);
    transform: rotate(-8deg);
    pointer-events: none;
}

.pd-hero-note span { display: block; }


/* =========================================================
   FEATURE STRIP
   ========================================================= */

.products-page main > .pd-strip { padding-block: clamp(10px, 1.1vw, 16px) 0; }

.pd-strip-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: clamp(12px, 1.3vw, 18px) 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8f3e7, #f3ecdc);
}

.pd-strip-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 4px 10px;
    font-size: clamp(13px, 1.05vw, 15.5px);
    line-height: 1.35;
    color: #1d2521;
}

.pd-strip-list li + li { border-left: 1px solid #e2dac6; }

.pd-strip-list svg {
    flex: none;
    width: clamp(32px, 3.1vw, 44px);
    height: clamp(32px, 3.1vw, 44px);
    color: var(--pd-green);
    transition: transform .4s cubic-bezier(.3, 1.5, .5, 1);
}

.pd-strip-list li:hover svg { transform: scale(1.14) rotate(-4deg); }


/* =========================================================
   CATALOGUE
   ========================================================= */

.products-page main > .pd-catalog { scroll-margin-top: 120px; padding-block: clamp(16px, 1.8vw, 26px) clamp(14px, 1.6vw, 22px); }

.pd-catalog-grid {
    display: grid;
    grid-template-columns: clamp(200px, 17.6vw, 250px) minmax(0, 1fr);
    gap: clamp(14px, 1.5vw, 22px);
    align-items: start;
}

/* --- sidebar --- */
.pd-side { display: grid; gap: clamp(12px, 1.3vw, 18px); }

.pd-browse { padding: clamp(14px, 1.4vw, 20px) 0 clamp(8px, .9vw, 12px); }
.pd-browse h2 { padding: 0 6px 8px; font-size: clamp(19px, 1.6vw, 23px); }

.pd-browse ul { list-style: none; display: grid; gap: 4px; margin-top: 10px; }

.pd-browse button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px 11px 14px;
    border: 0;
    border-left: 3px solid transparent;
    background: none;
    font: inherit;
    font-size: clamp(13.5px, 1.05vw, 15px);
    text-align: left;
    color: #2a312d;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, padding .2s ease;
}

.pd-browse button i {
    flex: none;
    width: 12px;
    height: 12px;
    border: 1.5px solid #2c332f;
    border-radius: 2px;
    transition: background .2s ease, transform .2s ease;
}

.pd-browse button:hover { background: #f1eee3; padding-left: 18px; }
.pd-browse button:hover i { background: var(--pd-gold); transform: rotate(45deg); }

.pd-browse button.is-active {
    background: #ebe8dd;
    border-left-color: var(--pd-green);
    font-weight: 600;
    color: var(--pd-green);
}

.pd-bulk {
    padding: clamp(14px, 1.5vw, 20px);
    border-radius: 8px;
    background: linear-gradient(180deg, #f6eedb, #f2e8d0);
}

.pd-bulk-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pd-bulk h3 { font-size: clamp(18px, 1.55vw, 22px); }
.pd-bulk-ico { flex: none; width: clamp(38px, 3.4vw, 50px); height: clamp(38px, 3.4vw, 50px); color: #cf9a3f; }

.pd-bulk p {
    margin: 12px 0 14px;
    font-size: clamp(13.5px, 1.05vw, 15px);
    line-height: 1.6;
    color: #2e3630;
}

.pd-bulk .pd-btn { width: 100%; }

.pd-also {
    padding: clamp(14px, 1.5vw, 20px);
    border: 1px solid var(--pd-line);
    border-radius: 8px;
    background: #fff;
}

.pd-also h3 { font-size: clamp(18px, 1.55vw, 22px); }

.pd-shops {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 12px 0;
    padding: 12px 12px;
    border: 1px solid var(--pd-line);
    border-radius: 6px;
}

.pd-shop { text-decoration: none; transition: transform .2s ease; }
.pd-shop:hover { transform: translateY(-2px); }

.pd-shop--amazon { display: grid; justify-items: center; }
.pd-shop--amazon span { font-family: "DM Sans", Arial, sans-serif; font-size: clamp(20px, 1.9vw, 27px); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #151a18; }
.pd-shop--amazon svg { width: 62px; height: 11px; margin-top: -1px; }

.pd-shop--flipkart { display: flex; align-items: center; gap: 5px; }
.pd-shop--flipkart span { font-family: "DM Sans", Arial, sans-serif; font-size: clamp(17px, 1.65vw, 23px); font-weight: 700; font-style: italic; letter-spacing: -.02em; color: #2874f0; }
.pd-shop--flipkart b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; font-style: italic; font-size: 15px; color: #2874f0; background: #ffe11b; }

.pd-also ul { list-style: none; display: grid; gap: 8px; }

.pd-also li {
    position: relative;
    padding-left: 18px;
    font-size: clamp(13px, 1vw, 14.5px);
    line-height: 1.45;
    color: #2b332e;
}

.pd-also li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .5em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pd-green);
}

/* --- toolbar --- */
.pd-toolbar {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 22px);
}

.pd-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #ddd6c7;
    border-radius: 6px;
    background: #fffdf9;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.pd-search:focus-within { border-color: var(--pd-green); box-shadow: 0 0 0 3px rgba(15, 61, 46, .12); }
.pd-search svg { flex: none; width: 17px; height: 17px; color: #5d665f; }

.pd-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--pd-ink);
}

.pd-search input:focus { outline: none; }
.pd-search input::placeholder { color: #767d78; opacity: 1; }

.pd-sort { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #2a312d; white-space: nowrap; }

.pd-sort select {
    height: 42px;
    padding: 0 34px 0 14px;
    border: 1px solid #ddd6c7;
    border-radius: 6px;
    font: inherit;
    font-size: 14.5px;
    color: var(--pd-ink);
    background: #fffdf9 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%231b221e' stroke-width='2' stroke-linecap='round'/></svg>") right 12px center / 11px no-repeat;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* --- heading row --- */
.pd-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    margin: clamp(12px, 1.4vw, 20px) 0 clamp(10px, 1.1vw, 16px);
}

.pd-head-ico { width: clamp(34px, 3.3vw, 48px); height: clamp(34px, 3.3vw, 48px); color: #cf9a3f; }
.pd-head h2 { font-size: clamp(25px, 2.3vw, 33px); }
.pd-head p { margin-top: 3px; font-size: clamp(14px, 1.1vw, 16px); color: #2a312d; }

.pd-head-script {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    font-family: var(--pd-script);
    font-size: clamp(18px, 1.7vw, 24px) !important;
    line-height: 1.1;
    color: #3c4540 !important;
    transform: rotate(-4deg);
}

.pd-head-script svg { width: 34px; height: 34px; color: var(--pd-green); }

/* --- grid --- */
.pd-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 1vw, 14px);
}

.pd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #ece5d5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(23, 63, 53, .05);
    container-type: inline-size;
}

.pd-card[hidden] { display: none; }

.pd-card-img {
    overflow: hidden;
    background: #fbf9f4;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.pd-card-img img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.pd-card:hover .pd-card-img img { transform: scale(1.05); }

.pd-card-body { display: flex; flex-direction: column; flex: 1; padding: 12px 12px 14px; text-align: center; }

.pd-card h3 {
    font-family: "DM Sans", sans-serif;
    font-size: clamp(14.5px, 1.15vw, 16.5px);
    font-weight: 700;
    color: #131916;
}

.pd-tag { margin: 5px 0 10px; font-size: clamp(12.5px, .98vw, 14px); color: #3b443f; }

.pd-sizes {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.pd-sizes--one { grid-template-columns: 1fr; width: 52%; margin-inline: auto; }

.pd-sizes li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 4px 6px;
    border: 1px solid #e2dbc9;
    border-radius: 4px;
    background: #fbf9f3;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.pd-card:hover .pd-sizes li { border-color: #cfc3a6; background: #fffdf8; }

.pd-sizes span { font-size: 13px; color: #3b443f; }
.pd-sizes strong { font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; color: #111714; }

.pd-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    min-height: 38px;
    border: 0;
    border-radius: 4px;
    font: inherit;
    font-size: clamp(13px, 1vw, 14.5px);
    font-weight: 600;
    color: #fff;
    background: var(--pd-green);
    cursor: pointer;
    transition: background .2s ease;
}

.pd-view:hover { background: #0a3024; }

.pd-flag {
    position: absolute;
    z-index: 3;
    top: 0;
    padding: .32em .85em .32em;
    font-size: 12px;
    font-size: clamp(11px, 6.8cqw, 13.5px);
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #173f35;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.pd-flag--best { right: 0; border-radius: 0 0 0 8px; background: #16a34a; }
.pd-flag--premium { left: 0; border-radius: 0 0 8px 0; background: #c4262d; }
.pd-flag--new { left: 0; border-radius: 0 0 8px 0; background: #d97706; }
.pd-flag--quality, .pd-flag--popular, .pd-flag--default { right: 0; border-radius: 0 0 0 8px; background: #173f35; }

/* price promise card */
.pd-prices {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8f2e4, #f2e9d3);
    border: 1px solid #ece3cc;
}

.pd-prices-art {
    height: clamp(74px, 7vw, 100px);
    background:
        linear-gradient(180deg, rgba(248, 242, 228, 0) 55%, #f8f2e4 100%),
        url("../assets/products/price-deco.jpg") center / cover no-repeat;
}

.pd-prices h3 { padding: 0 16px; font-size: clamp(19px, 1.65vw, 23px); line-height: 1.22; }

.pd-prices ul { list-style: none; display: grid; gap: 14px; padding: 18px 16px 20px; }

.pd-prices li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(13px, 1vw, 14.5px);
    line-height: 1.35;
    color: #2b332e;
}

.pd-prices li svg { flex: none; width: 26px; height: 26px; color: var(--pd-green); }

.pd-empty {
    padding: 44px 16px;
    text-align: center;
    border: 1px dashed #d9d0ba;
    border-radius: 8px;
    color: var(--pd-mute);
}

.pd-empty[hidden],
.pd-prices[hidden] { display: none; }
.pd-empty button { border: 0; background: none; font: inherit; font-weight: 600; color: var(--pd-green); text-decoration: underline; cursor: pointer; }


/* =========================================================
   JOURNEY
   ========================================================= */

.pd-journey {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(90deg, #0c382a 0%, #0f3d2e 60%, #123f31 100%);
}

.pd-journey-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 42%;
    background: url("../assets/products/hands.jpg") right 30% / auto 185% no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 62%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 62%);
    opacity: .9;
}

.pd-journey-inner { position: relative; padding: clamp(18px, 1.9vw, 26px) 0 clamp(18px, 2vw, 28px); }

.pd-journey h2 { font-size: clamp(22px, 2vw, 29px); color: #fff; }

.pd-journey-steps {
    list-style: none;
    display: flex;
    align-items: flex-start;
    max-width: 66%;
    margin-top: clamp(14px, 1.5vw, 20px);
}

.pd-journey-steps li {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
    font-size: clamp(12.5px, 1vw, 14.5px);
    line-height: 1.3;
}

.pd-journey-steps li.pd-jarrow { flex: 0 0 clamp(18px, 2.1vw, 30px); padding-top: clamp(16px, 1.9vw, 26px); color: var(--pd-gold-soft); }
.pd-jarrow svg { width: 18px; height: 18px; }

.pd-jc {
    display: grid;
    place-items: center;
    width: clamp(46px, 4.3vw, 60px);
    height: clamp(46px, 4.3vw, 60px);
    border-radius: 50%;
    color: var(--pd-green);
    background: #fbf8ef;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
    transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s ease;
}

.pd-jc svg { width: 52%; height: 52%; }
.pd-journey-steps li:hover .pd-jc { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 6px rgba(217, 169, 79, .35); }

.pd-journey-script {
    position: absolute;
    z-index: 1;
    right: clamp(14px, 4.4vw, 70px);
    top: 50%;
    translate: 0 -50%;
    font-family: var(--pd-script);
    font-size: clamp(22px, 2.3vw, 34px);
    line-height: 1.02;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
    transform: rotate(-9deg);
    pointer-events: none;
}

.pd-journey-script span { display: block; }
.pd-journey-script span:nth-child(2) { margin-left: .35em; }
.pd-journey-script span:nth-child(3) { margin-left: .8em; }
.pd-journey-script .pd-swash { width: 3.4em; height: .32em; margin: .15em 0 0 .8em; }


/* =========================================================
   WHY CHOOSE
   ========================================================= */

.products-page main > .pd-why { padding-block: clamp(14px, 1.6vw, 22px); }

.pd-why-grid {
    display: grid;
    grid-template-columns: 3.1fr 1fr;
    gap: clamp(10px, 1vw, 14px);
}

.pd-why-panel {
    padding: clamp(14px, 1.5vw, 20px) clamp(14px, 1.5vw, 20px) clamp(16px, 1.7vw, 24px);
    border-radius: 8px;
    background: linear-gradient(180deg, #f9f2df, #f5ecd5);
}

.pd-why h2 { font-size: clamp(21px, 1.85vw, 26px); }

.pd-why-cards {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1vw, 14px);
    margin-top: clamp(12px, 1.2vw, 16px);
}

.pd-why-cards li {
    padding: clamp(14px, 1.5vw, 20px) 12px clamp(14px, 1.5vw, 20px);
    text-align: center;
    border: 1px solid #efe6d1;
    border-radius: 6px;
    background: #fffdf8;
    transition: transform .3s ease, box-shadow .3s ease;
}

.pd-why-cards li:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(23, 63, 53, .1); }

.pd-why-cards svg { width: clamp(34px, 3.3vw, 46px); height: clamp(34px, 3.3vw, 46px); margin: 0 auto 8px; color: #d29a3e; transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.pd-why-cards li:hover svg { transform: scale(1.12) rotate(-5deg); }

.pd-why-cards h3 { font-family: "DM Sans", sans-serif; font-size: clamp(14.5px, 1.15vw, 16.5px); font-weight: 700; color: #131916; }
.pd-why-cards p { margin-top: 4px; font-size: clamp(12.5px, .98vw, 14px); color: #3b443f; }

.pd-story {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    overflow: hidden;
    padding: clamp(14px, 1.5vw, 20px);
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(10, 40, 30, .12), rgba(10, 40, 30, .62)),
        url("../assets/products/pond.jpg") center / cover no-repeat,
        #1d4a37;
}

.pd-story-script {
    align-self: flex-end;
    font-family: var(--pd-script);
    font-size: clamp(22px, 2.1vw, 30px);
    line-height: 1.08;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
    transform: rotate(-6deg);
}

.pd-story-script span { display: block; }
.pd-story-script span:nth-child(2) { margin-left: .5em; }
.pd-story-script span:nth-child(3) { margin-left: 1em; }

.pd-btn--dark { min-height: 40px; align-self: flex-end; }


/* =========================================================
   CTA
   ========================================================= */

.pd-cta {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(9, 44, 31, 0) 0%, rgba(9, 44, 31, 0) 24%, rgba(9, 44, 31, .5) 42%, rgba(9, 44, 31, .66) 100%),
        url("../assets/products/cta-bowl.jpg") center / cover no-repeat,
        #123a2b;
}

.pd-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.9fr) auto;
    align-items: center;
    gap: clamp(16px, 2.4vw, 40px);
    min-height: clamp(120px, 9.6vw, 140px);
    padding: 18px 0;
}

.pd-cta h2 { font-size: clamp(22px, 2.1vw, 30px); color: #fff; }
.pd-cta-copy p { margin-top: 8px; font-size: clamp(13.5px, 1.1vw, 16px); line-height: 1.6; color: #eef2ec; }
.pd-cta .pd-btn-light { justify-self: end; }


/* =========================================================
   QUICK VIEW MODAL (CENTERED & ENHANCED)
   ========================================================= */

.pd-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: min(840px, 94vw);
    max-height: 90vh;
    padding: 0;
    border: 0;
    border-radius: 18px;
    overflow-y: auto;
    overflow-x: hidden;
    color: var(--pd-ink);
    background: #fdfbf7;
    box-shadow: 0 30px 90px rgba(6, 24, 17, .5);
    z-index: 10000;
}

.pd-modal::backdrop {
    background: rgba(9, 30, 22, .65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.pd-modal[open] {
    display: block;
    animation: pd-modal-center-in .35s cubic-bezier(.16, 1, .3, 1) forwards;
}
.pd-modal[open]::backdrop { animation: pd-fade .3s ease; }

@keyframes pd-modal-center-in {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 22px)) scale(.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes pd-fade { from { opacity: 0; } to { opacity: 1; } }

.pd-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--pd-green);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: transform .25s ease, background .2s ease;
}

.pd-modal-close:hover { transform: rotate(90deg) scale(1.08); background: #ffffff; }
.pd-modal-close svg { width: 18px; height: 18px; }

.pd-modal-body { display: grid; grid-template-columns: 1fr 1.15fr; }
.pd-modal-media {
    background: #fbf9f4;
    position: relative;
    display: flex;
    gap: 12px;
    padding: 20px;
    overflow: hidden;
    align-items: flex-start;
}

/* Amazon / Flipkart Style Thumbnails Column */
.pd-modal-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 440px;
    overflow-y: auto;
    scrollbar-width: thin;
    flex: 0 0 62px;
}
.pd-modal-thumbs:empty { display: none; }

.pd-thumb-btn {
    width: 60px;
    height: 60px;
    border: 2px solid #e5e0d3;
    border-radius: 6px;
    padding: 3px;
    background: #fff;
    cursor: pointer;
    transition: all .2s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.pd-thumb-btn:hover,
.pd-thumb-btn.is-active {
    border-color: var(--pd-green, #173f35);
    box-shadow: 0 0 0 2px rgba(23, 63, 53, 0.2);
    transform: scale(1.04);
}

/* Main Image & Interactive Zoom */
.pd-modal-main-img-wrap {
    flex: 1;
    min-height: 380px;
    max-height: 440px;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #efe8d5;
    cursor: crosshair;
}

.pd-modal-main-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block !important;
    transform-origin: center center;
    transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
    user-select: none;
}

.pd-modal-main-img-wrap.is-zoomed img {
    transform: scale(2.1);
}

.pd-zoom-hint {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(23, 63, 53, 0.75);
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.pd-modal-main-img-wrap:hover .pd-zoom-hint {
    opacity: 0;
}

.pd-modal-info { padding: clamp(20px, 3vw, 32px); }
.pd-modal-info h2 { font-size: clamp(24px, 2.4vw, 30px); padding-right: 34px; color: var(--pd-green); line-height: 1.2; }
.pd-modal-tag { margin-top: 5px; font-size: 15px; color: var(--pd-mute); }

/* Description Box */
.pd-modal-desc-box {
    margin: 14px 0 16px;
    padding: 12px 16px;
    background: rgba(23, 63, 53, 0.05);
    border-left: 3.5px solid var(--pd-gold);
    border-radius: 6px;
}

.pd-modal-desc-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--pd-green);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.pd-modal-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: #3b4742;
    margin: 0;
}

.pd-modal-label { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--pd-green); }

.pd-modal-sizes { display: flex; flex-wrap: wrap; gap: 10px; }

.pd-modal-sizes button {
    min-width: 92px;
    padding: 9px 16px;
    border: 1.5px solid #d9d0ba;
    border-radius: 6px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #2a312d;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.pd-modal-sizes button:hover { border-color: var(--pd-green); transform: translateY(-1px); }
.pd-modal-sizes button[aria-checked="true"] { border-color: var(--pd-green); color: #fff; background: var(--pd-green); }

.pd-modal-price { margin: 16px 0 16px; }
.pd-modal-price span { display: block; font-family: var(--pd-serif); font-size: 36px; font-weight: 700; color: var(--pd-green); line-height: 1.1; }
.pd-modal-price small { display: block; margin-top: 4px; font-size: 13px; color: var(--pd-mute); }

/* Also Available On: Amazon & Flipkart */
.pd-modal-marketplaces {
    margin: 16px 0 16px;
    padding: 12px 14px;
    background: #f4eee2;
    border: 1px solid #e3d9c7;
    border-radius: 10px;
}

.pd-marketplaces-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pd-green);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.pd-marketplaces-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pd-market-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.pd-market-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pd-market-btn--amazon {
    background: #232f3e;
    color: #ffffff;
    border: 1px solid #131921;
}

.pd-market-btn--amazon i {
    font-size: 16px;
    color: #ff9900;
}

.pd-market-btn--amazon strong {
    color: #ff9900;
}

.pd-market-btn--amazon:hover {
    background: #131921;
}

.pd-market-btn--flipkart {
    background: #2874f0;
    color: #ffffff;
    border: 1px solid #1c62d4;
}

.pd-market-btn--flipkart:hover {
    background: #1a62d6;
}

.pd-fk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #ffe500;
    color: #2874f0;
    font-weight: 900;
    font-style: italic;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
}

.pd-modal-actions { display: grid; gap: 10px; }
.pd-modal-actions .pd-btn { width: 100%; align-self: stretch; }
.pd-modal-note { margin-top: 14px; font-size: 13.5px; color: var(--pd-mute); }
.pd-modal-note a { color: var(--pd-green); font-weight: 600; text-decoration: underline; }

body.pd-lock { overflow: hidden; }


/* =========================================================
   MOTION  (only when has-anim is set: JS on + motion allowed)
   ========================================================= */

/* hero: one staggered entrance on load */
.has-anim [data-in] {
    opacity: 0;
    animation: pd-rise .85s cubic-bezier(.2, .7, .2, 1) forwards;
    animation-delay: calc(var(--n, 0) * 95ms + 120ms);
}

@keyframes pd-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.has-anim .pd-hero-photo { animation: pd-zoom 1.9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pd-zoom { from { transform: scale(1.08); opacity: .55; } to { transform: none; opacity: 1; } }

.has-anim .pd-hero-script { animation: pd-script 1s .75s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pd-script { from { opacity: 0; transform: rotate(-11deg) translateY(16px); } to { opacity: 1; transform: rotate(-11deg); } }

.has-anim .pd-hero-note { animation: pd-note .9s 1.15s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes pd-note { from { opacity: 0; transform: rotate(-22deg) scale(.75); } to { opacity: 1; transform: rotate(-8deg); } }

.has-anim .pd-hero-script .pd-swash path {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: pd-draw 1s 1.2s ease forwards;
}

@keyframes pd-draw { to { stroke-dashoffset: 0; } }

/* scroll reveal */
.has-anim [data-reveal] { opacity: 0; transform: translateY(26px); }

.has-anim [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--d, 0ms);
}

/* after the entrance, hover effects must not wait for the stagger delay */
.has-anim [data-reveal].is-done { transition-delay: 0ms; transition-duration: .3s; }
.has-anim .pd-card.is-done { transition-property: transform, box-shadow, opacity; }

/* cards lift on hover */
.pd-card { transition: transform .3s ease, box-shadow .3s ease; }
.pd-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(23, 63, 53, .14); }

/* cards re-enter after search / filter / sort */
.pd-card.pd-pop { animation: pd-pop .5s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: var(--d, 0ms); }
@keyframes pd-pop { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* journey: arrows nudge along once revealed */
.has-anim .pd-jarrow.is-in svg { animation: pd-nudge 1.6s ease-in-out 1s 2; }
@keyframes pd-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .pd-badges { max-width: 58%; }
    .pd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pd-strip-list { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
    .pd-strip-list li:nth-child(4) { border-left: 0; }
    .pd-journey-steps { max-width: 100%; }
    .pd-journey-photo { width: 30%; opacity: .35; }
    .pd-journey-script { display: none; }
    .pd-why-grid { grid-template-columns: 1fr; }
    .pd-story { min-height: 200px; }
}

@media (max-width: 900px) {
    .pd-hero-photo { width: 100%; opacity: .55; }
    .pd-hero-photo::before { background: linear-gradient(180deg, rgba(252, 250, 245, .95), rgba(252, 250, 245, .72) 60%, rgba(252, 250, 245, .5)); }
    .pd-hero-script,
    .pd-hero-note { display: none; }
    .pd-badges { max-width: none; }

    .pd-catalog-grid { grid-template-columns: 1fr; }
    .pd-side { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
    .pd-browse { grid-column: 1 / -1; padding-bottom: 0; }
    .pd-browse ul { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

    .pd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pd-why-cards { grid-template-columns: repeat(2, 1fr); }

    .pd-cta-inner { grid-template-columns: 1fr; justify-items: start; padding: 28px 0 32px; }
    .pd-cta-space { display: none; }
    .pd-cta { background: linear-gradient(90deg, rgba(9, 44, 31, .78), rgba(9, 44, 31, .82)), url("../assets/products/cta-bowl.jpg") 0% 50% / cover no-repeat, #123a2b; }
    .pd-cta .pd-btn-light { justify-self: start; }
}

@media (max-width: 720px) {
    .pd-toolbar { flex-direction: column; align-items: stretch; }
    .pd-sort { justify-content: space-between; }
    .pd-head { grid-template-columns: auto 1fr; }
    .pd-head-script { display: none; }

    .pd-journey-steps { flex-wrap: wrap; justify-content: center; gap: 18px 10px; }
    .pd-journey-steps li.pd-jarrow { display: none; }
    .pd-journey-steps li { flex: 0 0 calc(33.33% - 10px); }

    .pd-modal-body { grid-template-columns: 1fr; }
    .pd-modal-img { padding: 16px; }
    .pd-modal-img img { min-height: 0; max-height: 280px; object-fit: contain; }
}

@media (max-width: 520px) {
    .pd-grid { grid-template-columns: 1fr; }
    .pd-strip-list { grid-template-columns: 1fr 1fr; }
    .pd-strip-list li { border-left: 0 !important; justify-content: flex-start; }
    .pd-why-cards { grid-template-columns: 1fr; }
    .pd-btn-light { width: 100%; }
    .pd-badges li { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .products-page * { transition: none !important; animation: none !important; }
}