/* ============================================================
   Part 9 / S1 — new site header (pill-nav variant)
   Scoped .sd9-* classes; loaded AFTER front.css. Tokens --sd-*
   already come from front.css; only the two it lacks are added.
   ============================================================ */
/* Part 14 / P7: --sd-teal-100 and --sd-teal-hover moved to front.css :root, the token
   source of truth. Same values; this file still consumes them. */

.sd9-header a,.sd9-topbar a,.sd9-sidebar a,.sd9-mega a{text-decoration:none;}

/* ===== نوار تماس بالای هدر (سبز، ثابت) ===== */
/* Part 15 / P3 — «لبخند»: the bar's bottom edge bows gently downwards.
   The bar itself stays a plain 34px rectangle so the phone number can never be
   clipped by a curve; the arc is a pseudo-element hanging off the bottom edge,
   drawn with an ELLIPTICAL radius (50% horizontal / 100% vertical) so it is one
   wide, shallow smile across the viewport rather than two corner roundings.
   --sd9-smile is its depth and is read in three places — here, the header's top
   padding, and the hide transform — so the shape stays aligned from one value. */
.sd9-topbar{
  --sd9-smile:9px;
  position:fixed;top:0;left:0;right:0;z-index:9999;
  background:var(--sd-teal-600);color:#fff;height:34px;
  /* Part 16 / P3: the bar's visual mass is the box PLUS the smile hanging below it,
     so a line centred in the 34px box reads high — it sat against the top edge. The
     padding drops it into the middle of the composed shape. box-sizing is border-box
     site-wide, so the bar is still exactly 34px and the three places that hard-code
     that number (the header's top, margin-top and the hide transform) are untouched. */
  padding-top:var(--sd9-smile);
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:13px;font-weight:800;
  /* drop-shadow, not box-shadow: it follows the COMPOSED silhouette (bar + arc),
     where box-shadow would draw a straight line across the smile. */
  filter:drop-shadow(0 1px 4px rgba(14,138,114,.28));
  transition:transform .35s ease;
}
.sd9-topbar::after{
  content:"";
  position:absolute;top:100%;left:0;right:0;
  height:var(--sd9-smile);
  background:var(--sd-teal-600);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  pointer-events:none;
}
/* the arc lives BELOW the element box, so hiding needs the bar's own height plus
   the arc's depth — a plain -100% would leave the smile stuck at the top edge */
.sd9-topbar.sd9-off{transform:translateY(calc(-100% - var(--sd9-smile)));}
.sd9-topbar i{font-size:13px;}
.sd9-topbar-desk{display:flex;align-items:center;gap:6px;}
.sd9-topbar-desk .sd9-tel{font-family:iransans2;unicode-bidi:isolate;letter-spacing:.6px;color:#fff;}
/* hover colour must be set explicitly — front.css's global a:hover turns it blue,
   which isn't in the palette. Ink reads as black on the teal bar. */
.sd9-topbar-desk .sd9-tel:hover,
.sd9-topbar-mob:hover{color:var(--sd-ink);text-decoration:underline;}
.sd9-topbar-mob{display:none;}

/* ===== هدر اصلی (چسبان، شیشه‌ای) =====
   pointer-events:none روی خودِ هدر + auto روی فرزندان: وقتی نوارِ ناوبری با
   opacity مخفی می‌شود ارتفاعِ هدر ثابت می‌ماند (تا scroll-anchoring مرورگر
   scrollY را جابه‌جا نکند → لوپِ چشمک‌زدن)، ولی نوارِ شفافِ باقی‌مانده نباید
   کلیک‌های صفحه‌ی زیرش را بگیرد. */
/* Part 15 / P3: padding-top went 10px → 15px so the glass pill clears the 9px smile
   the topbar now hangs below itself instead of tucking under it. */
.sd9-header{position:sticky;top:34px;z-index:9000;margin-top:34px;padding:15px 18px 2px;transition:top .35s ease;pointer-events:none;}
.sd9-header.topbar-hidden{top:0;}
.sd9-header-top{position:relative;z-index:2;pointer-events:auto;}
.sd9-header-top{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,560px) minmax(max-content,1fr);align-items:center;gap:16px;
  background:rgba(255,255,255,.48);
  backdrop-filter:blur(24px) saturate(185%);-webkit-backdrop-filter:blur(24px) saturate(185%);
  border:1px solid rgba(255,255,255,.6);border-radius:18px;
  padding:8px 16px;box-shadow:0 6px 20px rgba(35,49,45,.07);
  transition:box-shadow .3s ease,padding .3s ease;
}
.sd9-header.scrolled .sd9-header-top{box-shadow:0 10px 30px rgba(35,49,45,.12);}
/* برگر + لوگو = ستونِ اول (برگر در دسکتاپ هم دیده می‌شود) */
.sd9-brand{display:flex;align-items:center;gap:10px;justify-self:start;min-width:0;}
.sd9-logo img{height:50px;width:auto;object-fit:contain;display:block;transition:height .3s ease;}
.sd9-header.scrolled .sd9-logo img{height:42px;}

/* سرچ بار (دقیقاً وسطِ صفحه) — position:relative برای دراپ‌داونِ اتوکامپلیت */
.sd9-search{
  position:relative;
  justify-self:center;width:100%;max-width:560px;display:flex;align-items:center;
  background:rgba(255,255,255,.82);border:1px solid var(--sd-line);border-radius:100px;
  padding:4px 14px 4px 5px;transition:.2s;margin:0;
}
.sd9-search:focus-within{z-index:3;border-color:var(--sd-teal-400);background:#fff;}
.sd9-search input{
  flex:1;border:none;background:transparent;padding:7px 10px;
  font-family:inherit;font-size:13px;color:var(--sd-ink);outline:none;min-width:0;
}
.sd9-search input::placeholder{color:var(--sd-muted);}
/* P12: the filled teal disc is gone — the magnifier itself is the button now.
   Colour + size + hover come from icons-theme.css. */
.sd9-search button{
  background:none;border:none;flex-shrink:0;
  width:36px;height:36px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:color .2s;padding:0;
}
.sd9-search button svg{width:16px;height:16px;}
/* دراپ‌داونِ اتوکامپلیت داخل نوار سرچ */
.sd9-search .autocomplete-items{top:calc(100% + 6px);left:8px;right:8px;z-index:4;border-radius:14px;overflow:hidden;}

/* اکشن‌های کاربر */
.sd9-actions{display:flex;align-items:center;gap:9px;flex-shrink:0;justify-self:end;}
/* هم‌ارتفاع با نوار سرچ (۴۶px). حالتِ عادی = سفید با آیکونِ مشکی؛ سبز فقط وقتی
   «وضعیت» دارد: کاربر وارد شده (is-auth) یا سبد پر است (has-items). */
.sd9-login,.sd9-cart{
  height:46px;color:var(--sd-ink);font-weight:700;font-size:13px;font-family:inherit;
  padding:0 16px;border-radius:100px;border:1px solid var(--sd-line);
  background:rgba(255,255,255,.6);transition:.2s;white-space:nowrap;cursor:pointer;
  display:flex;align-items:center;gap:7px;position:relative;
}
/* P14: the glyphs inherited the 13px label size and read as an afterthought next to it.
   Desktop only — .sd9-actions is display:none below 900px, where .sd9-micon takes over. */
.sd9-login>i,.sd9-cart>i{font-size:18px;line-height:1;}
.sd9-login:hover,.sd9-cart:hover{color:var(--sd-teal-600);border-color:var(--sd-teal-100);background:#fff;}
.sd9-login.is-auth,.sd9-cart.has-items{background:var(--sd-teal-600);border-color:var(--sd-teal-600);color:#fff;}
.sd9-login.is-auth:hover,.sd9-cart.has-items:hover{background:var(--sd-teal-hover);border-color:var(--sd-teal-hover);color:#fff;}
/* بج: چپ‌بالا (نه راست) */
.sd9-cart-num{
  position:absolute;top:-7px;left:-7px;right:auto;z-index:2;background:var(--sd-red-500);
  color:#fff;font-size:12px;min-width:22px;height:22px;line-height:22px;
  border-radius:50%;text-align:center;font-family:iransans2;padding:0 2px;
  box-shadow:0 0 0 2px #fff;
}

/* همبرگر: در همهٔ اندازه‌ها دیده می‌شود */
/* P12: the tinted hover square is gone — every icon in the header is now a bare glyph
   plus a colour change, nothing sitting behind it. Colour and size moved to
   icons-theme.css so the burger matches the cart and user icons beside it; only the
   box the glyph sits in is still described here. */
.sd9-burger{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:none;border:none;cursor:pointer;
  padding:7px;line-height:1;transition:.15s;
}
.sd9-mobile-icons{display:none;}

/* ===== نوار ناوبری پایین (چسبان، شیشه‌ای، مخفی‌شونده) ===== */
/* مخفی‌سازی فقط با opacity/transform — ارتفاعِ هدر ثابت می‌ماند تا layout تکان
   نخورد و scroll-anchoring باعث نوسان (چشمک) نشود. */
.sd9-nav-wrap{
  position:relative;z-index:1;max-width:1280px;margin:10px auto 0;display:flex;justify-content:center;
  opacity:1;pointer-events:auto;
  transition:opacity .3s ease,transform .35s ease,visibility .35s;
}
.sd9-header.nav-hidden .sd9-nav-wrap{
  opacity:0;transform:translateY(-14px);visibility:hidden;pointer-events:none;
}
.sd9-nav{
  position:static; /* override menucss.css `nav{position:relative}` so the mega
                      menu's containing block is .sd9-header (full-width), not the nav */
  display:flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.46);
  backdrop-filter:blur(22px) saturate(185%);-webkit-backdrop-filter:blur(22px) saturate(185%);
  border:1px solid rgba(255,255,255,.6);border-radius:100px;
  padding:5px 10px;box-shadow:0 5px 18px rgba(35,49,45,.06);
}
.sd9-nav > a, .sd9-nav > .sd9-dd > .sd9-dd-btn{
  color:var(--sd-ink);font-weight:700;font-size:13px;cursor:pointer;
  padding:8px 16px;border-radius:100px;transition:.2s;
  display:flex;align-items:center;gap:6px;
}
.sd9-nav > a:hover, .sd9-dd:hover .sd9-dd-btn{color:var(--sd-teal-600);background:var(--sd-teal-050);}
.sd9-dd-btn i{font-size:11px;transition:transform .2s;}
.sd9-dd:hover .sd9-dd-btn i{transform:rotate(180deg);}

/* ===== منوی دوپنلی دسته‌بندی ===== */
.sd9-dd{position:static;}
/* Centred on the nav's midpoint (≈ viewport centre). .sd9-nav has a
   backdrop-filter, which makes IT the containing block — so we can't span the
   header with left/right:0; instead centre with left:50% + translateX and give
   the panel its own viewport-relative width. */
.sd9-mega{
  position:absolute;top:100%;left:50%;right:auto;width:min(1240px,96vw);margin-top:10px;
  background:rgba(255,255,255,.985);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.8);border-radius:18px;
  box-shadow:0 18px 48px rgba(35,49,45,.16);overflow:hidden;
  display:grid;grid-template-columns:240px 1fr;min-height:320px;
  opacity:0;visibility:hidden;transform:translate(-50%,10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:9500;
}
.sd9-dd:hover .sd9-mega{opacity:1;visibility:visible;transform:translate(-50%,0);}

.sd9-mega-list{background:rgba(242,245,244,.7);border-left:1px solid var(--sd-line);padding:8px;overflow-y:auto;max-height:min(72vh,540px);}
.sd9-mega-list a{
  display:flex;align-items:center;gap:10px;
  padding:8px 11px;border-radius:10px;font-size:12.5px;font-weight:700;
  color:var(--sd-ink);transition:.15s;
}
.sd9-mega-list a .sd9-mega-ico{
  width:28px;height:28px;flex-shrink:0;border-radius:8px;
  background:#fff;border:1px solid var(--sd-line);color:var(--sd-teal-600);
  display:flex;align-items:center;justify-content:center;font-size:13px;transition:.15s;
}
.sd9-mega-list a .sd9-chev{margin-right:auto;color:var(--sd-muted);font-size:10px;transition:.15s;}
.sd9-mega-list a:hover, .sd9-mega-list a.is-active{background:#fff;color:var(--sd-teal-600);box-shadow:0 4px 12px rgba(35,49,45,.05);}
.sd9-mega-list a:hover .sd9-mega-ico, .sd9-mega-list a.is-active .sd9-mega-ico{background:var(--sd-teal-600);color:#fff;border-color:var(--sd-teal-600);}
.sd9-mega-list a:hover .sd9-chev, .sd9-mega-list a.is-active .sd9-chev{color:var(--sd-teal-600);}

.sd9-mega-panel{padding:18px 22px;overflow-y:auto;max-height:min(72vh,540px);}
.sd9-panel-page{display:none;}
.sd9-panel-page.is-active{display:block;}
.sd9-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--sd-line);}
/* Part 13 / P8: was <h4>/<h5> — demoted to div so the mega menu stops emitting
   ~57 headings before each page's <h1>. UIkit's h4/h5 defaults (line-height 1.4,
   margin 0 0 20px) are restated here so the visuals are byte-for-byte identical. */
.sd9-panel-head .sd9-panel-title{font-size:14px;font-weight:800;color:var(--sd-ink);line-height:1.4;margin:0 0 20px 0;}
.sd9-panel-head > a{font-size:11.5px;font-weight:700;color:var(--sd-teal-600);white-space:nowrap;}
.sd9-panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px 22px;align-items:start;}
.sd9-panel-col .sd9-panel-subtitle{font-size:12.5px;font-weight:800;color:var(--sd-teal-600);line-height:1.4;margin:0 0 8px 0;}
.sd9-panel-col .sd9-panel-subtitle a{color:inherit;}
.sd9-panel-col ul{list-style:none;margin:0;padding:0;}
.sd9-panel-col li{margin-bottom:6px;}
.sd9-panel-col li a{font-size:12px;color:var(--sd-muted);font-weight:600;transition:.15s;}
.sd9-panel-col li a:hover{color:var(--sd-ink);padding-right:4px;}

/* ===== سایدبار موبایل ===== */
.sd9-overlay{position:fixed;inset:0;background:rgba(35,49,45,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.sd9-overlay.active{opacity:1;pointer-events:all;}
.sd9-sidebar{
  position:fixed;top:0;right:-320px;width:285px;height:100vh;background:#fff;z-index:10000;
  box-shadow:-8px 0 32px rgba(0,0,0,.12);transition:right .35s cubic-bezier(.2,.9,.3,1.1);
  overflow-y:auto;padding:0;
}
.sd9-sidebar.active{right:0;}
.sd9-sb-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--sd-line);}
.sd9-sb-head img{height:32px;}
.sd9-sb-brand{font-family:'Segoe UI',Tahoma,Arial,sans-serif;font-weight:800;font-size:20px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sd-teal-600);}
/* explicit hover — front.css's global a:hover would turn it blue */
.sd9-sb-brand:hover{color:var(--sd-ink);}
/* P12: circle removed; the × itself is the target. Colour/size in icons-theme.css. */
.sd9-sb-close{background:none;border:0;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.sd9-sb-menu{padding:6px 0;}
.sd9-sb-menu a{display:flex;align-items:center;gap:11px;padding:12px 18px;font-size:13px;font-weight:700;color:var(--sd-ink);border-bottom:1px solid #f2f5f4;}
.sd9-sb-menu a i:first-child{width:19px;text-align:center;color:var(--sd-teal-600);}
.sd9-sb-menu a .sd9-sb-chev{margin-right:auto;color:var(--sd-muted);font-size:12px;}
.sd9-sb-title{padding:12px 18px 5px;font-size:11.5px;font-weight:800;color:var(--sd-muted);}

/* اکاردئونِ دسته‌بندی در سایدبار موبایل */
/* ردیفِ سردسته = لینکِ نام (به محصولاتِ دسته) + دکمهٔ مربعیِ فلش (باز/بستنِ زیردسته) */
.sd9-sb-row{
  display:flex;align-items:center;gap:6px;width:100%;
  padding:0 10px 0 12px;border-bottom:1px solid var(--sd-line);
  transition:background .15s ease;
}
.sd9-sb-menu .sd9-sb-row > a{
  flex:1;min-width:0;display:flex;align-items:center;gap:11px;
  padding:12px 6px;border-bottom:0;font-size:13px;font-weight:700;color:var(--sd-ink);
}
.sd9-sb-menu .sd9-sb-row > a > i:first-child{width:19px;text-align:center;color:var(--sd-teal-600);}
.sd9-sb-exp{
  width:30px;height:30px;flex-shrink:0;
  border:1px solid var(--sd-line);border-radius:8px;background:#fff;
  color:var(--sd-muted);cursor:pointer;font-size:11px;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.sd9-sb-exp i{transition:transform .2s ease;}
.sd9-sb-exp.open{background:var(--sd-teal-600);border-color:var(--sd-teal-600);color:#fff;}
.sd9-sb-exp.open i{transform:rotate(-90deg);} /* ◀ می‌چرخد و ▼ می‌شود */
/* دستهٔ بازشده: پررنگ + اکسنتِ سبز در لبهٔ راست تا انتهای زیرشاخه‌ها مشخص باشد */
.sd9-sb-row.open{background:var(--sd-teal-050);border-right:4px solid var(--sd-teal-600);}
.sd9-sb-menu .sd9-sb-row.open > a{color:var(--sd-teal-600);}
.sd9-sb-sub{display:none;background:#e7f1ed;}
.sd9-sb-sub.open{display:block;border-right:4px solid var(--sd-teal-600);border-bottom:2px solid var(--sd-teal-100);}
.sd9-sb-sub a{padding-right:42px;font-weight:600;color:var(--sd-muted);border-bottom:1px solid rgba(35,49,45,.05);}
/* سطح دوم */
.sd9-sb-row2{padding-right:34px;}
.sd9-sb-menu .sd9-sb-row2 > a{font-size:12.5px;padding:11px 6px;}
.sd9-sb-row2.open{background:#d8e9e3;border-right:0;}
.sd9-sb-sub2{background:#dbeae5;}
.sd9-sb-sub2.open{border-right:0;}
.sd9-sb-sub2 a{padding-right:60px;}

/* ===== ریسپانسیو ===== */
@media(max-width:900px){
  /* Part 15 / P3: +5px of top padding for the smile, same reason as the desktop rule. */
  .sd9-header{padding:12px 8px 0;margin-top:34px;top:34px;}
  .sd9-topbar{--sd9-smile:7px;height:34px;font-size:12.5px;}
  .sd9-topbar-desk{display:none;}
  .sd9-topbar-mob{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:800;font-family:iransans2;unicode-bidi:isolate;}
  .sd9-header-top{display:flex;flex-wrap:nowrap;padding:6px 8px;gap:5px;border-radius:15px;}
  .sd9-brand{order:1;gap:3px;}
  .sd9-logo img{height:26px;}
  .sd9-search{order:3;flex:1 1 auto;min-width:0;max-width:none;width:auto;margin:0;padding:2px 8px 2px 2px;}
  /* Part 15 / P21: 16px, not 11.5px. iOS Safari zooms the whole page whenever it
     focuses a control whose text renders BELOW 16px, which is why tapping the search
     box rescaled the layout; 16px is the documented threshold and the only fix that
     does not involve disabling pinch-zoom. The field looks the same size — the
     shorter mobile placeholder (P5) and the tightened padding absorb the extra px. */
  .sd9-search input{padding:4px 4px;font-size:16px;min-width:0;text-align:right;}
  .sd9-search button{width:28px;height:28px;}
  .sd9-actions{display:none;}
  .sd9-mobile-icons{order:4;display:flex;align-items:center;gap:6px;flex-shrink:0;overflow:visible;}
  /* P12: font-size dropped — icons-theme.css sizes the burger with the other header icons */
  .sd9-burger{padding:3px;}
  /* P12: pill removed — the glyph is the button. Size/colour in icons-theme.css. */
  .sd9-micon{
    width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    position:relative;flex-shrink:0;background:none;border:0;
  }
  /* Part 16 / P6: the green "you are signed in" dot under the user icon is gone.
     P12 added it when the filled teal disc was removed, but it reads as an unread
     badge that never clears — the one thing a permanently-lit dot cannot mean.
     Being signed in is already visible from the panel the icon opens. */
  .sd9-micon .sd9-cart-num{top:-6px;left:-6px;right:auto;font-size:10px;min-width:17px;height:17px;line-height:17px;padding:0 1px;}
  .sd9-nav-wrap{display:none;}
}

/* P12: small phones — the row is logo + search + 3 icons and the search field was the
   only thing that could give. Shrink the mark and the gaps instead, so the field keeps
   enough width to show a real query. Icon sizes step down in icons-theme.css. */
@media(max-width:400px){
  .sd9-header-top{padding:6px 6px;gap:4px;}
  .sd9-brand{gap:2px;}
  .sd9-logo img{height:22px;}
  .sd9-mobile-icons{gap:4px;}
  .sd9-micon{width:27px;height:27px;}
  .sd9-search button{width:25px;height:25px;}
}

/* ============================================================
   Part 16 / P13 — the mini-cart dropdown
   ------------------------------------------------------------
   The old panel was a fixed 275×125 box with UIkit's default white card look, a
   grey caret pseudo-icon hanging off its corner and the «نمایش سبد خرید» button
   absolutely positioned at top:60px — so a six-figure total ran straight into it.
   This is the same glass surface as the header pill and the toast: white, blurred,
   18px radius, hairline border, wide soft shadow, and a full-width teal action.
   `.uk-dropdown` is overridden deliberately; the rules must outrank uikit-rtl.css,
   which is loaded before this file.
   ============================================================ */
.sd9-header .sd16-minicart.uk-dropdown,
.sd16-minicart.uk-dropdown{
  width:auto;
  min-width:250px;
  max-width:min(300px,92vw);
  height:auto;
  padding:12px;
  border:1px solid rgba(18,86,74,.12);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 22px 48px -26px rgba(26,62,55,.55);
  color:var(--sd-ink);
  z-index:99999;
}
.sd16-minicart-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:4px 4px 11px;
  border-bottom:1px solid rgba(18,86,74,.1);
}
.sd16-minicart-label{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--sd-muted);
  font-size:12.5px; font-weight:700;
  white-space:nowrap;
}
.sd16-minicart-label i{ color:var(--sd-teal-600); font-size:13px; }
.sd16-minicart-price{
  color:var(--sd-ink);
  font-size:12.5px; font-weight:700;
  white-space:nowrap;
}
/* front.css gives .basket-total a 16px red; inside this panel the number is the
   emphasis and the «تومان» beside it is not, so restate both here */
.sd16-minicart .basket-total{
  color:var(--sd-teal-700);
  font-family:iransans2, inherit;
  font-size:15px; font-weight:900;
  unicode-bidi:isolate;
}
.sd16-minicart-btn{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top:11px;
  padding:10px 14px;
  border-radius:12px;
  background:var(--sd-teal-600);
  color:#fff!important;
  font-size:13px; font-weight:800;
  transition:background .18s ease, box-shadow .18s ease;
}
.sd16-minicart-btn:hover{
  background:var(--sd-teal-hover);
  box-shadow:0 10px 24px -12px rgba(14,138,114,.75);
}
.sd16-minicart-btn i{ font-size:14px; }