/* =====================================================================
   Shuvino PREMIUM layer — an elevated, classier finish over the existing
   blue/teal brand. CSS-only + additive: no markup or flow changes.
   Loaded LAST on the storefront so it refines components site-wide.
   ===================================================================== */

:root {
    --sh-shadow-sm: 0 2px 10px rgba(18, 59, 147, .06);
    --sh-shadow: 0 10px 30px rgba(18, 59, 147, .09);
    --sh-shadow-lg: 0 22px 60px rgba(18, 59, 147, .16);
    --sh-ring: 0 0 0 1px rgba(18, 59, 147, .06);
}

/* ---------- Buttons: richer gradients + tactile lift ---------- */
.sh-btn { border-radius: 12px; font-weight: 700; letter-spacing: .01em; transition: transform .18s var(--sh-ease, ease), box-shadow .22s ease, filter .18s ease; }
.sh-btn--primary, .sh-btn--blue { background: linear-gradient(135deg, #1B4FB8 0%, #123B93 100%); box-shadow: 0 8px 20px rgba(18, 59, 147, .22); }
.sh-btn--orange { background: linear-gradient(135deg, #FF7A1A 0%, #FF6A00 100%); box-shadow: 0 8px 20px rgba(255, 106, 0, .26); }
.sh-btn--teal { background: linear-gradient(135deg, #14B8AE 0%, #0FA7A0 100%); box-shadow: 0 8px 20px rgba(15, 167, 160, .24); }
.sh-btn--primary:hover, .sh-btn--orange:hover, .sh-btn--teal:hover, .sh-btn--blue:hover { transform: translateY(-2px); filter: brightness(1.04); }
.sh-btn--lg { padding: 14px 26px; border-radius: 14px; }

/* ---------- Eyebrow: typographic only (no bg/color override — avoids
   white-on-light contrast issues on dark hero sections) ---------- */
.sh-eyebrow { font-weight: 800; letter-spacing: .08em; }

/* ---------- Section rhythm + headings ---------- */
.sh-section { padding-block: clamp(34px, 5vw, 64px); }
.sh-section-head h2, .sh-section__head h2 { font-weight: 800; letter-spacing: -.02em; }

/* ---------- Product / group cards: premium finish ---------- */
.sh-card { border-radius: 18px; border: 1px solid var(--sh-line, #E9EDF3); box-shadow: var(--sh-shadow-sm); overflow: hidden; transition: transform .3s var(--sh-ease, ease), box-shadow .3s ease, border-color .3s ease; }
.sh-card:hover { transform: translateY(-6px); box-shadow: var(--sh-shadow-lg); border-color: color-mix(in srgb, var(--sh-blue, #123B93) 18%, transparent); }
.sh-card__media { border-radius: 0; }
.sh-card__media img { transition: transform .6s var(--sh-ease, ease); }
.sh-card:hover .sh-card__media img { transform: scale(1.08); }
.sh-card__title a { font-weight: 700; letter-spacing: -.01em; }
.sh-card__price .now { font-weight: 800; color: var(--sh-ink, #1a1a1a); }
.sh-badge { font-weight: 800; letter-spacing: .02em; border-radius: 999px; }
/* These now have saturated gradient backgrounds, so the text MUST be white
   (the base stylesheet set dark text for the old light-tint backgrounds). */
.sh-badge--deal { background: linear-gradient(135deg, #FF7A1A, #FF6A00); color: #fff; }
.sh-badge--group { background: linear-gradient(135deg, #14B8AE, #0FA7A0); color: #fff; }
.sh-badge--deal i, .sh-badge--group i { color: #fff; }

/* ---------- Category tiles ---------- */
.sh-cat { border-radius: 16px; transition: transform .3s var(--sh-ease, ease), box-shadow .3s ease; }
.sh-cat:hover { box-shadow: var(--sh-shadow); }
.sh-cat__img { border-radius: 16px; }
.sh-cat__name { font-weight: 700; }

/* Category item-count → clean branded pill (was plain muted text) */
.sh-cat__count {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 7px; padding: 3px 11px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .01em; line-height: 1.5;
    color: #0E8F88; background: #E7F8F7; border: 1px solid #CDEEEC;
}
.sh-cat__count i { font-size: .82em; opacity: .85; }
.sh-cat__count.is-empty { color: #8a96a3; background: #F2F5F9; border-color: #E6EBF1; }

/* ---------- Group Buy showcase intro: stronger, non-washed text ---------- */
.sh-gblive__title p { color: #2B3A4A; font-weight: 500; }

/* ---------- Hero / banners: deeper brand gradient ---------- */
.sh-bigbanner, .sh-bnr__slide { border-radius: 22px; overflow: hidden; }
.sh-bigbanner__content h1, .sh-bnr__content h2 { letter-spacing: -.02em; }
.sh-dealbar { border-radius: 16px; box-shadow: var(--sh-shadow-sm); }

/* ---------- Product detail: premium gallery + price ---------- */
.sh-gallery__stage { border-radius: 20px; box-shadow: var(--sh-shadow); overflow: hidden; }
.sh-gallery__thumb { border-radius: 12px; overflow: hidden; transition: border-color .2s ease, transform .2s ease; }
.sh-gallery__thumb.is-active { border-color: var(--sh-blue, #123B93); }
.sh-gallery__thumb:hover { transform: translateY(-2px); }
.sh-pdp__title { font-weight: 800; letter-spacing: -.02em; }
.sh-price__now { font-weight: 800; }
.sh-buytabs { gap: 8px; }
.sh-buytab { border-radius: 12px; transition: all .2s ease; }
.sh-buypanel { border-radius: 16px; }

/* ---------- Storefront form fields (checkout address add/edit) ----------
   .sh-dfield / .sh-dform__grid are defined in the dashboard stylesheet, which
   the storefront does NOT load — so these were rendering unstyled on /checkout.
   Re-declare them here (premium is storefront-only, so no dashboard conflict). */
.sh-dform { display: grid; gap: 16px; }
.sh-dform__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sh-dform__grid--3 { grid-template-columns: repeat(3, 1fr); }
.sh-dfield label { display: block; font-weight: 700; font-size: .84rem; margin-bottom: 7px; color: var(--sh-ink, #1a2b3c); }
.sh-dfield input, .sh-dfield select, .sh-dfield textarea {
    width: 100%; border: 1.5px solid var(--sh-line, #E9EDF3); border-radius: 12px;
    padding: 12px 14px; font: inherit; font-size: .9rem; background: #fff; color: var(--sh-ink, #1a2b3c);
}
.sh-dfield input::placeholder { color: #9aa6b2; }
.sh-dfield input:focus, .sh-dfield select:focus, .sh-dfield textarea:focus {
    outline: none; border-color: var(--sh-blue, #123B93); box-shadow: 0 0 0 3px rgba(18, 59, 147, .12);
}
.sh-dfield__hint { font-size: .76rem; color: var(--sh-muted, #8a96a3); margin-top: 5px; }
@media (max-width: 560px) {
    .sh-dform__grid, .sh-dform__grid--3 { grid-template-columns: 1fr; }
}

/* ---------- Shop: cleaner filters + grid ---------- */
.sh-filters { border-radius: 16px; box-shadow: var(--sh-shadow-sm); }
.sh-filter-title { font-weight: 800; }
.sh-pager__btn { border-radius: 10px; }
.sh-select { border-radius: 10px; }

/* ---------- Reviews / trust polish ---------- */
.sh-verified { font-weight: 700; }

/* ---------- Marketplace rails (Amazon/Flipkart-style product carousels) ----------
   Additive: wrap an existing .sh-grid in .sh-rail to get a horizontal scroll
   strip with arrow buttons on desktop. Cards are reused as-is. ---------- */
.sh-rail { position: relative; }
.sh-rail__track { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 2px 10px; scrollbar-width: none; }
.sh-rail__track::-webkit-scrollbar { display: none; }
.sh-rail__track > * { flex: 0 0 calc((100% - 18px * 4) / 5); scroll-snap-align: start; min-width: 0; }
.sh-rail__nav { position: absolute; top: 38%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--sh-line, #E9EDF3); background: #fff; color: var(--sh-blue, #123B93); box-shadow: var(--sh-shadow); display: grid; place-items: center; font-size: 20px; cursor: pointer; z-index: 3; transition: transform .18s ease, opacity .2s ease, background .2s ease; opacity: 0; }
.sh-rail:hover .sh-rail__nav { opacity: 1; }
.sh-rail__nav:hover { transform: translateY(-50%) scale(1.08); background: var(--sh-blue, #123B93); color: #fff; }
.sh-rail__nav:disabled { opacity: 0 !important; pointer-events: none; }
.sh-rail__nav--prev { left: -18px; }
.sh-rail__nav--next { right: -18px; }
@media (max-width: 1100px) { .sh-rail__track > * { flex-basis: calc((100% - 18px * 3) / 4); } }
@media (max-width: 860px)  { .sh-rail__track > * { flex-basis: calc((100% - 16px * 2) / 3); } }
@media (max-width: 640px)  { .sh-rail__track { gap: 12px; } .sh-rail__track > * { flex-basis: 62%; } .sh-rail__nav { display: none; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sh-btn, .sh-card, .sh-card__media img, .sh-cat, .sh-gallery__thumb { transition: none !important; transform: none !important; }
    .sh-rail__track { scroll-behavior: auto; }
}