/* Home 3 — Goldium (jewellery) homepage. Port of Goldium HTML template index.html (values from its custom.css), scoped under .h3 */
.h3{ --h3-ink: #1a1a1a; --h3-accent: #c9a24d; --h3-accent-soft: #f3e6c8; --h3-muted: #757e8b; --h3-white: #fff; --h3-serif: var(--font-heading, 'Old Standard TT', serif); --h3-sans: var(--font-body, 'Jost', sans-serif); --h3-script: 'Corinthia', cursive; font-family: var(--h3-sans); color: var(--h3-ink); letter-spacing: .02em; overflow: hidden; }
.h3 img{ max-width: 100%; }
.h3 a{ text-decoration: none !important; }
.h3 .h3-section{ padding: 70px 0; }
.h3 figure{ margin: 0; }

/* Buttons (btn-default port: outline + sliding fill) */
.h3-btn{ position: relative; display: inline-block; font-family: var(--h3-sans); font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--h3-ink); background: transparent; border: 1px solid var(--h3-ink); padding: 15px 28px; overflow: hidden; z-index: 1; transition: color .45s ease-in-out, border-color .45s; cursor: pointer; }
.h3-btn::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 100%; background: var(--h3-accent); transition: width .4s ease-in-out; z-index: -1; }
.h3-btn:hover{ color: #fff; border-color: var(--h3-accent); }
.h3-btn:hover::after{ width: 100%; }
.h3-btn--light{ color: #fff; border-color: #fff; }
.h3-btn--light::after{ height: 0; width: 100%; bottom: 0; }
.h3-btn--light:hover{ border-color: #fff; color: #fff; }
.h3-btn--light:hover::after{ height: 100%; }
.h3-btn--fill{ background: var(--h3-ink); color: #fff; }

/* Section titles */
.h3-title{ margin-bottom: 20px; }
.h3-title--center{ text-align: center; }
/* text-anime JS page load ke waqt ka text-align inline hardcode kar deta hai, isliye window resize ya
   phone rotate karne par heading purane alignment par atak jaati thi. inherit se hamesha parent follow karegi. */
.h3-title .split-line{ text-align: inherit !important; }
.h3-title .h3-script{ display: block; font-family: var(--h3-script); font-size: 56px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; color: var(--h3-accent); }
.h3-title h2{ font-family: var(--h3-serif); font-size: 56px; line-height: 1.35; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--h3-ink); margin: 0 0 20px; position: relative; z-index: 1; }
.h3-title .h3-sub{ display: block; font-family: var(--h3-sans); font-size: 18px; font-weight: 400; text-transform: uppercase; letter-spacing: .33em; margin-bottom: 14px; color: #311d19; }
.h3-title p{ font-size: 17px; line-height: 1.8; color: #3a3a3a; letter-spacing: .04em; }
.h3-accent{ color: var(--h3-accent); }

/* Hero: slider (9) + promo (3) */
.h3-hero{ display: grid; grid-template-columns: 3fr 1fr; background: #111; }
.h3-hero > *{ min-width: 0; }
.h3-hero__slider{ position: relative; height: 680px; }
.h3-hero__slider .swiper, .h3-hero__slider .swiper-wrapper, .h3-hero__slider .swiper-slide{ height: 100%; }
.h3-hero__media{ position: absolute; inset: 0; overflow: hidden; }
.h3-hero__media img, .h3-hero__media video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h3-hero__media img{ transform: scale(1.02); }
.swiper-slide-active .h3-hero__media img{ animation: h3-kenburns 9s ease-out forwards; }
@keyframes h3-kenburns{ from{ transform: scale(1.02); } to{ transform: scale(1.14); } }
.h3-hero__media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.05) 100%); }
.h3-hero__content{ position: absolute; left: 0; bottom: 20px; width: 62%; padding: 70px; z-index: 2; color: #fff; }
.h3-hero__content .h3-sub{ color: #fff; font-size: 18px; letter-spacing: .33em; text-transform: uppercase; margin-bottom: 14px; display: block; }
.h3-hero__content h1{ font-family: var(--h3-serif); font-size: 72px; line-height: 1.08; font-weight: 700; color: #fff; margin: 0 0 22px; text-shadow: 0 2px 20px rgba(0,0,0,.45); }
.h3-hero__content p{ color: #fff; font-size: 17px; line-height: 1.75; max-width: 60ch; margin-bottom: 28px; }
.h3-hero .swiper-pagination{ bottom: 42px !important; }
.h3-hero .swiper-pagination-bullet{ width: 14px; height: 14px; background: #fff; opacity: 1; margin: 0 8px !important; }
.h3-hero .swiper-pagination-bullet-active{ background: transparent; border: 2px solid var(--h3-accent); position: relative; }
.h3-hero .swiper-pagination-bullet-active::after{ content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--h3-accent); }
.h3-hero .swiper-button-prev, .h3-hero .swiper-button-next{ width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.5); color: #111; }
.h3-hero .swiper-button-prev::after, .h3-hero .swiper-button-next::after{ font-size: 16px; font-weight: 700; }
.h3-hero .swiper-button-prev{ left: 16px; } .h3-hero .swiper-button-next{ right: 16px; }
.h3-promo{ display: block; position: relative; overflow: hidden; height: 680px; }
.h3-promo img{ width: 100%; height: 100%; object-fit: cover; animation: h3-kenburns 14s ease-in-out infinite alternate; }
.h3-promo::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.35) 100%); }
.h3-promo img{ filter: brightness(.8); }
.h3-promo__content{ position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; color: #fff; }
.h3-promo__content .h3-sub{ color: #fff; font-size: 15px; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 18px; padding: 6px 14px; border: 1px solid rgba(255,255,255,.5); }
.h3-promo__content h2{ display: block; font-family: var(--h3-serif); font-size: 40px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.7); padding-bottom: 14px; position: relative; }
.h3-promo__content h2::after{ content: ""; position: absolute; left: 50%; bottom: 0; width: 56px; height: 2px; background: var(--h3-accent); transform: translateX(-50%); }
.h3-promo__content p{ font-family: var(--h3-serif); font-size: 30px; letter-spacing: .06em; margin: 16px 0 24px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.h3-promo__content p:has(+ .h3-promo__note){ margin-bottom: 6px; }
.h3-promo__note{ display: block; max-width: 260px; font-size: 11.5px; line-height: 1.5; letter-spacing: .04em; color: rgba(255,255,255,.82); margin: 0 0 22px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }

/* Intro: text | image | product slider */
.h3-intro__grid{ display: grid; grid-template-columns: 4fr 5fr 3fr; gap: 30px; align-items: center; }
.h3-intro__grid > *{ min-width: 0; }
.h3-intro__slider .swiper{ width: 100%; }
.h3-intro__text h2{ font-family: var(--h3-serif); font-size: 50px; line-height: 1.3; font-weight: 400; letter-spacing: .04em; text-transform: capitalize; margin-bottom: 18px; }
.h3-intro__text p{ font-size: 16.5px; line-height: 1.85; color: #3a3a3a; }
.h3-intro__img img{ width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
.h3-intro__slider{ position: relative; }
.h3-intro__slider .swiper{ overflow: hidden; }
.h3-intro__slider .swiper-slide{ width: 100%; }
.h3-hero__slider .swiper-slide{ width: 100%; }
.h3-intro__nav{ display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.h3-intro__nav button{ width: 40px; height: 40px; border: 1px solid #ddd; background: #fff; color: #111; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: all .25s; }
.h3-intro__nav button:hover{ background: var(--h3-ink); color: #fff; border-color: var(--h3-ink); }

/* Marquee strip */
.h3-marquee{ background: var(--h3-marquee-bg, linear-gradient(90deg, var(--h3-tint-1), var(--h3-tint-3), var(--h3-tint-1))); padding: 58px 0; overflow: hidden; }
.h3-marquee__track{ display: flex; width: max-content; animation: h3-marquee 40s linear infinite; }
.h3-marquee:hover .h3-marquee__track{ animation-play-state: paused; }
.h3-marquee__item{ display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; font-family: var(--h3-serif); font-size: 44px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--h3-ink); white-space: nowrap; }
.h3-marquee__item i{ font-size: 22px; color: var(--h3-ink); }
@keyframes h3-marquee{ to{ transform: translateX(-50%); } }

/* Popular categories (staggered masonry) */
.h3-cats__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: center; }
.h3-cats__col{ display: flex; flex-direction: column; gap: 30px; }
.h3-cats__col--1 .h3-cat{ margin-top: 60px; }
/* 4 se kam categories featured hon to grid ko utne hi columns do, warna khaali
   column reh jaata tha aur section toota hua dikhta tha. */
.h3-cats__grid[data-count="1"]{ grid-template-columns: 1fr 1fr; }
.h3-cats__grid[data-count="2"],
.h3-cats__grid[data-count="3"]{ grid-template-columns: repeat(2, 1fr); }
.h3-cats__grid[data-count="1"] .h3-cats__col--1,
.h3-cats__grid[data-count="2"] .h3-cats__col--1,
.h3-cats__grid[data-count="3"] .h3-cats__col--1{ justify-content: center; }
.h3-cats__title h2{ font-family: var(--h3-serif); font-size: 44px; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; font-weight: 400; margin: 0; }
.h3-cat{ background: transparent; }
.h3-cat__img{ display: block; overflow: hidden; }
.h3-cat__img img{ width: 100%; aspect-ratio: 5 / 6; object-fit: cover; transition: transform .6s ease; }
.h3-cat:hover .h3-cat__img img{ transform: scale(1.08); }
.h3-cat__body{ padding: 22px 0 6px; text-align: right; }
.h3-cat__body h4{ font-family: var(--h3-serif); font-size: 24px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 18px; }
.h3-cat__body h4 a{ color: var(--h3-ink); }

/* Sale banner (parallax) */
.h3-sale{ position: relative; padding: 130px 0; background: #0b1b1f center/cover no-repeat; color: #fff; overflow: hidden; }
.h3-sale::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 70%); }
.h3-sale .container{ position: relative; z-index: 1; }
.h3-sale h2{ font-family: var(--h3-sans); font-size: 52px; font-weight: 400; letter-spacing: .02em; color: #fff; margin-bottom: 14px; }
.h3-sale p{ font-size: 18px; color: #fff; margin-bottom: 30px; }
.h3-sale p strong{ font-weight: 600; }
.h3-sparkle{ position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0; animation: h3-sparkle 3s ease-in-out infinite; box-shadow: 0 0 12px 3px rgba(255,255,255,.7); }
@keyframes h3-sparkle{ 0%,100%{ opacity: 0; transform: scale(.4); } 50%{ opacity: 1; transform: scale(1.2); } }


/* Brand video (Cignet .intro-video port): bg video/image, play button with ripple rings, 4 promises at bottom */
.h3-video{ position: relative; min-height: 780px; display: flex; align-items: flex-end; padding: 60px 0; overflow: hidden; background: #1b1f26; color: #fff; }
.h3-video__bg{ position: absolute; inset: 0; z-index: 0; }
.h3-video__bg video, .h3-video__bg img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.h3-video__bg img{ animation: h3-kenburns 18s ease-in-out infinite alternate; }
.h3-video__bg::before{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(0,0,0,.30) 0%, rgba(0,0,0,.16) 45%, rgba(0,0,0,.72) 100%); }
.h3-video .container{ position: relative; z-index: 2; text-align: center; }
.h3-play{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; }
.h3-play a{ position: relative; display: flex; width: 85px; height: 85px; border-radius: 50%; background: var(--h3-accent); color: #fff; align-items: center; justify-content: center; font-size: 30px; transition: .4s ease-in-out; }
.h3-play a i{ margin-left: 4px; }
.h3-play a:hover{ background: #fff; color: var(--h3-ink); }
.h3-play a::before, .h3-play a::after{ content: ""; position: absolute; width: 160%; height: 160%; border: 40px solid #fff; opacity: .5; border-radius: 50%; transform: scale(.6); z-index: -1; animation: h3-ring 1.2s linear infinite; }
.h3-play a::after{ animation-delay: .3s; }
@keyframes h3-ring{ 100%{ transform: scale(1); opacity: 0; } }
.h3-video__items{ display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 100px; max-width: 1120px; margin: 270px auto 0; }
.h3-video__item{ position: relative; width: calc(25% - 75px); text-align: center; }
.h3-video__item::before{ content: ""; position: absolute; top: 0; right: -50px; bottom: 0; width: 1px; background: rgba(255,255,255,.25); }
.h3-video__item:last-child::before{ display: none; }
.h3-video__item .ico{ height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; }
.h3-video__item .ico i{ font-size: 56px; line-height: 1; color: #fff; }
.h3-video__item .ico img{ max-width: 60px; max-height: 60px; filter: brightness(0) invert(1); }
.h3-video__item h3{ font-family: var(--h3-serif); font-size: 20px; letter-spacing: .04em; color: #f5f5f5; margin: 0; }
@media (max-width: 1024px){ .h3-video{ min-height: 680px; } .h3-video__items{ margin-top: 200px; } }
@media (max-width: 991.98px){ .h3-video{ min-height: 530px; } .h3-play a{ width: 60px; height: 60px; font-size: 24px; } .h3-video__items{ gap: 30px; margin-top: 130px; } .h3-video__item{ width: calc(25% - 22.5px); } .h3-video__item::before{ right: -15px; } .h3-video__item .ico i{ font-size: 46px; } }
@media (max-width: 767.98px){ .h3-video{ min-height: 480px; padding: 40px 0; } .h3-play{ top: 40%; } .h3-video__items{ margin-top: 60px; gap: 24px 20px; } .h3-video__item{ width: calc(50% - 10px); } .h3-video__item::before{ display: none; } .h3-video__item .ico{ height: 44px; margin-bottom: 10px; } .h3-video__item .ico i{ font-size: 38px; } .h3-video__item h3{ font-size: 16px; } }

/* Products grids */
.h3-products{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.h3-products > *{ min-width: 0; }
.h3-products--3{ grid-template-columns: repeat(3, 1fr); }

/* New arrivals: title + tabs + product slider per tab */
.h3-new{ background: linear-gradient(160deg, #fff 0%, var(--h3-tint-2) 45%, var(--h3-tint-1) 100%); padding: 90px 0; position: relative; }
.h3-new__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 36px; }
.h3-new__head h2{ font-family: var(--h3-serif); font-size: 52px; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; font-weight: 400; }
.h3-tabs{ display: flex; flex-wrap: wrap; gap: 8px 26px; padding-bottom: 12px; }
.h3-tabs a{ position: relative; padding: 6px 0; color: #8a8f99; font-family: var(--h3-sans); text-transform: uppercase; font-size: 14px; letter-spacing: .18em; transition: color .25s; }
.h3-tabs a::after{ content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--h3-ink); transition: width .3s; }
.h3-tabs a.active, .h3-tabs a:hover{ color: var(--h3-ink); }
.h3-tabs a.active::after{ width: 100%; }
.h3-new .tab-pane{ display: none; } .h3-new .tab-pane.active{ display: block; animation: h3-fade .5s ease; }
@keyframes h3-fade{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }
.h3-new__pane{ position: relative; }
.h3-new__swiper{ overflow: hidden; }
.h3-new__swiper .swiper-slide{ height: auto; }
.h3-new__swiper .gcard{ background: #fff; }
.h3-new__swiper .gcard__body, .h3-cat .gcard__body{ padding: 16px 16px 18px; }
.h3-new__nav{ display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.h3-new__nav button{ width: 42px; height: 42px; border: 1px solid #d5d8de; background: #fff; color: #111; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: all .25s; }
.h3-new__nav button:hover{ background: var(--h3-ink); color: #fff; border-color: var(--h3-ink); }
.h3-new__nav button.swiper-button-disabled{ opacity: .35; cursor: default; }

/* Counters */
.h3-counters-band{ background: #fff; }
.h3-counters{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.h3-counter{ --c-bg: var(--h3-tint-2); --c-ink: var(--h3-ink); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 10px 14px; }
.h3-counter--1{ --c-bg: #fbeef0; --c-ink: #b9808c; }
.h3-counter--2{ --c-bg: #eef4ef; --c-ink: #6f9580; }
.h3-counter--3{ --c-bg: #faf2e3; --c-ink: #b9964f; }
.h3-counter--4{ --c-bg: #edf0f7; --c-ink: #7d8cb0; }
.h3-counter__icon{ width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--c-ink); background: var(--c-bg); transition: transform .35s ease, box-shadow .35s ease; }
.h3-counter:hover .h3-counter__icon{ transform: translateY(-4px) scale(1.06); box-shadow: 0 12px 26px rgba(0,0,0,.10); }
.h3-counter__num{ font-family: var(--h3-serif); font-size: 52px; line-height: 1; font-weight: 400; color: var(--h3-ink); display: flex; align-items: flex-start; justify-content: center; }
.h3-counter__num small{ font-size: 22px; font-weight: 500; margin-top: 6px; margin-left: 3px; color: var(--c-ink); }
.h3-counter__label{ font-family: var(--h3-sans); font-size: 12.5px; font-weight: 500; line-height: 1.55; text-transform: uppercase; letter-spacing: .16em; color: var(--h3-ink); opacity: .66; max-width: 16ch; }
.h3-counter::after{ content: ""; position: absolute; right: -10px; top: 24%; height: 52%; width: 1px; background: var(--h3-tint-3); }
.h3-counter:last-child::after{ display: none; }

/* Testimonials */
.h3-testi{ position: relative; overflow: hidden; background: radial-gradient(ellipse 110% 85% at 50% 42%, #fff 0%, #fff 22%, var(--h3-tint-1) 62%, var(--h3-tint-3) 100%); padding: 70px 0 120px; }
.h3-testi::before{ content: ""; position: absolute; width: 900px; height: 900px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,.45) 45%, transparent 72%); pointer-events: none; }
.h3-testi::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 45%, transparent 55%, var(--h3-tint-2) 100%); opacity: .55; pointer-events: none; }
.h3-testi .container{ position: relative; z-index: 1; }
.h3-testi__item{ position: relative; text-align: center; max-width: 760px; margin: 0 auto; padding: 78px 52px 44px; background: rgba(255,255,255,.92); border: 1px solid var(--h3-tint-3); border-radius: 18px; box-shadow: 0 22px 60px rgba(0,0,0,.07); backdrop-filter: blur(2px); }
.h3-testi__mark{ position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #d3b269 0%, #b6913f 100%); color: #fff; font-size: 26px; line-height: 1; box-shadow: 0 12px 26px rgba(0,0,0,.16); }
.h3-testi__stars{ color: #c9a24d; font-size: 18px; letter-spacing: 5px; margin: 10px 0 20px; }
.h3-testi__text{ font-family: var(--h3-serif); font-size: 21px; line-height: 1.75; color: #2b2b2b; padding: 0 4%; margin: 0 0 28px; }
.h3-testi__who{ display: inline-flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--h3-tint-3); }
.h3-testi__avatar{ width: 58px; height: 58px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid #fff; box-shadow: 0 0 0 2px #e0c88f; }
.h3-testi__avatar--letter{ display: flex; align-items: center; justify-content: center; background: var(--h3-tint-2); color: var(--h3-ink); font-family: var(--h3-serif); font-size: 26px; }
.h3-testi__meta{ text-align: left; }
.h3-testi__name{ font-family: var(--h3-sans); font-size: 18px; font-weight: 600; letter-spacing: .02em; margin: 0; }
.h3-testi__role{ font-family: var(--h3-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #b6913f; display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.h3-testi .carousel-indicators{ bottom: -54px; margin: 0; }
.h3-testi .carousel-indicators li{ width: 26px; height: 4px; border-radius: 4px; background: var(--h3-tint-3); border: 0; opacity: 1; margin: 0 5px; transition: background .3s, width .3s; }
.h3-testi .carousel-indicators .active{ background: #c9a24d; width: 40px; }
.h3-testi .carousel-control-prev, .h3-testi .carousel-control-next{ width: 46px; height: 46px; top: 50%; transform: translateY(-50%); border-radius: 50%; background: #fff; color: var(--h3-ink); border: 1px solid var(--h3-tint-3); box-shadow: 0 8px 22px rgba(0,0,0,.08); opacity: 1; transition: background .3s, color .3s, border-color .3s; }
.h3-testi .carousel-control-prev:hover, .h3-testi .carousel-control-next:hover{ background: #c9a24d; color: #fff; border-color: #c9a24d; }
.h3-testi .carousel-control-prev{ left: -14px; } .h3-testi .carousel-control-next{ right: -14px; }

/* Gallery band: hero ke neeche white patti */
.h3{ margin-bottom: 0 !important; }   /* niche white gap na aaye */
.h3-gallery-band{ background: #fff; padding: 42px 0 46px; }
.h3-gallery-full{ width: 100%; padding: 0 12px; }

/* Gallery: slow continuous slider + shine on hover */
.h3-gallery{ overflow: hidden; }
.h3-gallery .swiper-wrapper{ transition-timing-function: linear !important; align-items: flex-start; }
.h3-gallery .swiper-slide{ width: 19%; }
.h3-gallery .swiper-slide:nth-child(even){ padding-top: 50px; }
.h3-gallery a{ display: block; position: relative; overflow: hidden; }
.h3-gallery img{ width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; transition: transform .6s; }
.h3-gallery a::after{ content: ""; position: absolute; width: 200%; height: 0; left: 50%; top: 50%; background: rgba(0,0,0,.4); transform: translate(-50%,-50%) rotate(-45deg); z-index: 1; }
.h3-gallery a:hover::after{ height: 250%; transition: all .6s linear; background: transparent; }
.h3-gallery a:hover img{ transform: scale(1.05); }

/* Newsletter */
.h3-news{ position: relative; background: linear-gradient(135deg, var(--h3-tint-3) 0%, #fff 55%, var(--h3-tint-1) 100%); padding: 90px 0; text-align: center; }
.h3-news h2{ font-family: var(--h3-sans); font-size: 30px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; max-width: 22ch; margin: 0 auto 30px; }
.h3-news form{ display: flex; max-width: 640px; margin: 0 auto; border-bottom: 1px solid var(--h3-ink); }
.h3-news input{ flex: 1; border: 0; background: transparent; padding: 14px 16px; font-size: 16px; outline: 0; font-family: var(--h3-sans); }
.h3-news button{ border: 0; background: transparent; font-family: var(--h3-sans); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; padding: 0 16px; cursor: pointer; color: var(--h3-ink); }
.h3-news button:hover{ color: var(--h3-accent); }

/* WOW fallback: elements invisible until animated (js adds .animated) */
.h3 .wow{ visibility: hidden; }
.h3 .wow.animated{ visibility: visible; }
.no-js .h3 .wow{ visibility: visible; }

/* Responsive */
@media (max-width: 1199.98px){
    .h3-hero__content h1{ font-size: 56px; } .h3-hero__content{ width: 75%; padding: 50px; }
    .h3-title h2, .h3-new__side h2, .h3-cats__title h2{ font-size: 44px; } .h3-intro__text h2{ font-size: 40px; }
    .h3-products{ grid-template-columns: repeat(3, 1fr); } .h3-counter__num{ font-size: 46px; }
    .h3-marquee__item{ font-size: 36px; }
}
@media (max-width: 991.98px){
    .h3-hero{ grid-template-columns: 1fr; } .h3-hero__slider, .h3-promo{ height: 560px; } .h3-promo{ height: 420px; }
    .h3-intro__grid{ grid-template-columns: 1fr 1fr; } .h3-intro__slider{ grid-column: span 2; }
    .h3-cats__grid{ grid-template-columns: 1fr 1fr; } .h3-cats__col--1 .h3-cat{ margin-top: 0; }
    .h3-new{ padding: 60px 0; }
    .h3-counters{ grid-template-columns: 1fr 1fr; } .h3-gallery .swiper-slide{ width: 32%; }
    .h3-testi__text{ padding: 0 6%; } .h3-testi .carousel-control-prev{ left: 0; } .h3-testi .carousel-control-next{ right: 0; }
    .h3-sale{ padding: 90px 0; }
}
@media (max-width: 767.98px){
    .h3 .h3-section{ padding: 48px 0; }
    /* Hero images 1920x1000 hain jinme subject (model/jewellery) RIGHT side me hota
       hai aur left half text ke liye khaali. Phone par cover crop beech se hota tha,
       to sirf khaali background dikhta tha aur jewellery kat jaati thi. Crop ko right
       ki taraf le jaate hain, aur overlay ko neeche-se-dark karte hain taaki text
       padha ja sake (desktop par wo left-to-right hi rehta hai). */
    .h3-hero__media img, .h3-hero__media video{ object-position: 75% center; }
    .h3-hero__media::after{ background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.80) 100%); }
    .h3-hero__slider{ height: 560px; } .h3-hero__content{ width: 100%; padding: 28px 22px 60px; bottom: 0; }
    /* Text block ko compact rakha hai taaki uske upar jewellery ke liye jagah bache */
    .h3-hero__content h1{ font-size: 34px; margin-bottom: 14px; }
    .h3-hero__content p{ font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .h3-hero__content .h3-sub{ font-size: 13px; }
    .h3-hero .swiper-button-prev, .h3-hero .swiper-button-next{ display: none; } .h3-hero .swiper-pagination{ bottom: 18px !important; }
    .h3-promo{ height: 360px; } .h3-promo__content h2{ font-size: 30px; }
    /* Section headings phone par left-aligned — center me lambi headings do-teen lines me toot kar
       bikhri hui lagti hain; left align se baaki content ke saath ek hi line par aati hain. */
    .h3-title--center{ text-align: left; }
    .h3-title .h3-script{ font-size: 44px; } .h3-title h2, .h3-new__side h2, .h3-cats__title h2{ font-size: 30px; letter-spacing: .06em; } .h3-intro__text h2{ font-size: 30px; }
    .h3-intro__grid{ grid-template-columns: 1fr; } .h3-intro__slider{ grid-column: span 1; }
    .h3-marquee{ padding: 30px 0; } .h3-marquee__item{ font-size: 26px; gap: 20px; padding-right: 20px; }
    .h3-cats__grid{ grid-template-columns: 1fr; } .h3-cat__body{ padding: 18px; } .h3-cat__body h4{ font-size: 20px; }
    .h3-sale{ padding: 70px 0; } .h3-sale h2{ font-size: 34px; }
    .h3-products, .h3-products--3{ grid-template-columns: 1fr 1fr; gap: 14px; }
    .h3-new{ padding: 48px 0; } .h3-new__head{ margin-bottom: 20px; } .h3-new__head h2{ font-size: 30px; } .h3-gallery .swiper-slide{ width: 44%; } .h3-gallery .swiper-slide:nth-child(even){ padding-top: 24px; }
    .h3-tabs{ gap: 4px 16px; padding-bottom: 0; } .h3-tabs a{ font-size: 12px; }
    .h3-counters{ grid-template-columns: 1fr 1fr; gap: 26px 10px; } .h3-counter{ padding: 4px; gap: 10px; } .h3-counter__icon{ width: 50px; height: 50px; font-size: 22px; } .h3-counter__num{ font-size: 38px; } .h3-counter__num small{ font-size: 16px; margin-top: 4px; } .h3-counter__label{ font-size: 11px; letter-spacing: .12em; line-height: 1.45; max-width: 14ch; } .h3-counter::after{ display: none; }
    .h3-testi{ padding: 48px 0 90px; } .h3-testi__item{ padding: 62px 20px 30px; border-radius: 14px; } .h3-testi__text{ padding: 0; font-size: 16px; line-height: 1.7; } .h3-testi__name{ font-size: 16px; } .h3-testi__avatar{ width: 48px; height: 48px; } .h3-testi__mark{ width: 46px; height: 46px; font-size: 20px; top: 16px; }
    
    .h3-news{ padding: 56px 0; } .h3-news h2{ font-size: 20px; }
    .h3-btn{ padding: 13px 22px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce){ .h3 *{ animation: none !important; transition: none !important; } }
/* ---- Flash sale strip (Discounts > Show as flash sale) ---- */
.h3-flash{ padding-top: 0; }
.h3-flash__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.h3-flash__head .h3-title{ margin: 0; }
.h3-flash__head .h3-title h2{ margin: 0; font-size: 44px; }
.h3-flash__head .h3-sub{ font-size: 14px; letter-spacing: .28em; color: var(--h3-accent); }
.h3-flash__timer{ display: flex; align-items: center; gap: 8px; }
.h3-flash__timer > div{ min-width: 64px; padding: 8px 6px; text-align: center; border: 1px solid #e2e4ea; background: #fff; }
.h3-flash__timer b{ display: block; font-family: var(--h3-serif); font-size: 26px; line-height: 1.1; font-weight: 400; color: var(--h3-ink); }
.h3-flash__timer small{ display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #6b7280; margin-top: 2px; }
.h3-flash__timer > span{ font-size: 22px; color: #9aa0ad; }
.h3-flash__slider{ position: relative; }
.h3-flash__slider .swiper{ overflow: hidden; }
@media (max-width: 767.98px){
    .h3-flash__head{ align-items: flex-start; }
    .h3-flash__head .h3-title h2{ font-size: 30px; }
    .h3-flash__timer > div{ min-width: 54px; }
    .h3-flash__timer b{ font-size: 20px; }
}