@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
.logo img {
    height: 100%;
    min-height: 45px;
}
.nav-bar.nav-bar-sm .drop-down .drop-down-btn {
    color: #080808;
}
.btn.btn-outline-premium {
    background: var(--primary_color);
    border-color: var(--primary_color);
    color: #ffffff;
}
.btn.btn-outline-premium:hover {
    background: #0c4d33;
    border-color: #0c4d33;
    color: #ffffff;
}
@media (min-width: 992px) {
    .col-lg-4 {
        flex: 0 0 auto;
        width: 26.33333333%;
    }
}
.section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    overflow: hidden;
}
@media (max-width: 1199.98px) {
    .nav-bar .link-btn:not(:last-child) {
        margin-right: 0;
        margin-bottom: auto !important;
    }
}
@media (min-width: 1200px) {
    .h2, h2 {
        font-size: 1.2rem !important;
    }
}
.item-badge.item-badge-premium {
    background-color: #a314e3 !important;
}
@media (min-width: 1200px) {
    .h1, h1 {
        font-size: 1.5rem !important;
    }
}
.h5, h5 {
    font-size: 1rem !important;
}
.table tbody td {
    padding: 14px 22px;
    white-space: nowrap;
    color: #171717 !important;
    border-top: 2px solid #f7f7f7;
    vertical-align: middle;
}
.settings-links .settings-link {
    padding: 12px 25px;
    color: #4a4a4b !important;
    border-radius: 8px;
}
.dashboard-container-lg {
    max-width: 1450px !important;
}
.dashboard-container-sm {
    max-width: 1450px !important;
}
:root {
  --sc-radius: 14px;
  --sc-radius-sm: 10px;
  --sc-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --sc-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
  --sc-ring: 0 0 0 4px rgba(14, 90, 60, .18);
  --sc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Brand colour override (dark green).
   Loaded after @themeColors, so this wins over the DB-driven values for all
   CSS var consumers. Update the same values in Admin > Appearance > Theme to
   also recolour the blade SVG illustrations (cart/favorites/verify) and the
   theme-color meta, which read straight from the DB. */
:root {
  --primary_color: #0e5a3c;
  --swiper_background_color: #edf5f0;
  --files_icon_color: #0e5a3c;
}

/* ---------- Base typography ---------- */
body {
  font-family: var(--sc-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
}

h1, h2, h3, h4, h5, h6,
.section-title, .header-title {
  font-family: var(--sc-font);
  font-weight: 700;
  letter-spacing: -0.02em;
}

a { transition: color .2s ease; }

::selection { background: #0e5a3c; color: #ffffff; }
::-moz-selection { background: #0e5a3c; color: #ffffff; }

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--sc-radius-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.btn.btn-primary {
  background-image: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
  border: none;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
  background-image: linear-gradient(135deg, #0a4329 0%, #0e5a3c 100%);
  -webkit-box-shadow: var(--sc-ring) !important;
  box-shadow: var(--sc-ring) !important;
}

.btn.btn-outline-primary {
  border-width: 1.5px;
}
.btn.btn-outline-primary:hover {
  -webkit-box-shadow: var(--sc-ring) !important;
  box-shadow: var(--sc-ring) !important;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ---------- Item cards ---------- */
.item {
  border-radius: var(--sc-radius);
  border: 1px solid var(--border_color);
  box-shadow: var(--sc-shadow);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sc-shadow-lg);
  border-color: rgba(14, 90, 60, .35);
}

.item-header,
.item-img,
.item-video,
.item-audio { overflow: hidden; }

/* kill the inline-image baseline gap above/below the thumbnail */
.item-header img,
.item-header video,
.item-header .item-img {
  display: block;
}
/* Item card image: show the WHOLE image (no crop), sized to the common 590x300 ratio */
.item .item-header {
  aspect-ratio: 59 / 30;
  height: auto;
  background: #f4f5f7;
  position: relative;
}
/* favorite (wishlist) icon — top-right of the card image, shown on hover */
.sc-item-fav {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 3;
}
/* desktop: hidden until the card is hovered (or already favorited) */
@media (hover: hover) {
  .sc-item-fav {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .item:hover .sc-item-fav,
  .item .sc-item-fav:has(.btn-custom) {
    opacity: 1;
    pointer-events: auto;
  }
}
/* mobile: hide the favorite icon entirely (less clutter) */
@media (max-width: 767.98px) {
  .sc-item-fav { display: none; }
}
.sc-item-fav .btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  border: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
  color: #ef4444;
  font-size: 15px;
}
.sc-item-fav .btn:hover { background: #ffffff; color: #ef4444; }
.sc-item-fav .btn.btn-custom { background: #ef4444; color: #ffffff; }
.sc-item-fav .btn.btn-custom:hover { background: #dc2626; color: #ffffff; }
.item .item-header > a {
  display: block;
  height: 100%;
}
.item .item-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.item-img,
.item-video video {
  transition: transform .4s ease;
}
.item:hover .item-img,
.item:hover .item-video video {
  transform: scale(1.04);
}

.item-title a {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.item-title a:hover { color: #0e5a3c; }

/* Badges become soft pills */
.item-badge {
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .01em;
  backdrop-filter: saturate(140%) blur(2px);
}

/* ---------- Navbar ---------- */
.nav-bar-container {
  box-shadow: none;
}
.nav-bar-links .link:hover .link-title,
.nav-bar-links .link.active .link-title {
  color: #0e5a3c;
}
.link-btn { border-radius: var(--sc-radius-sm); transition: .2s ease; }

/* ---------- Hero / page header ---------- */
.header-inner {
  border-radius: 0 0 var(--sc-radius) var(--sc-radius);
}
.header-title {
  font-weight: 800;
  letter-spacing: -0.03em;
}
.header-search .search,
.header-search input,
.search input {
  border-radius: var(--sc-radius-sm);
}

/* ---------- Sections ---------- */
.section-title {
  font-weight: 700;
}
.section-title:after,
.section-head:after { border-radius: 2px; }

/* ---------- Forms / inputs ---------- */
.form-control,
.form-select,
.input,
input.form-control,
textarea.form-control {
  border-radius: var(--sc-radius-sm);
  border-color: var(--border_color);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus,
.form-select:focus,
input.form-control:focus,
textarea.form-control:focus {
  border-color: #0e5a3c;
  box-shadow: var(--sc-ring);
}

/* ---------- Generic cards / panels ---------- */
.card,
.box,
.panel {
  border-radius: var(--sc-radius);
  border: 1px solid var(--border_color);
  box-shadow: var(--sc-shadow);
}

/* ---------- Dropdown menus ---------- */
.drop-down-menu,
.dropdown-menu {
  border-radius: var(--sc-radius-sm);
  border: 1px solid var(--border_color);
  box-shadow: var(--sc-shadow-lg);
  overflow: hidden;
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--footer_border_color); }
.footer a { transition: color .2s ease, opacity .2s ease; }
.footer a:hover { color: #fff; opacity: 1; }
.footer-counter-title { font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Dashboard / workspace sidebar ---------- */
.dashboard-sidebar,
.workspace-sidebar { border-right: 1px solid rgba(255, 255, 255, .06); }

/* ---------- Scrollbar (webkit) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }

/* ---------- Pagination ---------- */
.pagination .page-link {
  border-radius: var(--sc-radius-sm) !important;
  margin: 0 3px;
  border-color: var(--border_color);
  color: var(--text_color);
}
.pagination .page-item.active .page-link {
  background-image: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
  border-color: transparent;
}

/* ============================================================
   Rewritten sections: hero, navbar, footer
   ============================================================ */

/* ---------- Hero ---------- */
.sc-hero {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.sc-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .94) 0%, rgba(30, 27, 75, .86) 55%, rgba(49, 46, 129, .80) 100%);
  z-index: 0;
}
.sc-hero-glow {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(14, 90, 60, .45) 0%, rgba(14, 90, 60, 0) 70%);
  z-index: 0;
  pointer-events: none;
}
.sc-hero-inner {
  position: relative;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
  padding: clamp(3.5rem, 9vw, 7rem) 0;
}
.sc-hero-content {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.sc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #cfe6da;
  background: rgba(14, 90, 60, .16);
  border: 1px solid rgba(14, 90, 60, .35);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.sc-hero-title.header-title,
.sc-hero-title {
  color: #fff;
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.sc-hero-text.header-text,
.sc-hero-text {
  color: #cbd5e1;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto 30px;
}
.sc-hero-search {
  max-width: 640px;
  margin: 0 auto;
}
.sc-hero-search .search-input {
  background: #fff;
  border-radius: 999px;
  padding: 7px 7px 7px 8px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .35);
}
.sc-hero-search .search-input input {
  border: none;
  background: transparent;
  font-size: 15px;
  padding-left: 14px;
}
.sc-hero-search .search-input .btn {
  border-radius: 999px;
  padding-left: 22px;
  padding-right: 22px;
}
.sc-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 38px;
}
.sc-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sc-hero-stat-num {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
}
.sc-hero-stat-label {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 4px;
}
.sc-hero-stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(148, 163, 184, .3);
}

/* ---------- Navbar polish (markup/JS hooks preserved) ---------- */
.nav-bar-links .link .link-title span {
  font-weight: 500;
  transition: color .2s ease;
}
.drop-down-btn { font-weight: 500; transition: color .2s ease; }
.drop-down-btn:hover { color: #0e5a3c; }
.nav-bar-buttons .link-btn .btn,
.nav-bar-actions .btn {
  border-radius: 999px;
}
.cart-counter {
  background-image: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
  border: 2px solid #fff;
  font-weight: 600;
}
.announcement { letter-spacing: -0.01em; }

/* ---------- Footer ---------- */
.sc-footer {
  position: relative;
  overflow: hidden;
  background: var(--footer_background_color);
}
.sc-footer-glow {
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 760px;
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(14, 90, 60, .22) 0%, rgba(14, 90, 60, 0) 70%);
  pointer-events: none;
}
.sc-footer-newsletter {
  position: relative;
  border-bottom: 1px solid var(--footer_border_color);
  padding: 36px 0;
}
.sc-footer-upper { position: relative; padding: 56px 0 40px; }
.sc-footer-logo img { height: 38px; width: auto; }
.sc-footer-about {
  color: var(--footer_text_color);
  line-height: 1.7;
  max-width: 380px;
  margin: 18px 0 0;
}
.sc-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.sc-footer-socials .social-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.sc-footer-socials .social-btn:hover {
  transform: translateY(-2px);
  color: #fff;
  background-image: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
  border-color: transparent;
}
.sc-footer-stats {
  display: flex;
  gap: 40px;
  margin-top: 28px;
}
.sc-footer-stat .footer-counter-text {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.sc-footer-stat .footer-counter-title {
  font-size: 13px;
  color: var(--footer_text_color);
  margin: 2px 0 0;
}
.sc-footer-col-title .h6,
a.sc-footer-col-title {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sc-footer-links-grid .footer-links { margin-top: 16px; }
.sc-footer-links-grid .footer-link { margin-bottom: 10px; }
.sc-footer-links-grid .footer-link a,
.sc-footer-links-grid .footer-text {
  color: var(--footer_text_color);
  transition: color .2s ease, padding-left .2s ease;
}
.sc-footer-links-grid .footer-link a:hover {
  color: #fff;
  padding-left: 4px;
}
.sc-footer-lower {
  position: relative;
  border-top: 1px solid var(--footer_border_color);
  padding: 22px 0;
}
.sc-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.sc-footer-bottom .footer-copyright {
  color: var(--footer_text_color);
  font-size: 14px;
}
.sc-footer-payment img { max-height: 26px; width: auto; opacity: .85; }
.sc-footer-top {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.sc-footer-top:hover {
  transform: translateY(-2px);
  color: #fff;
  background-image: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
  border-color: transparent;
}

/* ---------- Items listing: toolbar ---------- */
.sc-items-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.sc-items-toolbar-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sc-items-toolbar-title h5 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading_color);
}
.sc-items-count {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #0e5a3c;
  background: var(--swiper_background_color);
  border: 1px solid var(--border_color);
  padding: 4px 12px;
  border-radius: 999px;
}
.sc-items-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sc-filter-btn { border-radius: var(--sc-radius-sm); font-weight: 600; }
#itemsGrid, #itemsList { border-radius: var(--sc-radius-sm); }
#itemsGrid[disabled], #itemsList[disabled] {
  background: var(--primary_color);
  border-color: #0e5a3c;
  color: #fff;
  opacity: 1;
}

/* ---------- Item card: media hover overlay ---------- */
.sc-item-media { position: relative; display: block; }
.sc-item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, rgba(15, 23, 42, .55), rgba(15, 23, 42, .15));
  opacity: 0;
  transition: opacity .25s ease;
}
.item:hover .sc-item-overlay { opacity: 1; }
.sc-item-overlay-btn {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(14, 90, 60, .92);
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 9px 18px;
  border-radius: 999px;
  transform: translateY(8px);
  transition: transform .25s ease;
}
.item:hover .sc-item-overlay-btn { transform: translateY(0); }

/* ---------- Item card: body & footer ---------- */
.item-body { padding: 16px 18px 18px; }
.item-title {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--heading_color);
}
.item-text { font-size: 13px; color: var(--text_muted); }
.item-text a { color: var(--text_color); font-weight: 500; }
.item-text a:hover { color: #0e5a3c; }
.item-purchase {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border_color);
}
.item-price-number {
  font-weight: 700;
  font-size: 17px;
  color: var(--heading_color);
  letter-spacing: -0.02em;
}
.item-price-through {
  color: var(--text_muted);
  text-decoration: line-through;
  font-size: 13px;
  margin-right: 4px;
}
.item-sales {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--text_muted);
  margin-top: 4px;
}
/* price/sales + buttons on one row, compact */
.item-purchase > .row {
  flex-wrap: nowrap;
  gap: 10px;
}
.item-purchase > .row > .col:last-child .row {
  flex-wrap: nowrap;
  gap: 6px;
}
.item-purchase .btn-padding {
  border-radius: var(--sc-radius-sm);
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.item-purchase .sc-item-preview {
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.item-purchase .sc-item-preview .ms-2 { margin-inline-start: 6px !important; }
/* keep the cart + preview buttons inside the card (don't get pushed out by the Sales line) */
.item-purchase > .row > .col:last-child .row { align-items: center; }
.item-purchase > .row > .col:first-child { min-width: 0; }
.item-purchase > .row > .col:last-child { flex-shrink: 0; }
.item-purchase form { margin: 0; }
@media (max-width: 575.98px) {
  /* tight 2-col cards: keep one row, just shrink the buttons so nothing clips */
  .item-purchase > .row { gap: 8px; }
  .item-purchase > .row > .col:last-child .row { gap: 6px; }
  .item-purchase .btn-padding { width: 32px; height: 32px; }
  .item-purchase .sc-item-preview { width: 32px; height: 32px; padding: 0; }
  .item-purchase .sc-item-preview .sc-item-preview-text { display: none !important; }
  .item-purchase .btn-padding i,
  .item-purchase .sc-item-preview i { font-size: 13px; }
}

/* ---------- Item card: list / inline view ---------- */
@media (min-width: 768px) {
  .item.item-inline .item-body { display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; gap: 20px; }
}
.item.item-inline .sc-item-overlay { display: none; }

/* ---------- Filter sidebar ---------- */
#searchFiltersSidebar .card-v,
.offcanvas .card-v {
  border-radius: var(--sc-radius);
  border: 1px solid var(--border_color);
  box-shadow: var(--sc-shadow);
}
#searchFiltersSidebar h5 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading_color);
}
.filter-item .form-check-input {
  border-radius: 6px;
  border-color: var(--border_color);
  cursor: pointer;
}
.filter-item .form-check-input:checked {
  background-color: #0e5a3c;
  border-color: #0e5a3c;
}
.filter-item .form-check-label { cursor: pointer; color: var(--text_color); }
.filter-item { transition: color .2s ease; }
.filter-item:hover .form-check-label { color: #0e5a3c; }

/* ---------- Empty state ---------- */
.items + .pagination,
.card-v .py-5 h3 { font-weight: 700; letter-spacing: -0.02em; color: var(--heading_color); }

/* ---------- Item detail page ---------- */
.card-v {
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
}
.card-v.border { border: 1px solid var(--border_color) !important; }
.item-single-title { font-weight: 800; letter-spacing: -0.02em; color: var(--heading_color); }
.item-single-title.h2 { font-size: 1.5rem; }
.section-title-text { font-weight: 700; letter-spacing: -0.02em; color: var(--heading_color); }
.section-title-divider {
  height: 4px;
  border-radius: 999px;
  background-image: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
}
.item-single-preview .item-single-video video,
.item-single-preview { border-radius: var(--sc-radius); }

/* Preview image: native size centered on a light surface — never upscale (no blur). */
.item-single-img {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--sc-radius);
  background-color: #f9f9f9;
  min-height: 260px;
  background-image: repeating-radial-gradient(circle at 10% 50%, rgba(184, 223, 168, 0.12) 0px, rgba(184, 223, 168, 0.12) 2px, transparent 3px, transparent 16px);
}
.item-single-img img {
  width: auto !important;      /* override app.css width:100% so small images aren't stretched */
  max-width: 100%;
  max-height: 560px;
  height: auto;
  border-radius: 6px;
}
/* mobile: the image nearly fills the narrow screen — let it go full width */
@media (max-width: 767.98px) {
  .item-single-img { min-height: 0; }
  .item-single-img img { width: 100% !important; max-height: none; }
}

/* License option cards (clean, Envato-style: full-width card, no floating radio) */
.form-check-lg { padding: 0; margin-bottom: 12px; }
.form-check-lg .form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.form-check-lg .form-check-label {
  position: relative;
  width: 100%;
  border: 1.5px solid var(--border_color);
  border-radius: var(--sc-radius-sm);
  padding: 16px 58px 16px 18px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.form-check-lg .form-check-label::after {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-end: 16px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid var(--border_color);
  border-radius: 50%;
  transition: .2s ease;
}
.form-check-lg:hover .form-check-label { border-color: rgba(14, 90, 60, .5); }
.license-type:checked + .form-check-label {
  border-color: #0e5a3c;
  background: var(--swiper_background_color);
  box-shadow: var(--sc-ring);
}
.license-type:checked + .form-check-label::after {
  border-color: #0e5a3c;
  background: #0e5a3c;
  box-shadow: inset 0 0 0 3px #fff;
}
.license-type:checked + .form-check-label h6 { color: #0e5a3c; }

/* Author / sidebar cards */
.user-avatar img { border-radius: 14px; object-fit: cover; }
.user-avatar-lg, .user-avatar-lg img { width: 58px; height: 58px; }
.item-author-badge img { border-radius: 8px; }

/* Meta list rows */
.card-v .small .d-flex.justify-content-between p { color: var(--text_color); }
.list-item { padding: 4px 0; }

/* Swiper nav buttons on screenshots */
.item-swiper .swiper-button-prev,
.item-swiper .swiper-button-next {
  background: #fff;
  border: 1px solid var(--border_color);
  border-radius: 10px;
  box-shadow: var(--sc-shadow);
  color: var(--heading_color);
  transition: .2s ease;
}
.item-swiper .swiper-button-prev:hover,
.item-swiper .swiper-button-next:hover {
  background-image: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
  border-color: transparent;
  color: #fff;
}

/* ============================================================
   Home page — demo-style sections
   ============================================================ */

/* Section heading: overline + title */
.sc-section-head { margin-bottom: 12px; }
.sc-overline {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0e5a3c;
  margin-bottom: 10px;
}
.sc-section-title {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--heading_color);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

/* Why choose */
.sc-why { padding-top: 56px; }
.sc-why-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--border_color);
  border-radius: var(--sc-radius);
  padding: 26px 22px;
  box-shadow: var(--sc-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sc-why-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sc-shadow-lg);
  border-color: rgba(14, 90, 60, .35);
}
.sc-why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 22px;
  color: #0e5a3c;
  background: var(--swiper_background_color);
  margin-bottom: 18px;
}
.sc-why-title { font-weight: 700; font-size: 16px; color: var(--heading_color); margin-bottom: 8px; }
.sc-why-text { font-size: 14px; color: var(--text_muted); line-height: 1.6; margin: 0; }

/* Stats shapes */
.sc-stats-section { padding: 36px 0; }
.sc-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 4vw, 56px);
}
.sc-stat {
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sc-stat-num { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; line-height: 1.1; }
.sc-stat-label { font-size: 13px; color: #334155; margin-top: 4px; }
.sc-shape-scallop {
  background: #fbcfe8;
  border-radius: 42% 58% 57% 43% / 45% 44% 56% 55%;
}
.sc-shape-hexagon {
  background: #bfdbfe;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
.sc-shape-star {
  background: #ddd6fe;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.sc-shape-circle { background: #bcdfcd; border-radius: 50%; }

/* Yellow CTA banner */
.sc-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  background: linear-gradient(135deg, #2f9d68 0%, #13794f 100%);
  border-radius: var(--sc-radius);
  padding: 30px 36px;
  box-shadow: 0 18px 40px rgba(14, 90, 60, .25);
}
.sc-cta-overline {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #cfe6da;
  margin-bottom: 4px;
}
.sc-cta-title { font-weight: 800; letter-spacing: -0.02em; color: #ffffff; margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.sc-cta-btn {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: #fff;
  background: #0f172a;
  padding: 13px 26px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease;
}
.sc-cta-btn:hover { transform: translateY(-2px); background: #1e293b; color: #fff; }

/* Marquee */
.sc-marquee {
  overflow: hidden;
  background: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
  padding: 16px 0;
}
.sc-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: sc-marquee 26s linear infinite;
}
.sc-marquee-item {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: capitalize;
  color: #fff;
  padding: 0 28px;
  white-space: nowrap;
}
@keyframes sc-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Category tiles */
.home-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border_color);
  border-radius: var(--sc-radius);
  padding: 24px 16px;
  box-shadow: var(--sc-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home-category:hover {
  transform: translateY(-5px);
  box-shadow: var(--sc-shadow-lg);
  border-color: rgba(14, 90, 60, .35);
}
.home-category-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--swiper_background_color);
  margin-bottom: 14px;
}
.home-category-img img { width: 32px; height: 32px; object-fit: contain; }
.home-category-title { font-weight: 600; font-size: 14px; color: var(--heading_color); margin: 0; }

/* FAQ accordion */
.accordion-custom .accordion-item {
  border: 1px solid var(--border_color);
  border-radius: var(--sc-radius-sm) !important;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}
.accordion-custom .accordion-button {
  font-weight: 600;
  color: var(--heading_color);
  border-radius: 0 !important;
}
.accordion-custom .accordion-button:not(.collapsed) {
  background: var(--swiper_background_color);
  color: #0e5a3c;
}
.accordion-custom .accordion-button:focus { box-shadow: none; }

/* Testimonials swiper buttons */
.testimonials-swiper .swiper-button-prev,
.testimonials-swiper .swiper-button-next {
  background: #fff;
  border: 1px solid var(--border_color);
  border-radius: 12px;
  box-shadow: var(--sc-shadow);
  color: var(--heading_color);
}
.testimonials-swiper .swiper-button-prev:hover,
.testimonials-swiper .swiper-button-next:hover {
  background-image: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
  border-color: transparent;
  color: #fff;
}

@media (max-width: 575px) {
  .sc-hero-stats { gap: 18px; }
  .sc-footer-stats { gap: 28px; }
  .sc-footer-bottom { justify-content: center; text-align: center; }
  .sc-items-toolbar { align-items: flex-start; }
  .sc-stat { width: 120px; height: 120px; }
  .sc-stat-num { font-size: 21px; }
  .sc-cta { justify-content: center; text-align: center; }
}

/* ---------- Light hero variant ---------- */
.sc-hero-light .sc-hero-overlay {
  background: linear-gradient(135deg, rgba(250, 248, 243, .95) 0%, rgba(255, 247, 230, .93) 100%);
}
.sc-hero-light .sc-hero-inner { position: relative; }
.sc-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}
.sc-hero-blob-1 { top: 8%; left: -60px; width: 220px; height: 220px; background: rgba(14, 90, 60, .14); }
.sc-hero-blob-2 { bottom: 6%; right: -40px; width: 260px; height: 260px; background: rgba(14, 90, 60, .16); }
.sc-hero-light .sc-hero-eyebrow {
  color: #7a5a00;
  background: rgba(14, 90, 60, .12);
  border-color: rgba(14, 90, 60, .25);
}
.sc-hero-light .sc-hero-title.header-title,
.sc-hero-light .sc-hero-title { color: var(--heading_color); }
.sc-hero-light .sc-hero-text.header-text,
.sc-hero-light .sc-hero-text { color: var(--text_color); }
.sc-hero-light .sc-hero-search .search-input {
  box-shadow: 0 12px 34px rgba(15, 23, 42, .12);
  border: 1px solid var(--border_color);
}
.sc-hero-light .sc-hero-stat-num { color: var(--heading_color); }
.sc-hero-light .sc-hero-stat-label { color: var(--text_muted); }
.sc-hero-light .sc-hero-stat-sep { background: var(--border_color); }

/* Circular seal badge */
.sc-hero-seal {
  position: absolute;
  top: 28px;
  inset-inline-end: 8px;
  width: 118px;
  height: 118px;
  z-index: 2;
}
.sc-hero-seal svg { width: 100%; height: 100%; animation: sc-spin 22s linear infinite; }
.sc-seal-ring { fill: #13794f; }
.sc-seal-text {
  font-size: 9.4px;
  font-weight: 700;
  letter-spacing: 1.2px;
  fill: #ffffff;
  text-transform: uppercase;
}
.sc-seal-big { font-size: 20px; font-weight: 800; fill: #0f172a; text-anchor: middle; }
.sc-seal-small { font-size: 10px; font-weight: 700; letter-spacing: 2px; fill: #ffffff; text-anchor: middle; }
@keyframes sc-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (max-width: 991px) { .sc-hero-seal { display: none; } }

/* ---------- Top trends ---------- */
.sc-trends-section { padding-top: 36px; }
.sc-trend-card {
  position: relative;
  display: block;
  height: 100%;
  background: linear-gradient(160deg, #edf5f0 0%, #cfe6da 100%);
  border: 1px solid #cfe6da;
  border-radius: var(--sc-radius);
  padding: 26px 22px 56px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sc-trend-card:hover { transform: translateY(-5px); box-shadow: var(--sc-shadow-lg); }
.sc-trend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 20px;
  color: #fff;
  background-image: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
  margin-bottom: 16px;
}
.sc-trend-title { font-weight: 700; font-size: 16px; color: var(--heading_color); margin-bottom: 8px; }
.sc-trend-text { font-size: 14px; color: #57534e; line-height: 1.6; margin: 0; }
.sc-trend-arrow {
  position: absolute;
  inset-block-end: 18px;
  inset-inline-start: 22px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #0e5a3c;
  background: #fff;
  box-shadow: var(--sc-shadow);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sc-trend-card:hover .sc-trend-arrow {
  background-image: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
  color: #fff;
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .sc-marquee-track { animation: none; }
  .sc-hero-seal svg { animation: none; }
}

/* ============================================================
   Workspace / dashboard, auth, cart, checkout
   ============================================================ */

/* ---------- Dashboard sidebar ---------- */
.dashboard-sidebar-links { display: flex; flex-direction: column; gap: 4px; }
.dashboard-sidebar-link .dashboard-sidebar-link-title {
  border-radius: var(--sc-radius-sm);
  transition: background .2s ease, color .2s ease;
}
/* bright mint on hover so the text/icon stays readable on the dark sidebar */
.dashboard-sidebar-link:not(.current):not(.active) .dashboard-sidebar-link-title:hover {
  background: rgba(255, 255, 255, .06);
  color: #34d399 !important;
}
.dashboard-sidebar-link:not(.current):not(.active) .dashboard-sidebar-link-title:hover i { color: #34d399; }
.dashboard-sidebar-link.current > .dashboard-sidebar-link-title,
.dashboard-sidebar-link.current > a.dashboard-sidebar-link-title {
  background-image: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(14, 90, 60, .35);
}
.dashboard-sidebar-link.current > .dashboard-sidebar-link-title i { color: #fff; }
.dashboard-balance {
  padding: 14px 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--sc-radius);
}
.dashboard-balance .dashboard-balance-title { color: #34d399; }
.dashboard-balance-number { font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.dashboard-balance-icon a {
  background-image: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #fff;
  border-radius: 8px;
  padding: 5px;
}
.dashboard-sidebar-link .counter {
  background-image: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
  border: none;
  font-weight: 600;
}

/* ---------- Dashboard top navbar ---------- */
.dashboard-nav {
  border-bottom: 1px solid var(--border_color);
  box-shadow: 0 1px 0 var(--border_color), 0 4px 16px rgba(15, 23, 42, .04);
}
.dashboard-nav .btn-outline-primary { border-radius: 999px; }
.dashboard-btn { border-radius: 12px; transition: background .2s ease; }

/* ---------- Dashboard counters / cards ---------- */
.dashboard-counter,
.dashboard-card,
.dashboard-chart-card {
  border-radius: var(--sc-radius);
  border: 1px solid var(--border_color);
  box-shadow: var(--sc-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.dashboard-counter:hover,
.dashboard-card:hover { box-shadow: var(--sc-shadow-lg); }
.dashboard-counter-icon {
  border-radius: 14px;
  background: var(--swiper_background_color);
  color: #0e5a3c;
}
.dashboard-counter-info .dashboard-counter-icon { background: rgba(37, 99, 235, .12); color: #2563eb; }
.dashboard-counter-secondary .dashboard-counter-icon { background: rgba(139, 92, 246, .12); color: #8b5cf6; }
.dashboard-counter-danger .dashboard-counter-icon { background: rgba(239, 68, 68, .12); color: #ef4444; }
.dashboard-counter-number { font-weight: 800; letter-spacing: -0.02em; color: var(--heading_color); }
.dashboard-counter-title { color: var(--text_muted); }
.dashboard-footer {
    margin-top: auto;
    background-color: #182433 !important;
    padding: 16px 20px;
    color: #fff !important;
    font-size: 14px;
}

/* ---------- Workspace: wider sidebar + colourful dashboard ---------- */
@media (min-width: 1200px) {
  .dashboard-sidebar { width: 300px !important; }
  .dashboard-body { width: calc(100% - 300px) !important; margin-inline-start: 300px !important; }
  .dashboard-nav { left: 300px !important; width: calc(100% - 300px) !important; }
  .dashboard.toggle .dashboard-sidebar { left: -300px; }
  .dashboard.toggle .dashboard-nav { left: 0 !important; width: 100% !important; }
  .h3, h3 { font-size: 1.4rem !important; }
}
/* sidebar gradient */
.dashboard-sidebar,
.dashboard-sidebar .dashboard-sidebar-body,
.dashboard-sidebar .dashboard-sidebar-container {
  background: linear-gradient(185deg, #232a36 0%, #0b0e13 100%) !important;
}
.dashboard-sidebar .nav-link { border-radius: 12px; }
/* simplebar scroll body is absolute (left:0 only) -> force it to fill the widened sidebar */
.dashboard-sidebar .dashboard-sidebar-body { width: 100% !important; right: 0 !important; }
.dashboard-sidebar .simplebar-content-wrapper,
.dashboard-sidebar .simplebar-content,
.dashboard-sidebar .dashboard-sidebar-content,
.dashboard-sidebar .dashboard-sidebar-inner { width: 100%; }

/* greeting banner */
.dashboard-greeting {
  background: linear-gradient(120deg, #111827 0%, #1f2937 100%);
  border-radius: 18px;
  padding: 26px 28px;
  color: #fff;
  margin-bottom: 20px;
}
.dashboard-greeting h3 { font-weight: 700; margin: 0 0 4px; letter-spacing: -0.02em; }
.dashboard-greeting p { margin: 0; color: rgba(255, 255, 255, .7); }
.dashboard-greeting .dg-accent { color: #34d399; }

/* 4 stat cards as full-colour gradient tiles */
.dashboard-counter {
  padding: 26px;
  gap: 18px;
  border: none !important;
  border-radius: 18px;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
  background: linear-gradient(135deg, #1aa06c 0%, #0e5a3c 100%);
}
.dashboard-counter.dashboard-counter-info      { background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); }
.dashboard-counter.dashboard-counter-danger    { background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); }
.dashboard-counter.dashboard-counter-secondary { background: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%); }
.dashboard-counter.dashboard-counter-cyan      { background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); }
.dashboard-counter.dashboard-counter-amber     { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); }
.dashboard-counter.dashboard-counter-pink      { background: linear-gradient(135deg, #f472b6 0%, #db2777 100%); }
.dashboard-counter.dashboard-counter-indigo    { background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%); }
.dashboard-counter .dashboard-counter-icon {
  width: 58px; height: 58px; font-size: 22px; flex-shrink: 0;
  background: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
}
.dashboard-counter .dashboard-counter-number { font-size: 30px; line-height: 1.1; color: #fff !important; }
.dashboard-counter .dashboard-counter-title {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 6px; color: rgba(255, 255, 255, .92) !important;
}
.dashboard-counter:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(15, 23, 42, .22); }
.dashboard-card, .dashboard-chart-card { border-radius: 18px;}

/* ---------- Auth (sign in / up) ---------- */
.sign-box { max-width: 460px; margin: 0 auto; }
.sign-box .card-v { padding: 36px; }
.sign-box-title { font-weight: 800; letter-spacing: -0.02em; color: var(--heading_color); }
.sign-box-text { color: var(--text_muted); }
.sign-box .form-label { font-weight: 600; font-size: 14px; color: var(--heading_color); }
.sign-box .form-check-input:checked { background-color: #0e5a3c; border-color: #0e5a3c; }

/* ---------- Cart ---------- */
.cart-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border_color);
}
.cart-item:last-child { border-bottom: none; padding-bottom: 0; }
.cart-item:first-child { padding-top: 0; }
.cart-item-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--heading_color);
  letter-spacing: -0.01em;
}
.cart-item-title:hover { color: #0e5a3c; }
.item-img-sm img { border-radius: var(--sc-radius-sm); object-fit: cover; }

/* ---------- Checkout ---------- */
.checkout-method,
.payment-method {
  border-radius: var(--sc-radius-sm);
  border: 1.5px solid var(--border_color);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.checkout-method:hover,
.payment-method:hover { border-color: rgba(14, 90, 60, .45); }
.checkout-method.active,
.payment-method.active {
  border-color: #0e5a3c;
  box-shadow: var(--sc-ring);
}
/* gateway shown as a clean selectable card (name only, no logo) */
.payment-method {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 16px 18px;
  min-height: 64px;
  height: 100%;
  background: #fff;
  border: 1.5px solid var(--border_color);
  border-radius: var(--sc-radius-sm);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.payment-method:hover {
  border-color: rgba(14, 90, 60, .55);
  transform: translateY(-2px);
  box-shadow: var(--sc-shadow);
}
/* custom radio on the left */
.payment-method .form-check-input {
  position: static;
  order: -1;
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid #cbd5e1;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.payment-method .form-check-input:checked {
  border-color: #0e5a3c;
  background-color: #0e5a3c;
}
/* drop the old absolute border overlay; the card has its own border now */
.payment-method .form-check-label::after { display: none; }
.payment-method .form-check-label { position: absolute; inset: 0; cursor: pointer; z-index: 2; }
.payment-method .payment-name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--heading_color);
  line-height: 1.3;
  word-break: break-word;
}
.payment-method .payment-balance { display: block; font-size: 12px; color: var(--text_muted); margin-top: 2px; }
/* clear selected state (card containing the checked radio) */
.payment-method:has(.form-check-input:checked) {
  border-color: #0e5a3c;
  background: var(--swiper_background_color);
  box-shadow: 0 0 0 3px rgba(14, 90, 60, .14);
}
.payment-method:has(.form-check-input:checked) .payment-name { color: #0e5a3c; }

/* ============================================================
   Blog, profile/portfolio, contact, static pages, settings
   ============================================================ */

/* ---------- Page header banner: đồng bộ light hero trang chủ ---------- */
.header.header-bg {
  background: radial-gradient(circle at 15% 37%, rgba(14, 90, 60, .13), transparent 26%), radial-gradient(circle at 84% 130%, rgba(14, 90, 60, .10), transparent 30%), repeating-radial-gradient(circle at 24% 46%, rgba(14, 90, 60, .05) 0 1px, transparent 1px 30px), linear-gradient(135deg, #faf8f3 0%, #fff7e6 100%);
  border-bottom: 1px solid var(--border_color);
}
.header.header-bg .header-inner { padding: 42px 0; }
.header.header-bg .header-title { font-weight: 800; letter-spacing: -0.02em; color: var(--heading_color); }

/* ---------- Blog post cards ---------- */
.blog-post {
  height: 100%;
  background: #fff;
  border: 1px solid var(--border_color);
  border-radius: var(--sc-radius);
  overflow: hidden;
  box-shadow: var(--sc-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blog-post:hover {
  transform: translateY(-5px);
  box-shadow: var(--sc-shadow-lg);
  border-color: rgba(14, 90, 60, .35);
}
.blog-post-img, .blog-post-header { overflow: hidden; }
.blog-post-img img { transition: transform .4s ease; width: 100%; }
.blog-post:hover .blog-post-img img { transform: scale(1.05); }
.blog-post-body { padding: 18px 20px 20px; }
.blog-post-title { font-weight: 700; letter-spacing: -0.01em; color: var(--heading_color); }
.blog-post-title:hover, .blog-post-title a:hover { color: #0e5a3c; }
.blog-post-text { color: var(--text_muted); font-size: 14px !important; line-height: 1.6; }
.blog-post-meta { color: var(--text_muted); font-size: 13px; }
.blog-post-meta-item i { color: #0e5a3c; }
@media (min-width: 1200px) {
    .h4, h4 {
        font-size: 1.15rem !important;
    }
}
/* ---------- Single article (professional editorial layout) ---------- */
.blog-post.blog-post-single {
  background: #fff;
  border: 1px solid var(--border_color);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  padding: 26px 20px 32px;
}
@media (min-width: 768px) {
  .blog-post.blog-post-single { padding: 44px 36px 48px; }
}
/* don't lift the single article on hover like the list cards do */
.blog-post.blog-post-single:hover {
  transform: none;
  box-shadow: var(--sc-shadow);
  border-color: var(--border_color);
}
.blog-post-single .blog-post-title {
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  line-height: 1.18;
}
.blog-post-single .blog-post-meta-item a {
  display: inline-block;
  background: var(--swiper_background_color);
  color: #0e5a3c;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}
.blog-post-single .blog-post-meta-item a:hover { color: #0a4329; }
.blog-post-single .blog-post-header {
  border-radius: var(--sc-radius);
  overflow: hidden;
  box-shadow: var(--sc-shadow);
  margin-bottom: 8px;
}
.blog-post-single .blog-post-img { border-radius: var(--sc-radius); }

.blog-post-single-text { font-size: 17px; line-height: 1.85; color: #374151; }
/* lead paragraph */
.blog-post-single-text > p:first-child {
  font-size: 1.18em;
  line-height: 1.6;
  font-weight: 500;
  color: var(--heading_color);
  margin-bottom: 1.1em;
}
.blog-post-single-text p { margin-bottom: 1.2em; }
.blog-post-single-text h1,
.blog-post-single-text h2,
.blog-post-single-text h3,
.blog-post-single-text h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading_color);
  line-height: 1.25;
  margin: 1.7em 0 .55em;
}
.blog-post-single-text h2 { font-size: 1.5rem; }
.blog-post-single-text h3 { font-size: 1.25rem; }
.blog-post-single-text h4 { font-size: 1.08rem; }
.blog-post-single-text a {
  color: #0e5a3c;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-post-single-text a:hover { color: #0a4329; }
.blog-post-single-text strong { color: var(--heading_color); font-weight: 700; }
.blog-post-single-text ul,
.blog-post-single-text ol { margin: 0 0 1.2em 1.3em; }
.blog-post-single-text li { margin-bottom: .5em; }
.blog-post-single-text ul li::marker { color: #0e5a3c; }
.blog-post-single-text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--sc-radius);
  margin: 1.3em 0;
}
.blog-post-single-text blockquote {
  margin: 1.5em 0;
  padding: 6px 0 6px 20px;
  border-inline-start: 4px solid #0e5a3c;
  color: var(--heading_color);
  font-size: 1.1em;
  font-style: italic;
}
.blog-post-single-text pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 16px 18px;
  border-radius: var(--sc-radius-sm);
  overflow-x: auto;
  font-size: 14px;
  margin: 1.3em 0;
}
.blog-post-single-text code {
  background: var(--swiper_background_color);
  color: #0a4329;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .9em;
}
.blog-post-single-text pre code { background: none; color: inherit; padding: 0; }
.blog-post-single-text hr { border: 0; border-top: 1px solid var(--border_color); margin: 2em 0; }

.blog-post-single .comments { margin-top: 44px; }
.comments-title { font-weight: 700; color: var(--heading_color); margin-bottom: 18px; }
.comment { padding: 18px 0; border-bottom: 1px solid var(--border_color); }
.comment:last-child { border-bottom: none; }
.comment-img img { border-radius: 12px; object-fit: cover; }
.comment-title { font-weight: 600; color: var(--heading_color); }
.comment-time { color: var(--text_muted); font-size: 13px; }

/* ---------- Latest-from-blog cards (home) ---------- */
.sc-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
}
.sc-blog-card .blog-post-header { aspect-ratio: 16 / 10; overflow: hidden; }
.sc-blog-card .blog-post-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.sc-blog-card:hover .blog-post-img { transform: scale(1.05); }
.sc-blog-card .blog-post-body { display: flex; flex-direction: column; flex: 1; }
.sc-blog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.sc-blog-cat {
  background: var(--swiper_background_color);
  color: #0e5a3c;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.sc-blog-date { color: var(--text_muted); font-size: 12px; }
.sc-blog-card .blog-post-title { font-size: 16px; line-height: 1.35; margin-bottom: 8px; }
.sc-blog-card:hover .blog-post-title { color: #0e5a3c; }
.sc-blog-more { color: #0e5a3c; font-weight: 600; font-size: 14px; }

/* ---------- Blog single: 2-column layout (sidebar + article) ---------- */
/* the base theme caps .blog-container at 900px; widen it for the 2-col page */
.blog-container.sc-blog-single-wrap { max-width: 100%; }
.sc-blog-layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.sc-blog-aside { flex: 0 0 320px; max-width: 320px; }
.sc-blog-main { flex: 1 1 0; min-width: 0; }
@media (max-width: 991.98px) {
  .sc-blog-layout { flex-direction: column; }
  .sc-blog-aside { order: 2; flex-basis: auto; max-width: 100%; width: 100%; }
  .sc-blog-main { order: 1; width: 100%; }
}

.sc-blog-sidebar {
  position: sticky;
  top: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 991.98px) {
  .sc-blog-sidebar { position: static; }
}
.sc-blog-widget {
  background: #fff;
  border: 1px solid var(--border_color);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  padding: 20px 20px 22px;
}
.sc-blog-widget-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--heading_color);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border_color);
}
.sc-blog-widget-title i { color: #0e5a3c; }

/* categories list */
.sc-cat-list { display: flex; flex-direction: column; gap: 2px; }
.sc-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text_color);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.sc-cat-link:hover { background: var(--swiper_background_color); color: #0e5a3c; }
.sc-cat-count {
  flex-shrink: 0;
  min-width: 26px;
  text-align: center;
  background: var(--swiper_background_color);
  color: #0e5a3c;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 9px;
  border-radius: 999px;
}
.sc-cat-link:hover .sc-cat-count { background: #fff; }

/* latest posts mini list */
.sc-mini-list { display: flex; flex-direction: column; gap: 14px; }
.sc-mini-post { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.sc-mini-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
}
.sc-mini-body { min-width: 0; display: flex; flex-direction: column; }
.sc-mini-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading_color);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sc-mini-post:hover .sc-mini-title { color: #0e5a3c; }
.sc-mini-price { color: #0e5a3c; font-weight: 700; }
.sc-mini-date { font-size: 11.5px; color: var(--text_muted); }

/* ---------- Profile / portfolio ---------- */
.section-profile .header-profile,
.header-profile {
  border-radius: var(--sc-radius);
  overflow: hidden;
  position: relative;
}
/* light gradient over the cover so the text stays readable (not too dark) */
.header-profile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, .12) 0%, rgba(15, 23, 42, .45) 100%);
  pointer-events: none;
  z-index: 0;
}
.header-profile > div { position: relative; z-index: 1; }
/* force the author name / meta / stats to white on the cover (was text-dark) */
.header-profile .header-inner h1,
.header-profile .header-inner .text-dark,
.header-profile .header-inner .text-muted,
.header-profile .user-stat-title,
.header-profile .user-stat-number { color: #ffffff !important; }
.header-profile .nav-tabs .nav-link { color: rgba(255, 255, 255, .8); }
.header-profile .nav-tabs .nav-link:hover,
.header-profile .nav-tabs .nav-link:focus { color: #ffffff !important; }
.header-profile .nav-tabs .nav-link.active {
  color: #34d399 !important;
  border-bottom-color: #34d399 !important;
}
.header-profile .nav-tabs .nav-link.active::after { background-color: #34d399 !important; }
/* Follow button (outline) on the dark profile header: light so it stays readable */
.header-profile .btn-outline-custom,
.header-profile .btn-outline-custom span,
.header-profile .btn-outline-custom i {
  border-color: rgba(255, 255, 255, .55) !important;
  color: #ffffff !important;
}
.header-profile .btn-outline-custom:hover,
.header-profile .btn-outline-custom:focus {
  background: #34d399 !important;
  border-color: #34d399 !important;
}
.header-profile .btn-outline-custom:hover,
.header-profile .btn-outline-custom:hover span,
.header-profile .btn-outline-custom:hover i,
.header-profile .btn-outline-custom:focus,
.header-profile .btn-outline-custom:focus span,
.header-profile .btn-outline-custom:focus i {
  color: #07301f !important;
}
.user-avatar-xl, .user-avatar-xl img {
  width: 120px; height: 120px;
}
/* large author avatar: fixed box, clip overflow, never shrink (fixes the name overlapping the avatar) */
.user-avatar-xl { flex-shrink: 0; overflow: hidden; border-radius: 50%; }
.user-avatar-xl img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .header-profile .header-inner > .row > .col:first-child > .row,
  .section-start .card-v .row.row-cols-md-auto.align-items-center {
    flex-wrap: nowrap;
    column-gap: 22px;
  }
  .header-profile .header-inner > .row > .col:first-child > .row > .col {
    width: auto;
  }
}
.user-avatar img { border-radius: 50px; object-fit: cover; box-shadow: 0 5px 10px rgb(37 39 43 / 65%);}
.user-avatar-xl img { border: 4px solid #fff; box-shadow: none; }
.header-profile .nav-tabs, .nav-tabs { border-bottom: 1px solid var(--border_color); }
.nav-tabs .nav-link {
  font-weight: 600;
  color: var(--text_muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color .2s ease, border-color .2s ease;
}
.nav-tabs .nav-link:hover { color: var(--heading_color); border-color: var(--border_color); }
.nav-tabs .nav-link.active {
  color: #0e5a3c;
  background: transparent;
  border-color: #0e5a3c;
}
.profile-dropdown .dropdown-menu {
  border-radius: var(--sc-radius-sm);
  border: 1px solid var(--border_color);
  box-shadow: var(--sc-shadow-lg);
}
.author-badge img, .author-badge { border-radius: 10px; }
.socials .social-btn {
  border-radius: 12px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.socials .social-btn:hover { transform: translateY(-2px); }

/* ---------- Settings tabs ---------- */
.settings-links-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border_color);
  border-radius: var(--sc-radius);
  padding: 8px;
  box-shadow: var(--sc-shadow);
}
.settings-link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--text_color);
  padding: 9px 16px;
  border-radius: var(--sc-radius-sm);
  transition: background .2s ease, color .2s ease;
}
button.settings-link { border: 0; background: transparent; cursor: pointer; }
.settings-link:hover { background: var(--swiper_background_color); color: #0e5a3c; }
.settings-link.active {
  background-image: linear-gradient(135deg, #0e5a3c 0%, #157a4f 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(14, 90, 60, .3);
}

/* Form sections */
.form-section { border-bottom: 1px solid var(--border_color); padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.form-section:last-child { border-bottom: none; }
.form-label { font-weight: 600; font-size: 14px; color: var(--heading_color); }
.form-text { color: var(--text_muted); }

/* ---------- Static (CMS) pages: prose ---------- */
.sc-prose { color: var(--text_color); font-size: 15px; line-height: 1.7; font-family: var(--sc-font); }
.sc-prose h1, .sc-prose h2, .sc-prose h3, .sc-prose h4 {
  font-weight: 700; letter-spacing: -0.02em; color: var(--heading_color);
  margin: 1.6em 0 .6em; line-height: 1.25;
}
.sc-prose h1 { font-size: 2rem; }
.sc-prose h2 { font-size: 1.6rem; }
.sc-prose h3 { font-size: 1.3rem; }
.sc-prose p { margin-bottom: 1.1em; }
.sc-prose a { color: #0e5a3c; text-decoration: underline; text-underline-offset: 3px; }
.sc-prose ul, .sc-prose ol { margin: 0 0 1.1em 1.2em; }
.sc-prose li { margin-bottom: .5em; }
.sc-prose img { max-width: 100%; height: auto; border-radius: var(--sc-radius); margin: 1em 0; }
.sc-prose blockquote {
  border-inline-start: 4px solid var(--primary_color);
  background: var(--swiper_background_color);
  padding: 14px 20px;
  border-radius: 0 var(--sc-radius-sm) var(--sc-radius-sm) 0;
  margin: 1.4em 0;
  color: var(--heading_color);
}
.sc-prose pre, .sc-prose code {
  background: #0f172a; color: #e2e8f0;
  border-radius: 8px; font-size: 14px;
}
.sc-prose code { padding: 2px 6px; }
.sc-prose pre { padding: 16px 18px; overflow: auto; }
.sc-prose pre code { background: transparent; padding: 0; }
.sc-prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.sc-prose th, .sc-prose td { border: 1px solid var(--border_color); padding: 10px 14px; text-align: start; }
.sc-prose th { background: var(--swiper_background_color); font-weight: 700; color: var(--heading_color); }

/* ---------- Unified static pages (sc-page) ----------
   Shared design system for all CMS pages. Page bodies in the DB contain
   only semantic HTML with these classes — no embedded <style> blocks. */
.sc-page {
  --pg-ink: var(--heading_color, #101828);
  --pg-mut: #667085;
  --pg-line: var(--border_color, #e4e7ec);
  --pg-soft: #f7f8f7;
  --pg-green: #0e5a3c;
  --pg-green-soft: #e9f3ee;
  --pg-amber: #92400e; --pg-amber-soft: #fdf5e7; --pg-amber-line: #f2d8a6;
  --pg-red: #b42318; --pg-red-soft: #fdefed;
  padding: .5rem 0 3rem;
  color: var(--text_color); font-size: 15px; line-height: 1.75;
  font-family: var(--sc-font);
}
.sc-page h2, .sc-page h3, .sc-page h4 { color: var(--pg-ink); letter-spacing: -0.01em; }
.sc-page a { color: var(--pg-green); text-decoration: underline; text-underline-offset: 3px; }

/* head */
.sc-page-head { padding-bottom: 1.75rem; border-bottom: 1px solid var(--pg-line); margin-bottom: 2rem; }
.sc-page-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px;
  border-radius: 999px; background: var(--pg-green-soft); color: var(--pg-green);
  font-size: 12.5px; font-weight: 600; margin-bottom: .9rem;
}
.sc-page-meta { font-size: 13px; color: var(--pg-mut); margin-bottom: .9rem; }
.sc-page-lead { font-size: 16.5px; line-height: 1.7; color: var(--text_color); margin: 0; }

/* notes */
.sc-page-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--pg-soft); border: 1px solid var(--pg-line);
  border-radius: 12px; padding: 14px 18px; margin: 1.4rem 0;
}
.sc-page-note > i { flex: none; margin-top: 4px; font-size: 15px; color: var(--pg-mut); }
.sc-page-note p { margin: 0; font-size: 13.5px; line-height: 1.65; }
.sc-page-note--warn { background: var(--pg-amber-soft); border-color: var(--pg-amber-line); }
.sc-page-note--warn > i, .sc-page-note--warn p { color: var(--pg-amber); }
.sc-page-note--ok { background: var(--pg-green-soft); border-color: #bcd9c9; }
.sc-page-note--ok > i, .sc-page-note--ok p { color: var(--pg-green); }
.sc-page-note--danger { background: var(--pg-red-soft); border-color: #f1c1bb; }
.sc-page-note--danger > i, .sc-page-note--danger p { color: var(--pg-red); }

/* tile grid */
.sc-page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 1.6rem 0; }
.sc-page-tile { background: #fff; border: 1px solid var(--pg-line); border-radius: 14px; padding: 18px; }
.sc-page-tile > i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--pg-green-soft); color: var(--pg-green); font-size: 15px; margin-bottom: 12px;
}
.sc-page-tile h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 4px; }
.sc-page-tile p { font-size: 13px; color: var(--pg-mut); line-height: 1.55; margin: 0; }

/* numbered sections */
.sc-page-sec { margin-top: 2.6rem; }
.sc-page-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.sc-page-sec-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--pg-green-soft); color: var(--pg-green);
  font-size: 13px; font-weight: 700; font-family: SFMono-Regular, Menlo, monospace;
}
.sc-page-sec-head h2 { font-size: 20px; font-weight: 700; margin: 0; }
.sc-page-sec h3 { font-size: 16px; font-weight: 700; margin: 1.5em 0 .55em; }
.sc-page-sec > p { margin: 0 0 1em; }

/* icon lists */
.sc-page-ul { list-style: none; margin: 0 0 1.2em; padding: 0; }
.sc-page-ul li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: .55em; }
.sc-page-ul li > i { flex: none; margin-top: 5px; font-size: 12.5px; color: var(--pg-mut); }
.sc-page-ul.ok li > i { color: #17714a; }
.sc-page-ul.no li > i { color: var(--pg-red); }

/* plan / option tiers */
.sc-page-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 1.2rem 0 1.5rem; }
.sc-page-tier { background: #fff; border: 1px solid var(--pg-line); border-radius: 14px; padding: 16px 14px; text-align: center; position: relative; }
.sc-page-tier.is-featured { border: 2px solid var(--pg-green); }
.sc-page-tier-flag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--pg-green); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px; white-space: nowrap;
}
.sc-page-tier-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pg-mut); margin-bottom: 6px; }
.sc-page-tier-val { font-size: 20px; font-weight: 700; color: var(--pg-ink); margin-bottom: 4px; }
.sc-page-tier.is-featured .sc-page-tier-val { color: var(--pg-green); }
.sc-page-tier-desc { font-size: 12.5px; color: var(--pg-mut); line-height: 1.5; }
.sc-page-tier ul { list-style: none; margin: 10px 0 0; padding: 0; text-align: start; }
.sc-page-tier ul li { font-size: 12.5px; color: var(--pg-mut); padding: 3px 0; }
.sc-page-tier ul li i { color: #17714a; font-size: 11px; margin-right: 6px; }

/* paired panels */
.sc-page-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 1.6rem 0; }
.sc-page-panel { border: 1px solid var(--pg-line); border-radius: 14px; padding: 20px; background: #fff; }
.sc-page-panel--ok { background: var(--pg-green-soft); border-color: #bcd9c9; }
.sc-page-panel--muted { background: var(--pg-soft); }
.sc-page-panel--danger { background: var(--pg-red-soft); border-color: #f1c1bb; }
.sc-page-panel-kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--pg-mut); margin-bottom: 10px; }
.sc-page-panel--ok .sc-page-panel-kicker { color: var(--pg-green); }
.sc-page-panel--danger .sc-page-panel-kicker { color: var(--pg-red); }
.sc-page-panel h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.sc-page-panel p { font-size: 13.5px; line-height: 1.65; margin: 0; }
.sc-page-panel .sc-page-ul { margin: 12px 0 0; }
.sc-page-panel .sc-page-ul li { font-size: 13.5px; margin-bottom: .45em; }

/* timeline steps */
.sc-page-steps { margin: 1.4rem 0; padding: 0; list-style: none; }
.sc-page-steps li { position: relative; padding: 0 0 1.4rem 34px; }
.sc-page-steps li::before {
  content: ""; position: absolute; left: 9px; top: 8px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--pg-green); box-shadow: 0 0 0 4px var(--pg-green-soft);
}
.sc-page-steps li::after {
  content: ""; position: absolute; left: 13px; top: 24px; bottom: -2px; width: 2px; background: var(--pg-line);
}
.sc-page-steps li:last-child { padding-bottom: 0; }
.sc-page-steps li:last-child::after { display: none; }
.sc-page-steps h4 { font-size: 14.5px; font-weight: 700; margin: 0 0 3px; }
.sc-page-steps p { font-size: 13.5px; color: var(--text_color); margin: 0; }

/* tables */
.sc-page table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.2rem 0 1.5rem; font-size: 14px; border: 1px solid var(--pg-line); border-radius: 12px; overflow: hidden; }
.sc-page table th { background: var(--pg-soft); font-weight: 700; color: var(--pg-ink); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.sc-page table th, .sc-page table td { padding: 11px 16px; border: 0; border-bottom: 1px solid var(--pg-line); text-align: start; }
.sc-page table tr:last-child td { border-bottom: 0; }
.sc-page-table-wrap { overflow-x: auto; }

/* stat / formula callout */
.sc-page-stat {
  background: var(--pg-green-soft); border: 1px solid #bcd9c9; border-radius: 14px;
  padding: 20px 24px; margin: 1.4rem 0; text-align: center;
}
.sc-page-stat strong { display: block; font-size: 30px; font-weight: 800; color: var(--pg-green); line-height: 1.2; }
.sc-page-stat span { font-size: 13.5px; color: var(--pg-ink); }
.sc-page-formula {
  background: #0f172a; color: #e2e8f0; border-radius: 12px; padding: 14px 18px; margin: 1.2rem 0;
  font-family: SFMono-Regular, Menlo, monospace; font-size: 13.5px; overflow-x: auto; white-space: nowrap;
}

/* contact block */
.sc-page-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 1.2rem 0 0; }
.sc-page-contact a {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--pg-line); border-radius: 14px; background: #fff;
  text-decoration: none; color: var(--pg-ink);
}
.sc-page-contact a:hover { border-color: var(--pg-green); }
.sc-page-contact i {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; background: var(--pg-green-soft); color: var(--pg-green);
}
.sc-page-contact em { display: block; font-style: normal; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--pg-mut); }
.sc-page-contact b { font-size: 14px; font-weight: 600; }

/* CTA button (marketing pages) */
.sc-page-cta { text-align: center; margin: 1.8rem 0; }
.sc-page-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 28px;
  background: var(--pg-green); color: #fff !important; border-radius: 999px;
  font-size: 15px; font-weight: 700; text-decoration: none !important;
}
.sc-page-btn:hover { background: #0b4a31; color: #fff; }
.sc-page-cta small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--pg-mut); }

@media (max-width: 575.98px) {
  .sc-page-sec-head h2 { font-size: 18px; }
  .sc-page-lead { font-size: 15.5px; }
}

/* ---------- Online courses (Udemy-style) ---------- */
.sc-crs-hero { background: #14161b; color: #fff; padding: 34px 0 30px; }
.sc-crs-crumbs { font-size: 13px; margin-bottom: 12px; }
.sc-crs-crumbs a { color: #7dd3fc; text-decoration: none; font-weight: 600; }
.sc-crs-title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin-bottom: 8px; }
.sc-crs-subtitle { font-size: 17px; color: rgba(255, 255, 255, .85); margin-bottom: 12px; }
.sc-crs-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: rgba(255, 255, 255, .8); margin-bottom: 6px; }
.sc-crs-hero-meta a { color: #7dd3fc; }
.sc-crs-rating b { color: #f5c96b; margin-right: 4px; }
.sc-crs-rating .fa-star { color: #f5c96b; font-size: 12px; }

.sc-crs-box { border: 1px solid var(--border_color); border-radius: 14px; padding: 22px 24px; }
.sc-crs-box-title, .sc-crs-sec-title { font-size: 18px !important; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 14px; color: var(--heading_color); }

.sc-crs-accordion .accordion-button { font-weight: 700; background: var(--swiper_background_color, #f8f9fa); }
.sc-crs-accordion .accordion-button:not(.collapsed) { color: var(--heading_color); box-shadow: none; }
.sc-crs-lecture { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--border_color); font-size: 14px; }
.sc-crs-lecture-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-crs-lecture-time { color: var(--text_muted); font-size: 12.5px; flex-shrink: 0; }
.sc-crs-preview-link { color: #0e5a3c; font-weight: 700; font-size: 12.5px; text-decoration: underline; flex-shrink: 0; }

/* sticky buy card */
.sc-crs-side { position: sticky; top: 90px; }
.sc-crs-buy { background: #fff; border: 1px solid var(--border_color); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(16, 24, 40, .1); }
.sc-crs-buy-media { position: relative; }
.sc-crs-buy-media img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.sc-crs-buy-play { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.sc-crs-buy-play span {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; background: #fff; color: #14161b;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.sc-crs-buy-play em {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 0 10px;
  color: #fff; font-style: normal; font-weight: 700; font-size: 14px; text-align: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
}
.sc-crs-buy-body { padding: 18px 20px 20px; }
.sc-crs-buy-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.sc-crs-buy-price b { font-size: 30px; font-weight: 800; color: var(--heading_color); }
.sc-crs-buy-price s { color: var(--text_muted); }
.sc-crs-buy-off { color: #b42318; font-weight: 700; font-size: 13px; }
.sc-crs-buy-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.sc-crs-buy-list li { display: flex; gap: 10px; align-items: center; padding: 3px 0; color: var(--text_color); }
.sc-crs-buy-list i { color: var(--text_muted); width: 16px; }

/* course cards (listing / my learning) */
.sc-crs-card {
  display: flex; flex-direction: column; height: 100%; background: #fff;
  border: 1px solid var(--border_color); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: var(--text_color);
  transition: box-shadow .15s ease, transform .15s ease;
}
.sc-crs-card:hover { box-shadow: 0 12px 26px rgba(16, 24, 40, .12); transform: translateY(-2px); }
.sc-crs-card-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.sc-crs-card-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; }
.sc-crs-card-title { font-size: 14.5px; font-weight: 700; color: var(--heading_color); line-height: 1.35; }
.sc-crs-card-author { font-size: 12px; color: var(--text_muted); }
.sc-crs-card-rating { font-size: 12.5px; }
.sc-crs-card-rating b { color: #b4690e; }
.sc-crs-card-rating .fa-star { color: #f5c96b; font-size: 11px; }
.sc-crs-card-rating em { font-style: normal; color: var(--text_muted); }
.sc-crs-card-meta { font-size: 12px; color: var(--text_muted); }
.sc-crs-card-price { margin-top: 4px; }
.sc-crs-card-price b { font-size: 16px; font-weight: 800; color: var(--heading_color); }
.sc-crs-card-price s { color: var(--text_muted); font-size: 13px; margin-left: 6px; }
.sc-crs-card-sm .sc-crs-card-title { font-size: 12.5px; }

/* courses listing: hero search / tabs / instructors / sidebar filters */
/* .section has overflow:hidden in app.css which kills position:sticky */
.sc-crs-section { overflow: visible !important; }
/* legacy global .col-lg-4 override (26.33%) shrinks the course sidebar — restore
   the proper bootstrap 1/3 width on course pages only */
@media (min-width: 992px) {
  .sc-crs-section .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
}

.sc-crs-search {
  display: flex; align-items: center; gap: 10px; max-width: 720px;
  background: #fff; border: 1.5px solid var(--border_color); border-radius: 999px;
  padding: 6px 6px 6px 20px; transition: border-color .15s ease, box-shadow .15s ease;
}
.sc-crs-search:focus-within { border-color: #0e5a3c; box-shadow: 0 0 0 4px rgba(14, 90, 60, .08); }
.sc-crs-search i { color: var(--text_muted); }
.sc-crs-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 15px; }
.sc-crs-search .btn { border-radius: 999px; padding: 9px 26px; }

.sc-crs-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border_color); }
.sc-crs-tab {
  border: 0; background: none; padding: 8px 2px 12px; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--text_muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sc-crs-tab.is-active { color: var(--heading_color); border-bottom-color: #0e5a3c; }

.sc-crs-inst {
  display: flex; gap: 14px; align-items: flex-start; height: 100%;
  background: #fff; border: 1px solid var(--border_color); border-radius: 14px;
  padding: 16px; text-decoration: none; color: var(--text_color);
  transition: box-shadow .15s ease;
}
.sc-crs-inst:hover { box-shadow: 0 10px 22px rgba(16, 24, 40, .1); }
.sc-crs-inst > img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sc-crs-inst-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-crs-inst-info > strong { color: var(--heading_color); font-size: 14.5px; line-height: 1.3; }
.sc-crs-inst-head { font-size: 12px; color: var(--text_muted); }
.sc-crs-inst-rate { font-size: 12.5px; color: #b4690e; font-weight: 600; }
.sc-crs-inst-rate .fa-star { color: #f5c96b; font-size: 11px; }
.sc-crs-inst-meta { font-size: 12px; color: var(--text_muted); }
.sc-crs-inst-meta b { color: var(--heading_color); }

.sc-crs-filters { position: sticky; top: 90px; background: #fff; }
.sc-crs-filter { border-top: 1px solid var(--border_color); padding: 14px 0; }
.sc-crs-filter:first-child { border-top: 0; padding-top: 0; }
.sc-crs-filter-title { font-weight: 800; font-size: 15px; color: var(--heading_color); margin-bottom: 10px; }
.sc-crs-filter-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 13.5px; cursor: pointer; color: var(--text_color);
}
.sc-crs-filter-row input { accent-color: #0e5a3c; flex-shrink: 0; }
.sc-crs-filter-row em { font-style: normal; color: var(--text_muted); font-size: 12px; }
.sc-crs-filter-stars .fa-star, .sc-crs-filter-stars .fa-star-half-stroke { color: #f5c96b; font-size: 11.5px; }
.sc-crs-filter-clear { display: inline-block; font-size: 13px; font-weight: 700; color: #b42318; margin-bottom: 10px; text-decoration: none; }

.sc-crs-card-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.sc-crs-badge-best { background: #eceb98; color: #3d3c0a; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.sc-crs-badge-type { border: 1px solid var(--border_color); color: var(--text_muted); font-size: 11px; padding: 1px 8px; border-radius: 4px; }
.sc-crs-badge-rate { color: #b4690e; font-weight: 800; font-size: 12.5px; }
.sc-crs-badge-rate .fa-star { color: #f5c96b; font-size: 11px; margin-right: 2px; }
.sc-crs-badge-count { border: 1px solid var(--border_color); color: var(--text_muted); font-size: 11px; padding: 1px 8px; border-radius: 4px; }

/* learn page */
.sc-learn-stage { background: #14161b; border-radius: 14px; overflow: hidden; }
.sc-learn-article { background: #fff; border: 1px solid var(--border_color); border-radius: 14px; }
.sc-learn-progress { display: inline-block; width: 120px; height: 8px; border-radius: 999px; background: #e4e7ec; overflow: hidden; vertical-align: middle; }
.sc-learn-progress-bar { display: block; height: 100%; border-radius: 999px; background: #0e5a3c; transition: width .3s ease; }
.sc-learn-sidebar { border: 1px solid var(--border_color); border-radius: 14px; overflow: hidden; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; background: #fff; }
.sc-learn-sidebar-head { padding: 14px 16px; font-weight: 800; border-bottom: 1px solid var(--border_color); background: var(--swiper_background_color, #f8f9fa); }
.sc-learn-sec-title { display: flex; justify-content: space-between; gap: 8px; padding: 12px 16px 6px; font-weight: 700; font-size: 13.5px; color: var(--heading_color); }
.sc-learn-sec-title span { color: var(--text_muted); font-weight: 400; font-size: 12px; white-space: nowrap; }
.sc-learn-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  font-size: 13.5px; color: var(--text_color); text-decoration: none;
}
.sc-learn-row:hover { background: var(--swiper_background_color, #f8f9fa); }
.sc-learn-row.is-active { background: #e9f3ee; font-weight: 700; }
.sc-learn-row.is-locked { opacity: .55; }
.sc-learn-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-learn-row-time { font-size: 11.5px; color: var(--text_muted); flex-shrink: 0; }

/* certificate */
.sc-cert { max-width: 860px; margin: 0 auto; }
.sc-cert-inner {
  border: 3px solid #0e5a3c; border-radius: 18px; padding: 56px 48px; text-align: center;
  background: #fffdf7; position: relative;
  box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 8px #e0c98f;
}
.sc-cert-brand { font-size: 15px; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; color: #0e5a3c; margin-bottom: 26px; }
.sc-cert-label { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: #9aa3ad; margin-bottom: 22px; }
.sc-cert-text { color: #667085; margin: 8px 0; }
.sc-cert-name { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: #101828; margin: 6px 0; }
.sc-cert-course { font-size: 22px; font-weight: 700; color: #0e5a3c; margin: 6px 0 18px; }
.sc-cert-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-size: 13px; color: #667085; margin-bottom: 20px; }
.sc-cert-code { font-family: SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .1em; color: #9aa3ad; }
@media print {
  header, footer, .navbar, .foot-main { display: none !important; }
  .sc-cert-inner { box-shadow: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .item:hover { transform: none; }
  .btn:hover { transform: none; }
  .sc-footer-socials .social-btn:hover,
  .sc-footer-top:hover { transform: none; }
  .sc-item-overlay-btn { transform: none; }
}


/* ============================================================
   Yellow/black scheme: force dark ink on yellow-filled elements
   ============================================================ */
.btn.btn-primary,
.cart-counter,
.pagination .page-item.active .page-link,
.sc-trend-icon,
.sc-trend-card:hover .sc-trend-arrow,
.settings-link.active,
.dashboard-sidebar-link.current > .dashboard-sidebar-link-title,
.dashboard-sidebar-link.current > .dashboard-sidebar-link-title i,
.dashboard-balance-icon a,
.sc-marquee-item,
.sc-item-overlay-btn,
.sc-hero-search .search-input .btn,
.sc-footer-socials .social-btn:hover,
.sc-footer-top:hover,
.item-swiper .swiper-button-prev:hover,
.item-swiper .swiper-button-next:hover,
.testimonials-swiper .swiper-button-prev:hover,
.testimonials-swiper .swiper-button-next:hover {
  color: #ffffff !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active { color: #ffffff !important; }
.btn.btn-outline-primary { color: #0e5a3c; }

/* ============================================================
   HOK-style home layout
   ============================================================ */

/* ---------- Hero ---------- */
.sc-hok-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #faf9f6 0%, #edf5f0 100%);
  padding: clamp(2.5rem, 2.5vw, 4rem) 0;
  background-image: repeating-radial-gradient(circle at 25% 50%, rgba(184, 223, 168, 0.16) 0px, rgba(184, 223, 168, 0.16) 1px, transparent 2px, transparent 15px);
}
.sc-hok-hero-blob {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.sc-hok-hero-blob-1 { top: -80px; left: -60px; width: 260px; height: 260px; background: rgba(14, 90, 60, .16); }
.sc-hok-hero-blob-2 { bottom: -90px; right: 30%; width: 220px; height: 220px; background: rgba(17, 17, 17, .04); }
.sc-hok-hero-left { position: relative; z-index: 1; }
.sc-hok-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--heading_color);
  background: #fff;
  border: 1px solid var(--border_color);
  box-shadow: var(--sc-shadow);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.sc-hok-eyebrow .fa-star { color: #0e5a3c; font-size: 11px; }
.sc-hok-eyebrow span { color: var(--text_muted); margin-inline-start: 4px; }
.sc-hok-hero-title {
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--heading_color);
  margin-bottom: 18px;
}
.sc-hok-hero-text {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.7;
  color: var(--text_muted);
  max-width: 520px;
  margin-bottom: 26px;
}
.sc-hok-hero-search { max-width: 560px; }
.sc-hok-hero-search .search-input {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 999px;
  padding: 6px 6px 6px 10px;
  box-shadow: 0 16px 44px rgba(17, 17, 17, .12);
  border: 1px solid var(--border_color);
}
.sc-hok-hero-search .search-input input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent;
  font-size: 15px;
  padding: 12px 14px;
  color: var(--heading_color);
}
.sc-hok-hero-search .search-input .btn {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 12px 26px;
}
.sc-hok-hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 14px;
}
.sc-hok-hero-tags-label { color: var(--text_muted); font-weight: 600; }
.sc-hok-hero-tags a {
  color: var(--heading_color);
  background: #fff;
  border: 1px solid var(--border_color);
  padding: 5px 14px;
  border-radius: 999px;
  transition: .2s ease;
}
.sc-hok-hero-tags a:hover { background: #0e5a3c; border-color: #0e5a3c; color: #fff; }

/* Hero collage */
.sc-hok-hero-right { position: relative; z-index: 1; }
.sc-hok-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 460px;
  margin: 0 auto;
}
.sc-hok-collage-card {
  aspect-ratio: 1 / 1.1;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #fff;
  box-shadow: var(--sc-shadow-lg);
}
.sc-hok-collage-1 { background: linear-gradient(135deg, #111111, #2a2a2a); transform: translateY(18px); }
.sc-hok-collage-2 { background: linear-gradient(135deg, #0e5a3c, #157a4f); color: #fff; }
.sc-hok-collage-3 { background: linear-gradient(135deg, #0e5a3c, #157a4f); color: #fff; transform: translateY(18px); }
.sc-hok-collage-4 { background: linear-gradient(135deg, #111111, #2a2a2a); }
.sc-hok-collage-chip {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sc-shadow-lg);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--text_muted);
  z-index: 2;
}
.sc-hok-collage-rating {
  top: -14px;
  inset-inline-start: -18px;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--heading_color);
}
.sc-hok-collage-rating .fa-star { color: #0e5a3c; }
.sc-hok-collage-rating span { color: var(--text_muted); font-weight: 500; }
.sc-hok-collage-stat { bottom: -16px; inset-inline-end: -10px; }
.sc-hok-collage-stat strong { font-size: 18px; color: var(--heading_color); letter-spacing: -0.02em; }

/* ---------- Find the right ---------- */
.sc-find-visual {
  position: relative;
  border-radius: var(--sc-radius);
  background: linear-gradient(150deg, #111111 0%, #2a2a2a 100%);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34d399;
  font-size: 80px;
  overflow: hidden;
}
.sc-find-visual::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(14, 90, 60, .35), rgba(14, 90, 60, 0) 70%);
}
.sc-find-stat {
  position: absolute;
  bottom: 18px;
  inset-inline-start: 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sc-shadow-lg);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
}
.sc-find-stat strong { font-size: 22px; color: var(--heading_color); letter-spacing: -0.02em; }
.sc-find-stat span { font-size: 12px; color: var(--text_muted); }
.sc-find-text { color: var(--text_muted); line-height: 1.7; margin: 14px 0 22px; }
.sc-find-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
.sc-find-item { display: flex; gap: 14px; align-items: flex-start; }
.sc-find-check {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #edf5f0;
  color: #0e5a3c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sc-find-item h6 { font-weight: 700; color: var(--heading_color); margin-bottom: 3px; }
.sc-find-item p { font-size: 14px; color: var(--text_muted); margin: 0; line-height: 1.5; }

/* ---------- Start as ---------- */
.sc-start {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: var(--sc-radius);
  padding: 34px 36px;
  display: flex;
  align-items: center;
}
.sc-start-body { position: relative; z-index: 1; max-width: 70%; }
.sc-start h3 { font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.sc-start p { line-height: 1.6; margin-bottom: 20px; }
.sc-start-icon {
  position: absolute;
  inset-inline-end: 18px;
  bottom: -10px;
  font-size: 120px;
  opacity: .12;
  z-index: 0;
}
.sc-start-dark { background: linear-gradient(150deg, #111111, #2a2a2a); }
.sc-start-dark h3 { color: #fff; }
.sc-start-dark p { color: #cbd5e1; }
.sc-start-dark .sc-start-icon { color: #0e5a3c; opacity: .18; }
.sc-start-yellow { background: linear-gradient(150deg, #0e5a3c, #157a4f); }
.sc-start-yellow h3, .sc-start-yellow p { color: #ffffff; }
.sc-start-yellow p { opacity: .85; }
.sc-start-yellow .sc-start-icon { color: #fff; }
.sc-start-btn {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  padding: 11px 24px;
  border-radius: 999px;
  transition: transform .2s ease;
}
.sc-start-btn:hover { transform: translateY(-2px); }
.sc-start-btn-yellow { background: #0e5a3c; color: #fff; }
.sc-start-btn-yellow:hover { color: #fff; }
.sc-start-btn-dark { background: #111; color: #fff; }
.sc-start-btn-dark:hover { color: #fff; }

/* ---------- Pricing ---------- */
.sc-plan {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border_color);
  border-radius: var(--sc-radius);
  padding: 30px 26px;
  box-shadow: var(--sc-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sc-plan-text { font-size: 13.5px; color: var(--text_muted); margin: -8px 0 18px; }
.sc-plan-action { margin-top: auto; margin-bottom: 0; }
.sc-plan:hover { transform: translateY(-5px); box-shadow: var(--sc-shadow-lg); }
.sc-plan-featured { border: 2px solid #0e5a3c; box-shadow: 0 18px 44px rgba(14, 90, 60, .22); }
.sc-plan-badge {
  position: absolute;
  top: -12px;
  inset-inline-end: 22px;
  background: #0e5a3c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
}
.sc-plan-name { font-weight: 700; color: var(--heading_color); margin-bottom: 12px; }
.sc-plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 20px; }
.sc-plan-amount { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--heading_color); }
.sc-plan-period { font-size: 14px; color: var(--text_muted); }
.sc-plan-features { list-style: none; padding: 0; margin: 0 0 24px; }
.sc-plan-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text_color);
  padding: 7px 0;
}
.sc-plan-features .fa-check {
  color: #0e5a3c;
  background: #edf5f0;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* ---------- App download ---------- */
.sc-app {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #edf5f0 0%, #faf9f6 100%);
  border: 1px solid var(--border_color);
  border-radius: var(--sc-radius);
  padding: 40px 44px;
}
.sc-app-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0e5a3c;
  margin-bottom: 8px;
}
.sc-app-text { max-width: 520px; }
.sc-app-text h3 { font-weight: 800; letter-spacing: -0.02em; color: var(--heading_color); margin-bottom: 10px; }
.sc-app-text p { color: var(--text_muted); line-height: 1.6; margin-bottom: 22px; }
.sc-app-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.sc-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #111;
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  transition: transform .2s ease;
}
.sc-app-badge:hover { transform: translateY(-2px); color: #fff; }
.sc-app-badge i { font-size: 26px; }
.sc-app-badge span { display: flex; flex-direction: column; font-weight: 700; font-size: 15px; line-height: 1.1; }
.sc-app-badge small { font-weight: 500; font-size: 10px; opacity: .8; }
.sc-app-visual { font-size: 120px; color: #0e5a3c; }

/* ---------- Trusted by ---------- */
.sc-trusted { padding: 30px 0; }
.sc-trusted-title { text-align: center; color: var(--text_muted); font-weight: 600; margin-bottom: 22px; }
.sc-trusted-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 5vw, 56px);
}
.sc-trusted-logo {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #9ca3af;
  filter: grayscale(1);
  transition: color .2s ease;
}
.sc-trusted-logo:hover { color: var(--heading_color); }

@media (max-width: 991px) {
  .sc-hok-collage { margin-top: 30px; }
  .sc-start-body { max-width: 100%; }
  .sc-app-visual { display: none; }
}

/* ============================================================
   Testimonials grid (sc-tst) + Recommended Products (sc-rec)
   ============================================================ */

/* ---------- Testimonials ---------- */
.sc-tst-head { margin-bottom: 8px; }
.sc-tst {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border_color);
  border-radius: var(--sc-radius-sm);
  box-shadow: var(--sc-shadow);
  padding: 16px 16px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sc-tst:hover { transform: translateY(-4px); box-shadow: var(--sc-shadow-lg); }
.sc-tst-quote { font-size: 15px; color: #0e5a3c; margin-bottom: 6px; }
.sc-tst-title { font-weight: 700; font-size: 13px; color: var(--heading_color); margin-bottom: 6px; line-height: 1.3; }
.sc-tst-text { font-size: 12px; line-height: 1.55; color: var(--text_muted); margin-bottom: 12px; }
.sc-tst-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border_color);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc-tst-author { display: flex; align-items: center; gap: 8px; }
.sc-tst-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sc-tst-name { font-weight: 700; font-size: 12px; color: var(--heading_color); margin: 0; line-height: 1.2; }
.sc-tst-handle { font-size: 11px; color: #0e5a3c; }
.sc-tst-meta { display: flex; align-items: center; justify-content: space-between; }
.sc-tst-date { font-size: 10px; color: var(--text_muted); }
.sc-tst-stars { color: #0e5a3c; font-size: 10px; letter-spacing: .5px; }

/* ---------- Recommended Products ---------- */
.sc-rec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}
.sc-rec-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #7a5a00;
  background: #fff;
  border: 1px solid #cfe6da;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.sc-rec-title { font-weight: 800; letter-spacing: -0.03em; color: var(--heading_color); font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0; }
.sc-rec-tabs { display: flex; gap: 4px; background: #fff; border: 1px solid var(--border_color); border-radius: 999px; padding: 5px; }
.sc-rec-tab {
  font-size: 14px;
  font-weight: 600;
  color: #191a1b;
  padding: 8px 18px;
  border-radius: 999px;
  transition: .2s ease;
}
.sc-rec-tab:hover { color: var(--heading_color); }
.sc-rec-tab.active { background: var(--heading_color); color: #fff; }

.sc-rec-filter {
  background: #fff;
  border: 1px solid var(--border_color);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  overflow: hidden;
}
.sc-rec-filter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: var(--heading_color);
  padding: 18px 22px;
  border-bottom: 1px solid var(--border_color);
}
.sc-rec-filter-group { padding: 18px 22px; border-bottom: 1px solid var(--border_color); }
.sc-rec-filter-last { border-bottom: none; }
.sc-rec-filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 15px;
  color: var(--heading_color);
  margin-bottom: 14px;
}
.sc-rec-filter-title i { color: var(--text_muted); font-size: 12px; }
.sc-rec-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: var(--text_color);
  font-size: 14px;
  transition: color .2s ease;
}
.sc-rec-tag:hover { color: #0e5a3c; }
.sc-rec-radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border_color);
  position: relative;
  transition: border-color .2s ease;
}
.sc-rec-tag:hover .sc-rec-radio { border-color: #0e5a3c; }
.sc-rec-radio.checked { border-color: #0e5a3c; }
.sc-rec-radio.checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #0e5a3c;
}
.sc-rec-price-label { font-size: 13px; color: var(--text_muted); margin: 6px 0 14px; }
.sc-rec-price-btn { border-radius: var(--sc-radius-sm); }

/* ============================================================
   Unified section titles + section backgrounds
   ============================================================ */
.section-title-text,
.sc-section-title,
.sc-rec-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

.sc-section-bg {
    background-image: repeating-radial-gradient(circle at 82% 120%, rgba(184, 223, 168, 0.16) 0px, rgba(184, 223, 168, 0.16) 1px, transparent 1px, transparent 15px);
    background-color: #fcfcfcd9;
}

/* ---------- Auth popups: 2-panel (visual + form) ---------- */
.sc-auth-modal .sc-auth-dialog { max-width: 860px; }
.sc-auth-content {
  position: relative;
  border: none;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 70px rgba(17, 17, 17, .32);
}
.sc-auth-x {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  border: none; background: rgba(17, 17, 17, .85); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; transition: background .2s ease, transform .2s ease;
}
.sc-auth-x:hover { background: #111; transform: rotate(90deg); }
.sc-auth-grid { display: grid; grid-template-columns: 1fr 1.1fr; }

/* left visual */
.sc-auth-visual {
  position: relative; overflow: hidden; display: flex;
  padding: 34px 30px; color: #fff;
  /* base green panel (shown if no photo). The photo, if present, lays under a
     readable gradient overlay. Drop a file at themes/sellmycode/images/auth-cover.jpg */
  background-color: #0a4329;
  background-image:
    linear-gradient(160deg, rgba(14, 90, 60, .55) 0%, rgba(10, 67, 41, .78) 55%, rgba(7, 48, 31, .94) 100%),
    url('../../images/auth-cover.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.sc-auth-visual-inner {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.sc-auth-brand { display: flex; align-items: center; gap: 10px; }
.sc-auth-brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255, 255, 255, .14); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
.sc-auth-brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.sc-auth-visual-bottom h3 { font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 8px; }
.sc-auth-visual-bottom p { color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.6; margin: 0; }
.sc-auth-blob { position: absolute; border-radius: 50%; z-index: 1; }
.sc-auth-blob-1 { width: 150px; height: 150px; top: -40px; right: -40px; background: radial-gradient(circle, rgba(52, 211, 153, .5), transparent 70%); }
.sc-auth-blob-2 { width: 190px; height: 190px; bottom: -55px; left: -60px; background: radial-gradient(circle, rgba(21, 122, 79, .65), transparent 70%); }

/* right form panel */
.sc-auth-panel { padding: 38px 36px; display: flex; flex-direction: column; }
.sc-auth-title { font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--heading_color); margin: 0 0 4px; }
.sc-auth-sub { color: var(--text_muted); font-size: 13.5px; margin: 0 0 20px; }

.sc-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-auth-field {
  display: flex; align-items: center;
  background: #f3f5f4; border: 1.5px solid transparent; border-radius: 12px;
  padding: 0 14px; margin-bottom: 12px;
  transition: border-color .2s ease, background .2s ease;
}
.sc-auth-field > i { color: #0e5a3c; font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.sc-auth-field input {
  border: none; background: transparent; outline: none; width: 100%;
  padding: 13px 10px; font-size: 14px; color: var(--heading_color);
}
.sc-auth-field:focus-within { border-color: #0e5a3c; background: #fff; }

.sc-auth-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 18px; font-size: 13px; }
.sc-auth-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--text_color); margin: 0; }
.sc-auth-check input { width: 16px; height: 16px; accent-color: #0e5a3c; flex-shrink: 0; }
.sc-auth-meta a { color: var(--text_muted); }
.sc-auth-meta a:hover { color: #0e5a3c; }
.sc-auth-terms { margin: 2px 0 16px; align-items: flex-start; font-size: 13px; }
.sc-auth-terms a { color: #0e5a3c; text-decoration: underline; }

.sc-auth-actions { display: flex; gap: 12px; }
.sc-auth-submit { flex: 1; }
.sc-auth-alt {
  flex: 1; background: #111; color: #fff; border: none; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.sc-auth-alt:hover { background: #1e293b; color: #fff; }

@media (max-width: 767.98px) {
  .sc-auth-grid { grid-template-columns: 1fr; }
  .sc-auth-visual { display: none; }
  .sc-auth-panel { padding: 30px 22px; }
  .sc-auth-actions { flex-direction: column; }
}

/* ---------- Auth popup error box ---------- */
.sc-auth-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: var(--sc-radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.sc-auth-errors > div { padding: 1px 0; }

/* ---------- Mini cart (hover dropdown on cart icon) ---------- */
.sc-cart-wrap { position: relative; }
.sc-minicart {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 330px;
  background: #fff; border: 1px solid var(--border_color); border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow-lg); padding: 14px; z-index: 1050;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.sc-cart-wrap:hover .sc-minicart { opacity: 1; visibility: visible; transform: translateY(0); }
/* invisible bridge so moving the cursor down doesn't close the dropdown */
.sc-minicart::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.sc-minicart-head {
  display: flex; align-items: center; gap: 4px;
  font-weight: 700; font-size: 14px; color: var(--heading_color);
  padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--border_color);
}
.sc-minicart-head span {
  margin-inline-start: auto; background: var(--swiper_background_color); color: #0e5a3c;
  font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 999px;
}
.sc-minicart-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.sc-minicart-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; transition: background .15s ease; }
.sc-minicart-item:hover { background: var(--swiper_background_color); }
.sc-minicart-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.sc-minicart-info { display: flex; flex-direction: column; min-width: 0; }
.sc-minicart-name {
  font-size: 13px; font-weight: 600; color: var(--heading_color); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-minicart-price { font-size: 12.5px; font-weight: 600; color: #0e5a3c; margin-top: 2px; }
.sc-minicart-qty { color: var(--text_muted); font-weight: 500; }
.sc-minicart-lic { color: var(--text_muted); font-weight: 500; font-size: 11px; margin-inline-start: 6px; }

/* ---------- Category page: promo banners + popular searches ---------- */
.sc-cat-banners { margin-top: 8px; }
.sc-cat-banner {
  display: flex; align-items: center; gap: 18px;
  height: 100%; padding: 22px 26px;
  border-radius: var(--sc-radius);
  border: 1px solid var(--border_color);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sc-cat-banner:hover { transform: translateY(-3px); box-shadow: var(--sc-shadow-lg); }
.sc-cat-banner-dark { background: #111827; color: #fff; border-color: #111827; }
.sc-cat-banner-light { background: #fff; color: var(--heading_color); }
.sc-cat-banner-icon {
  width: 54px; height: 54px; flex-shrink: 0;
  border-radius: 16px; color: #fff; font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sc-cat-banner-dark .sc-cat-banner-icon { background: linear-gradient(135deg, #0e5a3c, #34d399); }
.sc-cat-banner-light .sc-cat-banner-icon { background: linear-gradient(135deg, #f97316, #fb7185); }
.sc-cat-banner-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-cat-banner-title { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.sc-cat-banner-link { font-size: 13px; }
.sc-cat-banner-dark .sc-cat-banner-link { color: #34d399; }
.sc-cat-banner-light .sc-cat-banner-link { color: #0e5a3c; }

.sc-popular-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-popular-tag {
  display: inline-block; padding: 8px 16px;
  border-radius: 999px;
  background: #fff; border: 1px solid var(--border_color);
  color: var(--text_color); font-size: 14px; text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.sc-popular-tag:hover { border-color: #0e5a3c; color: #0e5a3c; background: var(--swiper_background_color); }

/* ---------- Category "Save on ..." promo band ---------- */
.sc-cms-promo {
    background-color: #f8f8f8;
    background-image: repeating-radial-gradient(circle at 8% 56%, rgb(66 180 181 / 12%) 0px, rgba(184, 223, 168, 0.12) 1px, transparent 1px, transparent 16px);
    border-radius: var(--sc-radius);
    padding: 36px 32px;
}
.sc-cms-promo-title {
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--heading_color);
  margin-bottom: 18px;
}
@media (max-width: 991.98px) {
  .sc-cms-promo { padding: 26px 22px; }
}

/* ---------- In-app notifications (bell) ---------- */
.sc-notif-wrap { position: relative; }
.sc-notif-menu { width: 340px; max-width: 92vw; padding: 0; border-radius: var(--sc-radius); overflow: hidden; }
.sc-notif-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--border_color);
  font-weight: 700; font-size: 14px; color: var(--heading_color);
}
.sc-notif-readall { color: #0e5a3c; font-weight: 600; }
.sc-notif-list { max-height: 360px; overflow-y: auto; }
.sc-notif-item, .sc-notif-row {
  display: flex; gap: 10px; align-items: center; padding: 11px 14px;
  text-decoration: none; border-bottom: 1px solid var(--border_color);
  transition: background .15s ease;
}
.sc-notif-item:last-child { border-bottom: none; }
.sc-notif-item:hover, .sc-notif-row:hover { background: var(--swiper_background_color); }
.sc-notif-item.is-unread, .sc-notif-row.is-unread { background: rgba(14, 90, 60, .06); }
.sc-notif-img, .sc-notif-icon { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; object-fit: cover; }
.sc-notif-icon { display: inline-flex; align-items: center; justify-content: center; background: var(--swiper_background_color); color: #0e5a3c; }
.sc-notif-body { display: flex; flex-direction: column; min-width: 0; }
.sc-notif-title {
  font-size: 13px; color: var(--heading_color); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-notif-time { font-size: 11.5px; color: var(--text_muted); margin-top: 2px; }
.sc-notif-empty { padding: 28px 14px; text-align: center; color: var(--text_muted); font-size: 13px; }
.sc-notif-all {
  display: block; text-align: center; padding: 11px; font-weight: 600;
  color: #0e5a3c; text-decoration: none; border-top: 1px solid var(--border_color);
}
.sc-notif-all:hover { background: var(--swiper_background_color); color: #0e5a3c; }
.sc-notif-row { padding: 14px 18px; }
.sc-notif-row-wrap {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border_color);
}
.sc-notif-row-wrap:last-child { border-bottom: none; }
.sc-notif-row-wrap.is-unread { background: rgba(14, 90, 60, .06); }
.sc-notif-row-wrap .sc-notif-row { border-bottom: none; background: transparent; }
.sc-notif-del { padding-inline: 14px; }
.sc-notif-del .btn-transparent { background: transparent; border: 0; cursor: pointer; padding: 6px; }
.sc-notif-del .btn-transparent:hover { color: #b91c1c !important; }

/* ---------- Add-to-Cart: light running around the rounded border ---------- */
@property --sc-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.sc-glow-btn { position: relative; z-index: 0; }
.sc-glow-btn .sc-glow-label { position: relative; z-index: 2; }
/* a thin gradient ring that follows the button radius; a bright comet rotates around it */
.sc-glow-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 2px;                 /* ring thickness */
  background: conic-gradient(from var(--sc-glow-angle),
      transparent 0deg, transparent 250deg,
      rgba(110, 231, 183, .85) 315deg, #d1fae5 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: scGlowSpin 3s linear infinite;
}
.sc-glow-btn:disabled::before { display: none; }
@keyframes scGlowSpin { to { --sc-glow-angle: 360deg; } }

/* ---------- Add to Collection modal ---------- */
.sc-collection-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sc-collection-row-wrap { border-radius: 10px; }
.sc-collection-row {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  transition: background .15s ease;
}
.sc-collection-row:hover { background: var(--swiper_background_color); }
.sc-collection-row-wrap.is-in { background: var(--swiper_background_color); }
.sc-collection-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: #0e5a3c; flex-shrink: 0; }
.sc-collection-name { flex: 1; min-width: 0; font-size: 14px; color: var(--heading_color); word-break: break-word; }
.sc-collection-tick { color: #0e5a3c; opacity: 0; transition: opacity .15s ease; }
.sc-collection-row-wrap.is-in .sc-collection-tick { opacity: 1; }
.sc-collection-btn.is-saved { border-color: #0e5a3c; color: #0e5a3c; }

/* collection cards (My Collections page) */
.sc-coll-card {
  display: block; height: 100%; text-decoration: none;
  border: 1px solid var(--border_color); border-radius: 20px;
  overflow: hidden; background: #fff; transition: transform .2s ease, box-shadow .2s ease;
}
.sc-coll-card:hover { transform: translateY(-4px); box-shadow: var(--sc-shadow-lg); }
.sc-coll-cover { aspect-ratio: 16 / 9; background: var(--swiper_background_color); overflow: hidden; }
.sc-coll-cover img { width: 100%; height: 100%; object-fit: cover; }
.sc-coll-cover-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text_muted); font-size: 32px; }
.sc-coll-body { padding: 14px 16px; }
.sc-coll-name { font-weight: 700; color: var(--heading_color); margin: 0 0 2px; }
.sc-coll-count { font-size: 13px; color: var(--text_muted); }
.sc-minicart-btn { margin-top: 12px; }
.sc-minicart-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 0; color: var(--text_muted); }
.sc-minicart-empty i { font-size: 26px; opacity: .4; }

/* ---------- Styled confirm dialog (replaces native confirm()) ---------- */
.sc-confirm-modal .modal-dialog { max-width: 400px; }
.sc-confirm-content {
  border: none;
  border-radius: 18px;
  padding: 30px 28px 26px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(17, 17, 17, .3);
}
.sc-confirm-icon {
  width: 60px; height: 60px; margin: 0 auto 16px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fef2f2; color: #e11d48; font-size: 26px;
}
.sc-confirm-title { font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--heading_color); margin: 0 0 6px; }
.sc-confirm-text { color: var(--text_muted); font-size: 14px; margin: 0 0 22px; }
.sc-confirm-actions { display: flex; gap: 10px; }
.sc-confirm-actions .btn { flex: 1; font-weight: 600; }
.sc-confirm-cancel { background: #f1f2f4; color: var(--heading_color); border: none; }
.sc-confirm-cancel:hover { background: #e5e7eb; color: var(--heading_color); }
#scConfirmOk { background: #e11d48; background-image: none; border: none; color: #fff; }
#scConfirmOk:hover,
#scConfirmOk:focus,
#scConfirmOk:active {
  background: #be123c; background-image: none; color: #fff;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, .18) !important;
}

/* ---------- Second navbar (category menu) ---------- */
.nav-bar.nav-bar-bg {
    background-color: #fefefe;
    border-top: 1px solid #ececec;
    box-shadow: 0 5px 5px -10px rgba(15, 23, 42, .15);
}

/* readable menu text (was too faded) */
.nav-bar-bg .nav-bar-links .link .link-title,
.nav-bar-bg .nav-bar-links .link .link-title span,
.nav-bar-bg .drop-down-btn {
  color: #1f2937;
  font-weight: 550;
  font-size: 14.5px;
}
/* category menu icon (amber accent, doesn't fade like the caret) */
.nav-bar-bg .nav-bar-ico {
  color: #0e5a3c !important;
  opacity: 1 !important;
  font-size: 15px;
}
.nav-bar-bg .nav-bar-links .link:hover .nav-bar-ico,
.nav-bar-bg .drop-down:hover .nav-bar-ico { color: #34d399 !important; }
.nav-bar-bg .nav-bar-links .link:hover .link-title,
.nav-bar-bg .nav-bar-links .link:hover .link-title span,
.nav-bar-bg .nav-bar-links .link.active .link-title,
.nav-bar-bg .drop-down:hover .drop-down-btn,
.nav-bar-bg .drop-down-btn:hover {
  color: #34d399;
}

/* keep the cart + bell action buttons exactly the same size & shape (circle).
   !important beats the mobile rule `.nav-bar .link-btn .btn { width:100% }` that
   otherwise stretches the bell into an oval. */
.sc-nav-actions .btn-padding,
.sc-cart-wrap .btn-padding,
.sc-notif-wrap .btn-padding {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px;
  padding: 0 !important;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sc-nav-actions .btn-padding i,
.sc-cart-wrap .btn-padding i,
.sc-notif-wrap .btn-padding i {
  font-size: 16px;
  line-height: 1;
}
/* dropdown caret follows the text colour */
.nav-bar-bg .drop-down-btn i { color: inherit; opacity: .7; }

@media (min-width: 1200px) {
  .nav-bar-bg .nav-bar-links { align-items: center; }
  .nav-bar-bg .nav-bar-links > .link,
  .nav-bar-bg .nav-bar-links > .drop-down {
    margin-inline-end: 10px;
  }
}

/* ============================================================
   Footer — HOK style (background image, 4 columns)
   ============================================================ */
.sc-foot {
  position: relative;
  background: #0c0c0c url('../../images/footer-bg.svg') center / cover no-repeat;
  color: #a3a3a3;
  overflow: hidden;
}
.sc-foot-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .6) 100%);
  pointer-events: none;
}
.sc-foot-main {
  position: relative;
  padding: 64px 0 44px;
  background: radial-gradient(70% 65% at 62% 45%, rgba(118, 168, 78, 0.22) 0%, rgba(74, 222, 128, 0.08) 40%, transparent 70%), rgb(22, 38, 16);
}
.sc-foot-logo img { height: 44px; width: auto; }
.sc-foot-about { color: #a3a3a3; line-height: 1.7; margin: 22px 0 0; max-width: 360px; font-size: 14px; }

/* socials with labels */
.sc-foot-socials { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; }
.sc-foot-social { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: #a3a3a3; transition: color .2s ease; }
.sc-foot-social-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  font-size: 16px; transition: .2s ease;
}
.sc-foot-social-label { font-size: 13px; }
.sc-foot-social:hover { color: #34d399; }
.sc-foot-social:hover .sc-foot-social-icon {
  background: linear-gradient(135deg, #0e5a3c, #157a4f);
  border-color: transparent; color: #fff; transform: translateY(-2px);
}

/* column titles + links */
.sc-foot-title {
  position: relative;
  color: #fff; font-weight: 700; font-size: 16px;
  padding-inline-start: 14px; margin-bottom: 20px;
}
.sc-foot-title::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 3px;
  width: 4px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, #0e5a3c, #0a4329);
}
.sc-foot-links li { margin-bottom: 12px; }
.sc-foot-links a { color: #a3a3a3; font-size: 14px; transition: color .2s ease, padding-inline-start .2s ease; }
.sc-foot-links a:hover { color: #34d399; padding-inline-start: 4px; }

/* newsletter */
.sc-foot-news {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border-radius: var(--sc-radius-sm); padding: 5px 5px 5px 4px;
  max-width: 320px;
}
.sc-foot-news input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 14px; padding: 9px 12px; color: #111;
}
.sc-foot-news .btn {
  flex-shrink: 0; border-radius: 8px; padding: 9px 16px;
  background-image: linear-gradient(135deg, #0e5a3c, #157a4f) !important;
  color: #fff !important; border: none;
}

/* payment */
.sc-foot-pay { background: #fff; border-radius: var(--sc-radius-sm); padding: 12px 14px; display: inline-block; max-width: 340px; }
.sc-foot-pay img { max-width: 100%; height: auto; }

/* bottom bar */
.sc-foot-bottom-wrap { position: relative; border-top: 1px solid rgba(255, 255, 255, .08); padding: 20px 0; background-color: #152610; }
.sc-foot-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.sc-foot-copy { color: #a3a3a3; font-size: 14px; }
.sc-foot-bottom-links { display: flex; flex-wrap: wrap; gap: 24px; }
.sc-foot-bottom-links a { color: #a3a3a3; font-size: 14px; transition: color .2s ease; }
.sc-foot-bottom-links a:hover { color: #34d399; }
/* floating back-to-top: fixed bottom-right, appears after scrolling down */
.sc-foot-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 1055;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, #0e5a3c, #157a4f);
  border: none;
  box-shadow: 0 8px 24px rgba(14, 90, 60, .35);
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, box-shadow .2s ease;
}
.sc-foot-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.sc-foot-top:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(14, 90, 60, .45); }
@media (max-width: 575px) {
  .sc-foot-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

@media (max-width: 575px) {
  .sc-foot-bottom { justify-content: center; text-align: center; }
  .sc-foot-socials { gap: 16px; }
}

/* ============================================================
   Category page (Envato style) + Live Preview button
   ============================================================ */
/* Live Preview button: text on roomy grids, icon-only on dense (5-6/row) */
.sc-item-preview { white-space: nowrap; }
.sc-item-preview-text { display: none; }
@media (min-width: 1200px) {
  .sc-item-preview-text { display: inline; }
}
.row-cols-xl-6 .sc-item-preview-text,
.row-cols-xl-5 .sc-item-preview-text,
.row-cols-xxl-5 .sc-item-preview-text { display: none !important; }

/* On-sale promo banner */
.sc-cat-promo {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: center;
  background: var(--header_background_color);
  border: 1px solid var(--border_color);
  border-radius: var(--sc-radius);
  padding: 28px;
}
.sc-cat-promo-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--heading_color);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin-bottom: 18px;
}
@media (max-width: 991px) {
  .sc-cat-promo { grid-template-columns: 1fr; }
}

/* Section heading with View-all */
.sc-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.sc-cat-head .section-title-text { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -0.02em; }

/* ============================================================
   Compact category/listing header (header_v4) — search on the right
   ============================================================ */
.header.header-bg.sc-header {
  background: radial-gradient(circle at 15% 37%, rgba(14, 90, 60, .13), transparent 26%), radial-gradient(circle at 84% 130%, rgba(14, 90, 60, .10), transparent 30%), repeating-radial-gradient(circle at 24% 46%, rgba(14, 90, 60, .05) 0 1px, transparent 1px 30px), linear-gradient(135deg, #faf8f3 0%, #fff7e6 100%);
  border-bottom: 1px solid var(--border_color);
}
.sc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: 24px 0;
}
.sc-header-text { flex: 1 1 320px; min-width: 0; }
.sc-header .header-title {
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--heading_color);
  margin: 6px 0 0;
}
.sc-header-desc { color: var(--text_muted); margin: 8px 0 0; max-width: 760px; font-size: 14px; line-height: 1.6; }
.sc-header-search { flex: 0 0 auto; width: 100%; max-width: 440px; }
.sc-header-search .search-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border_color);
  border-radius: var(--sc-radius-sm);
  padding: 5px 5px 5px 8px;
  box-shadow: var(--sc-shadow);
}
.sc-header-search .search-input input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent;
  font-size: 14px;
  padding: 9px 10px;
  color: var(--heading_color);
}
.sc-header-search .search-input .btn {
  position: static;
  flex-shrink: 0;
  transform: none;
  border-radius: 8px;
  padding: 9px 18px;
}
@media (min-width: 992px) {
  .sc-header-search { width: 440px; }
}
@media (max-width: 991px) {
  .sc-header-inner { align-items: flex-start; }
  .sc-header-search { max-width: none; }
}

/* ---------- Item preview: iframe-blocked fallback ---------- */
.preview-body { position: relative; }
.preview-fallback {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--background_color);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.preview-fallback.show { display: flex; }
.preview-fallback-box { max-width: 460px; text-align: center; }
.preview-fallback-icon { font-size: 46px; color: #ef4444; margin-bottom: 16px; }
.preview-fallback-box h4 { font-weight: 700; color: var(--heading_color); margin-bottom: 10px; }
.preview-fallback-box p { color: var(--text_muted); line-height: 1.6; margin-bottom: 22px; }

/* ---------- Coupon item picker (AJAX search) ---------- */
.sc-item-search { max-width: 520px; }
.sc-item-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 260px;
  overflow-y: auto;
  background: var(--card_background, #fff);
  border: 1px solid var(--border_color, #e5e7eb);
  border-radius: var(--sc-radius-sm, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.sc-item-result {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid var(--border_color, #f1f1f1);
}
.sc-item-result:last-child { border-bottom: 0; }
.sc-item-result:hover { background: rgba(14,90,60,.06); }
.sc-item-result.is-added { cursor: default; opacity: .65; }
.sc-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14,90,60,.08);
  color: var(--heading_color, #1f2937);
  border: 1px solid rgba(14,90,60,.18);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  max-width: 100%;
}
.sc-item-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.sc-chip-remove {
  background: transparent;
  border: 0;
  color: #ef4444;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.sc-chip-remove:hover { color: #b91c1c; }

/* ---------- Front-end search autocomplete ---------- */
.sc-suggest-box {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1050;
  background: #fff;
  border: 1px solid var(--border_color, #e5e7eb);
  border-radius: var(--sc-radius-sm, 10px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}
.sc-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border_color, #f1f1f1);
  text-decoration: none;
  color: var(--heading_color, #1f2937);
}
.sc-suggest-item:hover { background: rgba(14,90,60,.06); }
.sc-suggest-img {
  width: 46px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
  background: #f3f4f6;
}
.sc-suggest-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sc-suggest-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-suggest-cat { font-size: 12px; color: var(--text_muted, #6b7280); }
.sc-suggest-price { font-size: 13px; font-weight: 600; color: var(--primary_color, #0e5a3c); flex: 0 0 auto; }
.sc-suggest-empty { padding: 14px; text-align: center; color: var(--text_muted, #6b7280); font-size: 14px; }
.sc-suggest-all {
  display: block;
  padding: 11px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary_color, #0e5a3c);
  background: rgba(14,90,60,.05);
  text-decoration: none;
}
.sc-suggest-all:hover { background: rgba(14,90,60,.1); }

/* ---------- Utility bar (above main navbar) ---------- */
.sc-utility-bar {
  background: radial-gradient(70% 65% at 62% 45%, rgba(118, 168, 78, 0.22) 0%, rgba(74, 222, 128, 0.08) 40%, transparent 70%), rgb(22, 38, 16);
  border-bottom: 1px solid #151516;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}
.sc-utility-bar .container-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 7px;
  padding-bottom: 7px;
}
.sc-utility-left { display: flex; gap: 22px; flex-wrap: wrap; }
.sc-utility-left span { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.sc-utility-left i { color: #fff; font-size: 12px; }
.sc-utility-right { display: flex; gap: 18px; align-items: center; }
.sc-utility-right a { color: #fff; text-decoration: none; font-weight: 600; transition: color .15s ease; }
.sc-utility-right a:hover { color: #34d399; }
@media (max-width: 991.98px) {
  .sc-utility-bar { display: none; }
}

/* ---------- Announcement bar: centered, polished (matches the dual-bar look) ---------- */
.announcement .container-custom { justify-content: center; }
.announcement-text { text-align: center; font-size: 13px; font-weight: 500; }
.announcement-close {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 0; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.announcement-close:hover { background: rgba(255,255,255,.32); }

/* ============================================================
   Light top navbar (demo dual-bar look) — row 1 white, green accents
   ============================================================ */
.nav-bar:not(.nav-bar-bg) {
  background: #f8f8f8 !important;
  border-bottom: 0px solid var(--border_color, #eceef1);
  top: 0;
  box-shadow: 0 5px 18px -10px rgba(15, 23, 42, .15);
}
/* keep the main row pinned to the top while scrolling */
.sc-nav-main {
  position: sticky;
  top: 0;
  z-index: 1030;
}
/* top links + dropdown buttons + username -> dark text */
.nav-bar:not(.nav-bar-bg) .nav-bar-links .link .link-title,
.nav-bar:not(.nav-bar-bg) .nav-bar-links .link .link-title span,
.nav-bar:not(.nav-bar-bg) .drop-down-btn,
.nav-bar:not(.nav-bar-bg) .user-name {
  color: #1f2937;
}
/* hover / active -> theme green */
.nav-bar:not(.nav-bar-bg) .nav-bar-links .link:hover .link-title,
.nav-bar:not(.nav-bar-bg) .nav-bar-links .link:hover .link-title span,
.nav-bar:not(.nav-bar-bg) .nav-bar-links .link.active .link-title,
.nav-bar:not(.nav-bar-bg) .nav-bar-links .link.active .link-title span,
.nav-bar:not(.nav-bar-bg) .drop-down:hover .drop-down-btn,
.nav-bar:not(.nav-bar-bg) .drop-down-btn:hover {
  color: var(--primary_color, #0e5a3c) !important;
}
/* cart + bell icon buttons: dark on white, green on hover */
.nav-bar:not(.nav-bar-bg) .btn-outline-light {
  color: #1f2937;
  border-color: var(--border_color, #e5e7eb);
  background: transparent;
}
.nav-bar:not(.nav-bar-bg) .btn-outline-light:hover {
  color: var(--primary_color, #0e5a3c);
  border-color: var(--primary_color, #0e5a3c);
  background: rgba(14, 90, 60, .06);
}
/* hamburger + caret icons */
.nav-bar:not(.nav-bar-bg) .nav-bar-menu-btn i { color: #1f2937; }
.nav-bar:not(.nav-bar-bg) .drop-down-btn i { color: inherit; opacity: .7; }
/* mobile off-canvas panel stays readable on the now-light navbar */
.nav-bar:not(.nav-bar-bg) .nav-bar-menu-inner { background: #fff; }

/* ---------- Main row: logo | centered search (with category filter) | actions ---------- */
.sc-nav-main .nav-bar-container { display: flex; align-items: center; gap: 24px; }
.sc-nav-search {
  flex: 1;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border_color, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  position: relative;
}
.sc-nav-search-cat {
  border: 0;
  background: #f6f7f9;
  border-right: 1px solid var(--border_color, #e5e7eb);
  border-radius: 10px 0 0 10px;
  padding: 0 12px;
  font-size: 13px;
  color: #374151;
  max-width: 160px;
  cursor: pointer;
}
.sc-nav-search-cat:focus { outline: none; }
/* custom (non-native) category dropdown in the search bar */
.sc-cat-dd { position: relative; display: flex; align-items: stretch; }
button.sc-nav-search-cat {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; line-height: 1; height: 100%; font: inherit; font-size: 13px;
}
.sc-cat-dd .sc-cat-label { max-width: 120px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-cat-menu { min-width: 240px; max-height: none; overflow: visible; }
.sc-cat-menu .sc-cat-opt { cursor: pointer; }
.sc-cat-parent { display: flex; align-items: center; }
.sc-cat-parent > i:first-child { width: 18px; text-align: center; opacity: .8; }
/* always open downward (don't let JS flip a long list upward) */
.sc-cat-dd .sc-cat-menu { top: calc(100% + 6px) !important; bottom: auto !important; }
/* a category that has sub-categories: caret + right-side flyout on hover */
.sc-cat-row { position: relative; }
.sc-cat-row .sc-cat-parent .fa-angle-right { font-size: 11px; opacity: .45; margin-left: auto; }
.sc-cat-row::after { content: ""; position: absolute; left: 100%; top: 0; width: 14px; height: 100%; }
.sc-cat-flyout {
  display: none;
  position: absolute; left: 100%; top: -8px;
  min-width: 220px; padding: 8px;
  background: #fff; border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 16px 36px -10px rgba(15, 23, 42, .28);
  z-index: 20; max-height: 80vh; overflow-y: auto;
}
.sc-cat-row:hover > .sc-cat-flyout { display: block; }
/* Bootstrap-style variant (Services page filter) */
.sc-cat-dd-bs { min-width: 200px; }
.sc-cat-dd-bs .sc-cat-btn { width: 100%; cursor: pointer; }
.sc-cat-dd-bs .sc-cat-label { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* faint dashed separator under each nav sub-menu item */
.drop-down-menu-md .drop-down-item { border-bottom: 1px dashed rgba(15, 23, 42, .14); }
.drop-down-menu-md .drop-down-item:last-child { border-bottom: 0; }
.sc-nav-search-input {
  border: 0;
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font-size: 16px;
  background: transparent;
  color: var(--heading_color, #1f2937);
}
.sc-nav-search-input:focus { outline: none; }
.sc-nav-search-btn {
  border: 0;
  background: var(--primary_color, #0e5a3c);
  color: #fff;
  padding: 0 18px;
  border-radius: 0 9px 9px 0;
  cursor: pointer;
  font-size: 16px;
}
.sc-nav-search-btn:hover { background: #0c4d33; }
.sc-nav-actions { display: flex; align-items: center; flex-shrink: 0; gap: 12px; }
/* spacing comes from the flex gap — kill the per-item ms-* utility margins */
.sc-nav-actions > * { margin-left: 0 !important; margin-right: 0 !important; }
/* flag gets the same 42px circular outline as the other action buttons,
   so the visual rhythm between the round icons stays even */
.sc-nav-actions .sc-lang-btn,
.dashboard-nav .sc-lang-btn {
    width: 42px; height: 42px;
    border: 1px solid var(--border_color, #e5e7eb);
    border-radius: 50%;
    justify-content: center;
    transition: .15s;
}
.sc-nav-actions .sc-lang-btn:hover,
.dashboard-nav .sc-lang-btn:hover {
    border-color: var(--primary_color, #0e5a3c);
    background: rgba(14, 90, 60, .06);
}
.dashboard-nav .sc-lang-btn { border-color: rgba(255, 255, 255, .35); }
.sc-nav-actions .sc-lang-btn:hover .sc-lang-flag,
.dashboard-nav .sc-lang-btn:hover .sc-lang-flag { box-shadow: none; }
.sc-nav-premium .btn { white-space: nowrap; }
@media (max-width: 1199.98px) {
  .sc-nav-main .nav-bar-container { gap: 12px; }
  .sc-nav-search { max-width: none; margin: 0; }
  .sc-nav-search-cat,
  .sc-cat-dd { display: none; }
}
/* search-icon (mobile) is hidden on desktop */
.sc-nav-search-toggle { display: none; }
@media (max-width: 767.98px) {
  /* one clean row: logo + actions (incl. search icon); the inline search bar
     is replaced by a search popup, so nothing wraps or misaligns. */
  .sc-nav-main .nav-bar-container { flex-wrap: nowrap; gap: 8px; }
  .sc-nav-search { display: none !important; }
  .sc-nav-search-toggle { display: inline-flex !important; }
  .sc-nav-actions { margin-inline-start: auto; gap: 8px; align-items: center; }
  .sc-nav-main .user-name,
  .sc-nav-main .user-menu .fa-angle-down { display: none; }
}

/* ---------- Mobile search popup ---------- */
.sc-search-modal-content { border: 0; border-radius: 16px; padding: 16px; }
.sc-search-modal-form { display: flex; align-items: center; gap: 8px; position: relative; }
.sc-search-modal-ico { position: absolute; inset-inline-start: 16px; color: var(--text_muted); pointer-events: none; }
.sc-search-modal-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--border_color);
  border-radius: 10px;
  padding: 12px 14px 12px 40px;
  font-size: 15px;
  outline: none;
}
.sc-search-modal-input:focus { border-color: var(--primary_color); }
.sc-search-modal-btn { border-radius: 10px; padding-inline: 18px; white-space: nowrap; }

/* ---------- Support ticket conversation ---------- */
.sc-msg { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border_color); }
.sc-msg:last-child { border-bottom: none; }
.sc-msg-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sc-msg-body { flex: 1; min-width: 0; }
.sc-msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sc-msg-name { font-weight: 600; color: var(--heading_color); }
.sc-msg-time { font-size: 12px; color: var(--text_muted); }
.sc-msg-edit-btn { border: 0; background: transparent; color: var(--text_muted); cursor: pointer; padding: 0; margin-inline-start: auto; }
.sc-msg-edit-btn:hover { color: var(--primary_color); }
.sc-msg-text { color: var(--body_color, #374151); line-height: 1.6; word-break: break-word; }
.sc-msg-mine .sc-msg-body { background: rgba(14,90,60,.05); border-radius: 10px; padding: 10px 14px; }
.sc-msg-admin .sc-msg-body { background: #fdf5e7; border: 1px solid #f2d8a6; border-radius: 10px; padding: 10px 14px; }

/* ============================================================
   Workspace top-nav layout (left sidebar moved to a horizontal
   top menu, Tabler style; content width matches the front-end)
   ============================================================ */
/* overflow:hidden (used for the old sidebar slide) breaks position:sticky */
.dashboard-topnav { overflow: visible !important; }
.dashboard-topnav .dashboard-body {
  margin-inline-start: 0 !important;
  width: 100% !important;
  padding-top: 0 !important;
  overflow: visible !important;
}
.dashboard-topnav .dashboard-nav {
  position: sticky !important;
  top: 0;
  left: 0 !important;
  width: 100% !important;
  z-index: 1031;
  background: radial-gradient(80% 0% at 20% 45%, rgba(118, 168, 78, 0.22) 10%, rgba(74, 222, 128, 0.08) 40%, transparent 70%), rgb(22, 38, 16) !important;
  border-bottom: none;
  height: auto;
  padding: 0;
}
/* menu bar sticks right under the 64px top bar */
.dashboard-topnav .ws-menu-bar {
  position: sticky;
  top: 64px;
  z-index: 1030;
}
.dashboard-topnav .dashboard-nav-inner {
  display: flex;
  align-items: center;
  height: 64px;
  width: 100%;
}
/* white text/icons on the dark top bar */
.dashboard-topnav .dashboard-nav .user-name,
.dashboard-topnav .dashboard-nav .drop-down-btn {
  color: #fff;
}
.dashboard-topnav .dashboard-nav .drop-down-btn i { color: #cbd5e1; }
/* balance pill next to the bell */
.ws-balance {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.ws-balance:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.ws-balance i { color: #34d399; }
.dashboard-topnav .dashboard-container { margin-inline: auto; }
.dashboard-topnav .dashboard-footer .container-custom { margin-inline: auto; }

/* horizontal menu bar (the old sidebar links) */
.ws-menu-bar {
  background: #fff;
  border-bottom: 1px solid var(--border_color, #eceef1);
}
.ws-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.ws-menu-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 14px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.ws-menu-link i { font-size: 15px; color: #6b7280; }
.ws-menu-link:hover { color: var(--primary_color, #0e5a3c); }
/* no browser focus ring on hover-opened dropdown toggles */
.ws-menu-more .ws-menu-link:focus,
.ws-menu-more .ws-menu-link:focus-visible { outline: none; box-shadow: none; }
.ws-menu-link.active { color: var(--primary_color, #0e5a3c); border-bottom-color: var(--primary_color, #0e5a3c); }
.ws-menu-link.active i { color: var(--primary_color, #0e5a3c); }

/* "More" dropdown */
.ws-menu-more .ws-more-caret { font-size: 12px; opacity: .7; }
.ws-menu-more-menu { padding: 6px; min-width: 220px; }
.ws-menu-more-menu .ws-menu-link {
  display: flex;
  width: 100%;
  padding: 9px 12px;
  border-bottom: 0;
  border-radius: 8px;
}
.ws-menu-more-menu .ws-menu-link:hover { background: rgba(14, 90, 60, .06); }
.ws-menu-more-menu .ws-menu-link.active { background: rgba(14, 90, 60, .08); border-bottom: 0; }
.ws-menu-badge {
  background: #e11d48; color: #fff; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ws-menu-toggle { background: transparent; border: 0; font-size: 18px; color: #fff; cursor: pointer; }

@media (max-width: 1199.98px) {
  .dashboard-topnav .ws-menu-bar { display: none; position: static; top: auto; }
  .dashboard-topnav .ws-menu-bar.open { display: block; }
  .ws-menu { flex-direction: column; align-items: stretch; }
  .ws-menu-link { border-bottom: 1px solid var(--border_color, #eceef1); border-inline-start: 3px solid transparent; }
  .ws-menu-link.active { border-bottom-color: var(--border_color, #eceef1); border-inline-start-color: var(--primary_color, #0e5a3c); }
  /* flatten the "More" dropdown into the vertical list */
  .ws-menu-more { width: 100%; }
  .ws-menu-more > .ws-menu-link { display: none; }
  .ws-menu-more-menu {
    display: block !important;
    position: static !important;
    transform: none !important;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }
  .ws-menu-more-menu .ws-menu-link {
    border-radius: 0;
    border-bottom: 1px solid var(--border_color, #eceef1);
    border-inline-start: 3px solid transparent;
  }
  .ws-menu-more-menu .ws-menu-link.active { border-inline-start-color: var(--primary_color, #0e5a3c); background: transparent; }
}
@media (min-width: 1200px) {
  .ws-menu-toggle { display: none; }
}

/* Purchases table: narrow the date columns so the Action column stays fully visible */
.dashboard-table th.th-tight {
  white-space: normal;
  width: 92px;
  min-width: 92px;
  line-height: 1.25;
  font-size: 13px;
}
.dashboard-table td .badge,
.dashboard-table th.th-tight + th { vertical-align: middle; }

/* ============================================================
   Premium pricing cards — professional restyle (4 per row)
   ============================================================ */
.premium .plan {
  padding: 32px 26px;
  border: 1px solid var(--border_color, #e7ebf0);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.premium .plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .1);
  border-color: rgba(14, 90, 60, .4);
}
/* featured card highlight (detects the ribbon) */
.premium .plan:has(.plan-pro) {
  border: 2px solid var(--primary_color, #0e5a3c);
  box-shadow: 0 18px 44px rgba(14, 90, 60, .18);
}
.plan-title { font-size: 18px; font-weight: 700; color: var(--heading_color); margin-bottom: 4px; }
.plan-price {
  font-size: 36px; font-weight: 800; letter-spacing: -.03em; color: var(--heading_color);
  display: flex; align-items: baseline; gap: 4px; margin-bottom: 18px; line-height: 1.1;
}
.plan-price span { font-size: 14px; font-weight: 500; color: var(--text_muted); }
.plan-text { font-size: 14px; color: var(--text_muted); margin-bottom: 20px; }
.plan-features { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.plan-feat { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--body_color, #374151); }
.plan-feat-icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(14, 90, 60, .1); color: var(--primary_color, #0e5a3c); font-size: 11px;
}
/* "Featured" diagonal ribbon */
.plan-pro {
  position: absolute; top: 20px; right: -36px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #0e5a3c, #157a4f);
  color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 42px; box-shadow: 0 4px 10px rgba(14, 90, 60, .3);
}
/* plan period switcher (Weekly / Monthly ...) */
.plan-switcher { background: #f1f3f5; border-radius: 999px; padding: 4px; }
.plan-switcher-inner { display: flex; gap: 2px; }
.plan-switcher-item {
  border: 0; background: transparent; padding: 9px 24px; border-radius: 999px;
  font-weight: 600; font-size: 14px; color: var(--text_muted); cursor: pointer; transition: .15s ease;
}
.plan-switcher-item.active { background: var(--primary_color, #0e5a3c); color: #fff; }

/* Premium page: prominent "only premium-category items" note */
.sc-premium-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 16px 22px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--heading_color, #1f2937);
  background: rgba(14, 90, 60, .07);
  border: 1px solid rgba(14, 90, 60, .2);
  border-radius: 14px;
}
.sc-premium-note i { color: var(--primary_color, #0e5a3c); font-size: 20px; flex-shrink: 0; }
.sc-premium-note a { color: var(--primary_color, #0e5a3c); font-weight: 800; text-decoration: underline; }
@media (max-width: 575.98px) {
  .sc-premium-note { font-size: 15px; padding: 14px 16px; flex-direction: column; }
}

/* ---------- Auth as a full page (login / 2fa) reusing the popup styling ---------- */
.sc-auth-page { max-width: 880px; margin: 24px auto; padding: 0 16px; width: 100%; }
.sc-auth-page-sm { max-width: 460px; }
.sc-auth-page .sc-auth-content {
  box-shadow: 0 12px 44px rgba(15, 23, 42, .12);
  border: 1px solid var(--border_color, #e7ebf0);
}
.sc-auth-page-sm .sc-auth-panel { padding: 40px 34px; }
.sc-auth-icon-top {
  width: 54px; height: 54px; border-radius: 16px; font-size: 22px;
  margin: 0 auto 14px; display: inline-flex; align-items: center; justify-content: center;
}
.sc-auth-page-sm .input-numeric { letter-spacing: .4em; text-align: center; font-size: 18px; }
@media (max-width: 767.98px) {
  .sc-auth-page .sc-auth-grid { grid-template-columns: 1fr; }
  .sc-auth-page .sc-auth-visual { display: none; }
}

/* ---------- Lottie animations (home collage cards + 404 page) ---------- */
.sc-hok-collage-lottie {
  background: #ffffff !important;
  padding: 6px;
  overflow: hidden;
}
.sc-hok-collage-card .sc-lottie {
  width: 100%;
  height: 100%;
}
.sc-hok-collage-card .sc-lottie svg { display: block; }
.sc-error-lottie {
  display: block;
  width: 100%;
  max-width: 340px;
  height: 300px;
  margin: 0 auto 4px;
}
.sc-error-lottie svg { width: 100% !important; height: 100% !important; }

/* ===== Item License Option: quality features + checked badge ===== */
.sc-license-features {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.sc-license-feature {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  padding: .6rem .8rem;
  border-radius: 10px;
  border: 1px solid transparent;
}
.sc-license-feature i {
  flex: 0 0 auto;
  width: 1.1rem;
  text-align: center;
  font-size: 1rem;
}
.sc-license-feature.is-checked {
  color: #0f7b4f;
  background: rgba(16, 123, 79, .08);
  border-color: rgba(16, 123, 79, .18);
}
.sc-license-feature.is-checked i { color: #f5a623; }
.sc-license-feature.is-yes {
  color: #0f7b4f;
  background: rgba(16, 123, 79, .06);
  border-color: rgba(16, 123, 79, .14);
}
.sc-license-feature.is-yes i { color: #1a9d63; }
.sc-license-feature.is-no {
  color: #b3261e;
  background: rgba(214, 69, 65, .06);
  border-color: rgba(214, 69, 65, .14);
}
.sc-license-feature.is-no i { color: #d64541; }

.item-single-img { position: relative; }
.sc-checked-badge {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
  background: rgba(15, 123, 79, .95);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
  backdrop-filter: blur(2px);
}
.sc-checked-badge i { color: #ffd76a; }

/* compact author-items grid (5/row): Live Preview shows icon only to avoid overflow */
.sc-author-items .sc-item-preview-text { display: none; }
.sc-author-items .sc-item-preview {
  padding-left: .7rem;
  padding-right: .7rem;
}

/* ===== Cookie consent link ===== */
.sc-cbar-link { text-decoration: underline; font-weight: 600; }

/* ===== Newsletter popup (modern 2-panel) ===== */
.sc-nl-dialog { max-width: 740px; }
.sc-nl-modal {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.sc-nl-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  width: 46px;
  height: 46px;
  border: 0;
  border-bottom-left-radius: 16px;
  background: #182433;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: background .15s ease;
}
.sc-nl-close:hover { background: #0f1a24; }
.sc-nl-body { padding: 2.6rem 2rem; }
.sc-nl-title {
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.15;
  margin-bottom: .6rem;
  color: #1f2a37;
}
.sc-nl-sub { color: #6b7280; font-size: .95rem; margin-bottom: 1.2rem; }
.sc-nl-coupon {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(16, 123, 79, .08);
  color: #0f7b4f;
  border: 1px dashed rgba(16, 123, 79, .45);
  padding: .55rem .9rem;
  border-radius: 10px;
  font-size: .9rem;
  margin-bottom: 1.15rem;
}
.sc-nl-coupon strong { letter-spacing: .5px; }
.sc-nl-form { display: flex; flex-direction: column; gap: .7rem; }
.sc-nl-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: .85rem 1rem;
  font-size: .95rem;
  background: #fff;
}
.sc-nl-input:focus {
  outline: none;
  border-color: rgba(16, 123, 79, .6);
  box-shadow: 0 0 0 3px rgba(16, 123, 79, .12);
}
.sc-nl-btn {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: .85rem 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary_color, #0e5a3c);
  cursor: pointer;
  transition: filter .15s ease;
}
.sc-nl-btn:hover { filter: brightness(.94); }
.sc-nl-later {
  display: block;
  width: 100%;
  margin-top: .85rem;
  background: none;
  border: 0;
  color: #9ca3af;
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
}
.sc-nl-art {
  background: #f3f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.sc-nl-art img { max-width: 100%; max-height: 290px; object-fit: contain; }
.sc-nl-art-icon { font-size: 5rem; color: #cbd5e1; }
@media (max-width: 767.98px) {
  .sc-nl-art { display: none; }
  .sc-nl-body { padding: 2.2rem 1.5rem; }
}

/* ===== Newsletter popup: coupon-focused (Zalando style) ===== */
.sc-nl-dialog-coupon { max-width: 460px; }
.sc-nl-offer { padding: 2.6rem 2rem 0; text-align: center; }
.sc-nl-offer-title {
  font-weight: 800;
  font-size: 1.5rem;
  color: #1f2a37;
  margin-bottom: .5rem;
}
.sc-nl-offer-text {
  color: #6b7280;
  font-size: .95rem;
  line-height: 1.45;
  margin-bottom: 1.4rem;
}
.sc-nl-coupon-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
  border: 1px solid #eef0f2;
  margin-bottom: .9rem;
}
.sc-nl-coupon-code {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: #3b4252;
  padding: 1.1rem 1rem .95rem;
  word-break: break-all;
}
.sc-nl-coupon-copy {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 0;
  padding: .95rem 1rem;
  font-weight: 800;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #fff;
  background: #f97316;
  cursor: pointer;
  transition: background .15s ease;
}
.sc-nl-coupon-copy:hover { background: #ea6a0c; }
.sc-nl-coupon-copy.is-copied { background: #1a9d63; }
.sc-nl-paste { color: #9aa3ad; font-size: .85rem; margin: 0; }
.sc-nl-divider {
  position: relative;
  border-top: 2px dashed #d8dde3;
  margin: 1.6rem 1.6rem 0;
}
.sc-nl-divider span {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 0 12px;
  color: #b6bdc6;
  font-size: .9rem;
}
.sc-nl-signup { padding: 1.4rem 2rem 2.3rem; text-align: center; }
.sc-nl-signup-label { color: #4b5563; font-size: .92rem; margin-bottom: .9rem; }
.sc-nl-form-row { flex-direction: row; gap: .6rem; }
.sc-nl-form-row .sc-nl-input { flex: 1 1 auto; }
.sc-nl-form-row .sc-nl-btn { width: auto; flex: 0 0 auto; padding-left: 1.4rem; padding-right: 1.4rem; }
@media (max-width: 575.98px) {
  .sc-nl-form-row { flex-direction: column; }
  .sc-nl-form-row .sc-nl-btn { width: 100%; }
}

/* coupon expiry + live countdown */
.sc-nl-expiry { margin-top: .9rem; }
.sc-nl-expiry-label { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .5px; color: #9aa3ad; }
.sc-nl-countdown { display: block; font-size: 1.15rem; font-weight: 800; color: #e11d48; letter-spacing: .5px; margin: .15rem 0; }
.sc-nl-expiry-date { display: block; font-size: .8rem; color: #9aa3ad; }

/* shrink the whole popup on phones */
@media (max-width: 575.98px) {
  .sc-nl-popup .modal-dialog { margin: .75rem auto; max-width: calc(100% - 1.2rem); }
  .sc-nl-dialog-coupon, .sc-nl-dialog { max-width: 360px; }
  .sc-nl-offer { padding: 1.7rem 1.1rem 0; }
  .sc-nl-offer-title { font-size: 1.2rem; }
  .sc-nl-offer-text { font-size: .85rem; margin-bottom: 1rem; }
  .sc-nl-coupon-code { font-size: 1.35rem; letter-spacing: 2px; padding: .85rem .7rem .75rem; }
  .sc-nl-coupon-copy { padding: .75rem; font-size: .82rem; }
  .sc-nl-divider { margin: 1.1rem 1.1rem 0; }
  .sc-nl-signup { padding: 1.1rem 1.1rem 1.7rem; }
  .sc-nl-countdown { font-size: 1.05rem; }
  .sc-nl-title { font-size: 1.25rem; }
  .sc-nl-body { padding: 1.7rem 1.2rem; }
  .sc-nl-close { width: 30px; height: 30px; }
}

/* ===== Cookie consent: thin wide bar ===== */
.sc-cbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 1080;
  width: min(900px, calc(100% - 28px));
  max-width: none;
  height: auto;
  visibility: visible;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
  text-align: left;
  background: #ece4d6;
  color: #1f2433;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}
.sc-cbar-hide { display: none; }
.sc-cbar-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f2433;
  font-size: 1.05rem;
}
.sc-cbar-text {
  flex: 1 1 240px;
  min-width: 0;            /* allow the text to shrink so the button never overflows off-screen */
  margin: 0;
  font-size: .86rem;
  line-height: 1.35;
  color: #1f2433;
}
.sc-cbar-text .sc-cbar-link {
  color: #1f2433;
  text-decoration: underline;
  font-weight: 600;
}
.sc-cbar-btn {
  flex: 0 0 auto;
  margin-left: auto;       /* push to the right; on wrap it stays visible on its own row */
  border: 0;
  background: #1f2433;
  color: #fff;
  border-radius: 10px;
  padding: .55rem 1.15rem;
  font-weight: 600;
  font-size: .88rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease;
}
.sc-cbar-btn:hover { background: #11151f; }
@media (max-width: 575.98px) {
  .sc-cbar { bottom: 10px; }
  .sc-cbar-text { flex: 1 1 100%; min-width: 0; }
  .sc-cbar-btn { margin-left: 0; flex: 1 1 100%; }
}

/* ===== Services nav button (next to Premium) ===== */
.btn.btn-services {
  background-color: #d07914;
  border-color: #d07914;
  color: #fff;
}
.btn.btn-services:hover,
.btn.btn-services:focus,
.btn.btn-services:active {
  background-color: #b8680f;
  border-color: #b8680f;
  color: #fff;
}

/* ===== Twinkling sparkles around Services + Premium buttons (no border) ===== */
.btn.btn-services,
.btn.btn-outline-premium { position: relative; isolation: isolate; z-index: 0; }

/* per-button sparkle colors */
.btn.btn-services      { --sca-glow: #ffcf6b; }
.btn.btn-outline-premium { --sca-glow: #6cf0b6; }

/* bigger sparkles that drift up & down + twinkle */
.btn.btn-services::after,
.btn.btn-outline-premium::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    -84px -16px 2px 1px #fff,   84px -12px 2px 1px var(--sca-glow),
     52px  20px 2px 1px #fff,  -52px  18px 2px 1px var(--sca-glow),
      6px -27px 2px 1px var(--sca-glow), 28px 27px 2px 1px #fff,
   -108px   4px 2px 1px var(--sca-glow), 108px 2px 2px 1px #fff;
  animation: sca-spark 2.2s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes sca-spark {
  0%   { opacity: .2; transform: translate(-50%, -50%) translateY(6px)  scale(.8); }
  50%  { opacity: 1;  transform: translate(-50%, -50%) translateY(-6px) scale(1.15); }
  100% { opacity: .2; transform: translate(-50%, -50%) translateY(6px)  scale(.8); }
}

/* ===== Service pricing tabs (Basic / Standard / Premium) ===== */
.sc-svc-pricing.card-v { padding: 0; border-radius: 14px; overflow: hidden; }
.sc-svc-info.card-v { padding: 0; border-radius: 14px; overflow: hidden; }
.sc-svc-info-body { padding: 15px; }
.sc-svc-tabs { display: flex; border: 0; margin: 0; padding: 0; list-style: none; }
.sc-svc-tab {
  width: 100%;
  border: 0;
  background: #fff;
  border-bottom: 2px solid #eef0f2;
  padding: 1rem .5rem;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
}
.sc-svc-tab + .sc-svc-tab,
.sc-svc-tabs li + li .sc-svc-tab { border-left: 1px solid #eef0f2; }
.sc-svc-tab.active { color: #ed6f1f; border-bottom-color: #ed6f1f; }
.sc-svc-pane { padding: 15px; }
.sc-svc-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.sc-svc-price-label { font-size: 1.3rem; font-weight: 800; color: #1f2a37; }
.sc-svc-price { font-size: 1.6rem; font-weight: 800; color: #1f2a37; }
.sc-svc-meta {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  color: #1f2a37;
  font-weight: 700;
  font-size: 1.02rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #f1f3f5;
}
.sc-svc-meta i { margin-right: .45rem; color: #ed6f1f; font-size: 1rem; }
.sc-svc-features { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.sc-svc-features li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .7rem; color: #4b5563; line-height: 1.4; }
.sc-svc-features li i { color: #ed6f1f; margin-top: .2rem; flex: 0 0 auto; }
.sc-svc-checkout {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: .9rem 1rem;
  font-weight: 800;
  color: #fff;
  background: #ed6f1f;
  cursor: pointer;
  transition: background .15s ease;
}
.sc-svc-checkout:hover { background: #d8610f; }
.sc-svc-desc { color: #4b5563; line-height: 1.7; }
.sc-svc-desc img { max-width: 100%; height: auto; }

/* service browse card */
.sc-svc-card {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.sc-svc-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.sc-svc-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f3f5f7; }
.sc-svc-card-img img { width: 100%; height: 100%; object-fit: cover; }
.sc-svc-card-body { padding: 10px; }
.sc-svc-card-title {
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: .4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sc-svc-card-rating { color: #f6a609; font-size: .85rem; }
.sc-svc-card-rating .fa-regular { color: #d6d9de; }
/* compact heart button inside the card */
.sc-svc-card-body .btn-md { padding: .25rem .5rem; font-size: .85rem; }

/* services categories panel */
.sc-svc-cat-link {
  display: block;
  padding: .55rem .25rem;
  color: #4b5563;
  text-decoration: none;
  font-size: .95rem;
  border-bottom: 1px solid #f1f3f5;
  transition: color .12s ease;
}
.sc-svc-cat-link:hover { color: var(--primary_color, #0e5a3c); }
.sc-svc-cat-link.active { color: var(--primary_color, #0e5a3c); font-weight: 700; }

/* ===== Service order chat ===== */
.sc-chat { display: flex; flex-direction: column; gap: .9rem; max-height: 480px; overflow-y: auto; }
.sc-chat-row { display: flex; gap: .6rem; align-items: flex-start; }
.sc-chat-row.is-mine { flex-direction: row-reverse; }
.sc-chat-ava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.sc-chat-bubble { background: #f3f5f7; border-radius: 12px; padding: .6rem .85rem; max-width: 78%; }
.sc-chat-row.is-mine .sc-chat-bubble { background: rgba(16, 123, 79, .1); }
.sc-chat-meta { display: flex; gap: .5rem; align-items: baseline; font-size: .78rem; color: #6b7280; margin-bottom: .2rem; }
.sc-chat-meta strong { color: #1f2a37; }
.sc-chat-text { color: #374151; line-height: 1.4; word-break: break-word; }

/* service order tabs */
.sc-order-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.sc-order-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #4b5563;
  font-weight: 600;
  text-decoration: none;
  transition: all .12s ease;
}
.sc-order-tab:hover { border-color: var(--primary_color, #0e5a3c); color: var(--primary_color, #0e5a3c); }
.sc-order-tab.active { background: var(--primary_color, #0e5a3c); border-color: var(--primary_color, #0e5a3c); color: #fff; }
.sc-order-tab-count {
  min-width: 22px;
  text-align: center;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #eef0f2;
  color: #374151;
  font-size: .8rem;
  font-weight: 700;
}
.sc-order-tab.active .sc-order-tab-count { background: rgba(255, 255, 255, .25); color: #fff; }

/* service review star input */
.sc-rate { display: flex; gap: .3rem; font-size: 1.5rem; }
.sc-rate-star { color: #f6a609; cursor: pointer; }
.sc-rate-star.fa-regular { color: #d6d9de; }

/* ===== Promo cards (Seller / Service / Premium) — item (row) + service (stack) ===== */
.sc-promos { margin-top: 30px; }                 /* gap below the item description card */
.sc-promos-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.sc-promo {
  display: flex; align-items: center; gap: 14px; height: 100%;
  padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--border_color, #e6ece8); background: #fff;
  text-decoration: none; box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .15);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sc-promo:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(15, 23, 42, .28); }
.sc-promo-dark { background: #0f172a; border-color: #0f172a; }
.sc-promo-ic {
  width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 19px;
}
.sc-promo-text { display: flex; flex-direction: column; min-width: 0; }
.sc-promo-title { font-weight: 800; font-size: 1rem; line-height: 1.2; color: var(--heading_color, #0f172a); }
.sc-promo-dark .sc-promo-title { color: #fff; }
.sc-promo-link { font-weight: 700; font-size: .88rem; color: #0e5a3c; margin-top: 4px; }
.sc-promo-dark .sc-promo-link { color: #34d399; }
.sc-promo-link i { font-size: .78rem; margin-left: 5px; }
/* coloured variants */
.sc-promo-service { background: #E1F5EE; border-color: #c6ecdc; }
.sc-promo-premium { background: #7F77DD; border-color: #7F77DD; }
.sc-promo-premium .sc-promo-title,
.sc-promo-premium .sc-promo-link { color: #fff; }

/* ============================================================
   Contact page
   ============================================================ */
.sc-contact-title { font-weight: 700; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -.01em; }
.sc-contact-sub { max-width: 700px; margin: 1rem auto 0; }

.sc-contact-card {
  position: relative;
  border-radius: 22px;
  background-color: #141414;
  background-repeat: no-repeat;
  color: #fff;
  padding: 2.4rem 1.75rem;
  text-align: center;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* glow painted as the card's own background -> clipped by border-radius, no corner bleed */
.sc-contact-card-1 { background-image: radial-gradient(70% 95% at 100% 0%, rgba(255, 45, 142, .9), rgba(122, 43, 255, .55) 42%, rgba(20, 20, 20, 0) 72%); }
.sc-contact-card-2 { background-image: radial-gradient(72% 95% at 0% 6%, rgba(255, 210, 63, .85), rgba(74, 222, 128, .7) 33%, rgba(59, 130, 246, .5) 60%, rgba(20, 20, 20, 0) 82%); }
.sc-contact-card-3 { background-image: radial-gradient(70% 95% at 0% 100%, rgba(255, 176, 46, .9), rgba(255, 94, 58, .6) 50%, rgba(20, 20, 20, 0) 74%); }

.sc-contact-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  display: grid; place-items: center;
  font-size: 1.4rem;
  margin: 0 auto 1.1rem;
}
.sc-contact-card-title { font-size: 1.35rem; font-weight: 600; margin-bottom: .5rem; }
.sc-contact-card-text { color: rgba(255, 255, 255, .6); margin: 0; text-decoration: none; word-break: break-word; }
a.sc-contact-card-text:hover { color: #fff; }

.sc-contact-card-link { text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.sc-contact-card-link:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, .22); }

.sc-contact-form { border-radius: 22px; }
.sc-contact-submit { border-radius: 999px; padding-top: .85rem; padding-bottom: .85rem; font-weight: 600; }

/* ===== Custom styled dropdown ([data-sc-dd]) — used by Update Support Option ===== */
.sc-dd { position: relative; }
.sc-dd-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .8rem 1rem;
  border: 1.5px solid #e4e4e466;border-radius: 12px;background: #e3ffd845;
  font-size: .95rem; font-weight: 500; color: #1a2b3b; line-height: 1.3;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.sc-dd-toggle:hover { border-color: #cbd5e1; }
.sc-dd.is-open .sc-dd-toggle {
  border-color: var(--primary_color); box-shadow: 0 0 0 3px rgba(14, 90, 60, .14);
}
.sc-dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-dd-caret { font-size: .78rem; color: #64748b; transition: transform .15s ease; flex: 0 0 auto; }
.sc-dd.is-open .sc-dd-caret { transform: rotate(180deg); }
.sc-dd-menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid #eef1f5; border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.sc-dd.is-open .sc-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sc-dd-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .65rem .85rem; border-radius: 9px; cursor: pointer; font-size: .92rem; color: #1a2b3b;
}
.sc-dd-item:hover { background: rgba(14, 90, 60, .06); }
.sc-dd-item.is-selected { background: rgba(14, 90, 60, .1); font-weight: 600; }
.sc-dd-item-price { font-size: .82rem; font-weight: 600; flex: 0 0 auto; }
.sc-dd-item-price.is-paid { color: var(--primary_color); }
.sc-dd-item-price.is-free { color: #16a34a; }

/* ===== Reusable hover tooltip ([data-tip]) ===== */
.sc-tip { position: relative; }
.sc-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1f2937; color: #fff; font-size: .76rem; font-weight: 500; line-height: 1.2;
  white-space: nowrap; padding: .4rem .6rem; border-radius: 8px;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
  transition: opacity .15s ease, transform .15s ease;
}
.sc-tip::before {
  content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1f2937;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60; transition: opacity .15s ease;
}
.sc-tip:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sc-tip:hover::before { opacity: 1; visibility: visible; }

/* ===== Author speech bubble (item page) — points down to the avatar ===== */
.sc-author-bubble {
  position: absolute; bottom: calc(100% + 2px); left: 35px;
  background: #ffffff; color: #1f2937;
  border-radius: 16px; padding: .55rem .95rem;
  font-size: .8rem; font-weight: 600; line-height: 1.55; white-space: nowrap;
  box-shadow: 0 6px 16px rgb(43 45 50 / 54%);
  display: flex; flex-direction: column; gap: 1px; z-index: 5;
  animation: scBubbleIn .35s ease both;
}
/* sharp tail pointing down from the bubble onto the author's avatar */
.sc-author-bubble::after {
  content: ""; position: absolute; top: 100%; left: 18px;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 11px solid transparent;
  border-top: 14px solid #ffffff;
}
.sc-author-bubble i { font-size: .72rem; margin-inline-end: 2px; }
@keyframes scBubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Item tabs (Description/Reviews/Comments/Support) — fit on one row ===== */
.sc-item-tabs > [class*="col"] { flex: 1 1 150px; max-width: none; }
.sc-item-tabs .btn { white-space: nowrap; }

/* ===== Balance page cards — fill the row evenly on desktop ===== */
@media (min-width: 992px) {
  .sc-balance-cards > [class*="col"] { flex: 1 1 0; max-width: none; }
}

/* ===== Cart line controls — keep them compact & wrapping (no overflow) ===== */
.sc-cart-row .col-form-label { font-size: .82rem; color: #6b7280; padding-block: 0; }
.sc-cart-row .form-select,
.sc-cart-row .form-control { font-size: .9rem; padding-top: .4rem; padding-bottom: .4rem; }
.sc-cart-row .form-select { max-width: 230px; }
.sc-cart-row input[name="quantity"] { width: 64px; }

/* ===== Short item description (only shown in list/inline view) ===== */
.item-desc {
  display: none;
  margin: 6px 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: #6b7280;
}

/* ===== List / inline view — compact Envato-style row ===== */
@media (min-width: 768px) {
  .item-inline {
    padding: 16px;
    align-items: flex-start;
    gap: 20px;
  }
  /* small fixed-width thumbnail on the left (no more giant image) */
  .item-inline .item-header {
    width: 350px;
    flex: 0 0 350px;
    aspect-ratio: 59 / 30;
    border-radius: 8px;
    margin: 0;
  }
  .item-inline .item-img { object-fit: cover; }
  /* keep video/audio previews inside the smaller thumbnail too */
  .item-inline .item-video,
  .item-inline .item-audio { width: 100%; }
  .item-inline .item-header > a { width: 100%; }

  /* item-body becomes a 2-part row: info (middle) + purchase (right) */
  .item-inline .item-body {
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
  }
  /* middle block: title, author, description */
  .item-inline .item-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  /* show the description, clamped to 3 lines */
  .item-inline .item-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* right block: price on top, action buttons below, divided by a line */
  .item-inline .item-purchase {
      flex: 0 0 210px;
      margin: 0;
      padding: 20px 20px 60px 20px;
      border-left: 1px dashed #e6e6e6 !important;
      border-top: none !important;

  }
  .item-inline .item-purchase > .row {
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    row-gap: 14px;
    text-align: right;
  }
  .item-inline .item-purchase .item-price { justify-content: flex-end; }
}

/* ===== Checkout: payment method picker (icon cards) ===== */
.sc-pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.sc-pay-wide { grid-column: 1 / -1; }
.sc-pay-method {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--border_color, #e6eaed);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.sc-pay-method:hover {
  border-color: rgba(14, 90, 60, .5);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 46, 34, .07);
}
.sc-pay-method.active,
.sc-pay-method:has(.sc-pay-radio:checked) {
  border-color: #0e5a3c;
  background: color-mix(in srgb, #0e5a3c 6%, #fff);
  box-shadow: 0 0 0 3px rgba(14, 90, 60, .15);
}
.sc-pay-radio { position: absolute; opacity: 0; pointer-events: none; }
.sc-pay-mark {
  order: 3;
  margin-left: auto;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  position: relative;
  transition: border-color .18s ease;
}
.sc-pay-method.active .sc-pay-mark,
.sc-pay-method:has(.sc-pay-radio:checked) .sc-pay-mark { border-color: #0e5a3c; }
.sc-pay-method.active .sc-pay-mark::after,
.sc-pay-method:has(.sc-pay-radio:checked) .sc-pay-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #0e5a3c;
}
.sc-pay-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f5f7;
  color: #0e5a3c;
  font-size: 20px;
  overflow: hidden;
}
.sc-pay-method.active .sc-pay-icon,
.sc-pay-method:has(.sc-pay-radio:checked) .sc-pay-icon { background: color-mix(in srgb, #0e5a3c 12%, #fff); }
.sc-pay-icon img { max-width: 30px; max-height: 30px; object-fit: contain; }
.sc-pay-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sc-pay-name { font-weight: 600; color: var(--heading_color, #0f2e22); line-height: 1.25; }
.sc-pay-balance { font-size: .85rem; color: #16794f; font-weight: 600; margin-top: 2px; }
@media (max-width: 575.98px) {
  .sc-pay-grid { grid-template-columns: 1fr; }
  .sc-pay-method { padding: 12px 14px; gap: 10px; }
  .sc-pay-icon { width: 38px; height: 38px; font-size: 17px; }
}

/* ---------- Categories quick-switch list (filter sidebar): show 10, expandable toggle ---------- */
.sc-catlist-extra { display: none; }
.sc-catlist[data-collapsed="0"] .sc-catlist-extra { display: block; }
.sc-catlist-toggle {
  display: inline-flex; align-items: center; gap: 4px; width: 100%; justify-content: center;
  background: none; border: none; padding: 14px 0 2px; margin-top: 6px; cursor: pointer;
  border-top: 1px solid var(--border_color, #e5e7eb);
  color: #0e5a3c; font-weight: 600; font-size: .9rem;
}
.sc-catlist-toggle i { transition: transform .2s ease; }
.sc-catlist[data-collapsed="0"] .sc-catlist-toggle i { transform: rotate(180deg); }
.sc-catlist-less { display: none; }
.sc-catlist[data-collapsed="0"] .sc-catlist-more { display: none; }
.sc-catlist[data-collapsed="0"] .sc-catlist-less { display: inline; }
/* per-row: Envato-style chevron that reveals sub-categories */
.sc-catrow-link { text-decoration: none; }
.sc-catrow-ico { width: 20px; text-align: center; margin-right: 9px; color: #9aa4b2; font-size: .95em; }
.sc-catrow-link:hover .sc-catrow-ico,
.sc-catrow-link.text-primary .sc-catrow-ico { color: #0e5a3c; }
.sc-catrow-toggle {
  flex: 0 0 auto; background: none; border: none; padding: 2px 4px; cursor: pointer;
  color: #9aa4b2; line-height: 1;
}
.sc-catrow-toggle:hover { color: #0e5a3c; }
.sc-catrow-toggle i { transition: transform .2s ease; }
.sc-catrow[data-open="1"] .sc-catrow-toggle i { transform: rotate(180deg); color: #0e5a3c; }
.sc-catrow-subs { display: none; padding: 8px 0 2px 12px; }
.sc-catrow[data-open="1"] .sc-catrow-subs { display: block; }
.sc-catrow-sub {
  display: block; padding: 5px 0; font-size: .875rem; color: #5b6472; text-decoration: none;
  border-left: 2px solid var(--border_color, #e5e7eb); padding-left: 12px;
}
.sc-catrow-sub:hover { color: #0e5a3c; border-left-color: #0e5a3c; }

/* nav dropdown: make a parent item with children still clickable to its own link */
.drop-down-btn .drop-down-parent-link {
  display: inline-flex; align-items: center; flex: 0 1 auto;
  color: inherit; text-decoration: none;
}
.drop-down-btn .drop-down-parent-link:hover { color: inherit; }
/* the caret is the submenu toggle (esp. on mobile) — give it a comfortable tap target */
.drop-down-btn .drop-down-caret { padding: 6px; margin-left: auto; cursor: pointer; }
/* /items Categories panel: Envato-style 2-row collapse + centered "Show more" */
.sc-cat-panel { position: relative; }
.sc-cat-panel[data-collapsed="1"] .sc-cat-more-item { display: none; }
.sc-cat-showmore {
  border-radius: 8px;
  position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%);
  background: #fff; border: 1px solid #f6f6f6; padding: 4px 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  color: #4b5563; font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.sc-cat-showmore:hover { color: #0e5a3c; }
.sc-cat-showmore i { transition: transform .2s ease; }
.sc-cat-panel[data-collapsed="0"] .sc-cat-showmore i { transform: rotate(180deg); }
.sc-cat-showmore-less { display: none; }
.sc-cat-panel[data-collapsed="0"] .sc-cat-showmore-more { display: none; }
.sc-cat-panel[data-collapsed="0"] .sc-cat-showmore-less { display: inline; }

/* ---------- Embedded video in item descriptions (responsive 16:9) ---------- */
.item-single-paragraph figure.media,
.item-single-paragraph [data-oembed-url] {
  position: relative; width: 100%; max-width: 760px; margin: 1.25rem 0;
  aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden;
}
.item-single-paragraph figure.media iframe,
.item-single-paragraph [data-oembed-url] iframe {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0;
}
.item-single-paragraph > iframe,
.item-single-paragraph p > iframe {
  display: block; width: 100%; max-width: 760px; aspect-ratio: 16 / 9; height: auto;
  margin: 1.25rem 0; border: 0; border-radius: 10px;
}

/* ---------- Similar items: become-an-author banner card (4th column) ---------- */
.sc-sim-banner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; height: 100%; min-height: 320px; padding: 28px 22px;
  border-radius: var(--sc-radius-sm, 14px); text-decoration: none;
  background: linear-gradient(160deg, #157a4f 0%, #0e5a3c 55%, #0a3f2b 100%);
  transition: box-shadow .2s ease, transform .2s ease;
}
.sc-sim-banner:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(14, 90, 60, .35); }
.sc-sim-banner-ic {
  width: 64px; height: 64px; border-radius: 50%; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #0e5a3c; font-size: 26px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.sc-sim-banner-title { color: #fff; font-weight: 800; font-size: 1.15rem; line-height: 1.35; max-width: 240px; }
.sc-sim-banner-divider { width: 44px; height: 2px; background: rgba(255, 255, 255, .45); margin: 14px 0; }
.sc-sim-banner-text { color: rgba(255, 255, 255, .85); font-size: .9rem; line-height: 1.5; max-width: 250px; margin-bottom: 20px; }
.sc-sim-banner-btn {
  display: inline-flex; align-items: center; padding: 10px 26px; border-radius: 999px;
  background: #fff; color: #0e5a3c; font-weight: 700; font-size: .95rem;
  transition: transform .15s ease;
}
.sc-sim-banner:hover .sc-sim-banner-btn { transform: scale(1.04); }

/* ---------- Flash Sale popup ---------- */
.sc-fs-overlay {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(10, 24, 18, .55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.sc-fs-overlay.show { opacity: 1; visibility: visible; }
.sc-fs-modal {
  position: relative; width: 100%; max-width: 480px; background: #fff;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  transform: translateY(16px) scale(.97); transition: transform .25s ease;
}
.sc-fs-overlay.show .sc-fs-modal { transform: translateY(0) scale(1); }
.sc-fs-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #374151; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: transform .15s ease;
}
.sc-fs-close:hover { transform: rotate(90deg); }
.sc-fs-media { display: block; }
.sc-fs-media img { width: 100%; max-height: 240px; object-fit: cover; display: block; }
.sc-fs-body { padding: 24px 26px 28px; text-align: center; }
.sc-fs-badge {
  display: inline-flex; align-items: center; padding: 5px 14px; margin-bottom: 12px;
  border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, #f59e0b, #dc2626);
}
.sc-fs-title { font-weight: 800; color: #10231b; margin-bottom: 8px; }
.sc-fs-subtitle { color: #5b6472; font-size: .95rem; margin-bottom: 16px; }
.sc-fs-countdown { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.sc-fs-cd {
  min-width: 62px; padding: 8px 6px; border-radius: 12px;
  background: #f1f5f2; border: 1px solid #e2e8e4;
}
.sc-fs-cd span { display: block; font-size: 1.35rem; font-weight: 800; color: #0e5a3c; line-height: 1.1; }
.sc-fs-cd small { color: #6b7280; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.sc-fs-cta { width: 100%; font-weight: 700; }
@media (max-width: 575.98px) {
  .sc-fs-modal { max-width: 100%; }
  .sc-fs-cd { min-width: 54px; }
}

/* ---------- Recently viewed items (item page, client-rendered) ---------- */
.sc-rv-card {
  background: #fff; border-radius: var(--sc-radius-sm, 12px); overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease; height: 100%;
}
.sc-rv-card:hover { box-shadow: 0 10px 24px rgba(15, 46, 34, .1); transform: translateY(-2px); }
.sc-rv-media { display: block; aspect-ratio: 590 / 300; overflow: hidden; background: #f1f5f9; }
.sc-rv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-rv-body { padding: 12px 14px; }
.sc-rv-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #1f2937; font-weight: 600; font-size: .92rem; line-height: 1.35;
  text-decoration: none; margin-bottom: 8px; min-height: 2.5em;
}
.sc-rv-name:hover { color: #0e5a3c; }
.sc-rv-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-rv-author { font-size: .82rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-rv-price { font-weight: 700; color: #0e5a3c; white-space: nowrap; }

/* keep every second-row nav label on a single line (no 2-line wrap) */
.nav-bar-bg .nav-bar-links .drop-down-btn,
.nav-bar-bg .nav-bar-links .drop-down-parent-link,
.nav-bar-bg .nav-bar-links .drop-down-btn > span,
.nav-bar-bg .nav-bar-links .link .link-title,
.nav-bar-bg .nav-bar-links .link .link-title span { white-space: nowrap; }

/* ---------- Language switcher (rounded flag, next to notif bell) ---------- */
.sc-lang-menu { display: inline-flex; align-items: center; }
.sc-lang-btn { cursor: pointer; padding: 0; display: inline-flex; align-items: center; }
.sc-lang-flag {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); transition: box-shadow .15s ease;
}
.sc-lang-btn:hover .sc-lang-flag { box-shadow: 0 0 0 2px rgba(52, 211, 153, .9); }
.sc-lang-menu .drop-down-item-img img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* ---------- Item card "Live Preview" button: never overflow on long locales ---------- */
.item .sc-preview-col { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.sc-item-preview {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 100%; max-width: 100%; overflow: hidden;
}
.sc-item-preview .sc-item-preview-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* ---------- Item badges: icon-only, reveal text on hover ---------- */
.item-badge { white-space: nowrap; }
.item-badge i { margin-right: 0 !important; }
.item-badge .item-badge-text {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    vertical-align: middle;
    transition: max-width .3s ease, opacity .2s ease, margin-left .3s ease;
}
.item:hover .item-badge .item-badge-text,
.item-badge:hover .item-badge-text {
    max-width: 120px;
    opacity: 1;
    margin-left: 6px;
}

/* ---------- Favorites page tabs ---------- */
.sc-fav-tabs .nav-link {
    color: var(--text_color);
    font-weight: 600;
    border-radius: 999px;
    padding: 8px 18px;
}
.sc-fav-tabs .nav-link .badge { background: rgba(0, 0, 0, .08); color: inherit; }
.sc-fav-tabs .nav-link.active { background: var(--primary_color); color: #fff; }
.sc-fav-tabs .nav-link.active .badge { background: rgba(255, 255, 255, .25); color: #fff; }

/* ---------- Item badge: perfect circle when collapsed, icon centered ---------- */
.item-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    line-height: 1;
}
.item-badge i {
    width: 14px;
    text-align: center;
}
.item-badge.item-badge-lg {
    height: 42px;
    min-width: 42px;
    padding: 0 14px;
}

/* user-menu "Dashboard" label links to workspace; keep original text color */
.user-menu a.user-name { color: inherit; text-decoration: none; }
.user-menu a.user-name:hover { color: var(--primary_color); }

/* ================= Notification panel (bell) ================= */
.sc-nfp { position: relative; }
.sc-nfp-overlay {
    position: fixed; inset: 0; z-index: 1044;
    background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.sc-nfp.open .sc-nfp-overlay { opacity: 1; visibility: visible; }
body.sc-nfp-lock { overflow: hidden; }
.sc-nfp-panel {
    position: fixed; top: 74px; right: 16px; z-index: 1045;
    width: 430px; max-width: calc(100vw - 24px);
    max-height: calc(100vh - 100px);
    background: #fff; border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
    transition: .25s ease;
}
.sc-nfp.open .sc-nfp-panel { opacity: 1; visibility: visible; transform: none; }
.sc-nfp-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 16px 18px 12px;
}
.sc-nfp-sub { font-size: 12px; color: var(--text_muted); }
.sc-nfp-head-actions { display: flex; gap: 6px; }
.sc-nfp-hbtn {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border_color); border-radius: 10px; background: #fff;
    color: var(--text_color); font-size: 13px; cursor: pointer; transition: .15s;
}
.sc-nfp-hbtn:hover { color: var(--primary_color); border-color: var(--primary_color); }
.sc-nfp-tabs {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 0 18px 10px; border-bottom: 1px solid var(--border_color);
}
.sc-nfp-tab {
    border: 0; background: transparent; padding: 6px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--text_muted); cursor: pointer;
}
.sc-nfp-tab.active { background: var(--primary_color); color: #fff; }
.sc-nfp-tab-count {
    display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
    border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; line-height: 18px;
}
.sc-nfp-readall {
    border: 0; background: transparent; font-size: 12.5px; font-weight: 600;
    color: var(--primary_color); cursor: pointer; white-space: nowrap;
}
.sc-nfp-list { overflow-y: auto; flex: 1 1 auto; padding: 6px 10px; }
.sc-nfp-group {
    font-size: 12px; font-weight: 700; color: var(--text_muted);
    padding: 10px 8px 4px;
}
.sc-nfp-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 8px; border-radius: 12px; color: var(--text_color);
}
.sc-nfp-item:hover { background: rgba(0, 0, 0, .04); color: var(--text_color); }
.sc-nfp-item.is-unread { background: rgba(14, 90, 60, .06); }
.sc-nfp-ico, .sc-notifp-ico {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; overflow: hidden;
}
.sc-nfp-ico img, .sc-notifp-ico img { width: 100%; height: 100%; object-fit: cover; }
.sc-nfp-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.sc-nfp-title {
    font-size: 13.5px; font-weight: 600; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-nfp-meta { font-size: 12px; color: var(--text_muted); }
.sc-nfp-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary_color); }
.sc-nfp-empty { padding: 40px 0; text-align: center; color: var(--text_muted); }
.sc-nfp-all {
    display: block; text-align: center; padding: 12px;
    border-top: 1px solid var(--border_color); font-weight: 600; font-size: 13.5px;
    color: var(--primary_color); border-radius: 0 0 16px 16px;
}
@media (max-width: 575.98px) {
    .sc-nfp-panel { right: 8px; left: 8px; width: auto; top: 66px; }
}

/* ================= Notifications page ================= */
.sc-notifp-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--border_color);
    font-size: 13px; font-weight: 700; color: var(--text_muted);
}
.sc-notifp-col { flex: 0 0 140px; }
.sc-notifp-col-sm { flex: 0 0 90px; }
.sc-notifp-col-main { flex: 1 1 auto; }
.sc-notifp-col-del { flex: 0 0 34px; text-align: right; }
.sc-notifp-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--border_color);
}
.sc-notifp-row:last-child { border-bottom: 0; }
.sc-notifp-row.is-unread { background: rgba(14, 90, 60, .05); }
.sc-notifp-main {
    display: flex; align-items: center; gap: 12px;
    flex: 1 1 auto; min-width: 0; color: var(--text_color);
}
.sc-notifp-main:hover { color: var(--primary_color); }
.sc-notifp-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-notifp-title { font-weight: 600; font-size: 14px; line-height: 1.4; }
.sc-notifp-sub { font-size: 12px; color: var(--text_muted); }
.sc-notifp-chip {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: rgba(0, 0, 0, .06); font-size: 12px; font-weight: 600; color: var(--text_color);
}
.sc-notifp-chip-unread { background: rgba(79, 70, 229, .12); color: #4f46e5; }

/* ================= Notification settings ================= */
.sc-notifs-head {
    padding: 14px 18px; border-bottom: 1px solid var(--border_color);
    font-size: 13px; font-weight: 700; color: var(--text_muted);
}
.sc-notifs-col { flex: 0 0 90px; text-align: center; }
.sc-notifs-row { gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--border_color); }
.sc-notifs-row:last-child { border-bottom: 0; }
.sc-notifs-row .form-check-input { cursor: pointer; }

/* workspace top bar: spacing from the container gap, not per-item ms-* */
.dashboard-nav .sc-notif-wrap,
.dashboard-nav .sc-lang-menu,
.dashboard-nav .user-menu { margin-left: 0 !important; }

/* cards above footer in paint order: table Action dropdowns must not be covered
   by the footer. Scoped to .dashboard-card (NOT the whole content wrapper) so
   Bootstrap modals living in the page content are not trapped inside a stacking
   context below the body-level .modal-backdrop. */
.dashboard-body .dashboard-card { position: relative; z-index: 1; }
.dashboard-body .sc-foot,
body > .sc-foot, footer.sc-foot { z-index: 0; }

/* ================= Profile hero (LinkedIn-style) ================= */
.sc-prof-hero {
    background: #fff;
    border: 1px solid var(--border_color);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--sc-shadow-lg);
}
.sc-prof-cover {
    position: relative;
    height: 190px;
    background: linear-gradient(115deg, #fbbf24 0%, #f472b6 28%, #818cf8 52%, #34d399 76%, #22d3ee 100%);
    background-size: cover;
    background-position: center;
}
.sc-prof-cover-edit {
    position: absolute; top: 14px; right: 14px;
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #111827; font-size: 15px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: .15s;
}
.sc-prof-cover-edit:hover { color: var(--primary_color); transform: scale(1.05); }
.sc-prof-body { position: relative; padding: 0 24px 14px; }
/* right column starts just below the cover (parallel with the avatar) */
.sc-prof-side-col { padding-top: 22px; }
@media (max-width: 991.98px) { .sc-prof-side-col { padding-top: 0; } }
.sc-prof-avatar {
    width: 132px; height: 132px; border-radius: 50%;
    border: 5px solid #fff; overflow: hidden;
    margin-top: -66px; margin-bottom: 12px;
    background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}
.sc-prof-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sc-prof-name { font-size: 28px; font-weight: 800; color: #0f172a; margin-bottom: 2px; }
.sc-prof-role { font-size: 15.5px; color: #475569; margin-bottom: 4px; }
.sc-prof-role .sc-prof-chip { padding: 4px 10px; font-size: 12px; }
.sc-prof-meta { font-size: 13.5px; color: var(--text_muted); margin-bottom: 0; }
.sc-prof-side-label {
    font-size: 14px; font-weight: 600; color: #64748b; margin-bottom: 10px;
}
.sc-prof-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: #fdeee3; color: #1f2937; font-size: 12.5px; font-weight: 600;
    white-space: nowrap;
}
.sc-prof-chip img { width: 18px; height: 18px; object-fit: contain; }
.sc-prof-chip-dark { background: #eef2f7; }
.sc-prof-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-prof-side { max-width: 100%; }
@media (max-width: 767.98px) {
    .sc-prof-cover { height: 130px; }
    .sc-prof-avatar { width: 104px; height: 104px; margin-top: -52px; }
    .sc-prof-name { font-size: 22px; }
    .sc-prof-body { padding: 0 16px 16px; }
}

/* ---------- Profile about block (heading + description) ---------- */
.sc-prof-about {
    background: #fff;
    border: 1px solid var(--border_color);
    border-radius: 16px;
    padding: 28px 30px;
}
.sc-prof-about-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.45;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border_color);
}
.sc-prof-about-desc { color: #334155; font-size: 15px; line-height: 1.75; }
.sc-prof-about-desc p { margin-bottom: 14px; }
.sc-prof-about-desc p:last-child { margin-bottom: 0; }
@media (max-width: 767.98px) { .sc-prof-about { padding: 20px 18px; } }

/* ================= Author storefront (/store/username) ================= */
.sc-store-hero {
    background: #fff; border: 1px solid var(--border_color);
    border-radius: 20px; overflow: hidden; box-shadow: var(--sc-shadow-lg);
}
.sc-store-cover {
    height: 220px;
    background: linear-gradient(115deg, var(--store-accent, #0e5a3c), color-mix(in srgb, var(--store-accent, #0e5a3c) 35%, #0b1120));
    background-size: cover; background-position: center;
}
.sc-store-head { position: relative; padding: 0 28px 22px; }
.sc-store-logo {
    width: 108px; height: 108px; border-radius: 24px; overflow: hidden;
    border: 5px solid #fff; margin-top: -54px; margin-bottom: 10px;
    background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .14);
}
.sc-store-logo img { width: 100%; height: 100%; object-fit: cover; }
.sc-store-name { font-size: 26px; font-weight: 800; color: #0f172a; margin-bottom: 2px; }
.sc-store-headline { color: #475569; font-size: 15.5px; margin-bottom: 6px; }
.sc-store-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--text_muted); font-size: 13.5px; }
.sc-store-about {
    margin: 14px 0 0; color: #334155; font-size: 14.5px; line-height: 1.7; max-width: 860px;
    border-top: 1px solid var(--border_color); padding-top: 14px;
}
.sc-store-social {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--store-accent, #0e5a3c) 10%, #fff);
    color: var(--store-accent, #0e5a3c); transition: .15s;
}
.sc-store-social:hover { background: var(--store-accent, #0e5a3c); color: #fff; }
.sc-store-plan .sc-store-plan-price { font-size: 30px; font-weight: 800; color: #0f172a; }
@media (max-width: 767.98px) {
    .sc-store-cover { height: 140px; }
    .sc-store-head { padding: 0 16px 16px; }
    .sc-store-logo { width: 84px; height: 84px; margin-top: -42px; }
}

/* storefront standalone chrome (no marketplace navbar/footer) */
.sc-storefront-page { background: #f6f7f9; }
.sc-store-nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border_color);
    padding: 10px 0;
}
.sc-store-nav-brand { display: inline-flex; align-items: center; gap: 10px; color: #0f172a; font-weight: 800; font-size: 17px; }
.sc-store-nav-brand img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.sc-store-nav-brand:hover { color: var(--store-accent, #0e5a3c); }
.sc-store-social-sm { width: 34px; height: 34px; font-size: 13px; }
.sc-store-foot { border-top: 1px solid var(--border_color); background: #fff; padding: 18px 0; margin-top: 48px; }
.sc-store-foot-brand { display: inline-flex; align-items: center; }
.sc-store-foot-brand img { height: 26px; width: auto; opacity: .85; transition: .15s; }
.sc-store-foot-brand:hover img { opacity: 1; }
.sc-storefront { min-height: 60vh; }

/* storefront showcase sections */
.sc-store-section { margin-top: 44px; }
.sc-store-sec-title {
    text-align: center; font-size: 24px; font-weight: 800; color: #0f172a;
    letter-spacing: .01em; margin-bottom: 24px;
}
.sc-store-about-wrap { background: #fff; border: 1px solid var(--border_color); border-radius: 20px; padding: 32px; }
.sc-store-about-text { color: #334155; font-size: 15px; line-height: 1.8; margin-bottom: 20px; }
.sc-store-about-img { width: 100%; border-radius: 16px; object-fit: cover; max-height: 380px; }
.sc-store-accent-btn { background: var(--store-accent, #0e5a3c) !important; border-color: var(--store-accent, #0e5a3c) !important; }
.sc-store-stats { background: #fff; border: 1px solid var(--border_color); border-radius: 20px; padding: 30px 16px; }
.sc-store-stat-num { font-size: 32px; font-weight: 800; color: var(--store-accent, #0e5a3c); line-height: 1.2; }
.sc-store-stat-label { color: var(--text_muted); font-size: 13.5px; margin-top: 4px; }
.sc-store-coupon {
    background: #fff; border: 2px dashed var(--store-accent, #0e5a3c); border-radius: 16px;
    padding: 18px; text-align: center;
}
.sc-store-coupon-off { font-size: 26px; font-weight: 800; color: var(--store-accent, #0e5a3c); }
.sc-store-coupon-code {
    font-family: SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .06em;
    background: color-mix(in srgb, var(--store-accent, #0e5a3c) 8%, #fff);
    border-radius: 8px; padding: 6px 10px; margin: 8px 0 4px; cursor: pointer; display: inline-block;
}
.sc-store-coupon-code:hover { background: color-mix(in srgb, var(--store-accent, #0e5a3c) 16%, #fff); }
.sc-store-coupon-exp { color: var(--text_muted); font-size: 12px; }

/* flash-popup-style coupon tickets (store hero + all-coupons modal) */
.sc-cpnt { text-align: center; margin-bottom: 1.1rem; }
.sc-cpnt-off {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--store-accent, #0e5a3c);
  background: color-mix(in srgb, var(--store-accent, #0e5a3c) 10%, #fff);
  border-radius: 999px; padding: 3px 12px; margin-bottom: .55rem;
}
.sc-cpnt-card {
  background: #fff; border-radius: 14px; overflow: hidden; cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12); border: 1px solid #eef0f2;
}
.sc-cpnt-code {
  font-size: 1.6rem; font-weight: 800; letter-spacing: 3px; color: #3b4252;
  padding: 1rem 1rem .85rem; word-break: break-all;
}
.sc-cpnt-copy {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: .55rem;
  border: 0; padding: .8rem 1rem; font-weight: 800; font-size: .88rem;
  text-transform: uppercase; letter-spacing: .5px; color: #fff; background: #f97316;
  cursor: pointer; transition: background .15s ease;
}
.sc-cpnt-copy:hover { background: #ea6a0c; }
.sc-cpnt-copy.is-copied { background: #1a9d63; }
.sc-cpnt-expiry { margin-top: .65rem; }
.sc-cpnt-exp-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: #9aa3ad; }
.sc-cpnt-countdown { display: block; font-size: 1.05rem; font-weight: 800; color: #e11d48; letter-spacing: .5px; margin: .1rem 0; }
.sc-cpnt-exp-date { display: block; font-size: .78rem; color: #9aa3ad; }
/* item page license box: bigger price (scoped — item-price elsewhere unaffected) */
.add-to-cart-form .form-check-lg .item-price .item-price-number { font-size: 25px; font-weight: 800; line-height: 1.2; }
.add-to-cart-form .form-check-lg .item-price .item-price-through { font-size: 15px; }

/* hero teaser: ticket-style card, opens the all-coupons modal */
.sc-cpn-tkt {
  display: block; width: 100%; max-width: 290px; margin: 0 auto;
  padding: 0; border: 0; text-align: start; cursor: pointer;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
  transition: box-shadow .15s ease, transform .15s ease;
}
.sc-cpn-tkt:hover { box-shadow: 0 12px 30px rgba(16, 24, 40, .18); transform: translateY(-1px); }
.sc-cpn-tkt-top {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: color-mix(in srgb, var(--store-accent, #0e5a3c) 78%, #7ac292);
  padding: 22px 18px 16px;
}
/* scalloped punch-holes along the top edge */
.sc-cpn-tkt-top::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px;
  background-image: radial-gradient(circle at 14px 0, #fff 7px, transparent 7.5px);
  background-size: 42px 9px; background-repeat: repeat-x; background-position: 7px 0;
}
.sc-cpn-tkt-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0, 0, 0, .28); color: #ffd9a8; font-size: 15px;
}
.sc-cpn-tkt-head { display: flex; flex-direction: column; min-width: 0; }
.sc-cpn-tkt-head em { font-style: normal; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.sc-cpn-tkt-head strong {
  font-size: 19px; font-weight: 800; letter-spacing: 1px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-cpn-tkt-body { display: block; padding: 13px 18px 11px; }
.sc-cpn-tkt-body strong { display: block; font-size: 14px; font-weight: 700; color: var(--heading_color); margin-bottom: 2px; }
.sc-cpn-tkt-body > span { display: block; font-size: 12.5px; color: var(--text_muted); line-height: 1.5; }
.sc-cpn-tkt-action {
  display: block; text-align: center; padding: 10px 18px;
  border-top: 1px solid var(--border_color, #e4e7ec);
  font-size: 13px; font-weight: 700; color: var(--store-accent, #0e5a3c);
}

/* coupon scope: which items it applies to */
.sc-cpnt-scope { margin-top: .5rem; font-size: .8rem; line-height: 1.5; }
.sc-cpnt-scope-all {
  display: inline-block; font-weight: 700; color: #17714a;
  background: #e9f3ee; border-radius: 999px; padding: 2px 12px; font-size: .74rem;
}
.sc-cpnt-scope-label { color: var(--text_muted); font-size: .74rem; }
.sc-cpnt-scope-item {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom; font-weight: 600; font-size: .8rem;
  color: var(--store-accent, #0e5a3c); text-decoration: underline; text-underline-offset: 2px;
}

/* compact variant for the hero side column (2 per row) */
.sc-cpnt-sm { margin-bottom: .2rem; }
.sc-cpnt-sm .sc-cpnt-off { font-size: 9px; padding: 1px 7px; margin-bottom: .2rem; }
.sc-cpnt-sm .sc-cpnt-code { font-size: .7rem; letter-spacing: .4px; padding: .32rem .35rem .25rem; }
.sc-cpnt-sm .sc-cpnt-copy { padding: .28rem .35rem; font-size: .56rem; letter-spacing: .2px; gap: .25rem; }
.sc-cpnt-sm .sc-cpnt-card { border-radius: 9px; box-shadow: 0 3px 10px rgba(0, 0, 0, .09); }
.sc-cpnt-sm .sc-cpnt-expiry { margin-top: .25rem; }
.sc-cpnt-sm .sc-cpnt-countdown { font-size: .68rem; margin: 0; }
.sc-cpnt-modal { border: 0; border-radius: 18px; }
.sc-store-review { background: #fff; border: 1px solid var(--border_color); border-radius: 16px; padding: 22px; height: 100%; }
.sc-store-review-stars { color: #f59e0b; font-size: 13px; margin-bottom: 10px; }
.sc-store-review-body { color: #334155; font-size: 14px; line-height: 1.7; font-style: italic; }
.sc-store-review-user { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.sc-store-review-user img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.sc-store-review-user strong { display: block; font-size: 13.5px; color: #0f172a; }
.sc-store-review-user span { font-size: 12px; color: var(--text_muted); }
.sc-store-search { flex: 1 1 auto; max-width: 420px; }

/* storefront: powered-by beside Follow + compact hero coupons */
.sc-store-nav-powered {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--border_color);
}
.sc-store-nav-powered span { font-size: 11px; color: var(--text_muted); white-space: nowrap; }
.sc-store-nav-powered img { height: 22px; width: auto; opacity: .85; transition: .15s; }
.sc-store-nav-powered:hover img { opacity: 1; }
.sc-store-coupon-sm { padding: 12px; }
.sc-store-coupon-sm .sc-store-coupon-off { font-size: 20px; }

/* storefront: centered powered-by above the footer */
.sc-store-powered-center { display: inline-flex; align-items: center; gap: 8px; }
.sc-store-powered-center span { font-size: 12.5px; color: var(--text_muted); }
.sc-store-powered-center img { height: 26px; width: auto; opacity: .85; transition: .15s; }
.sc-store-powered-center:hover img { opacity: 1; }

/* pagination: always centered */
.pagination { justify-content: center; }


/* profile announcements label */
.sc-prof-announce-label {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--primary_color, #0e5a3c);
    background: rgba(14, 90, 60, .08);
    border-radius: 999px; padding: 5px 14px; margin-bottom: 14px;
}

/* profile sidebar: featured items list */
.sc-side-item {
    display: flex; gap: 12px; align-items: center;
    padding: 8px; margin: 0 -8px; border-radius: 12px;
    color: var(--text_color); transition: background .15s;
}
.sc-side-item:hover { background: rgba(0, 0, 0, .04); color: var(--primary_color); }
.sc-side-item img { width: 64px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.sc-side-item-body { min-width: 0; }
.sc-side-item-name { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.sc-side-item-meta { font-size: 12px; color: var(--text_muted); }


/* ---------- Item page header strip: full-bleed, đồng bộ light hero ---------- */
.section.forced-start { padding-top: 0 !important; overflow-x: clip; }
.section.forced-start .section-header {
    margin: 0 calc(50% - 50vw) 30px;
    padding: 34px max(calc(50vw - 50%), 16px) 32px;
    background: radial-gradient(circle at 15% 37%, rgba(14, 90, 60, .13), transparent 26%), radial-gradient(circle at 84% 130%, rgba(14, 90, 60, .10), transparent 30%), repeating-radial-gradient(circle at 24% 46%, rgba(14, 90, 60, .05) 0 1px, transparent 1px 30px), linear-gradient(135deg, #faf8f3 0%, #fff7e6 100%);
    border-bottom: 1px solid var(--border_color);
}

/* ---------- Profile: default promo banner (no announcements) ---------- */
.sc-prof-promo {
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    border-radius: 20px; padding: 44px 44px;
    background:
        radial-gradient(700px 300px at 90% -40%, rgba(34, 211, 238, .18), transparent 60%),
        repeating-linear-gradient(0deg, rgba(56, 189, 248, .05) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(56, 189, 248, .05) 0 1px, transparent 1px 44px),
        linear-gradient(135deg, #081526 0%, #0b2540 60%, #0a3350 100%);
    overflow: hidden;
}
.sc-prof-promo-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .18em;
    text-transform: uppercase; color: #7dd3fc;
    border: 1px solid rgba(125, 211, 252, .4); border-radius: 999px; padding: 6px 16px;
}
.sc-prof-promo-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #22d3ee; }
.sc-prof-promo-title { font-size: clamp(38px, 5vw, 56px); font-weight: 800; letter-spacing: -.03em; color: #e2e8f0; margin: 18px 0 10px; }
.sc-prof-promo-title span { color: #38bdf8; }
.sc-prof-promo-text { color: #93b4cd; font-size: 17px; max-width: 380px; margin-bottom: 24px; }
.sc-prof-promo-btn {
    display: inline-flex; align-items: center;
    background: linear-gradient(135deg, #38bdf8, #22d3ee);
    color: #06263c; font-weight: 800; font-size: 15.5px;
    border-radius: 12px; padding: 12px 24px; transition: .15s;
}
.sc-prof-promo-btn:hover { transform: translateY(-2px); color: #041a29; box-shadow: 0 10px 24px rgba(34, 211, 238, .35); }
.sc-prof-promo-code {
    flex: 0 0 340px; background: rgba(8, 25, 43, .85);
    border: 1px solid rgba(125, 211, 252, .25); border-radius: 14px; overflow: hidden;
    box-shadow: 0 18px 40px rgba(2, 12, 22, .5);
}
.sc-prof-promo-code-bar {
    display: flex; align-items: center; gap: 6px;
    background: rgba(15, 38, 60, .9); padding: 10px 14px;
    border-bottom: 1px solid rgba(125, 211, 252, .2);
}
.sc-prof-promo-code-bar .d { width: 11px; height: 11px; border-radius: 50%; }
.sc-prof-promo-code-bar .r { background: #f87171; } .sc-prof-promo-code-bar .y { background: #fbbf24; } .sc-prof-promo-code-bar .g { background: #34d399; }
.sc-prof-promo-code-bar em { margin-left: auto; font-style: normal; font-family: SFMono-Regular, Menlo, monospace; font-size: 12px; color: #7dd3fc; }
.sc-prof-promo-code pre {
    margin: 0; padding: 18px 20px; font-family: SFMono-Regular, Menlo, monospace;
    font-size: 14.5px; line-height: 1.8; color: #e2e8f0; background: transparent;
}
.sc-prof-promo-code .k { color: #7dd3fc; } .sc-prof-promo-code .f { color: #fbbf24; }
.sc-prof-promo-code .s { color: #86efac; } .sc-prof-promo-code .o { color: #f472b6; }
.sc-prof-promo-code .c { color: #64748b; }
@media (max-width: 767.98px) {
    .sc-prof-promo { padding: 28px 22px; }
}