/* Homepage — section order and geometry from remasgallery.com. */

/* ---------- stories */
.stories{display:flex;gap:16px;overflow-x:auto;padding:24px 16px;background:rgba(255,255,255,.7);cursor:grab}
.stories.is-dragging{cursor:grabbing}
.story{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:50%}
.story-ring{width:100px;height:100px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,var(--yellow-400),var(--gold-600),var(--blue-600),var(--blue-700),var(--yellow-400));display:block;transition:transform .2s}
.story:hover .story-ring{transform:scale(1.04)}
.story-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #fff;background:var(--gray-100)}
.story.is-seen .story-ring{background:var(--gray-300)}
@media (max-width:768px){.stories{padding:12px 12px;gap:12px}.story-ring{width:72px;height:72px;padding:2px}.story-ring img{border-width:2px}}
.stories-wrap{max-width:1920px;margin-inline:auto}

/* story viewer */
.sv{position:fixed;inset:0;z-index:11000;background:rgba(7,29,58,.88);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.sv.is-open{opacity:1}
.sv-box{position:relative;width:min(450px,100vw);height:min(800px,100vh);background:#000;border-radius:var(--radius-lg);overflow:visible}
.sv-box .swiper{width:100%;height:100%;border-radius:var(--radius-lg);overflow:hidden}
.sv-slide{position:relative;width:100%;height:100%;background:linear-gradient(180deg,#fff 0%,#f4f9ff 70%,#fff5d7 100%)}
.sv-slide img{width:100%;height:100%;object-fit:contain;padding:64px 16px 190px}
.sv-foot{position:absolute;right:16px;left:16px;bottom:16px;z-index:3;display:flex;flex-direction:column;gap:12px}
.sv-info{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:12px 14px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow-sm)}
.sv-info b{color:var(--blue-900);font-size:15px}
.sv-info span{color:var(--gray-500);font-size:12px}
.sv-info .sv-price{color:var(--gray-600);font-size:13px}
.sv-info .sv-price strong{color:var(--blue-700);font-size:16px}
.sv-cta{width:100%}
.sv-brand{position:absolute;top:24px;right:16px;z-index:5;display:flex;align-items:center;gap:8px;font-weight:900;color:var(--blue-900);font-size:14px}
.sv-brand em{font-style:normal;color:var(--gold-600)}
.sv-bars{position:absolute;top:12px;right:12px;left:12px;display:flex;gap:4px;z-index:5;direction:rtl}
.sv-bar{flex:1;height:3px;border-radius:9px;background:rgba(7,29,58,.12);overflow:hidden}
.sv-bar i{display:block;height:100%;width:0;background:var(--grad-gold);border-radius:inherit}
.sv-bar.is-done i{width:100%}
.sv-bar.is-active i{animation:svFill 5s linear forwards}
@keyframes svFill{to{width:100%}}
.sv-close{position:absolute;top:22px;left:14px;z-index:6;width:40px;height:40px;border-radius:50%;background:rgba(7,29,58,.08);color:var(--blue-900);display:grid;place-items:center}
.sv-close svg{width:22px;height:22px}
.sv-prev,.sv-next{position:absolute;top:50%;transform:translateY(-50%);z-index:6}
.sv-prev{right:-60px}
.sv-next{left:-60px}
@media (max-width:768px){
  .sv-box{width:100vw;height:100vh;border-radius:0}
  .sv-box .swiper{border-radius:0}
  .sv-prev{right:16px}.sv-next{left:16px}
}

/* ---------- banner */
.banner{max-width:1920px;margin-inline:auto}
.banner .swiper{overflow:hidden}
.banner-slide{display:block;height:440px;position:relative;background:var(--gray-100)}
.banner-slide img{width:100%;height:100%;object-fit:cover}
.banner .swiper-pagination{bottom:16px!important}
@media (max-width:768px){.banner-slide{height:auto;aspect-ratio:16/9}}

/* ---------- category cards */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cat-card{position:relative;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(135deg,var(--blue-100),var(--yellow-100));display:block;transition:border-radius .5s ease,box-shadow .3s;box-shadow:var(--shadow-sm)}
.cat-card img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .5s ease,opacity .5s}
.cat-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;padding:16px;background:linear-gradient(0deg,rgba(7,29,58,.55),rgba(7,29,58,0) 60%);overflow:hidden}
.cat-overlay h3{color:#fff;font-size:18px;font-weight:900;text-align:center}
.cat-overlay .btn{width:100%;min-height:40px;margin-bottom:-60px;transition:margin .4s ease;background:#fff;color:var(--blue-700)}
.cat-card:hover{border-radius:50% 50% var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-blue)}
.cat-card:hover img{transform:scale(1.05);opacity:1}
.cat-card:hover .cat-overlay .btn{margin-bottom:0}
@media (hover:none){.cat-overlay .btn{margin-bottom:0}}
@media (max-width:1366px){.cat-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1024px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.cat-grid{grid-template-columns:repeat(2,1fr);gap:8px}}
@media (max-width:576px){
  .cat-grid{grid-template-columns:1fr;gap:6px}
  .cat-card{aspect-ratio:auto;height:140px;border-radius:8px}
  .cat-card:first-child{border-radius:var(--radius-md) var(--radius-md) 8px 8px}
  .cat-card:last-child{border-radius:8px 8px var(--radius-md) var(--radius-md)}
  .cat-card:hover{border-radius:inherit}
  .cat-overlay{flex-direction:row;align-items:center;justify-content:space-between;background:linear-gradient(270deg,rgba(7,29,58,.6),rgba(7,29,58,0) 70%)}
  .cat-overlay .btn{width:auto;margin:0}
}

/* ---------- product tabs */
.ptabs-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}
@media (max-width:768px){.ptabs-head{margin-bottom:16px}.ptabs-head .more-link{font-size:13px}}

/* ---------- wallet promo */
.wallet-promo{display:flex;align-items:center;justify-content:space-between;gap:48px;background:linear-gradient(145deg,#ffffff 0%,#f8fbff 52%,#fff7df 100%);border:1px solid rgba(234,236,240,.95);border-radius:var(--radius-xl);padding:40px 48px;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.wallet-promo::before{content:"";position:absolute;inset:auto auto -160px -120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,107,.38),transparent 65%)}
.wp-copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start;position:relative;z-index:1;max-width:640px}
.wp-copy h2{font-size:30px;font-weight:900;color:var(--blue-900);letter-spacing:-.6px;line-height:1.5}
.wp-copy p{font-size:19px;color:var(--gray-600);line-height:1.9}
.wp-visual{flex:0 0 420px;height:320px;position:relative}
@media (max-width:1024px){.wallet-promo{gap:32px;padding:32px}.wp-visual{flex-basis:360px}}
@media (max-width:768px){.wallet-promo{flex-direction:column-reverse;padding:24px 20px;gap:12px;border-radius:var(--radius-lg)}.wp-visual{flex-basis:auto;width:100%;height:240px}.wp-copy .btn{width:100%}}
@media (max-width:576px){.wp-copy h2{font-size:24px}.wp-copy p{font-size:16px}}

/* gold illustration (tabdealgold.ir hero pieces) */
.gold-visual{position:absolute;inset:0}
.gv-rings{position:absolute;right:20px;bottom:6px;width:360px;height:260px;border-radius:50%;border:1px solid rgba(198,138,38,.22)}
.gv-rings::before,.gv-rings::after{content:"";position:absolute;inset:28px;border-radius:50%;border:1px solid rgba(11,111,251,.14)}
.gv-rings::after{inset:58px;border-color:rgba(198,138,38,.16)}
.gv-pour{position:absolute;right:20px;bottom:62px;width:330px;height:220px}
.gv-bowl{position:absolute;right:54px;bottom:0;width:210px;height:108px;background:radial-gradient(circle at 50% 10%,#ffd66b,#c68a26 46%,#79510f 80%);border-radius:20px 20px 90px 90px;box-shadow:0 28px 44px rgba(198,138,38,.24)}
.gv-melt{position:absolute;right:130px;top:0;width:42px;height:138px;background:linear-gradient(180deg,#fff3b0,#ffd66b,#d59625);border-radius:999px;box-shadow:0 0 34px rgba(255,214,107,.72);transform-origin:top;animation:melt 3s ease-in-out infinite}
.gv-spout{position:absolute;right:102px;top:6px;width:120px;height:34px;background:linear-gradient(135deg,#54370a,#ffd66b 55%,#8f5d0f);border-radius:999px;transform:rotate(-20deg);box-shadow:0 14px 34px rgba(198,138,38,.22)}
.gv-bar{position:absolute;background:linear-gradient(135deg,#fff0a8,#e7b646,#9b6814);border-radius:8px;box-shadow:0 18px 28px rgba(155,104,20,.22);z-index:2}
.gv-bar.one{right:142px;bottom:-16px;width:86px;height:44px;transform:rotate(-10deg)}
.gv-bar.two{right:198px;bottom:-34px;width:78px;height:40px;transform:rotate(10deg)}
.gv-bar.three{right:106px;bottom:-42px;width:72px;height:36px;transform:rotate(6deg)}
.gv-card{position:absolute;left:0;top:0;width:190px;background:rgba(255,255,255,.88);border:1px solid rgba(234,236,240,.95);border-radius:20px;padding:14px;box-shadow:var(--shadow-sm);backdrop-filter:blur(12px);z-index:3}
.gv-card b{display:block;color:var(--blue-900);font-size:13px}
.gv-card small{color:var(--gray-500);font-size:11px}
.gv-card .line{height:9px;border-radius:999px;background:var(--gray-200);margin-top:9px}
.gv-card .line.gold{width:70%;background:linear-gradient(90deg,var(--gold-500),var(--yellow-400))}
.gv-card .line.blue{width:90%;background:linear-gradient(90deg,var(--blue-600),#a7d1ff)}
@keyframes melt{50%{transform:scaleY(1.04);box-shadow:0 0 44px rgba(255,214,107,.9)}}
@media (max-width:768px){.gold-visual{transform:scale(.7);transform-origin:bottom right;width:143%}.gv-card{top:-10px}}

/* ---------- by price */
.by-price{display:grid;grid-template-columns:repeat(4,1fr);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md)}
.bp-tile{position:relative;height:400px;overflow:hidden;display:block;background:var(--gray-100);transition:transform .3s}
.bp-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bp-tile:hover{z-index:2}
.bp-tile:hover img{transform:scale(1.05)}
.bp-cap{position:absolute;right:16px;bottom:16px;left:16px;padding:10px 14px;border-radius:16px;background:rgba(7,29,58,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.18)}
.bp-cap h3{font-size:18px;font-weight:900}
.bp-cap span{font-size:15px;color:#fff5d7}
@media (max-width:768px){
  .by-price-wrap{padding-inline:0}
  .by-price{grid-template-columns:repeat(2,1fr);border-radius:0;box-shadow:none}
  .bp-tile{height:224px}
  .bp-cap{right:8px;left:8px;bottom:8px;padding:8px 10px}
  .bp-cap h3{font-size:14px}.bp-cap span{font-size:12px}
}

/* ---------- promo cards */
.promos{display:flex;justify-content:center;gap:12px}
.promo{flex:0 1 360px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px;transition:transform .25s,box-shadow .25s;box-shadow:var(--shadow-sm)}
.promo:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.promo-copy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding-right:12px;flex:1;max-width:150px}
.promo-copy h3{font-size:18px;font-weight:900;color:var(--blue-900);line-height:1.5}
.promo-copy span{font-size:13px;color:var(--gray-500);line-height:1.7}
.promo-copy .btn{min-height:34px;padding:6px 12px;font-size:12px;border-radius:12px;width:100%}
.promo-img{width:156px;height:206px;border-radius:18px;overflow:hidden;background:var(--gray-100);flex-shrink:0}
.promo-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:1024px){
  .promos{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 12px}
  .promo{flex:0 0 min(420px,86vw);scroll-snap-align:start}
}
@media (max-width:576px){.promo-img{width:138px;height:182px}}

/* ---------- brands */
.brands-swiper .swiper-slide{width:328px}
.brand-card{display:block;position:relative;height:128px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--gray-200);background:linear-gradient(135deg,var(--blue-50),var(--yellow-100));transition:transform .3s}
.brand-card:hover{transform:scale(1.02)}
.brand-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center}
.brand-ov{position:absolute;inset:0;padding:10px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.brand-name{background:#fff;border-radius:8px;height:26px;padding:0 10px;font-size:12px;font-weight:800;color:var(--blue-900);display:inline-flex;align-items:center;box-shadow:var(--shadow-sm)}
.brand-logo{width:48px;height:48px;background:#fff;border-radius:10px;display:grid;place-items:center;padding:6px;box-shadow:var(--shadow-sm)}
.brand-logo img{width:100%;height:100%;object-fit:contain}
.brands-swiper .swiper-pagination{position:static;margin-top:16px;display:none}
@media (max-width:768px){.brands-swiper .swiper-slide{width:280px}.brands-swiper .swiper-pagination{display:block}}

/* ---------- customers */
.customers-sec{padding-block:80px;background:radial-gradient(circle at 12% 20%,rgba(255,214,107,.22),transparent 30%),radial-gradient(circle at 88% 80%,rgba(11,111,251,.10),transparent 32%),linear-gradient(180deg,var(--blue-50),#fff)}
.cust-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px;align-items:center}
.cust-grid>*{min-width:0}
.mosaic{display:grid;grid-template-columns:repeat(3,162px);grid-template-rows:repeat(3,162px);gap:16px;max-width:518px}
.mosaic button{border-radius:var(--radius-md);overflow:hidden;background:var(--gray-100);transition:transform .2s,box-shadow .2s;padding:0}
.mosaic button:hover{transform:scale(1.02);box-shadow:0 8px 16px rgba(11,111,251,.18)}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic .m-main{grid-column:2 / span 2;grid-row:1 / span 2;border-radius:var(--radius-lg);border:4px solid #fff;box-shadow:0 0 0 2px var(--gold-500),var(--shadow-md)}
.mosaic .m-main img{animation:fadeIn .5s ease}
.reviews{position:relative;min-width:0;overflow:hidden}
.reviews .swiper{height:460px}
.reviews .swiper-slide{height:auto}
.reviews::after{content:"";position:absolute;bottom:0;right:0;left:0;height:100px;background:linear-gradient(180deg,rgba(244,249,255,0),#fbfdff);pointer-events:none;z-index:2}
.rv-card{background:#fff;border-radius:var(--radius-md);padding:16px;box-shadow:0 4px 12px rgba(16,24,40,.04);border:1px solid var(--gray-200);margin-right:36px;display:flex;flex-direction:column;gap:10px;min-height:164px}
.rv-top{display:flex;align-items:center;gap:12px}
.rv-top img{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--gray-100);flex-shrink:0}
.rv-meta{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.rv-meta a{font-size:14px;font-weight:800;color:var(--blue-900)}
.rv-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--gray-500)}
.rv-text{font-size:14px;line-height:1.8;color:var(--gray-700)}
.reviews .swiper-pagination-vertical{right:0!important;left:auto!important}
.reviews .swiper-pagination-vertical .swiper-pagination-bullet{width:8px;height:8px;background:var(--blue-100);opacity:1;margin:5px 0!important;display:block}
.reviews .swiper-pagination-vertical .swiper-pagination-bullet-active{height:20px;width:8px;background:var(--blue-700)}
.cust-more{margin-top:16px;padding-right:36px}
.cust-more .btn{width:100%}
@media (max-width:1024px){.mosaic{grid-template-columns:repeat(3,1fr);grid-template-rows:none;max-width:520px;width:100%;margin-inline:auto;gap:10px}.mosaic button{aspect-ratio:1}}
@media (max-width:768px){
  .customers-sec{padding-block:40px}
  .cust-grid{grid-template-columns:minmax(0,1fr)}
  .reviews .swiper{height:auto}
  .rv-card{margin-right:0}
  .reviews::after{display:none}
  .reviews .swiper-pagination{position:static;margin-top:12px}
}

/* ---------- licences */
.lic-sec{background:linear-gradient(180deg,#fffdf6,var(--yellow-100) 140%)}
.lic{display:flex;gap:64px;align-items:center}
.lic-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:32px}
.lic-tabs{display:flex;gap:16px;overflow-x:auto}
.lic-tab{position:relative;overflow:hidden;padding:11px 16px;border-radius:14px;border:1px solid var(--gray-200);background:#fff;color:var(--gray-700);font-size:15px;font-weight:600;white-space:nowrap;transition:border-color .2s,color .2s}
.lic-tab span{position:relative;z-index:1}
.lic-tab i{position:absolute;inset:0;width:0;background:var(--blue-100)}
.lic-tab.is-active{border-color:var(--blue-500);color:var(--blue-700);font-weight:800}
.lic-tab.is-active i{animation:licFill 5s linear forwards}
.lic-tab.is-paused i{animation-play-state:paused}
@keyframes licFill{to{width:100%}}
.lic-text{font-size:15px;color:var(--gray-700);text-align:justify;line-height:2.1;min-height:130px}
.lic-img{flex:0 0 min(600px,48%);aspect-ratio:1.4;border-radius:var(--radius-xl);overflow:hidden;background:#fff;box-shadow:var(--shadow-md);border:1px solid var(--gray-200)}
.lic-img img{width:100%;height:100%;object-fit:contain}
@media (max-width:1024px){.lic{flex-direction:column;gap:32px;align-items:stretch}.lic-tab{padding:8px 16px;font-size:14px}.lic-img{flex-basis:auto;width:100%;max-width:600px;margin-inline:auto}}

/* ---------- section spacing on home */
.home-sec{padding-block:60px}
@media (max-width:768px){.home-sec{padding-block:24px}}

/* licence image is pending: keep the blurred certificate filling the frame */
.lic-img.pending>.pending-body{width:100%;height:100%}
/* an issued licence (Enamad) swaps the blurred placeholder for its real seal */
.lic-seal{display:none}
.lic-img.is-issued>.pending-body,.lic-img.is-issued>.pending-label{display:none}
.lic-img.is-issued>.lic-seal,.lic-seal>a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.lic-seal img{width:100%;height:50%}