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

:root {
    --mg: #E8890B;
    --mg-l: #F5A623;
    --mg-p: #FDE8B8;
    --mg-d: #C07008;
    --gn: #1C4A35;
    --gn-m: #2D6A4F;
    --gn-l: #52B788;
    --cr: #FFFBF2;
    --cr-d: #FEF3D8;
    --sf: #FFFFFF;
    --tx: #1E1206;
    --tx-m: #6B4C30;
    --tx-l: #A07850;
    --bd: #F0E0C0;
    --sh: rgba(30, 18, 6, 0.1);
    --fd: 'Playfair Display', 'Hind Siliguri', serif;
    --fb: 'Hind Siliguri', sans-serif;
    --tr: 0.3s cubic-bezier(0.4, 0, 0.2, 1)
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--fb);
    background: var(--cr);
    color: var(--tx);
    overflow-x: hidden;
    line-height: var(--lh-base, 1.6)
}

html.lang-bn .en {
    display: none !important
}

html.lang-en .bn {
    display: none !important
}

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-track {
    background: var(--cr)
}

::-webkit-scrollbar-thumb {
    background: var(--bd);
    border-radius: 3px
}

/* HEADER */
.hdr {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 251, 242, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--bd);
    box-shadow: 0 2px 24px var(--sh)
}

.hdr-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 16px
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    cursor: pointer
}

.logo-ic {
    font-size: 28px;
    line-height: 1
}

.logo-t {
    display: flex;
    flex-direction: column;
    line-height: 1.15
}

.logo-m {
    font-family: var(--fd);
    font-size: var(--fs-lg, 1.125rem);
    font-weight: var(--fw-bold, 700);
    color: var(--gn)
}

.logo-s {
    font-size: var(--fs-small, 0.72rem);
    color: var(--mg);
    letter-spacing: .06em;
    font-weight: 600;
    text-transform: uppercase
}

.mnav {
    display: flex;
    gap: 2px;
    margin-left: auto
}

.nl {
    text-decoration: none;
    color: var(--tx-m);
    font-size: var(--nav-fs, 0.9rem);
    font-weight: var(--fw-medium, 500);
    padding: 6px 12px;
    border-radius: 20px;
    transition: var(--tr);
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--fb)
}

.nl:hover {
    color: var(--gn);
    background: var(--cr-d)
}

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

.ltg {
    display: flex;
    background: var(--cr-d);
    border: 1.5px solid var(--bd);
    border-radius: 24px;
    padding: 3px;
    gap: 2px
}

.lbtn {
    font-family: var(--fb);
    font-size: var(--fs-small, 0.75rem);
    font-weight: var(--fw-bold, 700);
    padding: 4px 10px;
    border-radius: 18px;
    border: none;
    cursor: pointer;
    transition: var(--tr)
}

.lbtn.act {
    background: var(--gn);
    color: #fff
}

.lbtn:not(.act) {
    background: transparent;
    color: var(--tx-m)
}

.cart-ic {
    position: relative;
    background: var(--gn);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 18px;
    cursor: pointer;
    transition: var(--tr);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(28, 74, 53, .3);
    flex-shrink: 0
}

.cart-ic:hover {
    background: var(--mg-d);
    transform: scale(1.06)
}

.cbadge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--mg);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cr)
}

/* PRICE CALCULATOR */
.calc-panel {
    background: #fff;
    border: 2px solid var(--mg-p);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 32px
}

.calc-title {
    font-family: var(--fd);
    font-size: 22px;
    color: var(--gn);
    margin-bottom: 20px;
    text-align: center
}

.calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px
}

.calc-field {
    display: flex;
    flex-direction: column
}

.calc-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx);
    margin-bottom: 6px
}

.calc-input {
    padding: 12px 14px;
    border: 2px solid var(--bd);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600
}

.calc-input:focus {
    outline: none;
    border-color: var(--mg)
}

.calc-result {
    background: var(--cr-d);
    padding: 16px;
    border-radius: 12px;
    margin-top: 12px
}

.calc-result-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 15px
}

.calc-result-row strong {
    color: var(--mg)
}

/* MOBILE NAV */
.mob-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 7px 6px;
    border-radius: 8px;
    transition: background .2s;
    flex-shrink: 0
}

.mob-menu-btn:hover { background: var(--cr-d) }

.mob-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gn);
    border-radius: 2px;
    transition: transform .25s, opacity .25s
}

.mob-menu-btn.open .mob-bar:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.mob-menu-btn.open .mob-bar:nth-child(2) { opacity: 0; transform: scaleX(0) }
.mob-menu-btn.open .mob-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

.mob-nav {
    display: none;
    flex-direction: column;
    background: rgba(255, 251, 242, .98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--bd);
    position: sticky;
    top: 64px;
    z-index: 99;
    padding: 6px 12px 10px;
    box-shadow: 0 6px 24px var(--sh)
}

.mob-nav.open { display: flex }

.mob-nl {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 13px 16px;
    font-family: var(--fb);
    font-size: 1rem;
    font-weight: 600;
    color: var(--tx);
    text-align: left;
    border-radius: 10px;
    transition: background .15s, color .15s;
    width: 100%
}

.mob-nl:hover { background: var(--cr-d); color: var(--gn) }

.mob-nl-ic { font-size: 1.1rem; width: 24px; text-align: center }

/* HERO */
.hero {
    position: relative;
    height: 65vh;
    min-height: 65vh;
    overflow: hidden;
    background: linear-gradient(140deg, #122e20 0%, #1C4A35 45%, #1e5038 100%)
}

.h-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    position: relative;
    z-index: 2
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 65% 50%, rgba(245, 166, 35, .13) 0%, transparent 60%), radial-gradient(ellipse at 15% 80%, rgba(245, 200, 80, .07) 0%, transparent 50%)
}

.h-dc1,
.h-dc2 {
    position: absolute;
    border-radius: 50%;
    background: rgba(245, 166, 35, .06);
    pointer-events: none
}

.h-dc1 {
    width: 700px;
    height: 700px;
    top: -250px;
    right: -150px
}

.h-dc2 {
    width: 500px;
    height: 500px;
    bottom: -200px;
    left: 25%
}

.h-cnt {
    padding: 20px 40px 20px 20px;
    color: #fff;
    animation: fadeUp .9s ease both
}

.h-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, rgba(245, 166, 35, .22) 0%, rgba(245, 200, 80, .14) 100%);
    border: 1px solid rgba(245, 166, 35, .45);
    color: #F5C842;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 18px;
    border-radius: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden
}
.h-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-15deg) translateX(-250%);
    animation: badgeShine 4s ease-in-out 1s infinite;
    pointer-events: none
}

.h-ttl {
    font-family: var(--fd);
    font-size: var(--fs-h1, clamp(1.75rem, 4vw, 2.5rem));
    font-weight: 900;
    line-height: 1.12;
    margin-bottom: 16px
}

.h-ttl .acc {
    display: block;
    background: linear-gradient(90deg, #FFD04A 0%, #F5A623 30%, #FF9500 60%, #FFD04A 100%);
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textFlow 3.5s linear infinite
}

.h-dsc {
    font-size: var(--fs-para, 1rem);
    color: rgba(255, 255, 255, .8);
    margin-bottom: 32px;
    max-width: 400px;
    line-height: 1.75
}

.hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.btn-p {
    background: linear-gradient(135deg, var(--mg) 0%, var(--mg-d) 100%);
    color: #fff;
    border: none;
    padding: 13px 28px;
    border-radius: 50px;
    font-family: var(--fb);
    font-size: var(--fs-btn, 0.95rem);
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 22px rgba(232, 137, 11, .45);
    position: relative;
    overflow: hidden
}
.btn-p::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: skewX(-15deg) translateX(-250%);
    animation: btnShine 4.5s ease-in-out 2.5s infinite;
    pointer-events: none
}

.btn-p:hover {
    background: var(--mg-d);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(232, 137, 11, .55)
}

.btn-o {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .45);
    padding: 13px 24px;
    border-radius: 50px;
    font-family: var(--fb);
    font-size: var(--fs-btn, 0.95rem);
    font-weight: 500;
    cursor: pointer;
    transition: var(--tr);
    text-decoration: none;
    display: inline-flex;
    align-items: center
}

.btn-o:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .1)
}

.h-stats {
    display: flex;
    gap: 28px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(245, 166, 35, .22)
}

.hstat-n {
    font-family: var(--fd);
    font-size: var(--fs-xl, 1.25rem);
    font-weight: 700;
    color: var(--mg-l);
    text-shadow: 0 0 20px rgba(245, 166, 35, .45)
}

.hstat-l {
    font-size: var(--fs-small, 0.82rem);
    color: rgba(255, 255, 255, .6);
    margin-top: 2px
}

.h-vis {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 20px 40px;
    animation: fadeR .9s ease .2s both
}

.hmg-wrap {
    position: relative;
    width: 340px;
    height: 340px
}
.hmg-wrap::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(245, 166, 35, .75);
    box-shadow: 0 0 14px 5px rgba(245, 166, 35, .4);
    top: 14%;
    right: 45%;
    animation: orbFloat1 7s ease-in-out infinite;
    pointer-events: none;
    z-index: 5
}
.hmg-wrap::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(245, 200, 80, .65);
    box-shadow: 0 0 10px 3px rgba(245, 200, 80, .3);
    bottom: 20%;
    left: 18%;
    animation: orbFloat2 10s ease-in-out 2s infinite;
    pointer-events: none;
    z-index: 5
}

.mg-glow {
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(245, 166, 35, .28) 0%, transparent 65%);
    border-radius: 50%;
    animation: pulse 3s ease-in-out infinite
}

.mg-circ {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(245, 200, 80, .12) 0%, rgba(232, 137, 11, .08) 100%);
    border-radius: 50%;
    border: 1px solid rgba(245, 166, 35, .2)
}

/* ─── 3-circle hero showcase ──────────────────────────────
   All 3 circles share the same visual style (unified border,
   background, shimmer-on-hover, ring-pulse-on-select).
   .hmg-wrap = 340×340 px
     hc-main (150px): centered via translate(-50%,-50%)
     hc-tr   (118px): top=18px  right=10px → cy=77px  lx=212px
     hc-br   (118px): btm=18px  right=10px → cy=263px lx=212px
   Label right edge = 212−10 = 202px → right = 140px
─────────────────────────────────────────────────────────── */

/* Shared base style for ALL three circles */
.hc-main,
.hc-mini {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(245, 166, 35, .42);
    background: linear-gradient(135deg, rgba(245, 200, 80, .14) 0%, rgba(28, 74, 53, .55) 100%);
    cursor: pointer;
    outline: 2.5px solid transparent;
    outline-offset: 3px;
    transition: border-color .3s, box-shadow .3s, outline-color .3s, outline-offset .3s
}
.hc-main img,
.hc-mini img { width: 100%; height: 100%; object-fit: cover; display: block }

/* Hover shimmer — light sheen overlay */
.hc-main::before,
.hc-mini::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .2) 0%, transparent 55%);
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
    z-index: 2
}
.hc-main:hover::before,
.hc-mini:hover::before { opacity: 1 }

/* Selected — glowing orange ring that pulses */
.hc-main.hc-sel,
.hc-mini.hc-sel {
    border-color: #F5A623;
    box-shadow: 0 0 0 4px rgba(245, 166, 35, .18), 0 14px 44px rgba(0, 0, 0, .42);
    outline-color: rgba(245, 166, 35, .6);
    outline-offset: 4px;
    animation-name: float, ringPulse;
    animation-duration: 5s, 2.2s;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-iteration-count: infinite, infinite
}

/* Main circle (product 1) — center, slightly larger */
.hc-main {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    box-shadow: 0 0 0 7px rgba(245, 166, 35, .09), 0 16px 50px rgba(0, 0, 0, .38);
    animation: float 5s ease-in-out infinite;
    z-index: 2
}
/* Override selected to preserve centering transform */
.hc-main.hc-sel {
    animation-name: float, ringPulse;
    animation-duration: 5s, 2.2s;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-iteration-count: infinite, infinite
}

/* Mini circles (products 2 & 3) — same style, slightly smaller */
.hc-mini {
    width: 118px;
    height: 118px;
    box-shadow: 0 0 0 6px rgba(245, 166, 35, .08), 0 10px 34px rgba(0, 0, 0, .32);
    z-index: 1
}
.hc-tr {
    top: 18px;
    right: 10px;
    animation: floatL 5s ease-in-out .7s infinite
}
.hc-br {
    bottom: 18px;
    right: 10px;
    animation: floatL 5s ease-in-out 1.5s infinite
}
/* Minis selected: floatL + ringPulse */
.hc-tr.hc-sel {
    animation: floatL 5s ease-in-out .7s infinite, ringPulse 2.2s ease-in-out infinite
}
.hc-br.hc-sel {
    animation: floatL 5s ease-in-out 1.5s infinite, ringPulse 2.2s ease-in-out infinite
}

/* Product name labels — floating pill to the LEFT of minis */
.hc-lbl {
    position: absolute;
    background: linear-gradient(135deg, rgba(255, 255, 255, .97) 0%, rgba(255, 253, 240, .98) 100%);
    border-radius: 20px;
    padding: 4px 11px 4px 8px;
    font-size: .62rem;
    font-weight: 700;
    color: #1C4A35;
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .18), 0 0 0 1px rgba(245, 166, 35, .22);
    pointer-events: none;
    z-index: 4;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 5px
}
.hc-lbl::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F5A623;
    box-shadow: 0 0 6px rgba(245, 166, 35, .6);
    flex-shrink: 0
}
.hc-lbl-t { top: 77px; right: 138px }
.hc-lbl-b { top: 263px; right: 138px }

/* Connecting accent line between circles (decorative) */
.hc-mini::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 -3px 8px rgba(0, 0, 0, .12), inset 0 3px 8px rgba(255, 255, 255, .06);
    pointer-events: none;
    z-index: 3
}

/* Slider navigation */
.hero-snav {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 14px;
    z-index: 10
}
.hero-dots { display: flex; gap: 7px }
.hero-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, .25);
    transition: .28s;
    padding: 0
}
.hero-dot.active {
    background: #F5A623;
    border-color: #F5A623;
    box-shadow: 0 0 8px rgba(245, 166, 35, .6);
    transform: scale(1.35)
}
.hero-nbtn {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .22s;
    backdrop-filter: blur(6px)
}
.hero-nbtn:hover {
    background: rgba(255, 255, 255, .24);
    border-color: rgba(255, 255, 255, .5);
    transform: scale(1.08)
}

.fl {
    position: absolute;
    font-size: 32px;
    opacity: .85
}

.h-pcard {
    position: absolute;
    bottom: -16px;
    left: -50px;
    background: linear-gradient(135deg, #fff 0%, #fffef8 100%);
    border-radius: 18px;
    padding: 14px 20px 16px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, .18), 0 0 0 1px rgba(245, 166, 35, .18);
    min-width: 200px;
    animation: fadeUp .9s ease .5s both;
    border: 1px solid rgba(245, 166, 35, .15)
}

.hpc-lbl {
    font-size: 11px;
    color: var(--tx-l);
    font-weight: 500;
    margin-bottom: 3px
}

.hpc-nm {
    font-family: var(--fd);
    font-size: 16px;
    font-weight: 700;
    color: var(--tx)
}

.hpc-pr {
    font-size: 20px;
    font-weight: 700;
    color: var(--mg);
    margin-top: 3px
}

/* SECTION */
.sec {
    padding: 70px 20px
}

.container {
    max-width: 1200px;
    margin: 0 auto
}

.sec-lbl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mg);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 10px
}

.sec-lbl::before {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    background: var(--mg)
}

.sec-ttl {
    font-family: var(--fd);
    font-size: var(--fs-h2, clamp(1.4rem, 3vw, 2rem));
    font-weight: 700;
    color: var(--tx);
    line-height: 1.2;
    margin-bottom: 8px
}

.sec-dsc {
    color: var(--tx-m);
    font-size: var(--fs-para, 1rem);
    max-width: 480px;
    line-height: 1.7
}

/* PRODUCT DETAIL */
.fp-bg {
    background: var(--sf)
}

.pl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    margin-top: 48px
}

.pimg-sec {
    position: sticky;
    top: 80px
}

.pimg-main {
    background: linear-gradient(135deg, #FEF3D8, #FDE8B8);
    border-radius: 24px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.pimg-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 60% 35%, rgba(245, 166, 35, .2) 0%, transparent 60%)
}

.pimg-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    border-radius: 22px
}

/* ── Feature product slider (hero-style) ─────────────────────────── */
#fps-cur {
    position: absolute;
    inset: 0
}

#fps-cur img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in
}

.fps-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .32);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background .2s
}

.fps-btn:hover { background: rgba(255, 255, 255, .35) }
.fps-prev { left: 10px }
.fps-next { right: 10px }

.fps-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 5
}

.fps-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    border: 1.5px solid rgba(255, 255, 255, .25);
    cursor: pointer;
    padding: 0;
    transition: .28s
}

.fps-dot.act {
    background: #F5A623;
    border-color: #F5A623;
    box-shadow: 0 0 7px rgba(245, 166, 35, .6);
    transform: scale(1.3)
}

.pbadge-f {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--gn);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    z-index: 2
}

.pbadge-s {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, .92);
    color: var(--mg-d);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--mg-p);
    z-index: 2
}

.pthumb-row {
    display: flex;
    gap: 10px;
    margin-top: 12px
}

.pthumb {
    flex: 1;
    background: linear-gradient(135deg, #FEF3D8, #FDE8B8);
    border-radius: 12px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--tr);
    border: 2px solid transparent;
    overflow: hidden
}

.pthumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pthumb:hover,
.pthumb.act {
    border-color: var(--mg)
}


.pd-sec {
    padding: 4px 0
}

.p-orig {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--tx-l);
    margin-bottom: 10px;
    font-weight: 500
}

.p-nm {
    font-family: var(--fd);
    font-size: var(--fs-h1, 2rem);
    font-weight: 700;
    color: var(--tx);
    line-height: 1.15;
    margin-bottom: 8px
}

.p-rat {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px
}

.stars {
    color: #F5C842;
    font-size: 15px;
    letter-spacing: 2px
}

.rat-c {
    font-size: 13px;
    color: var(--tx-m)
}

.p-prw {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 22px;
    flex-wrap: wrap
}

.p-pr {
    font-family: var(--fd);
    font-size: 40px;
    font-weight: 700;
    color: var(--mg)
}

.p-pru {
    font-size: 15px;
    color: var(--tx-m)
}

.p-pro {
    font-size: 18px;
    color: var(--tx-l);
    text-decoration: line-through
}

.p-disc {
    background: var(--gn);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px
}

.p-dsc {
    color: var(--tx-m);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--bd)
}

.sel-lbl {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx);
    margin-bottom: 10px
}

.w-opts {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    flex-wrap: wrap
}

.w-btn {
    flex: 1;
    min-width: 80px;
    padding: 10px 8px;
    border: 2px solid var(--bd);
    background: #fff;
    border-radius: 12px;
    font-family: var(--fb);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tr);
    text-align: center;
    color: var(--tx-m)
}

.w-btn .wv {
    display: block;
    font-size: 16px;
    color: var(--tx);
    margin-bottom: 2px
}

.w-btn .wp {
    display: block;
    font-size: 12px;
    color: var(--tx-l)
}

.w-btn:hover,
.w-btn.act {
    border-color: var(--mg);
    background: rgba(253, 232, 184, .4);
    color: var(--mg-d)
}

.w-btn.act .wv {
    color: var(--mg-d)
}

.qty-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap
}

.qty-ctrl {
    display: flex;
    align-items: center;
    border: 2px solid var(--bd);
    border-radius: 50px;
    overflow: hidden
}

.qbtn {
    width: 42px;
    height: 42px;
    border: none;
    background: #fff;
    font-size: 20px;
    cursor: pointer;
    color: var(--tx);
    transition: var(--tr);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300
}

.qbtn:hover {
    background: var(--cr-d)
}

.qdsp {
    width: 48px;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--tx);
    background: #fff
}

.tot-pr {
    font-size: 14px;
    color: var(--tx-m)
}

.tot-pr strong {
    color: var(--mg);
    font-size: 20px;
    font-weight: 700
}

.btn-ac {
    width: 100%;
    background: var(--gn);
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 50px;
    font-family: var(--fb);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 12px;
    box-shadow: 0 4px 22px rgba(28, 74, 53, .3)
}

.btn-ac:hover {
    background: var(--gn-m);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(28, 74, 53, .4)
}

.btn-bn {
    width: 100%;
    background: var(--mg);
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 50px;
    font-family: var(--fb);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 4px 22px rgba(232, 137, 11, .3)
}

.btn-bn:hover {
    background: var(--mg-d);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(232, 137, 11, .4)
}

.pfeats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--bd)
}

.pfi {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--tx-m)
}

.pfi-ic {
    width: 36px;
    height: 36px;
    background: var(--cr-d);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0
}

.pfi strong {
    color: var(--tx);
    display: block;
    font-size: 13px;
    margin-bottom: 2px
}

/* REVIEWS */
.rv-bg {
    background: var(--cr-d)
}

.rv-hdr {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 16px
}

.overall-r {
    text-align: right
}

.ov-sc {
    font-family: var(--fd);
    font-size: 48px;
    font-weight: 700;
    color: var(--mg);
    line-height: 1
}

.ov-st {
    color: #F5C842;
    font-size: 18px;
    letter-spacing: 2px;
    margin-top: 4px
}

.ov-lbl {
    font-size: 12px;
    color: var(--tx-l);
    margin-top: 4px
}

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

.rv-card {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    transition: var(--tr);
    border: 1px solid var(--bd)
}

.rv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .08)
}


.rv-hd {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.rv-av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    background: linear-gradient(135deg, #E8890B, #F5C842)
}

.rv-info .rv-nm {
    font-weight: 700;
    font-size: 14px;
    color: var(--tx)
}

.rv-info .rv-dt {
    font-size: 11px;
    color: var(--tx-l);
    margin-top: 2px
}

.rv-st {
    margin-left: auto;
    color: #F5C842;
    font-size: 13px
}

.rv-tx {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--tx-m);
    line-height: 1.75
}

.rv-vf {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--gn-m);
    font-weight: 700;
    margin-top: 10px;
    background: rgba(28, 74, 53, .08);
    padding: 3px 10px;
    border-radius: 10px
}

/* ─── REVIEW WRITE FORM ────────────────────────────────── */
.rv-form-wrap {
    margin-top: 40px;
    position: relative
}

.rvf-hdr {
    text-align: center;
    padding: 32px 32px 22px;
    position: relative
}

.rvf-hdr::after {
    content: '';
    display: block;
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, var(--gn-l), var(--mg));
    border-radius: 2px;
    margin: 18px auto 0
}

.rvf-hdr-icon {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 14px rgba(232, 137, 11, .5))
}

.rvf-title {
    font-family: var(--fd, serif);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--gn);
    margin: 4px 0 10px;
    letter-spacing: -.01em
}

.rvf-subtitle {
    font-size: .82rem;
    color: var(--tx-l);
    margin: 0;
    line-height: 1.6
}

.rvf-body {
    padding: 8px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px
}

.rvf-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.rvf-field {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.rvf-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--tx-m);
    text-transform: uppercase;
    letter-spacing: .07em
}

.rvf-label-ic { font-size: .9rem }

.rvf-input {
    width: 100%;
    padding: 11px 16px;
    background: #fff;
    border: 1.5px solid var(--bd);
    border-radius: 12px;
    font-size: .9rem;
    font-family: inherit;
    color: var(--tx);
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s
}

.rvf-input::placeholder { color: var(--tx-l) }

.rvf-input:focus {
    border-color: var(--gn-l);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(82, 183, 136, .12)
}

.rvf-textarea {
    resize: vertical;
    min-height: 96px
}

/* ── Star rating ── */
.rvf-stars {
    display: flex;
    align-items: center;
    gap: 2px
}

.rvf-star-lbl {
    cursor: pointer;
    line-height: 1;
    position: relative
}

.rvf-star-inp {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none
}

.rvf-star-ico {
    display: block;
    font-size: 2.1rem;
    color: var(--bd);
    transition: color .14s, transform .14s, filter .14s;
    line-height: 1;
    user-select: none
}

.rvf-star-txt {
    margin-left: 10px;
    font-size: .72rem;
    color: var(--tx-l);
    font-style: italic;
    white-space: nowrap
}

/* Hover — illuminate up to hovered star */
.rvf-stars:has(.rvf-star-lbl:nth-child(1):hover) .rvf-star-lbl:nth-child(-n+1) .rvf-star-ico,
.rvf-stars:has(.rvf-star-lbl:nth-child(2):hover) .rvf-star-lbl:nth-child(-n+2) .rvf-star-ico,
.rvf-stars:has(.rvf-star-lbl:nth-child(3):hover) .rvf-star-lbl:nth-child(-n+3) .rvf-star-ico,
.rvf-stars:has(.rvf-star-lbl:nth-child(4):hover) .rvf-star-lbl:nth-child(-n+4) .rvf-star-ico,
.rvf-stars:has(.rvf-star-lbl:nth-child(5):hover) .rvf-star-lbl:nth-child(-n+5) .rvf-star-ico {
    color: #FFD04A;
    transform: scale(1.18);
    filter: drop-shadow(0 0 6px rgba(245, 166, 35, .7))
}

/* Checked — illuminate up to selected star */
.rvf-stars:has(.rvf-star-lbl:nth-child(1) input:checked) .rvf-star-lbl:nth-child(-n+1) .rvf-star-ico,
.rvf-stars:has(.rvf-star-lbl:nth-child(2) input:checked) .rvf-star-lbl:nth-child(-n+2) .rvf-star-ico,
.rvf-stars:has(.rvf-star-lbl:nth-child(3) input:checked) .rvf-star-lbl:nth-child(-n+3) .rvf-star-ico,
.rvf-stars:has(.rvf-star-lbl:nth-child(4) input:checked) .rvf-star-lbl:nth-child(-n+4) .rvf-star-ico,
.rvf-stars:has(.rvf-star-lbl:nth-child(5) input:checked) .rvf-star-lbl:nth-child(-n+5) .rvf-star-ico {
    color: #F5A623;
    filter: drop-shadow(0 0 8px rgba(245, 166, 35, .65))
}

/* ── Submit ── */
.rvf-footer {
    text-align: center;
    padding-top: 6px
}

.rvf-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 40px;
    background: linear-gradient(135deg, var(--mg) 0%, var(--mg-d) 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: .97rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 22px rgba(232, 137, 11, .4);
    transition: transform .22s, box-shadow .22s, background .22s;
    position: relative;
    overflow: hidden
}

.rvf-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: skewX(-15deg) translateX(-250%);
    animation: btnShine 4.5s ease-in-out 1.5s infinite;
    pointer-events: none
}

.rvf-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(232, 137, 11, .55);
    background: linear-gradient(135deg, var(--mg-l) 0%, var(--mg) 100%)
}

.rvf-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none
}

.rvf-btn-ic { font-size: 1rem }

.rvf-note {
    margin-top: 12px;
    font-size: .75rem;
    color: var(--tx-l)
}

@media (max-width: 600px) {
    .rvf-row-2 { grid-template-columns: 1fr }
    .rvf-hdr { padding: 24px 20px 18px }
    .rvf-body { padding: 8px 20px 24px }
    .rvf-title { font-size: 1.4rem }
    .rvf-star-ico { font-size: 1.75rem }

    /* Review carousel: move prev/next buttons below cards so text stays readable */
    #rv-carousel-wrap { padding-bottom: 52px; }
    #rv-prev-btn {
        top: auto !important;
        bottom: 8px !important;
        left: calc(50% - 48px) !important;
        transform: none !important;
    }
    #rv-next-btn {
        top: auto !important;
        bottom: 8px !important;
        right: auto !important;
        left: calc(50% + 10px) !important;
        transform: none !important;
    }
}

/* RELATED PRODUCTS */
.rel-bg {
    background: var(--sf)
}

.rel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px
}

.pc {
    border-radius: 20px;
    overflow: hidden;
    border: 1.5px solid var(--bd);
    transition: var(--tr);
    background: #fff
}

.pc:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .1)
}

.pc-img {
    background: linear-gradient(135deg, #FEF3D8, #FDE8B8);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    position: relative;
    overflow: hidden
}

.pc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pc-body {
    padding: 18px
}

.pc-nm {
    font-family: var(--fd);
    font-size: 18px;
    font-weight: 700;
    color: var(--tx);
    margin-bottom: 4px
}

.pc-org {
    font-size: 12px;
    color: var(--tx-l);
    margin-bottom: 10px
}

.pc-rat {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px
}

.pc-st {
    color: #F5C842;
    font-size: 12px
}

.pc-rn {
    font-size: 12px;
    color: var(--tx-m)
}

.pc-bot {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.pc-pr {
    font-family: var(--fd);
    font-size: 20px;
    font-weight: 700;
    color: var(--mg)
}

.pc-pr span {
    font-size: 12px;
    font-family: var(--fb);
    color: var(--tx-l);
    font-weight: 400
}

.pc-add {
    background: var(--gn);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    transition: var(--tr);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(28, 74, 53, .3)
}

.pc-add:hover {
    background: var(--mg);
    transform: scale(1.1)
}

/* FOOTER */
.ftr {
    background: var(--gn);
    color: #fff;
    padding: 56px 20px 24px
}

.ftr-in {
    max-width: 1200px;
    margin: 0 auto
}

.ftr-g {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 36px;
    margin-bottom: 40px
}

.ftr-desc {
    font-size: var(--fs-sm, 0.875rem);
    color: rgba(255, 255, 255, .65);
    line-height: 1.75;
    margin-top: 14px;
    margin-bottom: 18px
}

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

.soc-btn {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, .1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: var(--tr);
    border: none;
    color: #fff;
    text-decoration: none
}

.soc-btn:hover {
    background: var(--mg)
}

.fc-ttl {
    font-family: var(--fd);
    font-size: var(--fs-sm, 0.875rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px
}

.fl-list {
    list-style: none
}

.fl-list li {
    margin-bottom: 9px
}

.fl-list a {
    text-decoration: none;
    font-size: 14px;
    color: rgba(255, 255, 255, .6);
    transition: var(--tr);
    cursor: pointer
}

.fl-list a:hover {
    color: var(--mg-l)
}

.ftr-bot {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .45)
}

/* CART PAGE */
.cart-sec {
    background: var(--cr-d);
    padding: 40px 20px 70px
}

.cart-page-wrap {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 28px;
    align-items: start;
    margin-top: 36px
}

.cart-table {
    background: #fff;
    border-radius: 20px;
    border: 1.5px solid var(--bd);
    overflow: hidden
}

.cart-table-hdr {
    display: grid;
    grid-template-columns: 1fr 120px 100px 80px;
    gap: 12px;
    padding: 16px 22px;
    background: var(--cr-d);
    border-bottom: 1px solid var(--bd);
    font-size: 12px;
    font-weight: 700;
    color: var(--tx-l);
    text-transform: uppercase;
    letter-spacing: .06em
}

.cart-item-row {
    display: grid;
    grid-template-columns: 1fr 120px 100px 80px;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--bd);
    align-items: center
}

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

.ci-prod {
    display: flex;
    align-items: center;
    gap: 14px
}

.ci-em {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FEF3D8, #FDE8B8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
    overflow: hidden
}

.ci-em img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ci-nm {
    font-size: 14px;
    font-weight: 600;
    color: var(--tx);
    margin-bottom: 3px
}

.ci-sub {
    font-size: 12px;
    color: var(--tx-l)
}

.ci-qty-ctrl {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--bd);
    border-radius: 50px;
    padding: 3px;
    width: fit-content
}

.ci-qbtn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--cr-d);
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    color: var(--tx);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tr)
}

.ci-qbtn:hover {
    background: var(--bd)
}

.ci-qn {
    font-size: 14px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
    color: var(--tx)
}

.ci-price {
    font-family: var(--fd);
    font-size: 16px;
    font-weight: 700;
    color: var(--mg)
}

.ci-del {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--tx-l);
    transition: var(--tr);
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.ci-del:hover {
    background: #FEE2E2;
    color: #DC2626
}

.cart-empty {
    text-align: center;
    padding: 64px 20px
}

.cart-empty-ic {
    font-size: 64px;
    display: block;
    margin-bottom: 16px
}

.cart-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 80px
}

.order-sum {
    background: #fff;
    border-radius: 20px;
    border: 1.5px solid var(--bd);
    overflow: hidden
}

.os-hdr {
    padding: 18px 22px;
    border-bottom: 1px solid var(--bd);
    display: flex;
    align-items: center;
    gap: 10px
}

.os-hdr-ttl {
    font-family: var(--fd);
    font-size: 18px;
    font-weight: 700;
    color: var(--tx)
}

.os-body {
    padding: 18px 22px
}

.os-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--tx-m);
    margin-bottom: 10px
}

.os-row.total {
    font-size: 17px;
    font-weight: 700;
    color: var(--tx);
    margin-top: 14px;
    padding-top: 14px;
    border-top: 2px solid var(--bd);
    margin-bottom: 0
}

.os-row.total .amt {
    color: var(--mg);
    font-family: var(--fd);
    font-size: 20px
}

.os-free {
    color: #16a34a;
    font-weight: 600
}

.os-promo {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    margin-bottom: 14px
}

.promo-inp {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--bd);
    border-radius: 10px;
    font-family: var(--fb);
    font-size: 13px;
    color: var(--tx);
    outline: none;
    transition: var(--tr)
}

.promo-inp:focus {
    border-color: var(--mg)
}

.promo-btn {
    padding: 10px 16px;
    background: var(--gn);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: var(--fb);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr)
}

.promo-btn:hover {
    background: var(--gn-m)
}

.chk-btn-main {
    width: 100%;
    background: var(--mg);
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 50px;
    font-family: var(--fb);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr);
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(232, 137, 11, .35)
}

.chk-btn-main:hover {
    background: var(--mg-d);
    transform: translateY(-2px)
}

.cart-trust {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--bd);
    flex-wrap: wrap
}

.trust-i {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--tx-l);
    font-weight: 500
}

.chk-sec {
    background: #fff;
    border-radius: 20px;
    border: 1.5px solid var(--bd);
    overflow: hidden;
    display: none
}

.chk-sec.active {
    display: block
}

.chk-sec-hdr {
    padding: 18px 22px;
    border-bottom: 1px solid var(--bd);
    display: flex;
    align-items: center;
    gap: 10px
}

.chk-sec-ttl {
    font-family: var(--fd);
    font-size: 18px;
    font-weight: 700;
    color: var(--tx)
}

.chk-back {
    background: none;
    border: 1.5px solid var(--bd);
    border-radius: 50px;
    padding: 6px 14px;
    font-family: var(--fb);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--tx-m);
    transition: var(--tr);
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px
}

.chk-back:hover {
    border-color: var(--gn);
    color: var(--gn)
}

.chk-form {
    padding: 22px
}

.chk-step-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mg);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px
}

.chk-step-lbl::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bd)
}

.fg {
    margin-bottom: 14px
}

.flbl {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx);
    margin-bottom: 6px
}

.finp {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--bd);
    border-radius: 10px;
    font-family: var(--fb);
    font-size: 14px;
    color: var(--tx);
    background: #fff;
    transition: var(--tr);
    outline: none;
    resize: none
}

.finp:focus {
    border-color: var(--mg);
    box-shadow: 0 0 0 3px rgba(232, 137, 11, .1)
}

.finp[readonly] {
    background: #f5f5f5;
    cursor: default;
    color: #555;
}

.fg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.pm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px
}

.pm-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1.5px solid var(--bd);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--tr);
    font-size: 13px;
    font-weight: 500;
    color: var(--tx-m)
}

.pm-opt:has(input:checked) {
    border-color: var(--mg);
    background: rgba(253, 232, 184, .35);
    color: var(--mg-d)
}

.pm-opt input {
    accent-color: var(--mg);
    cursor: pointer
}

.ord-btn {
    width: 100%;
    background: var(--gn);
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 50px;
    font-family: var(--fb);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(28, 74, 53, .3)
}

.ord-btn:hover:not(:disabled) {
    background: var(--gn-m);
    transform: translateY(-2px)
}

.ord-btn:disabled {
    opacity: .7;
    cursor: not-allowed
}

.success-wrap {
    text-align: center;
    padding: 52px 28px
}

.success-ic {
    font-size: 72px;
    display: block;
    margin-bottom: 20px;
    animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1) both
}

.success-ttl {
    font-family: var(--fd);
    font-size: 26px;
    font-weight: 700;
    color: var(--gn);
    margin-bottom: 12px
}

.success-tx {
    font-size: 15px;
    color: var(--tx-m);
    line-height: 1.75;
    margin-bottom: 28px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto
}

.success-info {
    background: var(--cr-d);
    border-radius: 14px;
    padding: 18px;
    text-align: left;
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--tx-m);
    line-height: 1.9
}

.success-info strong {
    color: var(--tx);
    font-weight: 600
}

/* ORDER SUCCESS POPUP */
.osp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadIn .25s ease
}
@keyframes fadIn { from { opacity: 0 } to { opacity: 1 } }

.osp-card {
    background: #fff;
    border-radius: 20px;
    padding: 44px 36px 36px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
    animation: popUp .3s cubic-bezier(.34, 1.56, .64, 1) both
}
@keyframes popUp { from { opacity: 0; transform: scale(.85) translateY(30px) } to { opacity: 1; transform: none } }

.osp-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: .85rem;
    cursor: pointer;
    color: #64748b;
    transition: var(--tr);
    display: flex;
    align-items: center;
    justify-content: center
}
.osp-close:hover { background: #e2e8f0; color: var(--tx) }

.osp-ic {
    font-size: 68px;
    display: block;
    margin-bottom: 12px;
    animation: bounce .6s ease .3s both
}
@keyframes bounce { 0%,100% { transform: translateY(0) } 40% { transform: translateY(-16px) } 70% { transform: translateY(-6px) } }

.osp-ttl {
    font-family: var(--fd);
    font-size: var(--fs-h2, 1.5rem);
    font-weight: 700;
    color: var(--gn);
    margin-bottom: 4px
}

.osp-info {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 16px 0;
    text-align: left;
    font-size: var(--fs-sm, 0.875rem);
    line-height: 1.8;
    color: var(--tx-m)
}
.osp-info strong { color: var(--tx); font-weight: 600 }

.osp-tx {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--tx-m);
    line-height: 1.7;
    margin-bottom: 8px
}

.osp-timer {
    font-size: var(--fs-small, 0.82rem);
    color: var(--tx-l);
    margin-bottom: 16px;
    min-height: 18px
}

.osp-btn {
    width: 100%;
    justify-content: center
}

@media (max-width: 480px) {
    .osp-card { padding: 36px 20px 28px }
    .osp-ttl { font-size: 1.25rem }
}

/* SIDEBAR CART */
.co {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease
}

.co.open {
    opacity: 1;
    pointer-events: all
}

.csd {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(460px, 100vw);
    background: #fff;
    z-index: 201;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 60px rgba(0, 0, 0, .15)
}

.csd.open {
    transform: translateX(0)
}

.c-hdr {
    padding: 20px 22px;
    border-bottom: 1px solid var(--bd);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0
}

.c-ttl {
    font-family: var(--fd);
    font-size: 20px;
    font-weight: 700;
    color: var(--tx);
    flex: 1
}

.c-cls {
    background: var(--cr);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    transition: var(--tr);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tx-m);
    flex-shrink: 0
}

.c-cls:hover {
    background: var(--bd)
}

.c-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px
}

.c-empty {
    text-align: center;
    padding: 60px 16px;
    color: var(--tx-l)
}

.c-empty-ic {
    font-size: 56px;
    display: block;
    margin-bottom: 14px
}

.csi {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--bd)
}

.csi-img {
    width: 62px;
    height: 62px;
    background: linear-gradient(135deg, #FEF3D8, #FDE8B8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
    overflow: hidden
}

.csi-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.csi-info {
    flex: 1;
    min-width: 0
}

.csi-nm {
    font-size: 14px;
    font-weight: 600;
    color: var(--tx);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.csi-pr {
    font-size: 13px;
    color: var(--mg);
    font-weight: 600
}

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

.cqbtn {
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--bd);
    background: #fff;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tr);
    line-height: 1
}

.cqbtn:hover {
    border-color: var(--mg);
    color: var(--mg)
}

.cqn {
    font-size: 14px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
    color: var(--tx)
}

.csi-rm {
    background: none;
    border: none;
    font-size: 17px;
    cursor: pointer;
    color: var(--tx-l);
    transition: var(--tr);
    padding: 4px;
    align-self: flex-start;
    border-radius: 6px;
    flex-shrink: 0
}

.csi-rm:hover {
    background: #FEE2E2;
    color: #DC2626
}

.c-ftr {
    padding: 16px 20px;
    border-top: 1px solid var(--bd);
    flex-shrink: 0
}

.c-sub {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--tx-m);
    margin-bottom: 6px
}

.c-tot {
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 700;
    color: var(--tx);
    margin-bottom: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--bd)
}

.c-tot .amt {
    color: var(--mg)
}

.c-goto-btn {
    width: 100%;
    background: var(--mg);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 50px;
    font-family: var(--fb);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr)
}

.c-goto-btn:hover {
    background: var(--mg-d);
    transform: translateY(-2px)
}

/* FLOAT CART (mobile) */
.float-cart {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 90;
    background: var(--gn);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 13px 20px;
    font-family: var(--fb);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(28, 74, 53, .4);
    align-items: center;
    gap: 8px;
    transition: var(--tr)
}

.float-cart:hover {
    background: var(--mg);
    transform: translateY(-2px)
}

.float-badge {
    background: var(--mg);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

/* TOAST */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--gn);
    color: #fff;
    padding: 12px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    z-index: 400;
    opacity: 0;
    transition: all .3s ease;
    pointer-events: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
    white-space: nowrap;
    max-width: 90vw;
    text-align: center
}

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

/* ANIMATIONS */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeR {
    from {
        opacity: 0;
        transform: translateX(28px)
    }
    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) translate(-50%, -50%)
    }
    50% {
        transform: translateY(-14px) translate(-50%, -50%)
    }
}

@keyframes floatL {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-10px)
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: .3
    }
    50% {
        transform: scale(1.06);
        opacity: .55
    }
}

@keyframes popIn {
    0% {
        transform: scale(0)
    }
    100% {
        transform: scale(1)
    }
}

@keyframes ringPulse {
    0%, 100% {
        outline-offset: 4px;
        outline-color: rgba(245, 166, 35, .65)
    }
    50% {
        outline-offset: 9px;
        outline-color: rgba(245, 166, 35, .18)
    }
}

@keyframes badgeShine {
    0%, 60%, 100% {
        transform: skewX(-15deg) translateX(-250%)
    }
    30% {
        transform: skewX(-15deg) translateX(500%)
    }
}

@keyframes btnShine {
    0%, 65%, 100% {
        transform: skewX(-15deg) translateX(-250%)
    }
    35% {
        transform: skewX(-15deg) translateX(500%)
    }
}

@keyframes textFlow {
    0% {
        background-position: 0% center
    }
    100% {
        background-position: 200% center
    }
}

@keyframes orbFloat1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: .75
    }
    33% {
        transform: translate(14px, -10px) scale(1.25);
        opacity: 1
    }
    66% {
        transform: translate(8px, 8px) scale(0.8);
        opacity: .45
    }
}

@keyframes orbFloat2 {
    0%, 100% {
        transform: translate(0, 0)
    }
    40% {
        transform: translate(-10px, -12px)
    }
    70% {
        transform: translate(7px, -6px)
    }
}

.fl {
    animation: floatL 3s ease-in-out infinite !important
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease
}

.reveal.in {
    opacity: 1;
    transform: translateY(0)
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .cart-page-wrap {
        grid-template-columns: 1fr 340px
    }
    .ftr-g {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 900px) {
    .mnav {
        display: none
    }
    .mob-menu-btn {
        display: flex
    }
    .ha {
        margin-left: auto
    }
    .h-inner {
        grid-template-columns: 1fr
    }
    .h-vis {
        display: none
    }
    .hc-mini { display: none }
    .h-cnt {
        padding: 20px
    }
    .pl {
        grid-template-columns: 1fr
    }
    .pimg-sec {
        position: static
    }
    .rv-grid {
        grid-template-columns: 1fr
    }
    .rel-grid {
        grid-template-columns: 1fr 1fr
    }
    .cart-page-wrap {
        grid-template-columns: 1fr
    }
    .cart-side {
        position: static
    }
    .cart-table-hdr {
        grid-template-columns: 1fr 100px 80px 50px;
        font-size: 11px
    }
    .cart-item-row {
        grid-template-columns: 1fr 100px 80px 50px
    }
    .float-cart {
        display: flex
    }
}

@media (max-width: 600px) {
    /* Hero */
    .hero {
        height: auto;
        min-height: auto;
        padding: 36px 0 28px
    }
    .h-stats {
        gap: 14px;
        flex-wrap: wrap
    }
    /* Products */
    .rel-grid {
        grid-template-columns: 1fr
    }
    .p-nm {
        font-size: var(--fs-h2, 1.6rem)
    }
    .pfeats {
        grid-template-columns: 1fr 1fr
    }
    /* Cart table — card layout */
    .cart-table-hdr {
        display: none
    }
    .cart-item-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding: 14px 16px
    }
    .cart-item-row .ci-prod {
        flex: 1 1 100%
    }
    .cart-item-row > div:nth-child(2) {
        flex: 1
    }
    .cart-item-row .ci-price {
        flex: 0 0 auto;
        font-weight: 700;
        font-size: .95rem
    }
    /* Checkout form */
    .fg-row {
        grid-template-columns: 1fr
    }
    .pm-grid {
        grid-template-columns: 1fr
    }
    /* Footer — single column */
    .ftr-g {
        grid-template-columns: 1fr
    }
    .ftr-bot {
        flex-direction: column;
        gap: 8px;
        text-align: center
    }
}

@media (max-width: 420px) {
    .hdr-in {
        padding: 0 14px;
        gap: 8px
    }
    .logo img {
        height: 46px !important
    }
    .logo-m {
        font-size: 15px
    }
    .logo-s {
        display: none
    }
    .cart-ic {
        width: 38px;
        height: 38px;
        font-size: 16px
    }
    .lbtn {
        padding: 5px 9px;
        font-size: 11px
    }
    .float-cart {
        padding: 11px 14px;
        font-size: 13px;
        right: 12px;
        bottom: 16px
    }
}

/* ════════════════════════════════════════════════════════
   DELIVERY COST CALCULATOR
   ════════════════════════════════════════════════════════ */
.dc-bg { background: linear-gradient(135deg, #f0fdf4 0%, #fff9ee 100%); }

/* Layout */
.dc-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: flex-start;
    margin-top: 32px;
}
@media (max-width: 860px) { .dc-layout { grid-template-columns: 1fr; } }

/* Steps */
.dc-step {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border: 1px solid rgba(232,137,11,.12);
}
.dc-step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--mg);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: 'Hind Siliguri', sans-serif;
}
.dc-step-body { flex: 1; min-width: 0; }
.dc-step-ttl {
    font-weight: 700;
    font-size: .95rem;
    color: var(--gn);
    margin-bottom: 14px;
}

/* Delivery mode buttons */
.dc-mode-row { display: flex; gap: 10px; flex-wrap: wrap; }
.dc-mode-btn {
    flex: 1; min-width: 130px;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    color: #555;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all .2s;
    font-family: inherit;
}
.dc-mode-btn:hover { border-color: var(--mg); color: var(--mg); }
.dc-mode-btn.active {
    border-color: var(--mg);
    background: rgba(232,137,11,.08);
    color: var(--mg-d);
}
.dc-mode-ic { font-size: 1.4rem; }

/* Location dropdowns grid */
.dc-loc-grid { display: grid; gap: 12px; }
.dc-field { position: relative; }
.dc-lbl {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 6px;
}

/* ── Searchable Dropdown (SDD) ── */
.sdd-wrap { position: relative; user-select: none; }
.sdd-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    font-size: .9rem;
    color: #374151;
    transition: border-color .2s;
    min-height: 44px;
}
.sdd-selected:hover { border-color: var(--mg); }
.sdd-wrap.sdd-open .sdd-selected { border-color: var(--mg); box-shadow: 0 0 0 3px rgba(232,137,11,.1); }
.sdd-wrap.sdd-disabled .sdd-selected { background: #f9fafb; color: #9ca3af; cursor: not-allowed; }
.sdd-selected-text { font-weight: 600; color: #1C4A35; font-size: .88rem; flex: 1; }
.sdd-text { color: #9ca3af; font-size: .85rem; flex: 1; }
.sdd-arrow { color: #9ca3af; font-size: .7rem; flex-shrink: 0; transition: transform .2s; }
.sdd-wrap.sdd-open .sdd-arrow { transform: rotate(180deg); }
.sdd-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 500;
    overflow: hidden;
}
.sdd-wrap.sdd-open .sdd-dropdown { display: block; }
.sdd-search {
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    font-size: .88rem;
    outline: none;
    background: #fafafa;
}
.sdd-list {
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sdd-list::-webkit-scrollbar { width: 4px; }
.sdd-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
.sdd-item {
    padding: 10px 14px;
    cursor: pointer;
    transition: background .15s;
    border-bottom: 1px solid #f5f5f5;
}
.sdd-item:hover, .sdd-item:focus { background: rgba(232,137,11,.07); outline: none; }
.sdd-item-selected { background: rgba(232,137,11,.1); }
.sdd-name-en { display: block; font-size: .88rem; font-weight: 600; color: #374151; }
.sdd-name-bn { display: block; font-size: .82rem; color: #6b7280; }
.sdd-empty, .sdd-loading { padding: 16px 14px; text-align: center; color: #9ca3af; font-size: .85rem; }

/* Quantity buttons */
.dc-qty-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dc-qty-btn {
    padding: 10px 18px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    color: #555;
    font-family: inherit;
}
.dc-qty-btn:hover { border-color: var(--mg); color: var(--mg); }
.dc-qty-btn.active { border-color: var(--mg); background: var(--mg); color: #fff; }
.dc-custom-qty { margin-top: 4px; }
.dc-qty-inp {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 9px;
    font-size: .9rem;
    font-family: inherit;
    outline: none;
    transition: border-color .2s;
}
.dc-qty-inp:focus { border-color: var(--mg); box-shadow: 0 0 0 3px rgba(232,137,11,.1); }

/* ── Summary Card ── */
.dc-summary-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.09);
    border: 1px solid rgba(232,137,11,.15);
    position: sticky;
    top: 80px;
}
.dc-summary-hdr {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.dc-sum-ic { font-size: 1.8rem; }
.dc-sum-ttl { font-weight: 700; font-size: 1rem; color: var(--gn); }
.dc-sum-location {
    font-size: .8rem;
    color: #6b7280;
    background: #f9fafb;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 14px;
}
.dc-sum-rows { display: flex; flex-direction: column; gap: 4px; }
.dc-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: .88rem;
}
.dc-sum-lbl { color: #6b7280; }
.dc-sum-val { font-weight: 600; color: #374151; }
.dc-sum-divider { height: 1px; background: #f0f0f0; margin: 6px 0; }
.dc-sum-row.per-kg .dc-sum-lbl { color: var(--gn); font-weight: 700; }
.dc-sum-row.per-kg .dc-sum-val { color: var(--mg-d); font-weight: 800; font-size: 1rem; }
.dc-sum-row.total-row .dc-sum-lbl { color: var(--gn); font-weight: 800; font-size: 1rem; }
.dc-sum-row.total-row .dc-sum-val.total-val {
    color: var(--mg);
    font-size: 1.35rem;
    font-weight: 900;
}
.dc-sum-notice {
    margin-top: 14px;
    background: rgba(232,137,11,.07);
    border-left: 3px solid var(--mg);
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
    font-size: .82rem;
    color: var(--mg-d);
}
.dc-order-btn {
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    background: var(--mg);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s;
}
.dc-order-btn:hover { background: var(--mg-d); }

/* Responsive */
@media (max-width: 600px) {
    .dc-step { padding: 14px 14px; }
    .dc-mode-btn { min-width: 110px; font-size: .82rem; }
    .dc-qty-btn { padding: 8px 14px; font-size: .85rem; }
    .dc-summary-card { position: static; }
}

/* ── Action Buttons Row ── */
.btn-action-row {
    display: flex;
    gap: 12px;
    margin-top: 16px
}
.btn-action-row .btn-ac,
.btn-action-row .btn-bn {
    flex: 1;
    width: auto;
    margin-bottom: 0;
    font-size: 15px;
    padding: 13px 10px
}
@media (max-width: 400px) {
    .btn-action-row { flex-direction: column; }
    .btn-action-row .btn-ac,
    .btn-action-row .btn-bn { width: 100%; }
}

/* ── Price Without Courier Box ── */
.pnc-box {
    background: linear-gradient(135deg, var(--mg-p) 0%, #fffbf2 100%);
    border: 1.5px solid var(--mg-l);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 14px 0
}
.pnc-lbl {
    font-size: 12px;
    color: var(--tx-m);
    margin-bottom: 4px
}
.pnc-perkg {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap
}
.pnc-perkg .p-pr {
    font-size: 26px;
    font-weight: 800;
    color: var(--gn)
}
.pnc-perkg .p-pru {
    font-size: 14px;
    color: var(--tx-m);
    font-weight: 500
}

/* ── Courier Calculator (inline) ── */
.courier-calc-wrap {
    margin-top: 20px;
    border: 1.5px solid var(--bd);
    border-radius: 16px;
    padding: 18px 20px;
    background: var(--cr)
}
.courier-calc-hdr {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bd)
}
.cc-hdr-ic {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px
}
.cc-hdr-ttl {
    font-family: var(--fd);
    font-size: 15px;
    font-weight: 700;
    color: var(--gn)
}
.cc-hdr-sub {
    font-size: 12px;
    color: var(--tx-l);
    margin-top: 2px
}
.cc-notice {
    font-size: 12px;
    color: var(--tx-l);
    text-align: center;
    padding: 10px 6px;
    margin-top: 10px;
    border: 1px dashed var(--bd);
    border-radius: 8px;
    background: var(--cr-d)
}
.cc-summary-box {
    background: var(--cr-d);
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px
}
@media (max-width: 600px) {
    .courier-calc-wrap { padding: 14px; }
    .cc-hdr-ttl { font-size: 14px; }
}