/* ============================================================
   Part 11 / P1 — single product page
   Scoped to .sd11-product-page. Restyles the existing markup (no logic/JS
   changes) into the storefront's glass/teal system using the --sd-* tokens.
   Loads AFTER front.css so it wins on the shared legacy classes.
   ============================================================ */
.sd11-product-page{
  --sd11-panel:rgba(255,255,255,.82);
  --sd11-border:rgba(18,86,74,.12);
  --sd11-shadow:0 18px 42px -32px rgba(26,62,55,.42);
  /* height of the buy-box CTA on desktop; the stock-status pill matches it so the two
     sit on one line rather than one looking half-height next to the other */
  --sd11-cta-h:47px;
  /* P13: photo stage height + the hero's top inset. .discript carries 25px of padding, so
     the image column needs the same inset for the photo top to sit level with the <h1>
     (item 5), and the desktop action rail is sized/placed off the same two values (item 3). */
  --sd11-photo-h:360px;
  --sd11-hero-top:25px;
}
@media(min-width:1400px){.body.sd11-product-page{width:min(1500px,calc(100vw - 40px));}}
.sd11-product-page .addressbar_page{margin:10px 0 14px;padding:7px 13px;border-radius:10px;}
.sd11-product-page .addressbar_page>a{font-size:12px;}

/* ---- hero grid: gallery + info ---- */
.sd11-product-page .sengel-discription{position:relative;align-items:flex-start;margin:0;border:1px solid var(--sd11-border);border-radius:22px;box-shadow:var(--sd11-shadow);}
.sd11-product-page .discript{min-width:0;}

/* ---- title / subtitle / brand ---- */
/* SEO: the subtitle used to be an <h6> sharing the <h1>'s id. It is a <p class="sd11-product-subtitle">
   now (no duplicate id, no h1→h6 jump); these rules keep it pixel-identical. */
/* P13 (item 4): one descending scale down the hero — title, then the subtitle two steps
   below it, the brand+category row one step below that, and the rating one step below again.
   P13 (item 2): the vertical rhythm groups them — title/subtitle tight, brand/category tight,
   and a wider gap before the rating so the three blocks read as three. */
.sd11-product-page h1#name_product{margin:0 0 2px;color:var(--sd-ink);font-size:26px!important;font-weight:900;line-height:1.55;text-align:right;}
.sd11-product-page .sd11-product-subtitle{margin:0 0 14px;color:var(--sd-muted);font-size:12px!important;font-weight:600;line-height:1.8;text-align:right;}
.sd11-product-page .discript p{color:var(--sd-muted);}
/* brand + category row (pills) */
.sd11-product-page .sd11-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;}
.sd11-product-page .sd11-meta p{margin:0!important;font-size:11px!important;color:var(--sd-muted);}
.sd11-product-page .sd11-meta p{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.sd11-product-page .sd11-meta-link{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:100px;background:var(--sd-teal-050);color:var(--sd-teal-700)!important;font-size:11px!important;font-weight:800;text-decoration:none;transition:.18s;}
/* secondary categories (دسته بندی فرعی) — lighter so the main one still leads */
.sd11-product-page .sd11-meta-link.is-secondary{background:rgba(231,246,242,.5);color:var(--sd-muted)!important;font-weight:700;box-shadow:inset 0 0 0 1px rgba(18,86,74,.12);}
.sd11-product-page .sd11-meta-link.is-secondary:hover{background:var(--sd-teal-050);color:var(--sd-teal-700)!important;}

/* ---- horizontal scroll hint (items 2+4) ----
   A one-line swipe strip with a fading edge + a small chevron, so it's obvious there is
   more to the left. .sd-scrollhint marks the scroller; JS toggles .has-more* per side. */
.sd-scrollhint{position:relative;}
/* arrows replace the scrollbar entirely — hide it on the hinted strips */
.sd-scrollhint > .sd-scroll-strip{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.sd-scrollhint > .sd-scroll-strip::-webkit-scrollbar{display:none;height:0;}
.sd-scrollhint::before,.sd-scrollhint::after{content:"";position:absolute;top:0;bottom:0;width:42px;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:2;}
.sd-scrollhint::after{left:0;background:linear-gradient(to left,rgba(255,255,255,.95),rgba(255,255,255,0));}
.sd-scrollhint::before{right:0;background:linear-gradient(to right,rgba(255,255,255,.95),rgba(255,255,255,0));}
.sd-scrollhint.has-more-left::after{opacity:1;}
.sd-scrollhint.has-more-right::before{opacity:1;}
/* P12: circle removed — bare chevron. */
.sd-scroll-arrow{position:absolute;top:50%;z-index:3;display:none;align-items:center;justify-content:center;width:26px;height:26px;margin-top:-13px;border:0;background:none;color:var(--sd-ic,var(--sd-teal-600));font-size:24px;line-height:1;filter:drop-shadow(0 1px 2px rgba(255,255,255,.95));cursor:pointer;}
.sd-scroll-arrow.left{left:2px;}
.sd-scroll-arrow.right{right:2px;}
.sd-scrollhint.has-more-left > .sd-scroll-arrow.left,
.sd-scrollhint.has-more-right > .sd-scroll-arrow.right{display:flex;}
.sd-scroll-arrow::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;}
.sd-scroll-arrow.left::before{transform:rotate(45deg) translate(1px,-1px);}
.sd-scroll-arrow.right::before{transform:rotate(-135deg) translate(1px,-1px);}

/* category row: fixed label + scrolling pill strip (so the label never scrolls away and
   the arrow lines up with it) */
.sd11-product-page .sd11-meta-cats{display:flex!important;align-items:center;flex-wrap:nowrap!important;gap:8px;width:100%;min-width:0;}
/* P13 (item 2): front.css sizes bare <span>s at 13px, so this label rendered a step bigger
   than the "برند :" label beside it. Pin it to the row's own size. */
.sd11-product-page .sd11-meta-label{flex:0 0 auto;color:var(--sd-muted);font-size:11px!important;}
.sd11-product-page .sd11-cat-list{display:flex;align-items:center;gap:6px;min-width:0;}
.sd11-product-page .sd11-meta-cats .sd-scrollhint{flex:1 1 auto;min-width:0;}
.sd11-product-page .sd11-cat-list > *{flex:0 0 auto;}

/* "آخرین بروزرسانی قیمت" — quiet supporting line under the price */
.sd11-product-page .sd11-price-date{margin-top:8px!important;color:var(--sd-muted);font-size:12px!important;}
/* The date is a bidi trap: the Persian digits are EN-class but the "-" separators are
   ES-class, so inside the RTL paragraph the three groups get reordered right-to-left and
   ۱۴۰۵-۰۵-۰۳ rendered on screen as 03-05-1405 (day left, year right). Isolating the span
   as its own LTR run restores the intended reading: year left, month middle, day right. */
.sd11-product-page .sd11-price-date span{font-weight:700;direction:ltr;unicode-bidi:isolate;display:inline-block;}

/* item 6: model selector block — align with the other blocks and give it breathing room */
.sd11-product-page .sd11-model-block{margin-top:6px;padding-bottom:6px;}
.sd11-product-page .sd11-model-block > .uk-width-1-1{padding-right:0!important;}
.sd11-product-page .sd11-model-block .uk-width-1-2\@s{padding-right:0!important;margin-bottom:10px;}
.sd11-product-page .sd11-meta-link:hover{background:var(--sd-teal-100);}

/* ---- rating + tool icons row ---- */
/* P14: the rating joins the brand/category group instead of standing apart from it, so the
   hero reads as two blocks (title/subtitle, then brand+category+rating). UIkit's
   .uk-grid-margin puts 8px on the row that holds .stars — that has to go too. */
.sd11-product-page .discript > .uk-grid > div:has(.stars){margin-top:0!important;}
.sd11-product-page .stars{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px;}
/* P12: read order is label → stars. In RTL the first flex item sits on the right, and the
   markup puts the star <form> first, so the label ended up to the LEFT of the stars.
   Ordering the label first flips the pair without touching the markup (the rating JS
   rewrites #rates125's html, so it has to stay where it is in the DOM). */
.sd11-product-page .stars > #rates125{order:-1;}
/* the blade used to carry an inline `font-size:12px!important` here, which no stylesheet
   could beat — it is gone now, so this is the single source of truth for the rating line */
.sd11-product-page #rates125{margin:0!important;color:var(--sd-muted)!important;font-size:10px!important;}
/* action icons (comment / fav / compare / share) — uniform circles; on desktop a
   vertical rail floated over the right edge of the product image */
.sd11-product-page .sd11-actions{display:flex;align-items:center;gap:10px;}
/* P12: the 42px white circles are gone — share/compare/favourite are bare glyphs now,
   in the shared icon teal, with the same springy hover as the rest of the site. */
.sd11-product-page .sd11-actions>a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0!important;padding:0;border:0;background:none;color:var(--sd-ic,var(--sd-teal-600))!important;float:none!important;box-shadow:none;transition:transform .32s cubic-bezier(.34,1.56,.64,1),color .18s ease;}
.sd11-product-page .sd11-actions>a:hover{color:var(--sd-ic-hover,var(--sd-teal-hover))!important;transform:scale(1.14);}
.sd11-product-page .sd11-actions>a:active{transform:scale(1.05);}
/* P12: 34px was too loud for a rail that floats over the photo — the icons competed with
   the product. 26px still reads clearly at arm's length and leaves the photo the star. */
.sd11-product-page .sd11-actions>a i{font-size:26px!important;color:inherit!important;line-height:1;}
.sd11-product-page .sd11-actions>a .uk-icon{color:inherit;}
.sd11-product-page .sd11-actions i.fas.fa-heart{color:#e11d48!important;}
.sd11-product-page .sd11-actions-label{display:none;}
@media(min-width:960px){
  /* JS relocates the action rail into the image column.
     item 5: .discript has 25px of padding, so the photo needs the same top inset — without it
     the image started 25px ABOVE the product title. The rail is placed off the same inset.
     item 3: the rail spans the photo's full height with the icons spread down it, instead of
     being a short cluster pinned to the photo's midpoint. */
  .sd11-product-page .dis-img{position:relative;padding-right:64px;padding-top:var(--sd11-hero-top);}
  .sd11-product-page .dis-img > .sd11-actions{position:absolute;top:var(--sd11-hero-top);height:var(--sd11-photo-h);transform:none;right:10px;left:auto;z-index:6;flex-direction:column;justify-content:space-between;align-items:center;width:auto!important;margin:0;padding:0!important;}
  /* fallback if not yet relocated */
  .sd11-product-page .discript > .uk-grid > .sd11-actions{position:absolute;top:var(--sd11-hero-top);height:var(--sd11-photo-h);transform:none;right:26px;z-index:6;flex-direction:column;justify-content:space-between;align-items:center;width:auto!important;padding:0!important;}
}

/* item 2: tablet & below (<960) use the single-column mobile hero — the 1/3-width desktop
   side image was too small. Show the stacked mobile gallery; hide the desktop side column. */
@media(max-width:959px){
  .sd11-product-page .dis-img{display:none!important;}
  .sd11-product-page .discript{width:100%!important;}
  /* P12: the action rail is centred for the whole single-column hero, not just phones.
     It used to be centred only under 640px, so on tablet (641–959) the icons kept the
     desktop rail's right alignment while the photo below them was full width. */
  .sd11-product-page .sd11-actions{justify-content:center;}
  /* P13 (item 2): the rail now sits BETWEEN the photo and the thumbnail strip (JS moves it
     after #pic1001 and tags it .sd11-actions-strip). It matches the photo's width and the
     icons are spread evenly across it instead of huddling in the middle.
     Specificity has to match the `.discript > .uk-grid.uk-hidden@s > *` resets below. */
  .sd11-product-page .discript > .uk-grid > .sd11-actions.sd11-actions-strip{display:flex!important;justify-content:space-between;align-items:center;gap:0;width:100%!important;max-width:100%!important;margin:16px 0 0!important;padding:0 2px!important;}
  /* P15: the removed separator used to do the spacing here — the photo needs to stay off
     the rating line, so the gap it left behind becomes real margin. */
  .sd11-product-page .discript > .uk-grid.uk-hidden\@s{display:block!important;margin-top:28px;}
  .sd11-product-page .discript > .uk-grid.uk-hidden\@s > *{width:100%!important;padding-left:0!important;padding-right:0!important;}
  .sd11-product-page .discript > .uk-grid.uk-hidden\@s .tab-content{margin:0 auto!important;}
  /* P14: this separator (rating → photo) was the only .dis-border still drawn inside the
     hero on phones, and it rendered as a stray half-width rule. The hero card's own edges
     already do the dividing — keep it hidden like the rest. */
  .sd11-product-page .pro-large-img img{height:360px!important;}
  /* thumbnails as a horizontal touch strip below the image */
  .sd11-product-page #gal2{display:flex!important;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;direction:rtl;gap:12px;margin:16px 0 0!important;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:var(--sd-teal-400) rgba(18,86,74,.12);}
  .sd11-product-page #gal2 > li{flex:0 0 auto;}
}

/* ---- gallery: frameless image, part of the card background ---- */
.sd11-product-page .discript .tab-content,
.sd11-product-page .sengel-discription > div:last-child .tab-content{border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none;}
.sd11-product-page .tab-pane img,.sd11-product-page .tab-content img:not(.offer){border-radius:16px;}
/* rounded image stage with a faint tint so the letterbox area reads as intentional
   (items 5+6): the photo keeps its aspect (no stretch) but the box is a tidy rounded card */
.sd11-product-page .tab-content{position:relative;}
/* P13 (item 1): same trick the product card's .sd-plate uses — a flat plate colour plus
   `mix-blend-mode:multiply` on the photo, so a photo's own white/near-white backdrop
   dissolves into the plate instead of showing as a pale rectangle. The card's plate is
   teal; here the plate is plain white, so the photos read as cut-outs on the card. */
.sd11-product-page .pro-large-img{display:flex;align-items:center;justify-content:center;position:relative;border-radius:16px;overflow:hidden;background:#fff;}
/* photo keeps its aspect (contain, no crop); JS pins the "فروش ویژه" badge to the real
   rendered image corner so it never drifts into the letterbox area (sd11PlaceOffer) */
.sd11-product-page .pro-large-img img{width:100%!important;height:var(--sd11-photo-h)!important;object-fit:contain;border-radius:16px;mix-blend-mode:multiply;}
@media(max-width:640px){.sd11-product-page .pro-large-img img{height:300px!important;}}
/* item 5: pin the "special sale" badge to the box corner (was right:-9px overflow →
   drifted when the column resized); small inset keeps it hugging the rounded corner */
/* the "فروش ویژه" ribbon never sat well on the varied product photos — removed on request */
.sd11-product-page .offer{display:none!important;}
/* P13 (item 5): discount bubble on the photo, matching the product card's .sd-badge.sale.
   The card's near-white glass would vanish against this page's WHITE plate, so the fill is
   a soft red tint instead — same shape, same weight, still legible on a light photo. */
.sd11-product-page .tab-content .sd11-off-badge{position:absolute;top:14px;inset-inline-end:14px;z-index:4;display:inline-flex;align-items:center;padding:7px 14px;border:1px solid rgba(165,63,54,.22);border-radius:999px;background:linear-gradient(135deg,rgba(255,241,240,.97),rgba(253,226,223,.9));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 2px 4px rgba(255,255,255,.8),0 4px 12px rgba(26,62,55,.1);color:var(--sd-red-700);font-family:'iransans2',sans-serif;font-size:16px;font-weight:800;line-height:1;}
@media(max-width:640px){.sd11-product-page .tab-content .sd11-off-badge{top:10px;inset-inline-end:10px;padding:5px 11px;font-size:14px;}}
/* P15: the photo stage is much larger on desktop than on a card, so the bubble scales up with it */
@media(min-width:960px){.sd11-product-page .tab-content .sd11-off-badge{top:16px;inset-inline-end:16px;padding:9px 19px;font-size:21px;}}
/* thumbnail strip (#gal1) — NOT #dissss; that id is the tab-content switcher.
   Borderless, stacked from the right. */
/* margin needs !important — front.css has a global `* + ul{margin-top:0!important}` reset.
   #gal1 = desktop strip, #gal2 = mobile strip (same treatment). */
.sd11-product-page #gal1,.sd11-product-page #gal2{display:flex;flex-wrap:wrap;justify-content:flex-start;direction:rtl;gap:12px;margin:26px 0 0!important;padding:0;list-style:none;}
.sd11-product-page #gal1>li,.sd11-product-page #gal2>li{margin:0;padding:0!important;border:0!important;background:transparent;}
/* thumbnails get the same white plate + multiply so the strip matches the main stage */
.sd11-product-page #gal1>li,.sd11-product-page #gal2>li{background:#fff;border-radius:10px;}
.sd11-product-page #gal1 img,.sd11-product-page #gal2 img{display:block;width:64px!important;height:64px!important;object-fit:contain;border-radius:10px;opacity:.8;cursor:pointer;transition:.18s;mix-blend-mode:multiply;}
.sd11-product-page #gal1 img:hover,.sd11-product-page #gal2 img:hover{opacity:1;}

/* ---- buy box: price + CTA ---- */
/* the buy box carries its own border now — the old separator rules around it are noise */
.sd11-product-page .sengel-discription .dis-border{display:none;}
.sd11-product-page .dis-border{height:1px;margin:14px 0;background:linear-gradient(90deg,transparent,rgba(18,86,74,.14),transparent);border:0;}
.sd11-product-page #not_set_model,.sd11-product-page #set_model{align-items:center;margin:0;padding:18px 18px 20px;border:1px solid var(--sd11-border);border-radius:20px;background:var(--sd11-panel);box-shadow:var(--sd11-shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.sd11-product-page #not_set_model p{margin:0;}
/* price line ("قیمت : NUM تومان") */
.sd11-product-page .sd11-price-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;margin:0 0 4px!important;font-size:13px;color:var(--sd-muted);}
/* scope the BIG price to the buy box only — .numberPrice is also used by the product
   cards in the "محصولات مشابه" rail, which must keep the shared card price size */
/* the BIG number is ONLY the final price line (item 3.2) — the strikethrough and "سود شما"
   numbers stay small. Both buy-box variants: #not_set_model uses .sd11-price-line,
   #set_model uses #price_vip_0 / #price_user_0. */
.sd11-product-page .numberPrice{font-family:iransans2,inherit;direction:ltr;font-variant-numeric:tabular-nums;}
/* P13 (item 4): 32px is only affordable on a wide buy box. Between the 960px breakpoint and
   ~1200px the price column is narrow enough that "قیمت : NUM تومان" broke onto a second line,
   which looked broken. clamp() scales the number with the viewport so the line always fits,
   and the chip is nowrap so it can never wrap even if a price runs long. */
.sd11-product-page #not_set_model .sd11-price-line .numberPrice,
.sd11-product-page #set_model #price_vip_0,
.sd11-product-page #set_model #price_user_0{font-size:clamp(22px,2.15vw,32px)!important;font-weight:900;color:var(--sd-ink)!important;line-height:1.2;}
/* discount block (item 3.1 swap + 3.3 colour): reorder to strikethrough → سود شما → قیمت,
   and stop the pre-discount line (incl. "تومان") from being red */
.sd11-product-page #not_set_model > div:first-child,
.sd11-product-page #set_model > div:first-child{display:flex;flex-direction:column;align-items:flex-start;}
.sd11-product-page #not_set_model > div:first-child > *,
.sd11-product-page #set_model > div:first-child > *{order:9;width:100%;}
/* …except the stock-status pill: width:100% stretched its tinted background across the
   whole column, so "ناموجود" read as a banner rather than a chip. It hugs its own text
   and stands as tall as the CTA button beside it (--sd11-cta-h). */
.sd11-product-page #not_set_model > div:first-child > .ban_p,
.sd11-product-page #set_model > div:first-child > .ban_p{width:auto;align-items:center;padding:7px 16px;}
.sd11-product-page #not_set_model p:has(.price--line-through),
.sd11-product-page #set_model p:has(.price--line-through){order:1;color:var(--sd-muted)!important;}
.sd11-product-page #not_set_model .dis2:has(.numberPrice),
.sd11-product-page #set_model .dis2:has(.numberPrice){order:2;}
.sd11-product-page #not_set_model > div:first-child > .sd11-price-line,
.sd11-product-page #set_model > div:first-child > #price_vip_00,
.sd11-product-page #set_model > div:first-child > #price_user_00{order:3!important;}
/* front.css draws its own diagonal line via background-image — kill it, keep one clean strikethrough.
   item 3: pre-discount price sits size-wise BETWEEN "سود شما" (13px) and the final price (26px). */
.sd11-product-page .price--line-through{font-size:19px!important;font-weight:700;color:var(--sd-muted)!important;text-decoration:line-through;background-image:none!important;}

/* item 1: model selector (رنگ/سایز) — custom dropdown (JS builds it from the native
   <select> so set_model1/2 keep working). Neutral closed box; the OPEN list is rounded
   and glassy; options go green only on hover / when selected. */
.sd11-product-page .uk-width-1-2\@s > label{display:block;margin:0 2px 7px;color:var(--sd-muted);font-size:13px;font-weight:800;}
.sd11-product-page .sd11-cs-native{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0);}
.sd11-product-page .sd11-cs{position:relative;width:100%;}
.sd11-product-page .sd11-cs-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px 16px;border:1px solid rgba(18,86,74,.18);border-radius:14px;background:rgba(255,255,255,.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--sd-ink);font-family:inherit;font-size:14px;font-weight:700;text-align:right;cursor:pointer;box-shadow:0 10px 24px -18px rgba(26,62,55,.45);transition:border-color .18s ease,box-shadow .18s ease;}
.sd11-product-page .sd11-cs-btn::after{content:"";flex:0 0 auto;width:9px;height:9px;border-left:2px solid var(--sd-teal-600);border-bottom:2px solid var(--sd-teal-600);transform:translateY(-2px) rotate(-45deg);transition:transform .2s ease;}
.sd11-product-page .sd11-cs.is-open .sd11-cs-btn{border-color:var(--sd-teal-500);box-shadow:0 0 0 3px rgba(26,188,156,.18);}
.sd11-product-page .sd11-cs.is-open .sd11-cs-btn::after{transform:translateY(2px) rotate(135deg);}
/* P14: the open list is a plain white sheet now — the green fills on hover/selected read as
   heavy blocks against the rounded panel. Rows are separated by a hairline instead, and
   state is carried by colour/weight (plus a thin teal marker on the selected row). */
.sd11-product-page .sd11-cs-list{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;max-height:280px;overflow-y:auto;padding:4px 0;border:1px solid rgba(18,86,74,.14);border-radius:16px;background:#fff;box-shadow:0 24px 46px -22px rgba(26,62,55,.5);scrollbar-width:thin;scrollbar-color:var(--sd-teal-400) transparent;}
.sd11-product-page .sd11-cs-opt{position:relative;padding:12px 16px;border-bottom:1px solid rgba(18,86,74,.1);color:var(--sd-ink);font-size:14px;font-weight:600;cursor:pointer;transition:color .15s ease;}
.sd11-product-page .sd11-cs-opt:last-child{border-bottom:0;}
.sd11-product-page .sd11-cs-opt:hover{background:transparent;color:var(--sd-teal-700)!important;}
.sd11-product-page .sd11-cs-opt.is-selected{background:transparent;color:var(--sd-teal-700)!important;font-weight:800;}
/* selected marker: a short teal bar on the inline-start edge (right in RTL) */
.sd11-product-page .sd11-cs-opt.is-selected::before{content:"";position:absolute;top:10px;bottom:10px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--sd-teal-500);}
.sd11-product-page .uk-label{display:inline-block;padding:3px 9px;border-radius:8px;background:#e11d48;color:#fff;font-size:11px;font-weight:800;vertical-align:middle;}
/* status notes — plain teal text (the green pill moved off "سود شما" onto the final price) */
.sd11-product-page .dis1,.sd11-product-page .dis2{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:0;border-radius:0;background:transparent!important;color:var(--sd-teal-700)!important;font-size:13px!important;font-weight:700;line-height:1.7;}
/* green highlight now sits behind the final price (item: move bg from سود شما → قیمت) */
.sd11-product-page #not_set_model .sd11-price-line,
.sd11-product-page #set_model #price_vip_00,
.sd11-product-page #set_model #price_user_00{display:inline-flex!important;align-items:baseline;gap:4px 6px;margin-top:8px!important;padding:7px 14px!important;border-radius:12px;background:var(--sd-teal-050)!important;flex-wrap:nowrap;white-space:nowrap;}
/* P12: …but never override an explicit hide. set_model1()/set_model2() pick ONE of the two
   price paragraphs with jQuery .hide()/.show(), which writes inline display:none — and the
   !important above outranked it, so picking a model printed the price twice, the VIP line
   empty. This puts the inline hide back on top. */
.sd11-product-page #set_model #price_vip_00[style*="display: none"],
.sd11-product-page #set_model #price_user_00[style*="display: none"],
.sd11-product-page #not_set_model .sd11-price-line[style*="display: none"]{display:none!important;}
.sd11-product-page .dis1:empty{display:none;}
.sd11-product-page .dis1 .numberPrice,.sd11-product-page .dis2 .numberPrice{font-size:13px!important;color:inherit!important;font-weight:800;}
.sd11-product-page .ban_p{display:inline-flex;align-items:center;gap:7px;margin:4px 0!important;padding:7px 12px;border-radius:10px;background:rgba(225,29,72,.1);color:#e11d48!important;font-size:13px;font-weight:800;line-height:1.7;}

/* CTA button (add to basket / pre-order / contact) */
.sd11-product-page .btn_basket{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:0;padding:14px 18px;border:0;border-radius:14px;background:var(--sd-teal-600);color:#fff!important;font-family:inherit;font-size:16px!important;font-weight:800;text-align:center;box-shadow:0 12px 22px -14px rgba(10,120,99,.9);transition:background .2s ease,transform .2s ease,box-shadow .2s ease;}
.sd11-product-page .btn_basket:hover{background:var(--sd-teal-hover);transform:translateY(-1px);}
.sd11-product-page .btn_basket i{font-size:16px;}
.sd11-product-page #not_set_model .uk-text-left,.sd11-product-page #set_model .uk-text-left{padding:10px!important;}
/* desktop: compact CTA button, more room for the price/notes column */
@media(min-width:960px){
  /* P15: the label must never wrap. A second line grew the button, which then no longer
     matched the price chip's height. nowrap keeps it on one line; min-width yields when the
     column is narrower than 175px; and sd11FitCta() steps the font down if it still spills. */
  .sd11-product-page #not_set_model .btn_basket,.sd11-product-page #set_model .btn_basket{display:inline-flex;width:auto;min-width:min(175px,100%);max-width:100%;padding:13px clamp(14px,1.9vw,26px);font-size:15px!important;min-height:var(--sd11-cta-h);white-space:nowrap;}
  .sd11-product-page #not_set_model>div[class*="uk-width-1-2"]:not(.uk-text-left),
  .sd11-product-page #set_model>div[class*="uk-width-1-2"]:not(.uk-text-left){width:58%;}
  /* The CTA column is `.uk-text-left`, which parked the button against the far left edge
     of the buy box and left a hole between it and the price. In RTL the button belongs
     next to the price it acts on, so it moves to the right edge of its own column —
     the 10px column padding is the "small gap". */
  .sd11-product-page #not_set_model>div[class*="uk-width-1-2"].uk-text-left,
  .sd11-product-page #set_model>div[class*="uk-width-1-2"].uk-text-left{width:42%;text-align:right!important;}
}
/* P15: on a narrow desktop the 58/42 split left the CTA column too tight for
   "تماس با شیوادنت" — the price column has slack there, so even the split out a little. */
@media(min-width:960px) and (max-width:1279px){
  .sd11-product-page #not_set_model>div[class*="uk-width-1-2"]:not(.uk-text-left),
  .sd11-product-page #set_model>div[class*="uk-width-1-2"]:not(.uk-text-left){width:54%;}
  .sd11-product-page #not_set_model>div[class*="uk-width-1-2"].uk-text-left,
  .sd11-product-page #set_model>div[class*="uk-width-1-2"].uk-text-left{width:46%;}
}
@media(min-width:960px){
  /* the status pill sits beside the CTA on this breakpoint, so give it the same height */
  .sd11-product-page #not_set_model .ban_p,
  .sd11-product-page #set_model .ban_p{min-height:var(--sd11-cta-h);}
  /* P14: same treatment for the price-less note ("برای اطلاع از قیمت تماس بگیرید"). It is one
     text line pinned to the top of its column, so a 47px CTA beside it could not be centred
     on it without hanging above the buy box — matching heights lines them up by construction.
     :only-child keeps this off the .dis2 notes that accompany a price ("سود شما", etc.). */
  .sd11-product-page #not_set_model > div:not(.uk-text-left) > .dis2:only-child,
  .sd11-product-page #set_model > div:not(.uk-text-left) > .dis2:only-child{min-height:var(--sd11-cta-h);}
  /* P13 (item 6): the CTA is lined up with the green price chip by measurement
     (sd11AlignCta), which writes a padding-top on this column — so the column has to hang
     from the top of the buy box. With the old `align-items:center` the measurement fed back
     into the centring and never settled. */
  .sd11-product-page #not_set_model,
  .sd11-product-page #set_model{align-items:flex-start;}
}

/* ---- seller banner ("آیا این کالا را برای فروش دارید؟") ---- */
.sd11-product-page .uk-card-default{margin-top:24px!important;border:1px solid var(--sd11-border);border-radius:18px;background:var(--sd11-panel);box-shadow:var(--sd11-shadow);}
.sd11-product-page .sd11-sell-link{display:inline-flex;align-items:center;gap:7px;float:left;padding:9px 16px;border:1px solid var(--sd-teal-400);border-radius:100px;background:#fff;color:var(--sd-teal-700)!important;font-size:13px!important;font-weight:800;transition:.18s;}
.sd11-product-page .sd11-sell-link:hover{background:var(--sd-teal-050);}
.sd11-product-page .sd11-sell-link .uk-icon{margin-left:4px!important;}

/* ---- tabs (توضیحات / مشخصات / نظرات) ---- */
.sd11-product-page .tabssec{margin-top:24px;padding:4px 18px 18px;border:1px solid var(--sd11-border);border-radius:20px;background:var(--sd11-panel);box-shadow:var(--sd11-shadow);}
/* ============ shared tab component — reusable site-wide (item 9) ============
   Add class="sd-tabs" to any `<ul uk-tab>` to adopt this design. Defined here (loaded on
   every page) so editing it once restyles every tab bar that opts in. */
.sd-tabs{margin:0!important;border-bottom:1px solid rgba(18,86,74,.1);}
.sd-tabs::before{border-bottom:0!important;}
/* P12: UIkit puts 20px of inline padding on every `.uk-tab > *`, and our own <a> already
   carries its padding — so each gap between two labels was a-padding + 20 + a-padding.
   The <a> owns the spacing here; the list item contributes nothing. */
.sd-tabs>*{padding-right:0!important;padding-left:0!important;}
.sd-tabs>*>a{padding:14px 16px 11px!important;border-right:0!important;border-radius:10px 10px 0 0;color:var(--sd-muted)!important;font-size:15px!important;font-weight:700;white-space:nowrap;transition:color .18s ease,background .18s ease;}
.sd-tabs>*>a:hover{color:var(--sd-ink)!important;background:rgba(231,246,242,.55);text-decoration:none;}
.sd-tabs.sd-tabs>.uk-active>a{width:auto!important;color:var(--sd-teal-700)!important;background:transparent;border-bottom:2px solid var(--sd-teal-600)!important;}
/* tab panels — page-level style gives li 80px side padding; keep it modest inside the panel */
.sd11-product-page #dissss>li{padding:14px 8px!important;}

/* panel titles — small heading + a short teal underline so the section is obvious */
.sd11-panel-title{position:relative;margin:4px 0 16px!important;padding:0 0 10px;color:var(--sd-ink);font-size:15px!important;font-weight:900;text-align:right;}
.sd11-panel-title::after{content:"";position:absolute;bottom:0;right:0;width:38px;height:3px;border-radius:3px;background:var(--sd-teal-400);}

/* the tab label already names the section, so hide the in-panel title in single-tab view */
.sd11-product-page #dissss:not(.sd11-overview-on) .sd11-panel-title{display:none;}

/* "نمای کلی" overview — reveal every non-empty section stacked; each keeps its own
   title + "مشاهده بیشتر". Empty sections (no comments / no extra info) stay hidden. */
.sd11-product-page #dissss.sd11-overview-on > li.sd11-overview-panel{display:none!important;}
/* stacked sections: only the teal heading underline separates them — no extra top rules,
   and generous space ABOVE each heading (except the first, which sits tight to the tabs) */
.sd11-product-page #dissss.sd11-overview-on > li:not(.sd11-overview-panel):not(.sd11-empty){display:block!important;padding:0!important;border-top:0!important;}
/* section spacing lives on the heading margin (no divider rules); the first visible
   section sits tight to the tab bar — sibling selector outranks the general one */
.sd11-product-page #dissss.sd11-overview-on > li:not(.sd11-overview-panel) .sd11-panel-title{margin-top:30px!important;}
/* the first stacked section (توضیحات) needs no heading — the tab bar sits right above it */
.sd11-product-page #dissss.sd11-overview-on > li.sd11-overview-panel + li > .sd11-panel-title{display:none!important;}
/* in overview the title IS the section header: larger, bold, full-width underline */
.sd11-product-page #dissss.sd11-overview-on .sd11-panel-title{margin:0 0 18px!important;padding:0 0 12px;font-size:18px!important;font-weight:900;border-bottom:2px solid var(--sd-teal-400);}
.sd11-product-page #dissss.sd11-overview-on .sd11-panel-title::after{display:none;}

/* admin-authored rich text arrives with pasted fonts/sizes/colors — force-unify it
   with the rest of the page (font, size, color, line-height) */
.sd11-product-page .infos,.sd11-product-page .description{color:var(--sd-ink);font-size:14px;line-height:2.1;}
.sd11-product-page .infos p,.sd11-product-page .infos span,.sd11-product-page .infos li,.sd11-product-page .infos td,.sd11-product-page .infos div,
.sd11-product-page .description p,.sd11-product-page .description span,.sd11-product-page .description li,.sd11-product-page .description td,.sd11-product-page .description div{font-family:inherit!important;font-size:14px!important;color:var(--sd-ink)!important;line-height:2.1!important;background:transparent!important;}
/* admin content is Persian-first (RTL): force the "Word workflow" — RTL direction + right
   align on the whole block, so a line that starts with an English word/model number still
   sits on the right. Inline English still renders left-to-right via the bidi algorithm. */
.sd11-product-page .infos,.sd11-product-page .description{direction:rtl!important;text-align:right!important;}
.sd11-product-page .infos p,.sd11-product-page .infos div,.sd11-product-page .infos li,.sd11-product-page .infos span,.sd11-product-page .infos td,
.sd11-product-page .description p,.sd11-product-page .description div,.sd11-product-page .description li,.sd11-product-page .description span,.sd11-product-page .description td{direction:rtl!important;text-align:right!important;}
.sd11-product-page .infos h1,.sd11-product-page .infos h2,.sd11-product-page .infos h3,.sd11-product-page .infos h4,.sd11-product-page .infos h5,.sd11-product-page .infos h6,
.sd11-product-page .description h1,.sd11-product-page .description h2,.sd11-product-page .description h3,.sd11-product-page .description h4,.sd11-product-page .description h5,.sd11-product-page .description h6{margin:16px 0 6px!important;font-family:inherit!important;font-size:15px!important;font-weight:800!important;color:var(--sd-ink)!important;background:transparent!important;direction:rtl!important;text-align:right!important;}
.sd11-product-page .infos a,.sd11-product-page .description a{color:var(--sd-teal-700)!important;}
.sd11-product-page .infos b,.sd11-product-page .infos strong,.sd11-product-page .description b,.sd11-product-page .description strong{font-weight:800!important;}
/* item 9: description images — capped and centered on desktop, never stretched */
.sd11-product-page .infos img,.sd11-product-page .description img{display:block;max-width:min(100%,520px)!important;width:auto;height:auto!important;margin:10px auto;border-radius:14px;}
/* item 8: video/embed — capped width + real aspect ratio instead of a giant panel-wide box */
.sd11-product-page .tabssec video{display:block;width:100%!important;max-width:600px;height:auto!important;aspect-ratio:16/9;margin:10px auto;border-radius:14px;background:#000;}
.sd11-product-page .h_iframe-aparat_embed_frame{max-width:600px;margin:10px auto;border-radius:14px;overflow:hidden;}
/* article/catalogue download link (moved out of the hero into the توضیحات tab) */
.sd11-product-page .sd11-download{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:11px 18px;border:1px solid var(--sd-teal-400);border-radius:12px;background:var(--sd-teal-050);color:var(--sd-teal-700)!important;font-size:13px;font-weight:800;text-decoration:none;transition:.18s;}
.sd11-product-page .sd11-download:hover{background:var(--sd-teal-100);}
.sd11-product-page .sd11-download i{font-size:15px;}

/* specs table — flat & simple: label (th) / value (td) rows, faint zebra, no boxes */
.sd11-product-page .sd11-specs{width:100%;margin:0;border:0!important;background:transparent;border-collapse:collapse;box-shadow:none!important;}
/* item 7: on wide screens cap the table so the zebra rows don't stretch edge-to-edge */
@media(min-width:960px){.sd11-product-page .sd11-specs{max-width:640px;margin-right:4px;}}
.sd11-product-page .sd11-specs tr{border:0!important;}
.sd11-product-page .sd11-specs th,.sd11-product-page .sd11-specs td{padding:11px 12px!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;font-size:13px!important;line-height:1.9;text-align:right!important;vertical-align:top;}
.sd11-product-page .sd11-specs th{width:40%;color:var(--sd-muted);font-weight:700;}
.sd11-product-page .sd11-specs td{color:var(--sd-ink);font-weight:600;}
.sd11-product-page .sd11-specs tbody tr{background:transparent!important;}
.sd11-product-page .sd11-specs tbody tr:nth-of-type(even){background:rgba(231,246,242,.5)!important;border-radius:8px;}

/* ---- "show more" collapsible for long tab panels (JS adds .sd11-collapsed) ---- */
.sd11-collapsible{position:relative;overflow:hidden;transition:max-height .3s ease;}
.sd11-collapsible.sd11-collapsed{max-height:var(--sd11-clamp,320px);}
.sd11-collapsible.sd11-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(to top,var(--sd11-panel),rgba(255,255,255,0));pointer-events:none;}
.sd11-more-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin:10px 0 2px;padding:10px;border:1px solid var(--sd11-border);border-radius:12px;background:#fff;color:var(--sd-teal-700);font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:.18s;}
.sd11-more-btn:hover{background:var(--sd-teal-050);border-color:var(--sd-teal-400);}
.sd11-more-btn::after{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg);transition:transform .2s;}
.sd11-more-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(135deg);}

/* ---- comments ---- */
/* P14: the "افزودن نظر" button sat in a .uk-text-left cell, which parked it on the far
   left edge of the panel. It is the panel's only call to action — centre it. */
.sd11-product-page .commentsec .uk-text-left{text-align:center!important;}
.sd11-product-page .commentsec .btn_basket{display:inline-flex;width:auto;padding:10px 18px;font-size:14px!important;}
.sd11-product-page .uk-comment{padding:16px!important;border:1px solid var(--sd11-border)!important;border-radius:16px;background:#fff!important;box-shadow:none!important;}
/* P12: the tinted 52px avatar disc is gone — the glyph itself is 52px now, in line
   with every other icon on the site. Colour is the shared --sd-ic token. */
.sd11-product-page .uk-comment .fa-user-edit{display:flex;align-items:center;justify-content:center;margin-left:6px!important;color:var(--sd-ic,var(--sd-teal-600));font-size:52px!important;line-height:1;}
.sd11-product-page .uk-comment-title{color:var(--sd-ink);font-size:14px!important;font-weight:800;}
.sd11-product-page .uk-comment-meta{color:var(--sd-muted);font-size:11px!important;}
.sd11-product-page .uk-comment-body{color:var(--sd-ink);font-size:13px;line-height:1.9;}
/* admin reply block (inline-styled wrapper) */
.sd11-product-page .uk-comment>div[style]>div{border:1px solid rgba(18,86,74,.1);border-radius:12px;background:#f6faf9!important;}

@media(max-width:640px){
  /* tighter shell: the card and the info column both carried 25px padding (50px of
     dead space per side) — collapse to one modest layer */
  .sd11-product-page .sengel-discription{padding:14px 12px!important;border-radius:18px;}
  .sd11-product-page .discript{padding:4px!important;}
  .sd11-product-page .sengel-discription>.uk-grid{margin-top:6px;}
  .sd11-product-page h1#name_product{margin-bottom:4px;font-size:20px!important;}
  .sd11-product-page .sd11-product-subtitle{margin-bottom:8px;font-size:11px!important;}
  .sd11-product-page .sd11-meta{gap:6px 14px;}
  /* item 5: tighter spacing on phones (the centring itself now lives at <960) */
  .sd11-product-page .sd11-actions{gap:8px;padding-top:6px!important;}
  /* photo stage: less empty air around the image */
  .sd11-product-page .pro-large-img img{height:250px!important;}
  /* breathing room between the action icons row and the photo */
  .sd11-product-page .discript>.uk-grid.uk-hidden\@s{margin-top:28px!important;display:block!important;}
  /* stack: image full width, thumbnails BELOW it (uk-grid used to float them beside
     the photo on wider phones) — and kill the one-sided gutter that shoved it left */
  .sd11-product-page .discript>.uk-grid.uk-hidden\@s>*{width:100%!important;max-width:100%!important;margin:0!important;padding-left:0!important;padding-right:0!important;}
  .sd11-product-page .discript>.uk-grid.uk-hidden\@s .tab-content{margin:0 auto!important;}
  /* mobile thumbnails: horizontal touch strip — no wrap, momentum scroll, snap,
     comfortable 58px tap targets, breathing room before the buy box below */
  .sd11-product-page #gal2{flex-wrap:nowrap;overflow-x:auto;margin:14px 0 20px!important;padding:2px 0 6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .sd11-product-page #gal2::-webkit-scrollbar{display:none;}
  .sd11-product-page #gal2>li{flex:0 0 auto;scroll-snap-align:start;}
  .sd11-product-page #gal2 img{width:58px!important;height:58px!important;opacity:1;}
  /* buy box */
  .sd11-product-page #not_set_model,.sd11-product-page #set_model{padding:13px;border-radius:16px;}
  .sd11-product-page #not_set_model>div,.sd11-product-page #set_model>div{padding:6px!important;}
  /* same one-line guarantee on phones — a 7-figure price at a flat 26px overflowed a 360px screen */
  .sd11-product-page #not_set_model .sd11-price-line .numberPrice,
  .sd11-product-page #set_model #price_vip_0,
  .sd11-product-page #set_model #price_user_0{font-size:clamp(19px,6.1vw,26px)!important;}
  .sd11-product-page .btn_basket{padding:12px 16px;font-size:15px!important;}
  .sd11-product-page #gal1 img{width:52px!important;height:52px!important;}
  .sd11-product-page .tabssec{margin-top:16px;padding:2px 10px 12px;border-radius:16px;}
  /* tabs become a compact horizontal strip you can swipe left/right */
  /* the swipe hint (fade + arrow) replaces the scrollbar */
  /* shared .sd-tabs: horizontal swipe strip with a slim scroll hint on touch screens */
  .sd-tabs{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;margin:0 -10px 2px;padding:0 10px;}
  .sd-tabs::-webkit-scrollbar{display:none;height:0;}
  .sd-tabs.sd-tabs>*{flex:0 0 auto;width:auto!important;}
  .sd-tabs.sd-tabs>.uk-active>a{width:auto!important;}
  .sd-tabs>*>a{padding:12px 13px 10px!important;font-size:13px!important;}
  .sd11-product-page #dissss.sd11-overview-on .sd11-panel-title{font-size:16px!important;}
  .sd11-product-page .uk-card-default{margin-top:16px!important;padding:16px 14px!important;}
  .sd11-product-page #dissss>li{padding:12px 4px!important;}
  .sd11-product-page .sd11-sell-link{float:none;margin-top:8px;}
}
/* ---- typography/color harmonization inside the hero card ---- */
.sd11-product-page #rates125{font-family:inherit!important;}

/* ---- lightbox (replaces the old hover magnifier) ---- */
.sd11-product-page .pro-large-img img,.sd11-product-page .infos img,.sd11-product-page .description img{cursor:zoom-in;}
.sd11-lightbox{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;background:rgba(15,25,22,.88);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:zoom-out;}
.sd11-lightbox img{max-width:92vw;max-height:92vh;border-radius:14px;background:#fff;cursor:zoom-in;transition:transform .25s ease;}
.sd11-lightbox img.is-zoomed{transform:scale(2.2);cursor:zoom-out;}
.sd11-lightbox-close{position:absolute;top:18px;right:18px;z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#1c2b27;font-size:26px;line-height:1;cursor:pointer;}
.sd11-lightbox-close:hover{background:#fff;}

@media(prefers-reduced-motion:reduce){
  .sd11-product-page .btn_basket,.sd11-product-page .coment{transition:none;}
  .sd11-product-page .btn_basket:hover{transform:none;}
  .sd11-lightbox img{transition:none;}
}