/* «پیشنهاد شگفت‌انگیز»: home block, all-offers page, product box, panel form. */
.of{--of-brand:var(--color-brand-700,#0f766e);--of-dark:var(--color-brand-900,#134e4a);--of-hot:#f97316;--of-t:6s;margin-bottom:48px;border:1px solid #e7e5e4;border-radius:20px;background:#fff;overflow:hidden}
.of-body{display:grid;grid-template-columns:1fr}
@media (min-width:1024px){.of-body{grid-template-columns:minmax(0,1fr) 260px}.of-body.is-single{grid-template-columns:1fr}}
.of-stage{display:grid;padding:20px}
@media (min-width:768px){.of-stage{padding:24px 28px}}
.of-slide{grid-area:1/1;display:grid;gap:20px;align-items:center;opacity:0;visibility:hidden;transform:translateX(-28px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.75,.25,1),visibility 0s linear .7s}
.of-slide.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .1s,transform .7s cubic-bezier(.2,.75,.25,1) .1s,visibility 0s}
/* Image, then name and highlights, then the deal (prices + countdown); RTL puts the image at the start (right). */
.of-slide{grid-template-areas:"img" "info" "deal"}
.of-slide>.of-img{grid-area:img;justify-self:center}
.of-info{grid-area:info}
.of-deal{grid-area:deal}
@media (min-width:768px){.of-slide{grid-template-columns:200px minmax(0,1fr);grid-template-areas:"img info" "img deal";gap:16px 28px}.of-slide>.of-img{align-self:center}.of-deal{justify-items:start}}
@media (min-width:1180px){.of-slide{grid-template-columns:220px minmax(0,1fr) 340px;grid-template-areas:"img info deal";gap:28px}.of-deal{justify-items:center}}
.of-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;font-size:15px;font-weight:800;color:var(--of-hot)}
.of-kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--of-hot);box-shadow:0 0 0 0 rgba(249,115,22,.5);animation:of-ping 1.8s ease-out infinite}
@keyframes of-ping{70%{box-shadow:0 0 0 10px rgba(249,115,22,0)}100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}}
.of-name{font-size:20px;font-weight:800;line-height:1.7;color:#1c1917}
.of-name a:hover{color:var(--of-brand)}
.of-lines{margin-top:12px;display:grid;gap:8px;font-size:14px;line-height:1.8;color:#57534e}
.of-lines li{position:relative;padding-inline-start:24px}
.of-lines li::before{content:"";position:absolute;inset-inline-start:2px;top:8px;width:12px;height:7px;border-inline-start:2.5px solid #16a34a;border-bottom:2.5px solid #16a34a;transform:rotate(-45deg) scaleX(-1)}
.of-deal{display:grid;justify-items:center;gap:10px;text-align:center}
.of-img{position:relative;display:block;width:100%;max-width:260px;aspect-ratio:1;border-radius:16px;background:#fafaf9;overflow:hidden}
.of-img img{width:100%;height:100%;object-fit:contain;transform:scale(.92);transition:transform 1s cubic-bezier(.2,.75,.25,1)}
.of-slide.is-on .of-img img{transform:none}
.of-img:hover img{transform:scale(1.04)}
.of-pct{position:absolute;top:10px;inset-inline-start:10px;padding:3px 10px;border-radius:999px;background:#dc2626;color:#fff;font-size:13px;font-weight:800}
.of-prices{display:grid;justify-items:stretch;width:100%;max-width:340px}
.of-old{position:relative;display:block;text-decoration:none;height:40px;padding:0 14px;background:#2e2e2f;font-size:22px;font-weight:800;line-height:42px;color:#e5e5e5;text-align:center}
.of-old::before{content:"";position:absolute;left:10%;right:10%;top:19px;z-index:2;border-bottom:2px solid #eee;transform:rotate(-7deg)}
/* Navy notch with a white rim along its lower edges, cut into the orange bar. */
.of-old::after{content:"";position:absolute;top:100%;left:2em;z-index:3;border:12px solid transparent;border-bottom:0;border-top-color:#0a2357}
.of-new{position:relative;display:block;border-top:3px solid #fff;height:40px;padding:0 20px 0 8px;background:#fe9206;font-size:22px;font-weight:800;line-height:42px;color:#fff;text-align:center}
.of-new::before{content:"";position:absolute;top:-3px;left:calc(2em - 4px);z-index:1;border:16px solid transparent;border-bottom:0;border-top-color:#fff}
.of-new small{margin-inline-start:10px;font-size:15px;font-weight:400}
.of-prices small,.of-card-p small,.of-pd-p small{font-size:12px;font-weight:500}
.of-cd-l{margin-top:6px;font-size:14px;font-weight:700;line-height:30px;color:#000}
@media (max-width:767px){.of-cd-l{padding:0 10px;background:red;color:#fff;font-weight:400}}
/* Countdown, as on qmita: split-flap cards. The old top half falls (0.5s, linear), then the new bottom half
   swings down (0.5s more); gradient shades darken the halves that turn away and fade from the ones that arrive. */
.of-cd{display:flex;align-items:flex-start;justify-content:center;gap:0}
.of-u{display:grid;justify-items:center;gap:2px}
.of-u small{font-size:14px;line-height:30px;color:#000;opacity:.7}
.of-dg{display:flex}
.fl{--fl-w:31px;--fl-h:44px;--fl-fs:34px;position:relative;display:block;width:var(--fl-w);height:var(--fl-h);margin:2px;border-radius:6px;background:#333;perspective:200px}
.fl>span{position:absolute;left:0;right:0;height:50%;overflow:hidden;outline:1px solid transparent;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fl-top,.fl-ft{top:0;transform-origin:50% 100%}
.fl-bot,.fl-fb{bottom:0;transform-origin:50% 0;border-radius:0 0 6px 6px}
.fl b{position:absolute;left:0;right:0;height:200%;display:grid;place-items:center;border-radius:6px;background:#333;font-size:var(--fl-fs);font-weight:800;line-height:1;color:#ccc;text-shadow:0 1px 2px #000;font-feature-settings:"ss01" 0;padding-top:.17em;box-sizing:border-box}
.fl b.is-z{padding-top:0}
/* Vazirmatn draws Persian digits ~0.085em (3px at 34px) above the middle of the line; the padding re-centres them in the card. ۰ already sits in the middle. */
.fl-top b,.fl-ft b{top:0}
.fl-bot b,.fl-fb b{bottom:0}
.fl-ft,.fl-fb{z-index:2;visibility:hidden}
.fl>span::after{content:"";position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}
.fl-top::after,.fl-ft::after{background:linear-gradient(to bottom,rgba(0,0,0,.1),#000)}
.fl-bot::after,.fl-fb::after{background:linear-gradient(to bottom,#000,rgba(0,0,0,.1))}
.fl.is-flip .fl-ft{visibility:visible;animation:fl-down .5s linear both}
.fl.is-flip .fl-ft::after{animation:fl-show .5s linear both}
.fl.is-flip .fl-bot::after{animation:fl-show .5s linear both}
.fl.is-flip .fl-top::after{animation:fl-hide .5s linear .3s both}
.fl.is-flip .fl-fb{visibility:visible;animation:fl-up .5s linear .5s both}
.fl.is-flip .fl-fb::after{animation:fl-hide .5s linear .2s both}
@keyframes fl-down{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
@keyframes fl-up{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
@keyframes fl-show{from{opacity:0}to{opacity:1}}
@keyframes fl-hide{from{opacity:1}to{opacity:0}}
.of-sep{position:relative;display:block;width:5px;height:48px}
.of-sep i{position:absolute;left:.5px;width:4px;height:4px;border-radius:50%;background:#323434;box-shadow:0 0 5px rgba(0,0,0,.5)}
.of-sep i:first-child{top:16px}
.of-sep i:last-child{top:29px}
.of-cd.is-sm .fl{--fl-w:26px;--fl-h:36px;--fl-fs:28px}
.of-cd.is-sm .of-sep{height:40px}
.of-cd.is-sm .of-sep i:first-child{top:13px}
.of-cd.is-sm .of-sep i:last-child{top:24px}
.of-cd.is-sm .of-u small{font-size:12px;line-height:22px}
/* Side list: the shown offer is a dark tab pointing at it; its bar fills until the next one. */
.of-side{display:flex;flex-direction:column;border-top:1px solid #e7e5e4;background:#fafaf9}
@media (min-width:1024px){.of-side{border-top:0;border-inline-start:1px solid #e7e5e4}.is-single>.of-side{border-inline-start:0;border-top:1px solid #e7e5e4}}
.of-list{display:flex;flex:1;overflow-x:auto;scrollbar-width:none}
.of-list::-webkit-scrollbar{display:none}
@media (min-width:1024px){.of-list{flex-direction:column;overflow:visible}}
.of-list li{flex:0 0 auto}
@media (min-width:1024px){.of-list li{flex:1 1 0;min-height:48px;display:flex}}
.of-go{position:relative;display:flex;align-items:center;width:100%;max-width:220px;height:100%;padding:12px 16px;border-inline-end:1px solid #e7e5e4;font-size:13px;line-height:1.7;color:#44403c;text-align:start;transition:background-color .35s ease,color .35s ease}
@media (min-width:1024px){.of-go{max-width:none;border-inline-end:0;border-bottom:1px solid #e7e5e4}}
.of-go span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.of-go:hover{background:#f0fdfa;color:var(--of-brand)}
.of-go.is-on{background:var(--of-dark);color:#fff}
@media (min-width:1024px){.of-go::before{content:"";position:absolute;top:0;bottom:0;right:-14px;width:14px;background:var(--of-dark);clip-path:polygon(0 0,100% 50%,0 100%);opacity:0;transform:translateX(-6px);transition:opacity .35s ease,transform .35s ease}.of-go.is-on::before{opacity:1;transform:none}}
.of-bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--of-hot);transform:scaleX(0);transform-origin:right}
.of-go.is-on .of-bar{animation:of-run var(--of-t) linear forwards}
.of:hover .of-go.is-on .of-bar,.of:focus-within .of-go.is-on .of-bar{animation-play-state:paused}
@keyframes of-run{to{transform:scaleX(1)}}
.of-all{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:#f5f5f4;font-size:14px;font-weight:800;color:var(--of-dark);transition:background-color .25s}
.of-all b{font-size:20px;line-height:1;color:var(--of-brand)}
.of-all:hover{background:#e7e5e4}
/* All-offers page */
.of-page-h{margin-bottom:20px}
.of-page-h h1{font-size:24px;font-weight:800;color:#1c1917}
.of-page-h p{margin-top:4px;font-size:14px;color:#78716c}
.of-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:48px}
@media (min-width:768px){.of-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1024px){.of-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.of-card{display:grid;align-content:start;gap:10px;padding:12px;border:1px solid #e7e5e4;border-radius:16px;background:#fff;transition:box-shadow .3s ease,transform .3s ease,opacity .5s ease}
.of-card:hover{box-shadow:0 10px 30px -12px rgba(0,0,0,.18);transform:translateY(-2px)}
.of-card.is-over{opacity:0;transform:scale(.96)}
.of-card-img{position:relative;display:block;aspect-ratio:1;border-radius:12px;background:#fafaf9;overflow:hidden}
.of-card-img img{width:100%;height:100%;object-fit:contain;transition:transform .5s ease}
.of-card:hover .of-card-img img{transform:scale(1.04)}
.of-card-t{font-size:14px;font-weight:700;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.6em}
.of-card-t a:hover{color:var(--color-brand-700,#0f766e)}
.of-card-p,.of-pd-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.of-card-p s,.of-pd-p s{font-size:13px;color:#a8a29e}
.of-card-p b{font-size:16px;font-weight:800;color:#ea580c}
.of-none{padding:40px 16px;margin-bottom:48px;border:1px dashed #d6d3d1;border-radius:16px;text-align:center;color:#78716c}
/* Product page */
.of-pd{display:grid;justify-items:start;gap:8px;margin-bottom:12px;padding:14px;border-radius:14px;background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;transition:opacity .5s ease}
.of-pd.is-over{opacity:0}
.of-pd-top{display:flex;align-items:center;gap:8px}
.of-pd-k{font-size:14px;font-weight:800;color:#c2410c}
.of-pd .of-pct{position:static}
.of-pd-p b{font-size:22px;font-weight:800;color:#ea580c}
.of-pd .of-cd-l{margin-top:0}
/* Panel form */
.of-form{display:grid;gap:14px}
@media (min-width:640px){.of-form{grid-template-columns:1fr 1fr}.of-wide{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.of-slide,.of-slide.is-on,.of-img img,.of-go,.of-go::before,.of-card{transition:none}.fl.is-flip .fl-ft,.fl.is-flip .fl-fb,.fl.is-flip>span::after,.of-kicker::before{animation:none}}
.of-org .of{margin-top:24px;margin-bottom:24px}
/* Product page: prices on the start side, the countdown beside them — one compact band instead of a tall empty box. */
.of-pd{grid-template-columns:minmax(0,1fr);align-items:center;gap:12px 20px;padding:12px 14px}
.of-pd-main{display:grid;gap:10px;width:100%}
.of-pd-main .of-prices{max-width:none}
.of-pd-cd{display:grid;justify-items:center;gap:6px;justify-self:center}
.of-pd-cd .of-cd-l{margin:0}
@media (min-width:640px){.of-pd{grid-template-columns:minmax(0,1fr) auto}.of-pd-cd{padding-inline-start:20px;border-inline-start:1px dashed #fdba74}}
/* All-offers page: a full-width green band (like the home sliders) with small, tight cards. */
.of-band{margin-bottom:40px;padding:24px 0 28px;background:#04342c;box-shadow:0 0 0 100vmax #04342c;clip-path:inset(0 -100vmax)}
.of-band .of-page-h{margin-bottom:16px}
.of-band .of-page-h h1{font-size:20px;color:#fff}
.of-band .of-page-h p{color:#9fe1cb;font-size:13px}
.of-band .of-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:0}
@media (min-width:768px){.of-band .of-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media (min-width:1024px){.of-band .of-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1280px){.of-band .of-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.of-band .of-card{gap:6px;padding:8px 8px 10px;border-color:transparent;border-radius:14px}
.of-band .of-card-img{border-radius:10px}
.of-band .of-pct{top:6px;inset-inline-start:6px;padding:1px 8px;font-size:12px}
.of-band .of-card-t{font-size:13px;line-height:1.7;min-height:3.4em}
.of-band .of-card-p{gap:2px 8px}
.of-band .of-card-p b{font-size:15px;font-weight:800;color:#ea580c}
.of-band .of-card-p s{font-size:12px}
.of-band .of-none{color:#d1fae5}
.of-band .of-cd.is-sm .fl{--fl-w:14px;--fl-h:21px;--fl-fs:15px;margin:1px;border-radius:4px}
.of-band .of-cd.is-sm .of-sep{width:4px;height:23px}
.of-band .of-cd.is-sm .of-sep i{width:3px;height:3px}
.of-band .of-cd.is-sm .of-sep i:first-child{top:7px}
.of-band .of-cd.is-sm .of-sep i:last-child{top:13px}
.of-band .of-cd.is-sm .of-u small{font-size:10px;line-height:18px}
@media (min-width:768px){.of-band .of-cd.is-sm .fl{--fl-w:19px;--fl-h:27px;--fl-fs:20px;border-radius:5px}.of-band .of-cd.is-sm .of-sep{width:5px;height:31px}.of-band .of-cd.is-sm .of-sep i{width:4px;height:4px}.of-band .of-cd.is-sm .of-sep i:first-child{top:9px}.of-band .of-cd.is-sm .of-sep i:last-child{top:18px}.of-band .of-cd.is-sm .of-u small{font-size:11px}}
.of-band .fl b{border-radius:4px}.of-band .fl-bot,.of-band .fl-fb{border-radius:0 0 4px 4px}
/* All-offers card price: a warm tag — old price and the saving on top, the offer price large below. */
.ocp{display:grid;gap:2px;padding:7px 10px 6px;border-radius:10px;background:linear-gradient(135deg,#fff7ed,#ffedd5);border-inline-start:3px solid #f97316}
.ocp-top{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.ocp-top s{font-size:12px;color:#a8a29e;text-decoration-color:#ef4444;text-decoration-thickness:1.5px;white-space:nowrap}
.ocp-save{overflow:hidden;padding:1px 7px;border-radius:999px;background:#dcfce7;color:#15803d;font-size:10.5px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.ocp-new{display:flex;align-items:baseline;gap:4px;font-size:18px;font-weight:900;line-height:1.5;color:#c2410c;letter-spacing:-.3px}
.ocp-new small{font-size:11px;font-weight:500;color:#9a3412}
.of-band .of-card-t{min-height:0}
.of-sp{margin-bottom:0}.of-sp+.of-band{margin-top:16px}

/* Inside an article (narrow column): never the three-column desktop row; image beside the name, the deal under it. */
@media (min-width:768px){.of-org .of-slide{grid-template-columns:200px minmax(0,1fr);grid-template-areas:"img info" "img deal";gap:14px 28px}.of-org .of-deal{justify-items:start;text-align:start}.of-org .of-name{font-size:18px}.of-org .of-lines{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px}.of-org .of-prices{max-width:320px}}

/* Supplier page (full width): image | name and highlights | the deal in its own warm panel — one balanced row, no empty half. */
.of-sup .of{background:linear-gradient(180deg,#fff 0%,#fffbf5 100%)}
.of-sup .of-deal{width:100%;padding:16px 14px 12px;border-radius:16px;background:linear-gradient(160deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;justify-items:center;text-align:center}
.of-sup .of-prices{max-width:340px;margin-inline:auto;border-radius:10px;overflow:hidden}
.of-sup .of-cd-l{margin-top:4px;font-size:13px;color:#9a3412}
.of-sup .of-lines{grid-template-columns:1fr}
.of-sup .of-lines li{padding:6px 30px 6px 10px;border-radius:10px;background:#f0fdf4}
.of-sup .of-lines li::before{inset-inline-start:10px;top:13px}
.of-sup .of-img{border:1px solid #f5f5f4;box-shadow:0 12px 30px -18px rgba(0,0,0,.35)}
@media (min-width:768px){.of-org.of-sup .of-deal{justify-items:center;text-align:center}.of-org.of-sup .of-lines{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
.of-org.of-sup .of-slide{grid-template-columns:220px minmax(0,1fr) minmax(320px,380px);grid-template-areas:"img info deal";gap:28px;align-items:center}
.of-org.of-sup .of-lines{grid-template-columns:1fr;max-width:420px}
.of-org.of-sup .of-name{font-size:20px}
}
@media (max-width:767px){.of-sup .of-cd-l,.of-pd .of-cd-l,.of-pd-cd .of-cd-l{color:#fff}}