/* ==========================================================================
   Art of Kash — design system
   Brand: warm Kashmiri cream ground, maroon accent.
   Tokens first, then component layers. Prefer editing a token over a one-off.
   ========================================================================== */

:root{
  /* --- Brand ------------------------------------------------------------ */
  /* Sampled directly from the Art of Kash logo (assets/images/logo.jpg):
     maroon #6C1A1E on cream #FDE3BE. Keep these two anchored to the mark. */
  --accent:#6b1a1e;          /* primary brand maroon */
  --accent-2:#9c3138;        /* lighter maroon, gradient partner */
  --accent-dark:#4a1114;     /* deep maroon: headings, text on light */
  --accent-soft:#f7e3dd;     /* selected / active fill (light, not heavy) */
  --accent-softer:#fdf2ee;   /* hover fill */
  --accent-ring:rgba(107,26,30,.16);

  /* --- Surfaces --------------------------------------------------------- */
  --bg:#fdf6ea;
  --cream:#fde3be;           /* exact brand cream */
  --cream-deep:#f9d5a4;
  --card:#ffffff;
  --border:#ecd9bd;
  --border-strong:#dcc199;

  /* --- Text scale (all AA-compliant on cream and white) ----------------- */
  --text:#2a1d17;            /* primary */
  --text-2:#57453a;          /* secondary */
  --text-3:#6d5a4c;          /* muted — still readable, never ghost-grey */
  --muted:var(--text-3);     /* legacy alias */

  /* --- Feedback --------------------------------------------------------- */
  --success:#1c7a4b;  --success-soft:#e9f5ef;
  --danger:#b3261e;   --danger-soft:#fdecea;
  --warning:#8a5b0f;  --warning-soft:#fdf3e2;
  --info:#1c5c86;     --info-soft:#eaf3f9;

  /* --- Shape & depth ---------------------------------------------------- */
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --shadow-xs:0 1px 2px rgba(42,29,23,.06);
  --shadow:0 4px 14px rgba(107,26,30,.07);
  --shadow-lg:0 12px 28px rgba(107,26,30,.12);

  --maxw:1200px;
  --font-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Bootstrap bridge — keeps BS components on-brand without per-component overrides. */
  --bs-primary:#6b1a1e;
  --bs-link-color:#6b1a1e;
  --bs-link-hover-color:#4a1114;
  --bs-border-color:#e8dcc8;
  --bs-body-color:#2a1d17;
  --bs-secondary-color:#6d5a4c;
}

*{box-sizing:border-box}

body{
  font-family:var(--font-body);
  margin:0;
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  background:linear-gradient(180deg,var(--cream) 0,#fffdf9 340px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{color:var(--text);font-weight:700;line-height:1.25;letter-spacing:-.011em}
h1{font-size:2.25rem}
h2{font-size:1.75rem}
h3{font-size:1.375rem}
h4{font-size:1.175rem}
h5{font-size:1.05rem}
h6{font-size:.95rem}
p{margin-top:0}
.lead{font-size:1.075rem;line-height:1.7;color:var(--text-2)}

/* Bootstrap's .text-muted is a cool grey that dissolves into the cream ground. */
.text-muted{color:var(--text-3) !important}
small,.small{font-size:.86rem}

a{color:var(--accent);text-decoration-color:rgba(107,26,30,.3);text-underline-offset:2px}
a:hover{color:var(--accent-dark)}

::selection{background:var(--cream-deep);color:var(--accent-dark)}

/* --------------------------------------------------------------------------
   Buttons — compact and consistent. Bootstrap 5.3 reads these CSS vars.
   -------------------------------------------------------------------------- */
.btn{
  --bs-btn-padding-y:.5rem;
  --bs-btn-padding-x:1.05rem;
  --bs-btn-font-size:.925rem;
  --bs-btn-font-weight:600;
  --bs-btn-border-radius:var(--radius-sm);
  letter-spacing:.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.btn-sm{--bs-btn-padding-y:.34rem;--bs-btn-padding-x:.78rem;--bs-btn-font-size:.82rem}
.btn-lg{--bs-btn-padding-y:.62rem;--bs-btn-padding-x:1.35rem;--bs-btn-font-size:1rem}

/* Primary. Also used bare (class="btn-accent") in places, so it carries its own box model. */
.btn-accent,.btn.btn-accent{
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  border-radius:var(--radius-sm);
  padding:.5rem 1.05rem;
  font-size:.925rem;
  font-weight:600;
  line-height:1.5;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  text-decoration:none;
  cursor:pointer;
  box-shadow:var(--shadow-xs);
  transition:background-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.btn-accent:hover,.btn.btn-accent:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;box-shadow:var(--shadow);transform:translateY(-1px)}
.btn-accent:active,.btn.btn-accent:active{transform:translateY(0)}
.btn-accent:disabled,.btn.btn-accent:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-accent.btn-sm,.btn.btn-accent.btn-sm{padding:.34rem .78rem;font-size:.82rem}

/* Secondary. btn-outline-dark is the app's de-facto secondary (55+ uses) and
   Bootstrap renders it near-black — brand it instead of replacing every call site. */
.btn-outline-dark{
  --bs-btn-color:var(--accent);
  --bs-btn-border-color:var(--border-strong);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--accent);
  --bs-btn-hover-border-color:var(--accent);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--accent-dark);
  --bs-btn-active-border-color:var(--accent-dark);
  --bs-btn-disabled-color:var(--text-3);
  --bs-btn-disabled-border-color:var(--border);
  background:#fff;
}
.btn-outline-secondary{
  --bs-btn-color:var(--text-2);
  --bs-btn-border-color:var(--border-strong);
  --bs-btn-hover-color:var(--text);
  --bs-btn-hover-bg:var(--cream);
  --bs-btn-hover-border-color:var(--border-strong);
}
.btn-outline-danger{
  --bs-btn-color:var(--danger);
  --bs-btn-border-color:#e6bdb9;
  --bs-btn-hover-bg:var(--danger);
  --bs-btn-hover-border-color:var(--danger);
}
.btn-dark{--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:var(--accent-dark);--bs-btn-hover-border-color:var(--accent-dark)}
.btn-primary{--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:var(--accent-dark);--bs-btn-hover-border-color:var(--accent-dark);--bs-btn-active-bg:var(--accent-dark)}
.btn-link{--bs-btn-color:var(--accent);--bs-btn-hover-color:var(--accent-dark);font-weight:600}

/* One focus treatment everywhere, replacing Bootstrap's blue glow. */
.btn:focus-visible,.form-control:focus,.form-select:focus,.form-check-input:focus,
.btn-accent:focus-visible,a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--accent-ring);
  border-color:var(--accent);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-label{font-size:.85rem;font-weight:600;color:var(--text-2);margin-bottom:.3rem}
.form-control,.form-select{
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  padding:.5rem .75rem;
  font-size:.925rem;
  color:var(--text);
  background-color:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.form-control::placeholder{color:#9b8878;opacity:1}
.form-control-sm,.form-select-sm{padding:.34rem .6rem;font-size:.85rem}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.form-check-label{color:var(--text-2);font-size:.9rem}
.input-group-text{background:var(--cream);border-color:var(--border-strong);color:var(--text-2);font-size:.875rem}
.validation-message,.invalid-feedback{color:var(--danger);font-size:.82rem}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card-body{padding:1.1rem}
.card-title{font-size:1.05rem;font-weight:700}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.badge{font-weight:600;letter-spacing:.02em;border-radius:6px;padding:.34em .6em}
.badge-sale{
  background:var(--accent);color:#fff;
  padding:.28rem .55rem;border-radius:6px;
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  display:inline-block;
}
.bg-success{background:var(--success) !important}
.bg-danger{background:var(--danger) !important}
.bg-warning{background:var(--warning) !important;color:#fff !important}
.bg-info{background:var(--info) !important;color:#fff !important}
.bg-primary{background:var(--accent) !important}
.bg-secondary{background:#8a7566 !important}
.bg-light{background:var(--cream) !important;color:var(--text) !important}
.badge.bg-light{border:1px solid var(--border-strong)}

/* Alerts */
.alert{border-radius:var(--radius);border-width:1px;font-size:.925rem}
.alert-success{background:var(--success-soft);border-color:#bfe0ce;color:var(--success)}
.alert-danger{background:var(--danger-soft);border-color:#eec7c3;color:var(--danger)}
.alert-warning{background:var(--warning-soft);border-color:#ead9b6;color:var(--warning)}
.alert-info{background:var(--info-soft);border-color:#c5dcea;color:var(--info)}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.navbar{
  background:rgba(255,253,249,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1000;
  box-shadow:0 1px 0 rgba(107,26,30,.03);
  padding-top:.6rem;padding-bottom:.6rem;
}
.navbar-brand{display:flex;align-items:center;gap:.55rem;font-weight:800;color:var(--accent);font-size:1.25rem}
.brand-logo{height:40px;width:40px;object-fit:contain;border-radius:50%}
.navbar-brand .brand-name{font-weight:800;color:var(--accent);font-size:1.15rem;line-height:1.05;letter-spacing:-.01em}
.navbar-nav{align-items:center;gap:.05rem}

.nav-link{color:var(--text-2);font-weight:500;position:relative}
.navbar-nav .nav-link{padding-left:.65rem;padding-right:.65rem;font-size:.92rem;border-radius:var(--radius-sm)}
.nav-link:hover{color:var(--accent)}
.navbar-nav .nav-link.active{color:var(--accent);font-weight:600}
/* Centre-out underline: marks the current page without shifting layout.
   Dropdown toggles are excluded so Bootstrap's caret (also ::after) survives. */
.navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle)::after{
  content:"";position:absolute;left:50%;right:50%;bottom:.1rem;height:2px;
  background:var(--accent);border-radius:2px;transition:left .18s ease,right .18s ease;
}
.navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle):hover::after,
.navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle).active::after{left:.65rem;right:.65rem}

/* Icon-only utility controls (wishlist, cart, account). */
.nav-icon{display:inline-flex;align-items:center;justify-content:center;position:relative;width:40px;height:36px;padding:0 !important}
.nav-icon svg{width:21px;height:21px}
.navbar-nav > .nav-item > .nav-icon::after{content:none !important}
.nav-icon:hover{background:var(--accent-softer);color:var(--accent)}
.nav-icon.active{background:var(--accent-soft);color:var(--accent-dark)}
/* Cart count sits on the basket rather than pushing the row wider.
   border-box keeps the padding and ring inside the 16px badge instead of
   inflating it well past the size of the icon it sits on. */
.nav-count{
  position:absolute;top:2px;right:3px;
  box-sizing:border-box;
  min-width:16px;height:16px;padding:0 3px;
  background:var(--accent);color:#fff;
  border-radius:999px;
  font-size:.625rem;font-weight:700;line-height:14px;
  text-align:center;border:1px solid #fffdf9;
}
[dir="rtl"] .nav-count{right:auto;left:3px}
.nav-search{width:190px}
.nav-search .form-control{border-radius:999px;padding-left:.9rem}
@media (min-width:1200px){.nav-search{width:220px}}

/* --------------------------------------------------------------------------
   Dropdowns
   -------------------------------------------------------------------------- */
.dropdown-menu{
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:6px;
  font-size:.92rem;
}
.dropdown-item{border-radius:var(--radius-sm);padding:.45rem .7rem;color:var(--text-2)}
.dropdown-item:hover{background:var(--accent-softer);color:var(--accent)}
/* Selected state: a soft brand tint, not a heavy dark block. */
.dropdown-item.active,.dropdown-item:active{
  background:var(--accent-soft) !important;
  color:var(--accent-dark) !important;
  font-weight:600;
}
.dropdown-divider{border-color:var(--border)}
.dropdown-item-text{color:var(--text-3)}

/* Category flyout: a parent with children opens them to its right rather than
   as a flat indented list. */
.category-menu{min-width:250px}
.dropdown-submenu{position:relative}
.dropdown-submenu > .dropdown-item.has-children{display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:600}
.dropdown-submenu > .dropdown-item.has-children::after{
  content:"\203A";font-size:1.15rem;line-height:1;color:var(--text-3);
  transition:transform .12s ease,color .12s ease;
}
.dropdown-submenu:hover > .dropdown-item.has-children{background:var(--accent-softer);color:var(--accent)}
.dropdown-submenu:hover > .dropdown-item.has-children::after{color:var(--accent);transform:translateX(3px)}
/* Flush against the parent so the pointer never crosses a dead gap. */
.dropdown-submenu > .submenu{display:none;position:absolute;top:-7px;left:100%;min-width:240px;margin:0}
.dropdown-submenu:hover > .submenu{display:block}

/* Touch devices have no hover: show children inline, indented. */
@media (max-width:991.98px){
  .dropdown-submenu > .submenu{display:block;position:static;border:0;box-shadow:none;padding:0 0 0 12px;min-width:0}
  .dropdown-submenu > .dropdown-item.has-children::after{content:""}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  padding:72px 0;
  background:radial-gradient(1100px 420px at 85% -10%,rgba(107,26,30,.09),transparent),
             linear-gradient(180deg,var(--cream),transparent);
  border-bottom:1px solid var(--border);
  text-align:left;
}
.hero h1{font-size:2.6rem;margin-bottom:.6rem;color:var(--text)}
.hero .lead{max-width:46ch}

/* --------------------------------------------------------------------------
   Product grid & cards
   -------------------------------------------------------------------------- */
.product-grid .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
/* Uniform portrait framing reads as a lookbook rather than a ragged grid. */
.product-image{aspect-ratio:4/5;height:auto;width:100%;object-fit:cover;display:block;background:var(--cream);transition:transform .5s ease}
.product-grid .card > .position-relative,.product-grid .card > a{overflow:hidden;display:block}
.product-grid .card:hover .product-image{transform:scale(1.04)}
.product-grid .card-body{padding:.95rem 1rem 1.05rem}
.product-grid .card-body h5,.product-grid .card-body h6{font-size:.98rem;font-weight:600;line-height:1.35;margin:.15rem 0 .3rem}
.product-grid .card-body h5 a,.product-grid .card-body h6 a{color:var(--text);text-decoration:none}
.product-grid .card-body h5 a:hover,.product-grid .card-body h6 a:hover{color:var(--accent)}
.product-meta{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.product-price{color:var(--accent-dark);font-size:1.02rem;font-weight:700}
.product-price-was{color:var(--text-3);font-size:.86rem;text-decoration:line-through;margin-left:.35rem}
.product-actions{display:flex;gap:.5rem;margin-top:auto}
.product-actions .btn{flex:1}

/* Product detail buy row — capped so the CTAs stay a sensible size on wide screens.
   All three controls share one height so the row reads as a single unit. */
.buy-actions{max-width:520px;align-items:stretch}
.buy-actions .wishlist-btn{flex-shrink:0;height:auto;min-height:40px;padding:.5rem .95rem}
@media (max-width:575.98px){
  .buy-actions{flex-wrap:wrap}
  .buy-actions .btn,.buy-actions .wishlist-btn{flex:1 1 100%;width:100%}
}

/* List (row) view — same tokens, horizontal layout. */
.list-thumb{width:100%;height:120px;object-fit:cover;display:block;background:var(--cream);border-radius:var(--radius) 0 0 var(--radius)}
.card h5 a,.card h6 a{color:var(--text);text-decoration:none}
.card h5 a:hover,.card h6 a:hover{color:var(--accent)}
@media (max-width:767.98px){
  .list-thumb{height:180px;border-radius:var(--radius) var(--radius) 0 0}
}

/* --------------------------------------------------------------------------
   Wishlist
   -------------------------------------------------------------------------- */
.sale-overlay{position:absolute;top:10px;left:10px;z-index:2;box-shadow:var(--shadow-xs)}
[dir="rtl"] .sale-overlay{left:auto;right:10px}
.wishlist-overlay{position:absolute;top:10px;right:10px;z-index:2}
[dir="rtl"] .wishlist-overlay{right:auto;left:10px}
.wishlist-btn{
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:999px;
  width:36px;height:36px;padding:0;line-height:1;
  color:var(--accent);font-size:1.05rem;
  box-shadow:0 2px 8px rgba(42,29,23,.14);
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .15s ease,background-color .15s ease,border-color .15s ease,transform .15s ease;
}
.wishlist-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.07)}
.wishlist-btn:active{transform:scale(.96)}
.wishlist-btn-on{background:var(--accent);border-color:var(--accent);color:#fff}
.wishlist-btn-on:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.wishlist-btn:disabled{opacity:.6;cursor:not-allowed}
/* With a label it becomes a pill instead of a circle. */
.wishlist-btn:has(span + span){width:auto;height:auto;padding:.42rem .85rem;border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;gap:.35rem}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table{--bs-table-color:var(--text);font-size:.92rem}
.table thead th{
  background:var(--cream);color:var(--accent-dark);
  font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
  border-bottom:1px solid var(--border-strong);padding:.7rem .75rem;
}
.table tbody td,.table tbody th{padding:.7rem .75rem;vertical-align:middle;border-color:var(--border)}
.table tbody tr:hover{background:#fffaf2}

/* --------------------------------------------------------------------------
   States: empty, loading, focus
   -------------------------------------------------------------------------- */
/* Order-tracking stepper */
.order-steps .step-dot{
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:700;
  border:2px solid var(--border-strong);color:var(--text-3);background:#fff;
}
.order-steps .step-dot.step-done{background:var(--accent);border-color:var(--accent);color:#fff}

.spinner-border{color:var(--accent) !important;width:1.75rem;height:1.75rem;border-width:.2em}
/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{background:linear-gradient(180deg,#fff,var(--cream));border-top:1px solid var(--border);color:var(--text-2)}
.site-footer h4{font-size:1.3rem;font-weight:800;color:var(--text)}
.site-footer h5{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:.75rem}
/* Long unbroken strings (email addresses) must wrap rather than push the column wide. */
.site-footer p{color:var(--text-2);line-height:1.65;font-size:.9rem;overflow-wrap:anywhere}
.site-footer ul{list-style:none;padding-left:0;margin:0}
.site-footer ul li{margin-bottom:.42rem}
.site-footer ul li a{color:var(--text-2);text-decoration:none;font-size:.85rem;letter-spacing:.03em;transition:color .12s ease}
.site-footer ul li a:hover{color:var(--accent)}
.site-footer a{color:var(--text-2)}
.site-footer a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--border);margin-top:1.75rem;padding-top:1.1rem;font-size:.82rem;color:var(--text-3)}
.footer-bottom a{color:var(--accent);font-weight:600}

/* Social icons: circular chips, brand-coloured, visible against the cream. */
.social{display:flex;gap:.5rem;margin-top:.85rem}
.social a{
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--border-strong);color:var(--accent);
  text-decoration:none;box-shadow:var(--shadow-xs);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.social a svg{width:18px;height:18px;display:block}

/* Shipping / payment strip — needs to read as trust signals, not fine print. */
.trust-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem}
.trust-label{font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.trust-chip{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:.35rem .6rem;box-shadow:var(--shadow-xs);min-height:34px;
}
/* The supplied logo art is pale, so lift contrast rather than ship a washed-out mark. */
.trust-chip img{height:20px;width:auto;display:block;filter:saturate(1.15) contrast(1.25)}

.account-sidebar .nav-item + .nav-item{margin-top:.15rem}
.card.p-3 h5{color:var(--accent-dark);font-weight:700;letter-spacing:-.01em;margin-bottom:.5rem}
.card.p-3 .nav-link{
  display:flex;align-items:center;gap:.6rem;
  color:var(--text-2);padding:.48rem .6rem;border-radius:var(--radius-sm);
  font-weight:500;font-size:.9rem;
  border-left:3px solid transparent;
  transition:background-color .12s ease,color .12s ease,border-color .12s ease;
}
.card.p-3 .nav-link:hover{background:var(--accent-softer);color:var(--accent)}
/* Selected nav: soft tint + accent rule, replacing the heavy solid-maroon block. */
.card.p-3 .nav-link.active{
  background:var(--accent-soft);
  color:var(--accent-dark) !important;
  border-left-color:var(--accent);
  font-weight:600;
  box-shadow:none;
}
.card.p-3 .nav-link .sidebar-icon{flex-shrink:0;opacity:.9}
.account-sidebar .nav-link-danger{color:var(--danger)}
.account-sidebar .nav-link-danger:hover{background:var(--danger-soft);color:var(--danger)}
.account-sidebar .nav-link-danger.active{background:var(--danger-soft);color:var(--danger) !important;border-left-color:var(--danger)}

/* --------------------------------------------------------------------------
   Right-to-left (Urdu, Kashmiri)
   -------------------------------------------------------------------------- */
[dir="rtl"] .dropdown-submenu > .submenu{left:auto;right:100%}
[dir="rtl"] .dropdown-submenu > .dropdown-item.has-children::after{content:"\2039"}
[dir="rtl"] .dropdown-submenu:hover > .dropdown-item.has-children::after{transform:translateX(-3px)}
[dir="rtl"] .card.p-3 .nav-link{border-left:0;border-right:3px solid transparent}
[dir="rtl"] .card.p-3 .nav-link.active{border-right-color:var(--accent)}
@media (max-width:991.98px){
  [dir="rtl"] .dropdown-submenu > .submenu{padding:0 12px 0 0}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:991.98px){
  .navbar-nav{align-items:stretch;gap:0;padding-top:.5rem}
  .navbar-nav .nav-link{padding-left:.25rem;padding-right:.25rem}
  .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle)::after{content:none}
  .hero{padding:52px 0}
  .hero h1{font-size:2rem}
}

@media (max-width:767.98px){
  body{font-size:15.5px}
  h1{font-size:1.75rem}
  h2{font-size:1.4rem}
  h3{font-size:1.2rem}
  .hero{padding:40px 0}
  .hero h1{font-size:1.65rem}
  .product-grid .card-body{padding:.8rem .85rem .9rem}
  .product-actions{flex-direction:column}
  .product-actions .btn{width:100%}
  .site-footer{text-align:left}
  .site-footer .col-md-3 + .col-md-3{margin-top:1.75rem}
  .footer-bottom{text-align:left}
  .footer-bottom .text-end{text-align:left !important;margin-top:.6rem}
  .trust-strip{gap:.5rem}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .product-grid .card:hover .product-image{transform:none}
}