/* Petwal Gems — gem store listing (app/Views/gemstones/index.php). */
:root {
    --gi-night: #12070a; --gi-maroon: #8B1A1A; --gi-maroon-dk: #6e1419; --gi-gold: #C59B2B; --gi-gold-hi: #F6DC98; --gi-gold-soft: #E2B46A;
    --gi-ivory: #FFF8EF; --gi-cream: #FBF3E7; --gi-ink: #241c19; --gi-muted: #6a5d52; --gi-border: #EFE3CF;
    --gi-grad: linear-gradient(135deg, #F6DC98 0%, #D9B048 38%, #C59B2B 62%, #8A6417 100%);
    --gi-edge: linear-gradient(145deg, rgba(246, 220, 152, .95), #EFE3CF 32%, #EFE3CF 68%, rgba(197, 155, 43, .85));
    --gi-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --gi-ease: cubic-bezier(.22, 1, .36, 1);
}
.gi-intro, .gi-nav, .gi-up, .gi-sp { clear: both; display: flow-root; width: 100%; position: relative; font-family: "Raleway", sans-serif; font-variant-numeric: lining-nums; }
.gi-intro *, .gi-nav *, .gi-up *, .gi-sp * { box-sizing: border-box; }
.gi-intro .container::before, .gi-intro .container::after, .gi-nav .container::before, .gi-nav .container::after,
.gi-up .container::before, .gi-up .container::after, .gi-sp .container::before, .gi-sp .container::after { display: none; }

/* headings */
.gi-head { height: auto; text-align: center; max-width: 720px; margin: 0 auto clamp(34px, 4vw, 52px); }
.gi-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gi-maroon); }
.gi-eyebrow span { width: 32px; height: 1px; background: var(--gi-gold); }
.gi-title { margin: 0; font: 600 clamp(34px, 4vw, 52px)/1.1 var(--gi-serif); color: var(--gi-ink); text-transform: none; }
.gi-title em { font-style: italic; color: var(--gi-maroon); }
.gi-lead { margin: 14px auto 0; max-width: 600px; font-size: 16.5px; line-height: 1.7; color: var(--gi-muted); }
.gi-head--light .gi-eyebrow { color: var(--gi-gold-soft); }
.gi-head--light .gi-title { color: #fff; }
.gi-head--light .gi-title em { color: transparent; background: linear-gradient(100deg, #C59B2B, #F6DC98 30%, #fff6dc 42%, #C59B2B 60%, #F6DC98); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: gi-shimmer 6s linear infinite; }
.gi-head--light .gi-lead { color: rgba(255, 244, 228, .72); }

/* buttons */
.gi-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px; overflow: hidden; isolation: isolate;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; transition: filter .25s, transform .15s, background-color .25s; }
.gi-btn:hover { filter: brightness(1.07); }
.gi-btn:active { transform: translateY(2px); }
.gi-btn--gold { color: #3b0d10 !important; background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 45%, transparent 60%, rgba(90, 55, 0, .28)), linear-gradient(115deg, #8A6417, #D9B048 16%, #FFF1C4 30%, #C59B2B 45%, #F6DC98 60%, #A77A1E 78%, #EBCB6E);
    background-size: 100% 100%, 260% 100%; animation: gi-liquid 6s ease-in-out infinite alternate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 0 #8A6417, 0 10px 22px -10px rgba(197, 155, 43, .9); }
.gi-btn--ruby { color: #fff !important; background: linear-gradient(180deg, rgba(255, 200, 200, .3), transparent 45%, transparent 60%, rgba(30, 0, 0, .35)), linear-gradient(115deg, #4a0b10, #8B1A1A 22%, #cf4a4f 36%, #8B1A1A 52%, #b52d34 70%, #5a0f14);
    background-size: 100% 100%, 260% 100%; animation: gi-liquid 7s ease-in-out infinite alternate; box-shadow: inset 0 1px 0 rgba(255, 190, 190, .6), 0 3px 0 #4a0b10, 0 10px 22px -10px rgba(139, 26, 26, .8); }
.gi-btn--glass { color: #fff !important; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(246, 220, 152, .45); backdrop-filter: blur(6px); }
.gi-btn--glass:hover { background: rgba(255, 255, 255, .16); }
.gi-btn--ghost { color: var(--gi-maroon) !important; background: #fff; box-shadow: inset 0 0 0 1px var(--gi-gold-soft); }
.gi-btn--sm { min-height: 36px; padding: 0 16px; font-size: 11.5px; }
.gi-link { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gi-maroon) !important; text-decoration: none !important; }
.gi-link i { transition: transform .3s; }
.gi-link:hover i { transform: translateX(4px); }

/* ---------- intro: sticky tabs + promise ---------- */
.gi-intro { padding: 34px 0 clamp(50px, 6vw, 72px); background: var(--gi-ivory); }
.gi-tabs { position: sticky; top: 124px; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: fit-content; max-width: 100%; margin: 0 auto 40px; padding: 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--gi-border), 0 14px 34px -20px rgba(60, 31, 18, .45); }
.gi-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--gi-muted) !important; text-decoration: none !important; transition: background-color .25s, color .25s; }
.gi-tabs a i { color: var(--gi-gold); }
.gi-tabs a b { font-weight: 700; color: var(--gi-gold); }
.gi-tabs a:hover { color: #fff !important; background: linear-gradient(135deg, var(--gi-maroon), var(--gi-maroon-dk)); }
.gi-tabs a:hover i, .gi-tabs a:hover b { color: var(--gi-gold-hi); }
.gi-promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.gi-promise li { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 20px; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--gi-edge) border-box; box-shadow: 0 14px 34px -22px rgba(60, 31, 18, .45); color: var(--gi-muted); font-size: 14.5px; line-height: 1.6; }
.gi-promise li > span { flex-shrink: 0; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 20px; color: var(--gi-maroon);
    background: radial-gradient(circle at 32% 24%, #fff, #fdf4e2 38%, #f2dcae); box-shadow: inset 0 2px 2px #fff, inset 0 -3px 6px rgba(197, 155, 43, .28), 0 0 0 1px rgba(226, 180, 106, .65); }
.gi-promise strong { display: block; margin-bottom: 2px; font: 600 21px/1.2 var(--gi-serif); color: var(--gi-ink); }

/* ---------- NAVRATNA night-sky showcase ---------- */
.gi-nav { overflow: hidden; padding: clamp(70px, 8vw, 110px) 0; color: #fff; isolation: isolate;
    background: radial-gradient(900px 520px at 80% 20%, rgba(139, 26, 26, .6), transparent 65%), radial-gradient(700px 480px at 10% 90%, rgba(96, 44, 150, .22), transparent 65%), linear-gradient(180deg, #1f0b10, var(--gi-night)); }
.gi-nav__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(1.2px 1.2px at 20px 30px, #fff6e6, transparent 60%), radial-gradient(1px 1px at 90px 120px, #F6DC98, transparent 60%), radial-gradient(1.4px 1.4px at 150px 60px, #fff, transparent 60%), radial-gradient(1px 1px at 60px 170px, #fff6e6, transparent 60%);
    background-size: 190px 190px; animation: gi-twinkle 3.6s ease-in-out infinite alternate; }
.gi-nav__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gi-orb { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 24px 26px; border-radius: 26px; overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(246, 220, 152, .18);
    transition: transform .5s var(--gi-ease), box-shadow .45s, background-color .4s; }
.gi-orb::before { content: ""; position: absolute; left: 50%; top: 22%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--glow) 38%, transparent), transparent 65%); opacity: .55; transition: opacity .45s, scale .6s var(--gi-ease); }
.gi-orb:hover { transform: translateY(-8px); box-shadow: inset 0 0 0 1px rgba(246, 220, 152, .55), 0 30px 60px -26px rgba(0, 0, 0, .8); background-color: rgba(139, 26, 26, .18); }
.gi-orb:hover::before { opacity: 1; scale: 1.15; }
.gi-orb__idx { position: absolute; top: 16px; right: 20px; font: 700 34px/1 "Playfair Display", serif; color: transparent; -webkit-text-stroke: 1px rgba(246, 220, 152, .4); }
.gi-orb__stage, .gi-feature__stage { position: relative; display: grid; place-items: center; width: 168px; height: 168px; margin: 4px 0 20px; }
.gi-orb__halo { position: absolute; inset: -10px; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--gi-gold-hi), color-mix(in srgb, var(--glow) 40%, transparent) 25%, var(--gi-gold) 50%, color-mix(in srgb, var(--glow) 40%, transparent) 75%, var(--gi-gold-hi));
    -webkit-mask: radial-gradient(circle, transparent 65%, #000 66%, #000 69%, transparent 70%); mask: radial-gradient(circle, transparent 65%, #000 66%, #000 69%, transparent 70%);
    animation: gi-spin 12s linear infinite; }
.gi-orb__lens { position: relative; width: 148px; height: 148px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fff;
    box-shadow: 0 0 0 3px rgba(246, 220, 152, .85), 0 0 40px color-mix(in srgb, var(--glow) 55%, transparent), 0 20px 36px rgba(0, 0, 0, .5); }
.gi-orb__lens img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; display: block; transition: transform .9s var(--gi-ease); }
.gi-orb:hover .gi-orb__lens img, .gi-feature:hover .gi-orb__lens img { transform: rotate(-10deg) scale(1.1); }
.gi-orb__name { margin: 0; font: 600 28px/1.1 var(--gi-serif); }
.gi-orb__name a { color: #fff !important; text-decoration: none !important; }
.gi-orb__hi { margin: 4px 0 10px; font-size: 16px; color: var(--gi-gold-hi); }
.gi-orb__planet { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 20px; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--gi-gold-hi); background: rgba(197, 155, 43, .15); }
.gi-orb__actions { display: flex; gap: 10px; justify-content: center; margin-top: auto; }
.gi-orb__actions--left { justify-content: flex-start; }

/* ---------- UPRATNA light cards ---------- */
.gi-up { padding: clamp(70px, 8vw, 110px) 0; background: radial-gradient(40% 40% at 8% 10%, rgba(226, 180, 106, .2), transparent 70%), var(--gi-ivory); }
.gi-up__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.gi-card { flex: 0 1 calc(25% - 17px); min-width: 220px; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--gi-edge) border-box; box-shadow: 0 16px 40px -24px rgba(60, 31, 18, .45); transition: transform .45s var(--gi-ease), box-shadow .45s; }
.gi-card:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -26px rgba(110, 20, 25, .5); }
.gi-card__stage { position: relative; display: grid; place-items: center; height: 180px; background: linear-gradient(180deg, var(--gi-cream), #fff); overflow: hidden; }
.gi-card__disc { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 35%, #fff), #fff 70%); transition: scale .6s var(--gi-ease); }
.gi-card__stage img { position: relative; width: 130px; height: 130px; object-fit: cover; object-position: center; border-radius: 50%; transition: transform .8s var(--gi-ease); }
.gi-card:hover .gi-card__disc { scale: 1.15; }
.gi-card:hover .gi-card__stage img { transform: rotate(-8deg) scale(1.08); }
.gi-card__body { padding: 16px 20px 8px; text-align: center; }
.gi-card__name { margin: 0; font: 600 23px/1.15 var(--gi-serif); }
.gi-card__name a { color: var(--gi-ink) !important; text-decoration: none !important; }
.gi-card__hi { margin: 3px 0 8px; font-size: 15px; color: var(--gi-maroon); }
.gi-card__planet { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #8A6417; background: #fbf1dc; }
.gi-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 14px 20px 18px; border-top: 1px dashed var(--gi-border); }

/* ---------- SPIRITUAL feature ---------- */
.gi-sp { padding: 0 0 clamp(70px, 8vw, 100px); background: var(--gi-ivory); }
.gi-feature { --glow: #b86b3c; display: flex; align-items: center; gap: clamp(26px, 4vw, 56px); max-width: 900px; margin: 0 auto; padding: clamp(24px, 3vw, 36px) clamp(24px, 4vw, 48px); border-radius: 28px; color: #fff;
    background: radial-gradient(500px 300px at 20% 50%, rgba(139, 26, 26, .6), transparent 70%), linear-gradient(135deg, #1f0b10, var(--gi-night)); box-shadow: 0 30px 70px -30px rgba(18, 7, 10, .8); }
.gi-feature__stage { flex-shrink: 0; margin: 0; }
.gi-feature__name { margin: 0 0 8px; font: 600 32px/1.1 var(--gi-serif); }
.gi-feature__name a { color: #fff !important; text-decoration: none !important; }
.gi-feature__name .pg_deva { font-size: 18px; color: var(--gi-gold-hi); }
.gi-feature__body p { margin: 0 0 18px; color: rgba(255, 244, 228, .75); line-height: 1.7; }

@keyframes gi-spin { to { rotate: 360deg; } }
@keyframes gi-shimmer { to { background-position: -220% 0; } }
@keyframes gi-liquid { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }
@keyframes gi-twinkle { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gi-orb__halo, .gi-btn, .gi-nav__sky, .gi-head--light .gi-title em { animation: none; } }

@media (max-width: 1199px) { .gi-card { flex-basis: calc(33.333% - 15px); } }
@media (max-width: 991px) {
    .gi-nav__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gi-promise { grid-template-columns: 1fr; }
    .gi-tabs { position: static; border-radius: 22px; }
    .gi-card { flex-basis: calc(50% - 11px); }
}
@media (max-width: 575px) {
    .gi-nav__grid { grid-template-columns: 1fr; }
    .gi-card { flex-basis: 100%; }
    .gi-feature { flex-direction: column; text-align: center; }
    .gi-orb__actions--left { justify-content: center; }
    .gi-tabs a { padding: 8px 12px; font-size: 11.5px; }
}

/* =====================================================================
   Detail page (gemstones/show.php), stock cards, jewellery page
   ===================================================================== */
.gd-product, .gd-care, .gd-stock, .gd-jewel { clear: both; display: flow-root; width: 100%; position: relative; font-family: "Raleway", sans-serif; font-variant-numeric: lining-nums; }
.gd-product *, .gd-care *, .gd-stock * { box-sizing: border-box; }
.gd-product .container::before, .gd-product .container::after, .gd-care .container::before, .gd-care .container::after,
.gd-stock .container::before, .gd-stock .container::after { display: none; }
.gi-btn--wa { color: #fff !important; background: linear-gradient(180deg, rgba(210, 255, 225, .32), transparent 45%, transparent 60%, rgba(0, 35, 15, .35)), linear-gradient(115deg, #0b5d2c, #1FAF54 22%, #7ce8a4 36%, #1FAF54 52%, #16a049 70%, #0a4f25);
    background-size: 100% 100%, 260% 100%; animation: gi-liquid 6.5s ease-in-out infinite alternate; box-shadow: inset 0 1px 0 rgba(210, 255, 225, .7), 0 3px 0 #0b5d2c, 0 10px 22px -10px rgba(31, 175, 84, .8); }
.gi-btn--lg { min-height: 52px; padding: 0 24px; font-size: 13px; }
.gd-center { text-align: center; margin-top: 40px; }

/* product */
.gd-product { padding: clamp(40px, 5vw, 70px) 0 clamp(50px, 6vw, 80px); background: radial-gradient(38% 50% at 18% 30%, color-mix(in srgb, var(--glow) 20%, transparent), transparent 70%), var(--gi-ivory); }
.gd-product__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.gd-gallery { position: relative; display: flex; flex-direction: column; align-items: center; }
.gd-gallery__stage { position: relative; display: grid; place-items: center; width: min(420px, 100%); aspect-ratio: 1; border-radius: 34px; overflow: hidden; cursor: zoom-in;
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--glow) 32%, #2a0f14), #1f0b10 55%, #12070a); box-shadow: 0 34px 80px -34px rgba(18, 7, 10, .85), inset 0 0 0 1px rgba(246, 220, 152, .25); }
.gd-gallery__rays { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg, rgba(246, 220, 152, .1) 0deg 4deg, transparent 4deg 18deg);
    -webkit-mask: radial-gradient(circle, #000 25%, transparent 62%); mask: radial-gradient(circle, #000 25%, transparent 62%); animation: gi-spin 60s linear infinite; }
.gd-gallery__stage .gi-orb__halo { inset: auto; width: 76%; height: 76%; }
.gd-gallery__lens { position: relative; width: 66%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fff;
    box-shadow: 0 0 0 4px rgba(246, 220, 152, .85), 0 0 70px color-mix(in srgb, var(--glow) 60%, transparent), 0 26px 50px rgba(0, 0, 0, .55); }
.gd-gallery__lens img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; display: block; transition: transform 1s var(--gi-ease); }
.gd-gallery__stage:hover .gd-gallery__lens img { transform: rotate(-10deg) scale(1.1); }
.gd-gallery__tag { position: absolute; top: 18px; left: calc(50% - min(210px, 50%) + 18px); padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3b0d10; background: var(--gi-grad); }
.gd-gallery__zoom { margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--gi-muted); }
.gd-gallery__zoom i { color: var(--gi-gold); }
.gd-info__title { margin: 0; font: 600 clamp(36px, 4vw, 54px)/1.08 var(--gi-serif); color: var(--gi-ink); text-transform: none; }
.gd-info__title .pg_deva { font-size: .55em; color: var(--gi-maroon); font-weight: 600; }
.gd-info__blurb { margin: 12px 0 0; font: 500 21px/1.5 var(--gi-serif); color: var(--gi-maroon); }
.gd-info__text { margin: 14px 0 0; font-size: 16px; line-height: 1.8; color: #4a3f37; }
.gd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.gd-facts li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--gi-edge) border-box; box-shadow: 0 10px 26px -18px rgba(60, 31, 18, .5); font-weight: 600; color: var(--gi-ink); font-size: 15px; }
.gd-facts small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gi-muted); margin-bottom: 2px; }
.gd-facts .pg_deva { color: var(--gi-maroon); }
.gd-facts__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 18px; color: var(--gi-maroon);
    background: radial-gradient(circle at 32% 24%, #fff, #fdf4e2 38%, #f2dcae); box-shadow: inset 0 2px 2px #fff, inset 0 -3px 6px rgba(197, 155, 43, .28), 0 0 0 1px rgba(226, 180, 106, .65); }
.gd-signs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.gd-signs__label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gi-muted); margin-right: 4px; }
.gd-sign { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--gi-maroon) !important; text-decoration: none !important; background: #fff; box-shadow: inset 0 0 0 1px var(--gi-gold-soft); transition: background-color .25s, color .25s; }
.gd-sign i::before { margin: 0 !important; font-size: 16px !important; color: var(--gi-gold); }
.gd-sign:hover { color: #fff !important; background: var(--gi-maroon); }
.gd-sign:hover i::before, .gd-sign:hover .pg_deva { color: var(--gi-gold-hi); }
.gd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.gd-advice { display: flex; align-items: center; gap: 22px; margin-top: clamp(40px, 5vw, 60px); padding: 26px 30px; border-radius: 24px; color: #fff;
    background: radial-gradient(420px 220px at 12% 50%, rgba(139, 26, 26, .6), transparent 70%), linear-gradient(135deg, #1f0b10, var(--gi-night)); box-shadow: 0 28px 60px -30px rgba(18, 7, 10, .8); }
.gd-advice__icon { flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: #3b0d10; background: var(--gi-grad); box-shadow: 0 0 0 6px rgba(197, 155, 43, .2); }
.gd-advice h3 { margin: 0 0 6px; font: 600 25px/1.2 var(--gi-serif); color: #fff; }
.gd-advice p { margin: 0; color: rgba(255, 244, 228, .75); line-height: 1.7; font-size: 15px; }
.gd-advice .gi-btn { flex-shrink: 0; }

/* care */
.gd-care { padding: 0 0 clamp(50px, 6vw, 80px); background: var(--gi-ivory); }
.gd-care__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gd-care__card { padding: 28px; border-radius: 22px; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--gi-edge) border-box; box-shadow: 0 16px 40px -24px rgba(60, 31, 18, .45); }
.gd-care__card h3 { margin: 14px 0 12px; font: 600 26px/1.2 var(--gi-serif); color: var(--gi-ink); }
.gd-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.gd-list li { position: relative; padding-left: 28px; line-height: 1.65; color: #4a3f37; }
.gd-list li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; background: var(--gi-grad); box-shadow: 0 0 0 3px rgba(197, 155, 43, .15); }

/* stock */
.gd-stock { padding: clamp(60px, 7vw, 96px) 0; background: radial-gradient(40% 40% at 90% 10%, rgba(226, 180, 106, .18), transparent 70%), var(--gi-cream); }
.gi-stock-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.gi-stock { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--gi-edge) border-box;
    box-shadow: 0 16px 40px -24px rgba(60, 31, 18, .45); transition: transform .45s var(--gi-ease), box-shadow .45s; }
.gi-stock[hidden] { display: none; }
.gi-stock:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -26px rgba(110, 20, 25, .5); }
.gi-stock__stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: #fff; cursor: zoom-in; }
.gi-stock__disc { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 30%, #fff), #fff 70%); transition: scale .6s var(--gi-ease); }
.gi-stock__stage img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .8s var(--gi-ease); }
.gi-stock:hover .gi-stock__disc { scale: 1.12; }
.gi-stock:hover .gi-stock__stage img { transform: scale(1.06); }
.gi-stock__zoom { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #3b0d10; background: var(--gi-grad); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--gi-ease); }
.gi-stock:hover .gi-stock__zoom { opacity: 1; transform: none; }
.gi-stock__body { flex: 1; padding: 16px 18px 6px; border-top: 1px solid var(--gi-border); }
.gi-stock__name { margin: 0 0 10px; font: 600 20px/1.25 var(--gi-serif); color: var(--gi-ink); }
.gi-stock__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gi-stock__meta li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--gi-muted); background: var(--gi-cream); }
.gi-stock__meta i { color: var(--gi-gold); }
.gi-stock__btn { margin: 12px 18px 18px; }

/* jewellery filter */
.gd-jewel { padding-top: 40px; }
.gi-tabs--filter { position: sticky; top: 124px; }
.gi-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: none; cursor: pointer;
    font: 700 12.5px/1 "Raleway", sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--gi-muted); transition: background-color .25s, color .25s; }
.gi-tabs button b { color: var(--gi-gold); }
.gi-tabs button:hover { color: var(--gi-maroon); }
.gi-tabs button.is-active { color: #fff; background: linear-gradient(135deg, var(--gi-maroon), var(--gi-maroon-dk)); }
.gi-tabs button.is-active b { color: var(--gi-gold-hi); }
.gi-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(197, 155, 43, .5); }
.gd-empty { text-align: center; color: var(--gi-muted); margin-top: 30px; }
.gd-empty[hidden] { display: none; }

@media (max-width: 1199px) { .gi-stock-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) {
    .gd-product__grid, .gd-care__grid { grid-template-columns: 1fr; }
    .gd-advice { flex-direction: column; text-align: center; }
    .gi-stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gi-tabs--filter { position: static; }
}
@media (max-width: 575px) {
    .gd-facts { grid-template-columns: 1fr; }
    .gd-actions .gi-btn { flex: 1 1 100%; }
    .gi-stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .gi-stock__name { font-size: 17px; }
    .gi-stock__btn { margin: 10px 12px 14px; }
}