/* ============================================================
   Part 15 — shared page chrome
   ------------------------------------------------------------
   The storefront's newer surfaces (the product card, the product page, the form
   system) all agree on one look: a soft white panel, ~20px radius, a hairline
   teal-tinted border and a wide, low-opacity shadow. The older content pages —
   about, contact, articles, news, journals, آموزش‌ها, FAQ, complaints, privacy,
   brands, compare, favourites, search — never got there. They render flat white
   rectangles with 2px grey box-shadows, sharp 3–7px corners, and each one pulls
   itself 12px UP under the header with an inline `margin-top:-12px`.

   This sheet is the bridge. It restyles the LEGACY class names those pages
   already use, so no page markup has to change:

       .color_tag      the single-panel content pages
       .box-comparis   the listing wrapper (articles/news/journals/compare)
       .news-box       the grid inside it
       .card-text      the long-form text panel
       .all            one card in a listing grid
       .addressbar_page  the breadcrumb bar (spacing only)

   Loads AFTER forms14.css and BEFORE @yield('css'), so a page that really needs
   something different can still override it.

   Also here, because both belong to "how every page behaves" rather than to one
   feature:
     * §1 the single canonical gap between the sticky header and the page body
     * §5 the 16px mobile control font that stops iOS zooming on focus
   ============================================================ */

/* ============================================================
   1. Top of the page
   ------------------------------------------------------------
   Every content page carried `style="margin-top:-12px"` on .body — a hand-tuned
   nudge from before the Part 9 sticky header existed. With the current header the
   breadcrumb bar ends up tucked under the floating nav pill (most visible on the
   login page, where the two overlap). The inline styles were removed from the
   templates; this is the one gap, applied everywhere.
   ============================================================ */
.f_body > .body{ padding-top:14px; }
@media(max-width:960px){ .f_body > .body{ padding-top:10px; } }

/* the breadcrumb already brings its own bottom margin; keep its top edge honest */
.addressbar_page{ margin-top:0; }
@media(max-width:960px){
  /* front.css adds margin-top:15px here for the old header; §1's padding covers it now */
  .addressbar_page{ margin-top:0; }
}

/* ============================================================
   2. Content panels
   ============================================================ */
.color_tag,
.box-comparis,
.card-text{
  border:1px solid rgba(18,86,74,.12);
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 42px -32px rgba(26,62,55,.42);
}
/* .card-text asks for 4rem of padding, which is a 64px inset on a phone */
.card-text{ padding:32px!important; }
.color_tag{ padding:24px; }
.box-comparis{ padding:20px 24px!important; margin:0 0 20px!important; }
.news-box{ margin-top:4px!important; padding:0!important; }

@media(max-width:640px){
  .color_tag{ padding:16px; border-radius:16px; }
  .card-text{ padding:18px!important; border-radius:16px; }
  .box-comparis{ padding:14px!important; border-radius:16px; }
}

/* long-form admin copy reads better with the storefront's own rhythm */
.color_tag p,.card-text p,.news-text{ color:var(--sd-ink); line-height:2; }
.color_tag h1,.card-text h1{ margin-top:0; }

/* ============================================================
   3. Listing cards (articles / news / journals / آموزش‌ها)
   ------------------------------------------------------------
   Same idiom as the product card: rounded plate, image on top, title bar under
   it, lift on hover. front.css draws these with a 0.5px silver border and square
   corners, and `.nwes_a` is absolutely nudged with `bottom:28px`, which overlaps
   the card below it on narrow screens.
   ============================================================ */
.div_all{ margin-bottom:22px; }
.all{
  display:flex; flex-direction:column;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(18,86,74,.12);
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 30px -26px rgba(26,62,55,.5);
  transition:transform .25s ease,box-shadow .25s ease;
}
.all:hover{
  border-radius:18px;
  transform:translateY(-4px);
  box-shadow:0 20px 38px -24px rgba(26,62,55,.55);
}
.all > a{ display:block; }
.div_titr{
  order:2;
  height:auto; line-height:1.7;
  padding:13px 14px 4px;
  background:transparent;
  text-align:right;
}
.div_titr > a,.div_titr a{
  display:block;
  color:var(--sd-ink);
  font-size:14px!important; font-weight:800;
}
.div_titr > a:hover{ color:var(--sd-teal-600); }
.img1{
  order:1;
  width:100%; height:210px;
  object-fit:cover;
  border-radius:17px 17px 0 0;
  background:var(--sd-teal-050);
}
.div_text{ order:3; height:auto; margin:0; }
/* the "read more" link becomes a normal in-flow footer row instead of a floated
   element pulled 28px up out of its own card */
.nwes_a{
  order:4;
  align-self:flex-start;
  position:static; float:none; bottom:auto;
  margin:6px 14px 14px;
  padding:6px 14px;
  border:1px solid var(--sd-teal-200);
  border-radius:100px;
  background:var(--sd-teal-050);
  color:var(--sd-teal-700);
  font-size:12px; font-weight:800;
}
.nwes_a:hover{
  border-color:var(--sd-teal-400);
  background:#fff;
  box-shadow:0 6px 14px -10px rgba(10,120,99,.7);
  color:var(--sd-teal-700)!important;
}
@media(max-width:640px){
  .img1{ height:170px; }
  .div_titr > a,.div_titr a{ font-size:13px!important; }
}

/* ============================================================
   3b. Legal / long-form pages (Part 15 / P15)
   ------------------------------------------------------------
   The terms page (and anything else built the same way). Numbered clause groups
   with real <ol> markup, a table of contents, and enough line-height that a wall
   of Persian legal text is actually readable.
   ============================================================ */
.sd15-legal{ max-width:900px; margin-inline:auto; }
.sd15-legal h1{ margin:0 0 6px; }
.sd15-legal-updated{
  margin:0 0 18px;
  color:var(--sd-muted);
  font-size:12px; font-weight:700;
}
.sd15-legal-updated > i{ color:var(--sd-teal-600); }
.sd15-legal-intro{
  margin:0 0 22px;
  padding:14px 16px;
  border-inline-start:3px solid var(--sd-teal-400);
  border-radius:0 12px 12px 0;
  background:var(--sd-teal-050);
  color:var(--sd-ink);
  font-size:13px; line-height:2.1; text-align:justify;
}

.sd15-legal-toc{
  margin:0 0 26px;
  padding:16px 18px;
  border:1px solid rgba(18,86,74,.12);
  border-radius:14px;
  background:#fbfdfc;
}
.sd15-legal-toc-title{
  margin-bottom:8px;
  color:var(--sd-ink);
  font-size:13px; font-weight:900;
}
.sd15-legal-toc ol{
  margin:0; padding-inline-start:20px;
  columns:2; column-gap:26px;
}
.sd15-legal-toc li{ margin-bottom:5px; break-inside:avoid; }
.sd15-legal-toc a{
  color:var(--sd-teal-700);
  font-size:12.5px; font-weight:700; text-decoration:none;
}
.sd15-legal-toc a:hover{ text-decoration:underline; }
@media(max-width:640px){ .sd15-legal-toc ol{ columns:1; } }

.sd15-legal-section{
  /* offset for the sticky header, so a #terms-N jump does not land under it */
  scroll-margin-top:120px;
  margin:0 0 24px;
}
.sd15-legal-section > h2{
  margin:0 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(18,86,74,.1);
  color:var(--sd-ink);
  font-size:16px!important; font-weight:900; line-height:1.7;
}
.sd15-legal-list{ margin:0; padding-inline-start:20px; }
.sd15-legal-list > li{
  margin-bottom:9px;
  color:var(--sd-ink);
  font-size:13px; line-height:2.1; text-align:justify;
}
.sd15-legal-list > li::marker{ color:var(--sd-teal-600); font-weight:800; }
.sd15-legal-rich{ font-size:13px; line-height:2.1; text-align:justify; }
.sd15-legal-rich img{ max-width:100%; height:auto; }
.sd15-legal-contact{
  margin:28px 0 0;
  padding-top:16px;
  border-top:1px solid rgba(18,86,74,.1);
  color:var(--sd-muted);
  font-size:12.5px; line-height:2;
}
.sd15-legal-contact a{ color:var(--sd-teal-600); font-weight:800; text-decoration:none; }
.sd15-legal-contact a:hover{ text-decoration:underline; }

/* ============================================================
   4. Footer — supplier call-to-action (Part 15 / P20)
   ------------------------------------------------------------
   Second .order card in the middle column, under the pre-order one. It inherits
   the card look from front.css; only the stacking rhythm is set here.
   ============================================================ */
.sd15-footer-supplier{ margin-top:14px; }
.sd15-footer-supplier > p{ margin-bottom:8px; }

/* ============================================================
   5. Login page (Part 15 / P17)
   ------------------------------------------------------------
   «مرا به خاطر بسپار» and «رمز عبورم را فراموش کرده‌ام» were two stacked
   full-width rows; they belong on one line, one at each edge. The row is a grid
   child of .sd-form-grid, so `.is-full` still makes it span both columns.
   ============================================================ */
.sd15-login-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  min-width:0;
}
.sd15-login-row.is-full{ grid-column:1 / -1; }
/* the checkbox field brings its own wrapper; stop it eating the whole row */
.sd15-login-row > .sd-form-field{ flex:0 1 auto; margin:0; }
.sd15-login-forgot{
  flex:0 0 auto;
  color:var(--sd-teal-600);
  font-size:12px; font-weight:800; text-decoration:none;
}
.sd15-login-forgot:hover{ color:var(--sd-teal-700); text-decoration:underline; }
/* the «هنوز حساب کاربری ندارید؟» line sat close enough to the ورود button to read
   as part of the action row */
.sd15-login-foot{ margin-top:26px; }

/* ============================================================
   6. Mobile: no zoom-on-focus (Part 15 / P21)
   ------------------------------------------------------------
   iOS Safari zooms the viewport whenever it focuses a control whose text renders
   below 16px — which is every control on this site (13px in the form system,
   11.5px in the search bar, 12–13px in the legacy uk-* inputs). The page then
   stays scaled, so the layout "changes size" as soon as you tap a field.

   16px is the documented threshold. The alternative — `maximum-scale=1,
   user-scalable=no` on the viewport — also blocks deliberate pinch-zoom, so it is
   not an option. The boxes keep their heights (they are set in px, not em), so
   only the glyphs grow, and on a phone that is a readability win anyway.

   `!important` because several legacy forms set font-size inline on the control.
   ============================================================ */
@media(max-width:900px){
  input[type=text],input[type=email],input[type=tel],input[type=number],
  input[type=password],input[type=search],input[type=url],input[type=date],
  select,textarea,
  .sd-form-control,
  .uk-input,.uk-select,.uk-textarea,.uk-search-input{
    font-size:16px!important;
  }
  /* the form system sizes its own controls off this variable; keep the two in step
     so hint/label proportions stay right */
  .sd-form{ --sdf-control-size:16px; }
}

/* ============================================================
   Part 16 / P26 — long-form content bodies read like a product description
   ------------------------------------------------------------
   The اخبار / مجلات / مقالات و آموزش detail pages render `clean_html_body(...)`
   straight into `.text_news_div` with no typographic rules of their own, so the
   pasted Word/WYSIWYG markup arrived with whatever font, size, colour and
   alignment the author's editor left on it — every article looked like a
   different site. The product page solved exactly this in products11.css
   (`.sd11-product-page .description`); these are the same rules, on the wrapper
   all four content templates already share, so nothing in the markup changes.

   `!important` for the same reason it is there in products11.css: the values it
   is overriding are INLINE attributes on the pasted elements, and nothing else
   outranks those.
   ============================================================ */
.text_news_div{
  color:var(--sd-ink);
  font-size:14px;
  line-height:2.1;
  /* Persian-first: RTL + right-aligned as a block, so a paragraph that opens with an
     English brand or model number still starts at the right edge. Inline Latin still
     renders left-to-right through the bidi algorithm. Replaces the old
     `text-align:justify`, which stretched short Persian lines into gappy rivers. */
  direction:rtl!important;
  text-align:right!important;
}
.text_news_div p,
.text_news_div span,
.text_news_div li,
.text_news_div td,
.text_news_div div{
  font-family:inherit!important;
  font-size:14px!important;
  color:var(--sd-ink)!important;
  line-height:2.1!important;
  background:transparent!important;
  direction:rtl!important;
  text-align:right!important;
}
.text_news_div h1,.text_news_div h2,.text_news_div h3,
.text_news_div h4,.text_news_div h5,.text_news_div 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;
}
.text_news_div a{ color:var(--sd-teal-700)!important; }
.text_news_div b,.text_news_div strong{ font-weight:800!important; }
.text_news_div img{
  display:block;
  max-width:min(100%,520px)!important;
  width:auto;
  height:auto!important;
  margin:10px auto;
  border-radius:14px;
}
.text_news_div video,
.text_news_div iframe{
  display:block;
  width:100%!important;
  max-width:600px;
  height:auto!important;
  aspect-ratio:16/9;
  margin:10px auto;
  border-radius:14px;
  background:#000;
}
/* the page title + its standfirst — one shape across article / news / journal /
   آموزش, which each used a different heading tag for the same thing */
.text_news_div > .title{ margin-bottom:18px!important; }
.text_news_div .sd-content-sub{
  margin:6px 0 0;
  color:var(--sd-muted);
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.9;
  text-align:right;
}
/* the hero image beside the copy — same 20px panel language as everything else */
.news-img img{
  width:100%;
  height:auto;
  border-radius:16px;
  object-fit:cover;
}
.news-img picture{ display:block; }

/* ============================================================
   Part 16 / P5 — mobile: shrink the PLACEHOLDER, not the field
   ------------------------------------------------------------
   §5 above forces every control to 16px on a phone because iOS Safari zooms the
   whole page when it focuses a control whose text renders below 16px. That is
   still true and must not be undone — but it also blew up every placeholder and
   piece of in-form guidance to 16px, which is why «جستجو در میان هزاران کالا...»
   no longer fit the header field and the hints under the register/pre-order
   inputs read like body copy.

   iOS makes the zoom decision from the INPUT's computed font-size, not the
   placeholder's, so styling ::placeholder separately keeps the field at 16px (no
   zoom, comfortable to type in) while the grey prompt sits back at a size that
   fits. The two ::placeholder blocks are split deliberately: a selector list
   containing a vendor pseudo-element that the browser does not recognise
   invalidates the WHOLE rule, so they cannot be merged.
   ============================================================ */
@media(max-width:900px){
  input::placeholder,
  textarea::placeholder{ font-size:13px!important; opacity:1; }
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder{ font-size:13px!important; }

  /* the header search field is the tightest one on the page */
  .sd9-search input::placeholder{ font-size:12px!important; }
  .sd9-search input::-webkit-input-placeholder{ font-size:12px!important; }

  /* guidance text — the hint under a field, the label's parenthetical, the card
     subtitle and the "starred fields are required" pill. None of these is a form
     CONTROL, so the 16px floor does not apply to them at all. */
  .sd-form{ --sdf-hint-size:10.5px; --sdf-label-size:12px; }
  .sd-form-sub{ font-size:11.5px; line-height:1.8; }
  .sd-form-note{ font-size:10.5px; padding:5px 10px; margin-top:10px; }
}

@media(max-width:400px){
  .sd9-search input::placeholder{ font-size:11px!important; }
  .sd9-search input::-webkit-input-placeholder{ font-size:11px!important; }
}

/* ============================================================
   Part 16 / P22 + P23 — the cart
   ============================================================ */

/* ---- quantity stepper (basket/partials/qty) ----
   Replaces two loose fa-*-circle glyphs with one bordered pill, so the control
   looks like the rest of the site's controls and — because the minus is disabled
   rather than removed at quantity 1 — keeps its width as the number changes. */
.sd16-qty{
  display:inline-flex;
  align-items:center;
  overflow:hidden;
  border:1px solid var(--sd-line);
  border-radius:100px;
  background:#fff;
  /* the number reads left-to-right inside an RTL row */
  direction:ltr;
}
.sd16-qty-btn{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  color:var(--sd-teal-600)!important;
  font-size:11px;
  background:transparent;
  transition:background .15s ease, color .15s ease;
}
.sd16-qty-btn:hover{ background:var(--sd-teal-050); color:var(--sd-teal-700)!important; }
.sd16-qty-btn.is-off{ color:var(--sd-line)!important; cursor:default; pointer-events:none; }
.sd16-qty-val{
  min-width:34px;
  padding:0 4px;
  border-inline:1px solid var(--sd-line);
  color:var(--sd-ink);
  font-family:iransans2, inherit;
  font-size:13px; font-weight:800; line-height:30px;
  text-align:center;
}

/* ---- the checkout buttons ----
   .btn_basket was a hard 135px box (95px on a phone), so «مرحله بعدی ≫» did not
   fit and the chevrons were clipped straight off the end — which is why the
   next-step arrow appeared to be missing. Auto width, centred content, and the
   two chevrons sit inside the button with the label. */
.basket_page .btn_basket{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto!important;
  min-width:0;
  padding:10px 18px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}
.basket_page .btn_basket i{ font-size:13px; }
.basket_page .btn_basket:hover{
  background:var(--sd-teal-hover);
  box-shadow:0 10px 24px -12px rgba(14,138,114,.7);
}
.basket_page .btn_bas{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }

/* ---- payment-disabled panel ---- */
.sd16-paydown{
  margin-top:14px;
  padding:18px;
  border:1px solid rgba(201,138,30,.28);
  border-radius:18px;
  background:#fdf8ee;
}
.sd16-paydown-lead{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0 0 16px;
  color:#8a6d3b;
  font-size:13.5px;
  font-weight:700;
  line-height:2.1;
}
.sd16-paydown-lead i{ margin-top:6px; flex:0 0 auto; color:#c98a1e; }
.sd16-paydown-acts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;
}
.sd16-paydown-btn{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 14px;
  border:1px solid rgba(18,86,74,.12);
  border-radius:14px;
  background:#fff;
  color:var(--sd-ink)!important;
  font-size:13px;
  font-weight:800;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sd16-paydown-btn:hover{
  border-color:var(--sd-teal-400);
  box-shadow:0 12px 26px -18px rgba(26,62,55,.6);
  transform:translateY(-1px);
}
.sd16-paydown-btn > i{ flex:0 0 auto; font-size:22px; }
.sd16-paydown-btn > span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sd16-paydown-btn small{
  color:var(--sd-muted);
  font-size:10.5px;
  font-weight:600;
  line-height:1.7;
}
.sd16-paydown-btn.is-wa > i{ color:#25d366; }
/* Part 16 / P22b: `.is-tg` removed with the Telegram button — see basket/baskets. */
.sd16-paydown-btn.is-call > i{ color:var(--sd-teal-600); }
.sd16-paydown-foot{ margin-top:14px; text-align:center; }
.sd16-paydown-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--sd-teal-700)!important;
  font-size:12.5px;
  font-weight:800;
}
.sd16-paydown-link:hover{ text-decoration:underline; }

@media(max-width:640px){
  .sd16-paydown{ padding:14px; border-radius:16px; }
  .sd16-paydown-lead{ font-size:12.5px; line-height:2; }
  .sd16-paydown-acts{ grid-template-columns:minmax(0,1fr); }
  .basket_page .btn_bas{ justify-content:stretch; }
  .basket_page .btn_basket{ flex:1 1 auto; }
}

/* ============================================================
   Part 16 / P20 — the two panels (account + supplier)
   ------------------------------------------------------------
   Both rails are built from the same legacy class names (.colr-box / .col-r-box /
   .hade / .hade1 / .menu), which still carried the 2019 look: 2px grey box-shadows,
   sharp corners, a #1abc9c active state written inline on every link, and UIkit's
   default button chrome underneath. These restyle those SAME class names into the
   surface language Parts 9–15 established — white panel, 20px radius, hairline
   teal-tinted border, wide soft shadow — so neither panel's markup had to be
   rebuilt and both now match the storefront around them.
   Loaded after front.css, so no !important is needed for the overrides.
   ============================================================ */
.colr-box{
  margin:12px 0;
  background:transparent;
}
.col-r-box{
  padding-bottom:10px;
  border:1px solid rgba(18,86,74,.12);
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 42px -32px rgba(26,62,55,.42);
  overflow:hidden;
}
/* the tinted strip behind the avatar, and the section header below it */
.col-r .hade,
.hade1{
  height:56px;
  background:var(--sd-teal-050);
  border-bottom:1px solid rgba(18,86,74,.1);
  line-height:56px;
  margin:0;
}
.hade1 > p{
  margin:0;
  color:var(--sd-teal-700);
  font-size:14px;
  font-weight:800;
}
.hade-img{
  width:76px;
  height:76px;
  top:16px;
  border:3px solid #fff;
  border-radius:50%;
  background:#fff;
  object-fit:cover;
  box-shadow:0 8px 20px -12px rgba(26,62,55,.5);
}
.col-r-box > p{
  margin-top:30px!important;
  color:var(--sd-ink);
  font-size:13px;
  font-weight:800;
  word-break:break-word;
  unicode-bidi:isolate;
}

/* the two square actions under the avatar (تغییر پسورد / خروج) */
.col-r-box > a.dropdown-item.off{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:66px;
  border:0;
  border-top:1px solid rgba(18,86,74,.1);
  border-radius:0;
  background:#fff;
  color:var(--sd-muted);
  font-size:11.5px;
  transition:background .16s ease, color .16s ease;
}
.col-r-box > a.dropdown-item.off:hover{ background:var(--sd-teal-050); color:var(--sd-teal-700); }
.col-r-box > a.dropdown-item.off i{ font-size:16px; color:var(--sd-teal-600); }
.col-r-box > a.dropdown-item.off .p2{ margin:0; font-size:11.5px; font-weight:700; }

/* the menu rows */
.col-r-box .menu{
  display:flex;
  align-items:center;
  gap:10px;
  width:calc(100% - 16px);
  margin:2px 8px;
  padding:10px 12px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--sd-ink);
  font-size:13px;
  font-weight:700;
  line-height:1.9;
  text-align:right;
  transition:background .16s ease, color .16s ease;
}
.col-r-box .menu > i{
  flex:0 0 auto;
  width:18px;
  color:var(--sd-teal-600);
  font-size:14px;
  text-align:center;
  transition:color .16s ease;
}
.col-r-box .menu:hover{ background:var(--sd-teal-050); color:var(--sd-teal-700); }
/* Part 16 / P20: was `style="background:#1abc9c;color:#fff"` inline on every link. */
.col-r-box .menu.is-active{
  background:var(--sd-teal-600);
  color:#fff;
}
.col-r-box .menu.is-active > i{ color:#fff; }
.col-r-box .menu.is-active:hover{ background:var(--sd-teal-hover); color:#fff; }

/* unread count — the cart badge's shape and colours, not black-on-red */
.sd16-panel-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  margin-inline-start:auto;
  padding:0 6px;
  border-radius:100px;
  background:var(--sd-red-500);
  color:#fff;
  font-family:iransans2, inherit;
  font-size:11px;
  font-weight:800;
  line-height:20px;
}
.col-r-box .menu.is-active .sd16-panel-badge{ background:#fff; color:var(--sd-red-700); }

/* the content column's own panels, so the right-hand side matches the rail */
.box-content{
  margin-top:12px;
  padding:0;
  border:1px solid rgba(18,86,74,.12);
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 42px -32px rgba(26,62,55,.42);
  overflow:hidden;
}
.hade2{
  height:56px;
  background:var(--sd-teal-050);
  border-bottom:1px solid rgba(18,86,74,.1);
  line-height:56px;
  color:var(--sd-teal-700);
  font-size:14px;
  font-weight:800;
}
.box-content-body{ padding:16px; }

/* the supplier panel's shortcut cards, wherever they still appear on its pages */
.right-culom{
  border:1px solid rgba(18,86,74,.12);
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 34px -30px rgba(26,62,55,.45);
  line-height:2.4;
}
.green-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border-radius:100px;
  background:var(--sd-teal-600);
  font-size:12.5px;
  font-weight:800;
}
.green-btn:hover{
  background:var(--sd-teal-hover);
  box-shadow:0 10px 22px -12px rgba(14,138,114,.7);
}

@media(max-width:960px){
  .col-r-box{ border-radius:16px; }
  .col-r-box .menu{ font-size:12.5px; }
}