/* ==========================================================================
   Kids Land — shared stylesheet
   ========================================================================== */

:root {
  --primary_color: #fcc603;
  --secondary_color: #fcc603;
  --bg_soft: #e8e6e6;
  --black: #000;
  --text_color: #69778a;
  --white_color: #ffffff;
  --pink: var(--primary_color);
  --pink-dark: #001430;
  --pink-alt: #001430;
  --orange: var(--primary_color);
  --orange-bright: var(--primary_color);
  --bg: var(--white_color);
  --bg-soft: var(--bg_soft);
  --text: #001430;
  --muted: var(--text_color);
  --border: var(--bg_soft);
  --radius-lg: 24px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  /* --font is NOT defined here any more - it lives on :root in chrome.css.
     One definition, and in the file every page loads: this one is not loaded by
     the homepage, which is exactly how the homepage ended up with no font at
     all while every other page had one. */
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}


body {
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
  line-height: 28px;
  overflow-x: hidden;
  background: #fff8f6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:link,
a:visited {
  color: #7b8393;
  /* font-size: 16px; */
}
label {
  marign-bottom: 0 !important;
}
.container {
  width: 100%;
  max-width: 1500px;
  margin: auto;
  padding-left: 40px;
  padding-right: 40px;
}
/* `.custom-sticky-top` is defined in assets/css/chrome.css, which owns the
   header. The copy that used to sit here was not fully overridden — its
   backdrop-filter leaked through and put the header on its own compositing
   layer behind an already-opaque background. */

.text-pink {
  color: var(--pink);
}

.text-orange {
  color: var(--orange);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* body is declared once, near the top of this file. */

.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* Login & signup */
.main-wrapper {
  /* padding:16px; */
  max-width: 1200px;
  /* min-height: 850px; */
  /* height:800px; */
  margin: 2rem 0;

  background: #fff;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}
.main-wrapper .input-group label {
  font-size: 14px;
}
.main-wrapper p {
  font-size: 16px !important;
}
/* LEFT SIDE */

.left-side {
  width: 42%;
  background: rgba(171, 45, 114, 0.10);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.left-side::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#ab2d7226 1px, transparent 1px);
  background-size: 24px 24px;
}

.blur {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}

.blur-1 {
  width: 250px;
  height: 250px;
  background: #ffc107;
  top: -100px;
  left: -100px;
  opacity: 0.3;
}

.blur-2 {
  width: 280px;
  height: 280px;
  background: #e83e8c;
  bottom: -100px;
  right: -100px;
  opacity: 0.25;
}

.main-wrapper .left-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 320px;
}
.main-wrapper .left-side h1 span {
  color: #e83e8c;
}
.client-img img {
  width: 240px;
  animation: bounce 4s infinite ease-in-out;
}
.client-img {
  display: flex;
  justify-content: center;
}

.main-wrapper .left-content h1 {
  font-size: 43px;
  /* color:#785900; */
  margin-top: 20px;
  line-height: 1.2;
}

.main-wrapper .left-content p {
  line-height: 28px;
  margin-top: 15px;
  color: #646d7c;
}

/* RIGHT SIDE */

.main-wrapper .right-side {
  width: 58%;
  padding: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-wrapper {
  width: 100%;
  max-width: 480px;
}

.form-wrapper .tab-btn {
  width: 50%;
  height: 52px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-size: 16px;
  outline: none;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
}
/* TABS */

.auth-tabs {
  display: flex;
  /* background:#fff1ed; */
  background: rgba(171, 45, 114, 0.10);
  padding: 6px;
  border-radius: 999px;
  margin-bottom: 30px;
  gap: 6px;
}
.form-wrapper .tab-btn.active {
  background: #ab2d72;
    color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.main-wrapper .heading {
  text-align: center;
  margin-bottom: 35px;
}

.main-wrapper .icon-box {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #ffe2da;
  background: rgba(171, 45, 114, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-bottom: 18px;
  font-size: 18px;
}

.main-wrapper .icon-box span {
  color: black;
}

.main-wrapper .heading h2 {
  font-size: 30px;
  /* color:#2c160e; */
  /* color: var(--pink); */
  color: #202020;
}

.main-wrapper .heading h2 span {
  /* color:#b80049; */
  color: var(--pink);
  color: #e83e8c;
}

.main-wrapper .heading p {
  color: #666;
  margin-top: 8px;
  font-size: 14px;
}

/* FORM */

form {
  display: flex;
  flex-direction: column;
  /* gap: 22px; */
}

/* `.input-group label` and `.input-box` are both defined below — the copies that
   were here declared nothing the later ones don't already set. */

/* The form's own plum, not the amber this used to be. `.input-box` only ever
   renders on auth.html, whose Login button, links and chrome are all #ab2d72 —
   an amber hover was the one warm colour on the card and read as a warning
   next to the green validated field.

   Hover is the same plum at 45% so it stays a step below the solid focus
   border auth.css paints; the two states have to be told apart. */
.input-box:hover {
  border-color: rgba(171, 45, 114, 0.45);
  box-shadow: 0 0 0 4px rgba(171, 45, 114, 0.12);
}

.input-box:hover .auth-input__left {
  color: #ab2d72;
}

.input-box .icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9a8390;
}

.input-box {
  position: relative;
  width: 100%;
  height: 46px;
  border: 1.5px solid #e8e9ef;
  border-radius: 13px;
  background: #fff;
  display: flex;
  padding: 0 38px;
  font-size: 14px;
  color: #303746;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  align-items: center;
  justify-content: space-between;
}
.input-box input {
  border: none;
  font-size: 14px;
  outline: none;
  width: calc(100% - 30px);
}

.password-row {
  display: grid;
  gap: 16px;
}

.form-wrapper .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-wrapper .auth-input__left,
.form-wrapper .auth-input__right {
  color: #9aa1ae;
}
/* var(--primary_color) is the storefront yellow. On this card the button, the
   links, the field focus ring and the chrome are all plum, so hovering the one
   remaining yellow element made it look like it belonged to another page.
   Same tint the fields use, so hover reads the same wherever you are. */
.form-wrapper .social-buttons button:hover,
.form-wrapper .social-buttons a.btn-social-link:hover {
  border-color: rgba(171, 45, 114, 0.45);
  box-shadow: 0 0 0 4px rgba(171, 45, 114, 0.12);
  transform: translateY(-1px);
}

/* Keyboard users got nothing at all here — the browser default outline is
   suppressed by the reset further up. */
.form-wrapper .social-buttons button:focus-visible,
.form-wrapper .social-buttons a.btn-social-link:focus-visible {
  outline: none;
  border-color: #ab2d72;
  box-shadow: 0 0 0 4px rgba(171, 45, 114, 0.18);
}
.form-wrapper .auth-input__right {
  cursor: pointer;
}
.form-wrapper .checkbox label {
  font-size: 13px;
  color: #666;
  line-height: 22px;
  margin-bottom: 0;
}

.form-wrapper .checkbox a {
  color: #e83e8c;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}

.form-wrapper .submit-btn {
  width: 100%;
  height: 60px;
  border: none;
  margin-top: 1rem;
  border-radius: 999px;
  background: #ab2d72;
    color: #fff;
  /* color:#785900; */
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: 0.3s;
  /* font-family: var(--font); */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.submit-btn:hover {
  transform: translateY(-2px);
}

.main-wrapper .login-options {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.main-wrapper .login-options label {
  display: flex;
  align-items: center;
  font-size: 13px;
  gap: 5px;
}
.main-wrapper .login-options label input,
#signupForm .checkbox input {
  width: 18px;
  height: 18px;
  border: 1.5px solid #e8e9ef;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.main-wrapper .login-options a {
  color: #e83e8c;
  text-decoration: none;
  font-weight: 700;
}

.hidden-form {
  display: none;
}

/* DIVIDER */

.main-wrapper .divider {
  position: relative;
  text-align: center;
  margin: 1rem 0;
}

.main-wrapper .divider::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #ece0e7;
  left: 0;
  top: 50%;
}

.main-wrapper .divider span {
  position: relative;
  background: #fff;
  padding: 0 16px;
  color: #9a8390;
  font-size: 14px;
}

/* SOCIAL */

.social-buttons {
  display: flex;
  flex-direction: column;
  /* grid-template-columns: 1fr 1fr; */
  /* gap: 16px; */
}

.social-buttons button,
.social-buttons a.btn-social-link {
  height: 46px;
  border: 1.5px solid #e8e9ef;
  border-radius: 13px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #2b2f36;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color 0.2s,
    transform 0.2s;
}

/* Google renders its own button into this slot and sizes it itself, so the
   slot only has to reserve the row and centre what lands in it. */
.google-btn-slot {
  display: flex;
  justify-content: center;
  min-height: 44px;
}

.social-buttons img {
  width: 20px;
}

.fa-facebook-f {
  color: #1877f2;
}

/* end create and login */

/* ==========================================================================
   Index / hub
   ========================================================================== */

body.page-index {
  background: linear-gradient(160deg, #fff5f9 0%, #fff8f0 50%, #f4f4f4 100%);
  min-height: 100vh;
  padding: 40px 24px 60px;
}

.page-index .hub {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.page-index .hub__logo {
  width: 200px;
  margin: 0 auto 24px;
}

.page-index .hub h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 12px;
}

.page-index .hub > p {
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 40px;
  font-size: 1.05rem;
}

.page-index .hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  text-align: left;
}

.page-index .hub__card {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  border: 1px solid var(--border);
  text-decoration: none;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  box-shadow: var(--shadow);
}

.page-index .hub__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(255, 47, 134, 0.12);
}

.page-index .hub__card h2 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--pink);
}

.page-index .hub__card p {
  color: var(--muted);
  font-size: 14px;
}

.page-index .hub__thumb {
  height: 120px;
  border-radius: 14px;
  object-fit: cover;
  width: 100%;
  margin-bottom: 16px;
  background: var(--bg_soft);
}

/* ==========================================================================
   Dashboard

   The customer dashboard runs on the storefront's plum rather than the yellow,
   so signing in doesn't feel like landing on a different site. The brand tokens
   are redefined on the body rather than page by page — every `.page-dashboard`
   rule below already reads them, so one block re-skins the whole screen.

   `--primary_color` and friends are only overridden here, inside the dashboard.
   The same tokens drive product accents and buttons across the storefront, and
   those are meant to stay yellow.
   ========================================================================== */

body.page-dashboard {
  --primary_color: #ab2d72;
  --secondary_color: #ab2d72;
  --pink: #ab2d72;
  --pink-dark: #8a2159;
  --pink-alt: #5e1039;

  /* Was #e8e6e6 — a flat grey behind white panels. A plum-tinted off-white
     keeps the panels reading as white without the dead-grey cast. */
  --bg_soft: #f7f2f5;

  background: var(--bg_soft);
  font-family: var(--font);
}

/* Each fill that used to be yellow is fixed where it is defined further down —
   an override up here loses the specificity tie to those later rules. */

.page-dashboard .dashboard {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  transition: grid-template-columns 0.3s ease;
  align-items: start;
}

.page-dashboard.sidebar-hidden .dashboard {
  grid-template-columns: 1fr;
}

.page-dashboard .sidebar {
  background: #fff;
  border-radius: 22px;
  padding: 18px 14px;
  min-height: calc(100vh - 32px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.page-dashboard .sidebar-inner {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 68px);
}

.page-dashboard.sidebar-hidden:not(.sidebar-open-mobile) .sidebar {
  display: none;
}

.page-dashboard.sidebar-open-mobile .sidebar {
  display: block;
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 200;
  width: min(280px, calc(100vw - 40px));
  height: calc(100vh - 40px);
}

body.page-dashboard > .sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 150;
  border: none;
  padding: 0;
  cursor: pointer;
}

body.page-dashboard.sidebar-open-mobile > .sidebar-backdrop {
  display: block;
}

.page-dashboard .brand-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f3f3f3;
}

.page-dashboard .brand-logo__img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  display: block;
}

.page-dashboard .brand-logo__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
  line-height: 1.15;
}

.page-dashboard .brand-logo__crazy {
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

.page-dashboard .brand-logo__kids {
  font-size: 15px;
  font-weight: 700;
  color: var(--pink);
}

.page-dashboard .menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding-top: 4px;
}

.page-dashboard .menu a {
  text-decoration: none;
  color: #555;
  padding: 11px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: 0.3s;
  font-weight: 500;
  font-size: 15px;
}

.page-dashboard .menu a:hover {
  background: rgba(171, 45, 114, 0.10);
  color: var(--pink-dark);
}

.page-dashboard .menu a.active {
  background: var(--primary_color);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.page-dashboard .menu a.has-badge {
  justify-content: space-between;
}

.page-dashboard .menu-label {
  display: flex;
  align-items: center;
  gap: 14px;
}

.page-dashboard .sidebar-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--pink);
  font-weight: 600;
  font-size: 13px;
  padding: 11px 14px;
  border-radius: 12px;
  margin-top: 8px;
  transition: 0.2s;
}

.page-dashboard .sidebar-logout:hover {
  background: rgba(171, 45, 114, 0.10);
}

.page-dashboard .sidebar-logout i {
  width: 20px;
}

.page-dashboard .menu-badge {
  background: var(--primary_color);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

/* Inside the filled active item the badge inverts to a white pill — a plum badge
   on a plum row would vanish. The count takes the plum so the pair reads as one
   control, matching `.order-filter.active span`. */
.page-dashboard .menu a.active .menu-badge {
  background: #fff;
  color: var(--primary_color);
}

.page-dashboard .menu i {
  width: 20px;
}

.page-dashboard .sidebar-mascot {
  margin-top: auto;
  padding-top: 12px;
  text-align: center;
}

.page-dashboard .sidebar-mascot img {
  width: 100%;
  max-height: 165px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
}

.page-dashboard .main-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.page-dashboard .topbar {
  background: #fff;
  border-radius: 18px;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.page-dashboard .topbar--compact {
  justify-content: flex-start;
}

.page-dashboard .topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.page-dashboard .sidebar-toggle {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 12px;
  background: rgba(171, 45, 114, 0.12);
  color: #ab2d72;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.page-dashboard .sidebar-toggle:hover {
  background: #f8dbe9;
}

.page-dashboard .dashboard-summary p {
  color: #7a8290;
  font-size: 13px;
  margin-bottom: 2px;
}

.page-dashboard .dashboard-summary h2 {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: #232a34;
}

.page-dashboard .search-box {
  flex: 1;
  display: flex;
  align-items: stretch;
  background: var(--white_color);
  border: 1px solid var(--bg_soft);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
}

.page-dashboard .search-box input {
  flex: 1;
  border: none;
  padding: 12px 14px;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-family: inherit;
}

.page-dashboard .search-btn {
  background: var(--primary_color);
  color: #fff;
  border: none;
  width: 52px;
  height: 46px;
  cursor: pointer;
  font-size: 14px;
}

.page-dashboard .top-icons {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

.page-dashboard .icon-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #555;
  font-size: 11px;
  text-decoration: none;
  min-width: 52px;
}

.page-dashboard .icon-box i {
  font-size: 18px;
  margin-bottom: 4px;
  display: block;
}

.page-dashboard .badge {
  position: absolute;
  top: -6px;
  right: -10px;
  background: var(--pink);
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-dashboard .profile {
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  padding: 0;
}

.page-dashboard .profile img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.page-dashboard .profile-text h4 {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
}

.page-dashboard .profile-text p {
  color: var(--muted);
  font-size: 11px;
}

.page-dashboard .profile-arrow {
  color: #999;
  font-size: 14px;
  margin-left: 4px;
}

.page-dashboard .content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  gap: 16px;
  align-items: start;
}

.page-dashboard .left-content,
.page-dashboard .right-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.page-dashboard .hero {
  background: linear-gradient(135deg, #fbe4ef 0%, #fdf1f7 55%, #fffaf6 100%);
  border: 1px solid #f6dceb;
  border-radius: 20px;
  padding: 26px 28px;
  color: #5e1039;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  min-height: 168px;
}

.page-dashboard .hero-text h1 {
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 700;
}

.page-dashboard .hero-text p {
  font-size: 14px;
  line-height: 1.55;
}

.page-dashboard .hero-illustration {
  width: 200px;
  max-width: 42%;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 12px;
}

.page-dashboard .stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.page-dashboard .stat-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  min-height: 128px;
}

.page-dashboard .stat-card small {
  font-size: 11px;
  color: var(--muted);
}

.page-dashboard .stat-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: auto;
}

.page-dashboard .stat-meta small {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 2px;
}

.page-dashboard .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}

.page-dashboard .stat-icon.pink {
  background: var(--primary_color);
}

.page-dashboard .stat-icon.orange {
  background: var(--primary_color);
}

.page-dashboard .stat-icon.purple {
  background: var(--primary_color);
}

.page-dashboard .stat-icon.yellow {
  background: var(--primary_color);
}

/* Cancelled is the one stat that shouldn't wear the brand yellow — it reads as
   a normal state next to the others otherwise. */
.page-dashboard .stat-icon.red {
  background: #fdecec;
  color: #c0392b;
}

/* --- order status filter chips ------------------------------------------- */

/* Same 24px gutter as .table-header and the table cells, so the chips line up
   with the section heading above them and the ORDER ID column below. */
.page-dashboard .order-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 24px;
}

.page-dashboard .order-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  border: 1.5px solid #ececf1;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #69778a;
  transition: 0.18s;
}

.page-dashboard .order-filter span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f1f3f7;
  font-size: 11.5px;
  font-weight: 800;
  /* body's 28px line-height inside a 20px bubble drops the digit below the
     circle's centre — a tight line box lets place-items actually centre it. */
  line-height: 1;
  color: #69778a;
}

.page-dashboard .order-filter:hover {
  border-color: var(--primary_color);
  color: #001430;
}

/* Chrome's default ring is a black box around the pill, which on the yellow
   active chip reads as a broken border. Gone for pointer clicks; keyboard users
   still get a ring, in the brand colour and following the pill's shape. */
.page-dashboard .order-filter:focus { outline: none; }

.page-dashboard .order-filter:focus-visible {
  outline: 3px solid var(--primary_color);
  outline-offset: 2px;
}

.page-dashboard .order-filter.active {
  background: var(--primary_color);
  border-color: var(--primary_color);
  color: #fff;
}

/* A translucent dark badge on the filled chip reads as a muddy blob — white
   keeps the count legible. */
.page-dashboard .order-filter.active span {
  background: #fff;
  color: var(--primary_color);
}

.page-dashboard .order-none td {
  padding: 26px 12px;
  text-align: center;
  color: #69778a;
  font-size: 14px;
}

.page-dashboard .stat-card h2 {
  font-size: 24px;
  font-weight: 700;
}

.page-dashboard .stat-link {
  color: var(--pink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin-top: 12px;
}

.page-dashboard .stat-link:hover {
  text-decoration: underline;
}

.page-dashboard .section {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
}

.page-dashboard .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.page-dashboard .section-header h2 {
  font-size: 15px;
  font-weight: 700;
}

.page-dashboard .section-header a {
  color: var(--primary_color);
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
}

.page-dashboard .categories-section {
  margin-bottom: 0;
}

.page-dashboard .categories {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.page-dashboard .category-card {
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.page-dashboard .category-thumb {
  position: relative;
  width: 100%;
  max-width: 96px;
  margin: 0 auto 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #fff 0%, var(--cc-tint, #fdeef6) 100%);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(42, 13, 30, 0.08);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.35s;
}

/* Accent ring on its own layer, so it can fade and scale without nudging the
   photo inside the disc. */
.page-dashboard .category-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--cc, #ab2d72);
  opacity: 0.22;
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.page-dashboard .category-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.page-dashboard .category-card h4 {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
}
.page-dashboard .category-card p,
.page-dashboard .category-card h4 {
  line-height: 1.5;
}
.page-dashboard .category-card p {
  color: var(--cc, #ab2d72);
  font-size: 13px;
  font-weight: 700;
}

.page-dashboard .category-card h4 { color: var(--text); transition: color 0.22s; }

.page-dashboard .category-card:hover .category-thumb {
  transform: translateY(-6px);
  box-shadow: 0 16px 28px rgba(42, 13, 30, 0.16);
}

.page-dashboard .category-card:hover .category-ring { opacity: 1; transform: scale(1.05); }
.page-dashboard .category-card:hover .category-thumb img { transform: scale(1.08); }
.page-dashboard .category-card:hover h4 { color: var(--cc, #ab2d72); }

/* The hero and the offer card are plum panels now, so the type on them inverts. */
/* Pale plum panels, so the type goes dark rather than white: deep plum for the
   headline, a muted plum-grey underneath. A solid plum panel here sat heavier
   than everything around it — the stat cards and lists beside it are white. */
.page-dashboard .hero h1,
.page-dashboard .offer h2 { color: #5e1039; }

.page-dashboard .hero p,
.page-dashboard .offer h3,
.page-dashboard .offer p { color: #8a6b7c; }

.page-dashboard .hero-illustration,
.page-dashboard .offer-deco {
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(94, 16, 57, 0.14);
}

.page-dashboard .orders,
.page-dashboard .address {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.page-dashboard .order-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f2f2f2;
}

.page-dashboard .order-item:first-of-type {
  margin-top: 4px;
}

.page-dashboard .order-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-dashboard .order-item img {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: contain;
  background: #f4f2f2;
  padding: 5px;
}

.page-dashboard .order-info {
  flex: 1;
}

.page-dashboard .order-info h4 {
  margin-bottom: 3px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}

.page-dashboard .order-id {
  color: #999;
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 4px;
}

.page-dashboard .status {
  font-size: 12px;
  font-weight: 600;
}

.page-dashboard .delivered {
  color: #001430;
  line-height: 1.5;
  color: #4fa269;
}

.page-dashboard .processing {
  color: #b3610f;
  line-height: 1.5;
}

.page-dashboard .shipped {
  color: #e83e8c;
  line-height: 1.5;
}

.page-dashboard .date {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  align-self: start;
  padding-top: 2px;
}

.page-dashboard .offer {
  background: linear-gradient(135deg, #fbe4ef 0%, #fdf1f7 55%, #fffaf6 100%);
  border: 1px solid #f6dceb;
  color: #5e1039;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  position: relative;
  padding: 22px;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.page-dashboard .offer-content {
  position: relative;
  z-index: 1;
}

.page-dashboard .offer h3 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.page-dashboard .offer h2 {
  font-size: 28px;
  margin: 8px 0;
  font-weight: 700;
  line-height: 1;
}

.page-dashboard .offer p {
  font-size: 13px;
  line-height: 1.5;
}

.page-dashboard .offer-deco {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 14px;
  opacity: 0.92;
  flex-shrink: 0;
}

/* One solid accent on the pale panel, so the wash still has somewhere to land.
   A white pill on a near-white panel had nothing to push against. */
.page-dashboard .offer .offer-cta {
  background: var(--primary_color);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  margin-top: 14px;
  font-family: inherit;
  display: inline-block;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(171, 45, 114, 0.26);
  transition: background 0.2s, transform 0.2s;
}

.page-dashboard .offer .offer-cta:hover {
  background: #8a2159;
  color: #fff;
  transform: translateY(-1px);
}

.page-dashboard .address-box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  margin-top: 8px;
  align-items: start;
}

.page-dashboard .address-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(171, 45, 114, 0.12);
  color: #ab2d72;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.page-dashboard .address-details {
  flex: 1;
}

.page-dashboard .address-details h4 {
  margin-bottom: 8px;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 600;
}

.page-dashboard .address-details p {
  color: #666;
  line-height: 1.6;
  font-size: 12px;
}

.page-dashboard .address-edit {
  width: 42px;
  font-size: 15px;
  height: 42px;
  border-radius: 50%;
  background: rgba(171, 45, 114, 0.10);
  color: #001430;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: 0.2s;
}

.page-dashboard .address-edit:hover {
  background: var(--primary_color);
  color: #fff;
}
/* dashboard forms */
/* wishlist Container
   This section used to be a 3-column grid itself, left over from markup where
   the cards were its direct children. It now holds one .dashboard-form panel,
   so that grid squeezed the whole panel into a third of the width. The section
   is a plain block; the cards grid lives on .wishlist-items.

   The tiles are the shared .pcard (assets/css/product-card.css), same as the
   shop and the favourites page, so this only frames them. */
.wishlist-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 20px;
  margin-top: 6px;
}

/* Two cards fit across a phone, but inside the dashboard panel that leaves a
   ~76px button — "Add To Cart" runs out of its own pill. The bin drops onto its
   own line so the label keeps full width. */
@media (max-width: 575px) {
  .wishlist-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .page-dashboard .pcard__actions { flex-wrap: wrap; }
  .page-dashboard .pcard .pcard__btn { flex: 1 1 100%; }

  .page-dashboard .pcard .pcard__remove {
    width: 100%;
    height: 32px;
    margin-top: 6px;
  }
}

/* ==========================================================================
   Coupons

   Each one is a torn-off ticket: a coloured stub carrying the saving, notches
   punched down the perforation, and a dashed code box with a copy button. They
   deal in on a stagger and a light sweeps across on hover.
   ========================================================================== */

.dashboard-section.active#couponSection { display: block; }

.coupon-flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 17px;
  margin-bottom: 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  animation: cpRise 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.coupon-flash.is-ok  { background: #e7f7ee; border: 1px solid #bfe6d1; color: #14654a; }
.coupon-flash.is-bad { background: #ffeaf2; border: 1px solid #f7c4da; color: #a82a64; }

.coupon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.coupon.dashboard-section .coupon-item {
  --cp: #ab2d72;
  --cp-soft: #fdeef6;

  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 152px;
  border: 0;
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 20, 48, 0.08);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.25s;
  animation: cpRise 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes cpRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.coupon.dashboard-section .coupon-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(0, 20, 48, 0.14);
}

/* A light sweeping across the ticket on hover. */
.coupon.dashboard-section .coupon-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.65) 50%, transparent 62%);
  transform: translateX(-120%);
}

.coupon.dashboard-section .coupon-item:hover::after { animation: cpShine 0.75s ease-out; }

@keyframes cpShine {
  to { transform: translateX(120%); }
}

/* Matched to the base rule's specificity (.coupon .coupon-item is 0,2,0 plus
   the tone class) — a bare .coupon-item.tone-x loses to it and every ticket
   comes out yellow. */
.coupon.dashboard-section .coupon-item.tone-welcome { --cp: #e0a900; --cp-soft: #fff4d2; }
.coupon.dashboard-section .coupon-item.tone-bulk    { --cp: #7b52e0; --cp-soft: #ece4ff; }
.coupon.dashboard-section .coupon-item.tone-ship    { --cp: #e83e8c; --cp-soft: #ffe1ee; }

/* --- stub ----------------------------------------------------------------- */

.cp-stub {
  position: relative;
  flex: 0 0 106px;
  display: grid;
  place-content: center;
  gap: 2px;
  text-align: center;
  padding: 0 8px;
  background: linear-gradient(160deg, var(--cp), color-mix(in srgb, var(--cp) 72%, #000 28%));
  color: #fff;
}

.cp-stub b {
  display: block;
  font-family: var(--font);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.cp-stub span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  opacity: 0.92;
}

/* The perforation: a dashed rule with a notch punched out top and bottom. */
.cp-stub::before,
.cp-stub::after {
  content: "";
  position: absolute;
  right: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f1f2f4;
}

.cp-stub::before { top: -11px; }
.cp-stub::after { bottom: -11px; }

.cp-body {
  flex: 1;
  min-width: 0;
  padding: 17px 19px;
  border-left: 2px dashed #e4e8ee;
  display: flex;
  flex-direction: column;
}

.dashboard-section .coupon-item h3 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #001430;
  margin: 0 0 6px;
}

.dashboard-section .coupon-item .cp-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #69778a;
  margin: 0 0 12px;
}

.cp-meta i { color: var(--cp); font-size: 11px; }

/* --- code box ------------------------------------------------------------- */

.cp-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border: 1.5px dashed var(--cp);
  border-radius: 11px;
  background: var(--cp-soft);
  margin-bottom: 13px;
}

.cp-code span {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #001430;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-dashboard .cp-copy {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: #fff;
  color: #69778a;
  font-size: 12px;
  cursor: pointer;
  transition: 0.2s;
}

.page-dashboard .cp-copy:hover { background: var(--cp); color: #fff; }
.page-dashboard .cp-copy:focus { outline: none; }
.page-dashboard .cp-copy:focus-visible { outline: 3px solid var(--cp); outline-offset: 2px; }

/* Swapped to a tick by dashboard.js for a moment after copying. */
.page-dashboard .cp-copy.is-copied { background: #1f9e78; color: #fff; animation: cpPop 0.35s ease-out; }

@keyframes cpPop {
  50% { transform: scale(1.22); }
}

/* --- button --------------------------------------------------------------- */

.page-dashboard .cp-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border-radius: 999px;
  background: var(--cp);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.22s, transform 0.22s, box-shadow 0.22s;
}

.page-dashboard .cp-btn i { transition: transform 0.22s; }
.page-dashboard .cp-btn:hover { background: #001430; color: #fff; box-shadow: 0 8px 18px rgba(0, 20, 48, 0.22); }
.page-dashboard .cp-btn:hover i { transform: translateX(4px); }
.page-dashboard .cp-btn--off { background: #eef0f4; color: #69778a; }
.page-dashboard .cp-btn--off:hover { background: #e83e8c; color: #fff; }
.page-dashboard .cp-btn--off:hover i { transform: rotate(90deg); }

/* What a ticket says instead of an Apply button when this cart cannot use it —
   either it is short of the coupon's min_order, or the code is held and waiting
   for the cart to grow back into it. Takes the button's `margin-top: auto` so
   it still sits on the bottom edge and the tickets in a row stay level. */
.page-dashboard .cp-hold {
  margin: auto 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 12px;
  background: #f6f7f9;
  border: 1px dashed #dfe3ea;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #69778a;
}

.page-dashboard .cp-hold i { color: #98a2b3; font-size: 12px; flex: 0 0 auto; }

/* Held codes get the note *and* a Remove button under it, so the note gives up
   the auto margin to the button below it. */
.page-dashboard .cp-hold + .cp-btn { margin-top: 8px; }

/* --- applied -------------------------------------------------------------- */

.coupon-item.is-applied { box-shadow: 0 0 0 2px #1f9e78, 0 10px 26px rgba(31, 158, 120, 0.2); }

.cp-flag {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #1f9e78;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  animation: cpFlag 2s ease-in-out infinite;
}

@keyframes cpFlag {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .coupon.dashboard-section .coupon-item,
  .coupon-flash,
  .cp-flag { animation: none; }

  .coupon.dashboard-section .coupon-item:hover::after { animation: none; }
}

@media (max-width: 575px) {
  .coupon-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cp-stub { flex-basis: 86px; }
  .cp-stub b { font-size: 27px; }
  .cp-body { padding: 14px 15px; }
}

/* ==========================================================================
   Notifications

   Rows deal themselves in on a stagger, carry an unread dot, and each one has
   its own mark-read and delete control. dashboard.js posts to
   notification_action.php and plays .is-going before pulling the row out.
   ========================================================================== */

.notification-wrapper {
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 20, 48, 0.06);
}

.notification-header {
  padding: 20px 24px;
  border-bottom: 1px solid #eef0f4;
  background: linear-gradient(135deg, #fdf4f8 0%, #fbe4ef 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.nh-title { display: flex; align-items: center; gap: 14px; }

.nh-bell {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--primary_color);
  color: #fff;
  font-size: 19px;
  box-shadow: 0 8px 18px rgba(171, 45, 114, 0.34);
}

/* A gentle ring while something is unread; it stops once everything is read. */
.notification-wrapper:has(.is-unread) .nh-bell i { animation: nhRing 2.6s ease-in-out infinite; }

@keyframes nhRing {
  0%, 62%, 100% { transform: rotate(0); }
  68%           { transform: rotate(14deg); }
  74%           { transform: rotate(-11deg); }
  80%           { transform: rotate(7deg); }
  86%           { transform: rotate(-4deg); }
}

.notification-header h3 {
  font-size: 21px;
  font-weight: 800;
  color: #001430;
  margin: 0;
  line-height: 1.2;
}

.nh-sub { display: block; font-size: 13px; color: #69778a; margin-top: 2px; }

.nh-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.nh-actions[hidden] { display: none; }
.nh-form { margin: 0; display: inline-flex; }

.notification-badge {
  background: var(--primary_color);
  color: #fff;
  padding: 6px 15px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 800;
  transition: 0.2s;
}

/* Nothing unread: the pill goes quiet rather than disappearing, so the row's
   layout does not jump every time one is marked read. */
.notification-badge.is-quiet { background: #eef0f4; color: #69778a; }

.page-dashboard .nh-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1.5px solid #f4d5e6;
  background: #fff;
  color: #69778a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
}

.page-dashboard .nh-btn:hover { border-color: var(--primary_color); color: #001430; transform: translateY(-1px); }
.page-dashboard .nh-btn--danger:hover { border-color: #e83e8c; background: #e83e8c; color: #fff; }
.page-dashboard .nh-btn:focus { outline: none; }
.page-dashboard .nh-btn:focus-visible { outline: 3px solid var(--primary_color); outline-offset: 2px; }

.notification-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- a row ---------------------------------------------------------------- */

.notification-item {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1.5px solid #eef0f4;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  /* --i is the row's position, so the list deals itself out top to bottom. */
  animation: nhDeal 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes nhDeal {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

.notification-item:hover {
  border-color: #e2e6ee;
  box-shadow: 0 8px 20px rgba(0, 20, 48, 0.08);
  transform: translateX(3px);
}

/* Played by dashboard.js just before the row is removed. */
.notification-item.is-going {
  animation: nhLeave 0.32s ease-in forwards;
  pointer-events: none;
}

@keyframes nhLeave {
  to { opacity: 0; transform: translateX(40px) scale(0.96); max-height: 0; margin-top: -12px; }
}

.notification-line { width: 5px; background: #dfe3ea; transition: background 0.2s; }

.notification-content {
  flex: 1;
  min-width: 0;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
}

.notification-left { display: flex; align-items: center; gap: 14px; min-width: 0; }

.notification-left p {
  font-size: 14.5px;
  color: #001430;
  line-height: 1.5;
  margin: 0 0 3px;
}

.notification-left small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8b96a5;
  font-size: 12.5px;
}

.notification-icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 16px;
  background: #eef0f4;
  color: #69778a;
}

/* One colour per notification type, on both the icon and the edge stripe. */
.notification-item.tone-order .notification-icon  { background: #e0edff; color: #2b5798; }
.notification-item.tone-order .notification-line  { background: #3d7bd9; }
.notification-item.tone-bulk .notification-icon   { background: #e6ddff; color: #573a9e; }
.notification-item.tone-bulk .notification-line   { background: #7b52e0; }
.notification-item.tone-coupon .notification-icon { background: #fff0c2; color: #8a6b00; }
.notification-item.tone-coupon .notification-line { background: var(--primary_color); }

/* --- unread --------------------------------------------------------------- */

.notification-item.is-unread { border-color: #f5e6bd; }
.notification-item.is-unread .notification-content { background: #fdf4f8; }
.notification-item.is-unread .notification-left p { font-weight: 700; }

/* A pulsing pink dot on the icon rather than a whole highlighted block. */
.notification-item.is-unread .notification-icon::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e83e8c;
  box-shadow: 0 0 0 2.5px #fff;
  animation: nhPulse 1.8s ease-in-out infinite;
}

@keyframes nhPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.28); opacity: 0.75; }
}

/* --- per-row tools -------------------------------------------------------- */

.notification-tools {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.2s, transform 0.2s;
}

.notification-item:hover .notification-tools,
.notification-tools:focus-within { opacity: 1; transform: translateX(0); }

/* Touch screens have no hover, so the tools are simply always there. */
@media (hover: none) {
  .notification-tools { opacity: 1; transform: none; }
}

.page-dashboard .notif-tool {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid #e6e9ef;
  background: #fff;
  color: #69778a;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s;
}

.page-dashboard .notif-tool:hover { border-color: #1f9e78; background: #1f9e78; color: #fff; }
.page-dashboard .notif-tool--danger:hover { border-color: #e83e8c; background: #e83e8c; color: #fff; }
.page-dashboard .notif-tool:focus { outline: none; }
.page-dashboard .notif-tool:focus-visible { outline: 3px solid var(--primary_color); outline-offset: 2px; }

/* --- empty state ---------------------------------------------------------- */

.notif-empty { text-align: center; padding: 26px 20px 34px; }
.notif-empty[hidden] { display: none; }

.notif-empty .ne-art {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 4px;
  display: grid;
  place-items: center;
}

.notif-empty .ne-ring {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px solid var(--primary_color);
  opacity: 0;
  animation: neRipple 2.8s ease-out infinite;
}

.notif-empty .ne-ring--2 { animation-delay: 1.4s; }

@keyframes neRipple {
  0%   { transform: scale(0.85); opacity: 0.5; }
  70%  { opacity: 0.1; }
  100% { transform: scale(1.6); opacity: 0; }
}

.notif-empty .ne-icon {
  position: relative;
  z-index: 2;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #fdeef6 0%, #fbdcea 100%);
  color: #ab2d72;
  font-size: 34px;
  box-shadow: 0 10px 24px rgba(171, 45, 114, 0.22);
  animation: neBob 2.8s ease-in-out infinite;
}

@keyframes neBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.notif-empty h4 {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 800;
  color: #001430;
  margin: 0 0 6px;
}

.notif-empty p { color: #69778a; font-size: 14px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .notification-item,
  .notification-wrapper .nh-bell i,
  .notification-item.is-unread .notification-icon::after,
  .notif-empty .ne-ring,
  .notif-empty .ne-icon { animation: none; }

  .notif-empty .ne-ring { opacity: 0.18; }
}

@media (max-width: 767px) {
  .notification-header { padding: 16px; }
  .nh-title { gap: 11px; }
  .nh-bell { width: 40px; height: 40px; border-radius: 13px; font-size: 16px; }
  .notification-header h3 { font-size: 18px; }
  .nh-actions { width: 100%; }
  .page-dashboard .nh-btn { flex: 1 1 0; justify-content: center; height: 34px; padding: 0 10px; font-size: 12px; }
  .notification-body { padding: 14px 14px 18px; }
  .notification-content { padding: 13px 12px; gap: 10px; }
  .notification-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 14px; }
  .notification-left p { font-size: 13.5px; }
}

/* dashboard-section table-wrapper */
.table-wrapper {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #dcdfe3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.table-wrapper .search-box {
  align-items: center !important;
  padding: 4px 14px !important;
}
.table-wrapper .search-box span,
.table-wrapper .filter-btn span {
  width: 18px;
  height: 18px;
}
.table-wrapper .search-box span img,
.table-wrapper .filter-btn span img {
  width: 100%;
  height: 100%;
}
.table-header {
  padding: 24px;
  border-bottom: 1px solid #dcdfe3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-header h2 {
  font-size: 23px;
}

.table-actions {
  display: flex;
  gap: 14px;
}

.table-wrapper .search-box input {
  padding: 0 !important;
  margin-left: 10px;
  font-size: 14px;
}

.search-box input {
  width: 260px;
  padding: 12px 14px 12px 42px;
  border-radius: 10px;
  border: 1px solid #dcdfe3;
  outline: none;
  font-size: 14px;
}

.table-wrapper .filter-btn {
  padding: 12px 18px;
  border: 1px solid #dcdfe3;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

/* ===== Orders: Filter dropdown =====
   The button and its panel share one positioned wrapper so the panel hangs off
   the button's right edge instead of the table's. */
.filter-menu-wrap {
  position: relative;
}

/* .table-wrapper clips to its own border-radius, and with only a few orders the
   card is shorter than the open panel — the bottom half of the menu was being
   cut off. Only the orders card needs to let a child escape. */
#orderSection {
  overflow: visible;
}

.table-wrapper .filter-btn {
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.table-wrapper .filter-btn:hover {
  border-color: #ab2d72;
}

/* A filter that is holding rows back has to look switched on, or a narrowed
   table reads as an account with almost no orders in it. */
.table-wrapper .filter-btn.is-active {
  border-color: #ab2d72;
  background: rgba(171, 45, 114, 0.07);
  color: #ab2d72;
}

.filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 250px;
  padding: 14px 16px 12px;
  background: #fff;
  border: 1px solid #dcdfe3;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 20, 48, 0.13);
  text-align: left;
  /* Three groups and a date pair is taller than a short laptop window; the
     panel scrolls rather than running off the bottom with Reset out of reach. */
  max-height: min(70vh, 520px);
  overflow-y: auto;
}

.filter-menu[hidden] {
  display: none;
}

.filter-menu__title {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9aa1ae;
}

/* The second group needs air above it, but not from a margin on every title —
   that would also push the first one off the panel's top padding. */
.filter-menu__title + * {
  margin-top: 0;
}

/* Any preceding sibling, not just a label — the group after the product
   <select> was losing its rule and running straight into the list above it. */
.filter-menu > * + .filter-menu__title {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f0f1f5;
}

.filter-menu label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #001430;
  cursor: pointer;
  transition: background 0.15s;
}

.filter-menu label:hover {
  background: #f7f8fa;
}

.filter-menu input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: #ab2d72;
  cursor: pointer;
}

/* Which toy. A native <select> on purpose: the list is as long as the
   customer's history, and the platform's own picker handles a long one — and
   type-to-jump inside it — better than anything drawn here would. */
.filter-menu__select {
  width: 100%;
  height: 36px;
  padding: 0 30px 0 10px;
  border: 1px solid #ececf1;
  border-radius: 8px;
  background: #fff
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2369778a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  appearance: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: #001430;
  cursor: pointer;
}

.filter-menu__select:focus {
  outline: none;
  border-color: #ab2d72;
}

/* Stacked, not side by side: at 250px two date fields sit at about 100px each,
   which is narrower than the date control most browsers draw. */
.filter-menu__dates {
  display: grid;
  gap: 8px;
  margin: 6px 0 2px;
  padding: 10px;
  border-radius: 10px;
  background: #f9fafc;
}

.filter-menu__dates[hidden] { display: none; }

.filter-menu .filter-menu__date {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  cursor: default;
}

.filter-menu .filter-menu__date:hover { background: none; }

.filter-menu__date span {
  font-size: 11.5px;
  font-weight: 700;
  color: #69778a;
}

.filter-menu__date input[type="date"] {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #e3e6eb;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: #001430;
  cursor: pointer;
}

.filter-menu__date input[type="date"]:focus {
  outline: none;
  border-color: #ab2d72;
}

.filter-menu__reset {
  width: 100%;
  margin-top: 12px;
  padding: 9px 0;
  border: 1px solid #ececf1;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #69778a;
  cursor: pointer;
  transition: 0.18s;
}

.filter-menu__reset:hover {
  border-color: #ab2d72;
  color: #ab2d72;
}

/* On a phone the actions row wraps, so a right-anchored panel can hang off the
   viewport. Pin it to the left edge of the wrapper instead. */
@media (max-width: 575px) {
  .filter-menu {
    right: auto;
    left: 0;
    width: min(250px, calc(100vw - 60px));
  }
}

.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

.table-wrapper thead {
  background: #f3f5f7;
}

.table-wrapper th {
  text-align: left;
  padding: 18px 22px;
  font-size: 14px;
  text-transform: uppercase;
  color: #6b7280;
  white-space: nowrap;
}

.table-wrapper td {
  padding: 20px 22px;
  border-top: 1px solid #ececec;
  font-size: 14px;
  /* An order opened to five items makes its row 500px tall. Centred, every
     other cell in that row drifts into the middle of the whitespace and stops
     lining up with its own column heading. */
  vertical-align: top;
}

/* Seven columns, two of them two lines tall. Without a floor the browser hands
   the spare width to whichever column has the longest word and the product name
   breaks after every syllable; with it the row keeps its shape and
   .table-scroll takes over on a narrow screen.

   The child combinator matters: written as a descendant it also caught the item
   table nested inside an opened row and stretched that to 940px too. */
/* 1320, not the 940 this was: the Delivery column joined the row, and eight
   columns squeezed into 940 put every address and every product name onto four
   lines. Wider than the panel is fine — .table-scroll below is what carries it,
   and a row that reads in one line each beats a row that fits with nothing
   legible in it. */
.table-wrapper > .table-scroll > table { min-width: 1320px; }
.table-wrapper .table-scroll { overflow-x: auto; }

.table-wrapper tbody tr {
  transition: 0.3s;
}

.table-wrapper tbody tr:hover {
  background: #fafafa;
}

/* A date squeezed by the item table below it was breaking after every word —
   "02 / Sep / 2026" down three lines. Neither of these ever needs to wrap. */
.table-wrapper .col-date,
.table-wrapper .col-amount { white-space: nowrap; }

.table-wrapper .status {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
}

.table-wrapper .status.delivered {
  background: #dcfce7;
  color: #166534;
}

.table-wrapper .status.shipped {
  background: #dbeafe;
  color: #1e40af;
}

.table-wrapper .status.processing {
  background: #ffedd5;
  color: #9a3412;
}

.table-wrapper .status.cancelled {
  background: #fee2e2;
  color: #991b1b;
}

/* `a:link, a:visited { color:#7b8393 }` sits at the top of this file and beats a
   single class, so both of these came out grey. Matching the link states is
   what actually gives them their colour. */
.view-btn,
.view-btn:link,
.view-btn:visited {
  background: transparent;
  color: #0058be;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

/* Two actions per order row now, so they need to sit as a pair rather than
   run together as one long link. */
.order-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.invoice-btn,
.invoice-btn:link,
.invoice-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #ab2d72;
  text-decoration: none;
  transition: color 0.18s;
}

.invoice-btn:hover {
  color: #8a2159;
  text-decoration: underline;
}

/* My Orders: the product the order was for, with its picture. An order row that
   only carries a number makes the customer open every one of them to find the
   thing they are actually asking about. */
/* 260, not 190: the thumbnail and its gap take 58 of it, so at 190 a toy name
   had about eighteen characters a line and "Melon Hee Seo Premium Fruits
   Figure" was cut in the middle of the third word. */
.order-product,
.order-product:link,
.order-product:visited {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  color: #1f2937;
  text-decoration: none;
}

.order-product img {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 12px;
  background: #f5f6fa;
  padding: 3px;
}

.order-product b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.order-product small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #7b8393;
}

.order-product:hover b { color: #ab2d72; }

/* An order with more than one toy in it opens in place. The button lives in the
   Product cell and drives a row of its own below — see .order-detail. */
.order-toggle {
  width: 100%;
  padding: 6px 10px 6px 6px;
  margin: -6px -10px -6px -6px;
  border: 0;
  border-radius: 14px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s;
}

.order-toggle:hover { background: #faf5f8; }

/* No hard ring round the row. A 3px outline offset 2px from a 14px radius drew
   a heavy box round the whole product cell every time it was opened — and where
   the rule below is not reached, the browser draws its own, in black. Both are
   replaced by a tint and a soft edge: still visible to somebody arriving on the
   keyboard, no longer a border round a cell that was only clicked. */
.order-toggle:focus { outline: none; }

.order-toggle:focus-visible {
  outline: none;
  background: #fdeef6;
  box-shadow: 0 0 0 2px #f4d5e6;
}
.order-toggle > span { flex: 1; min-width: 0; }

.order-toggle > i {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f6eef3;
  color: #ab2d72;
  font-size: 11px;
  transition: transform 0.2s, background 0.18s;
}

.order-toggle[aria-expanded="true"] > i { transform: rotate(180deg); background: #ab2d72; color: #fff; }

/* The panel's own row. It spans every column, which is the whole point of
   moving it out of the Product cell — the item table was being squeezed into
   one column and breaking every toy name over four lines. */
.table-wrapper tr.order-detail > td {
  padding: 0 22px 20px;
  border-top: 0;
  background: #fff;
}

.table-wrapper tr.order-detail:hover > td { background: #fff; }
.table-wrapper tr.order-detail[hidden] { display: none; }

/* The open panel is its own little table. Five items with the quantity and the
   price tucked under each name made the reader walk the list to compare any two
   numbers; columns line them up. It is a nested <table>, so the outer row's
   padding and font are reset rather than inherited. */
/* Where the order is going — its own column, the same shape the admin orders
   table uses so the two screens describe an order the same way. Two lines, with
   the rest of the address on the title: a full one printed in a table cell
   turns every row into four. */
/* Two addresses, and the full postal line for each. */
.table-wrapper .col-address { min-width: 270px; max-width: 320px; }

.order-addr {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: #7a6270;
}

/* A hairline between the two, so the second reads as another address rather
   than as more of the first. */
.order-addr + .order-addr { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #f0e0ea; }

/* Which of the two this is. On the name's line rather than in a column of its
   own beside both lines — as a column it took 55px off every line the address
   had, and the address is the part that needs the room. */
.order-addr__tag {
  display: inline-block;
  margin-right: 6px;
  vertical-align: 1px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fdeef6;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ab2d72;
  white-space: nowrap;
}

/* Quieter than the delivery tag. On almost every order this row says "same as
   delivery", and a second bright pink chip for that is a lot of attention for
   a line that exists to be reassuring. */
.order-addr.is-billing .order-addr__tag { background: #f2f0f5; color: #7a6270; }

.order-addr.is-same > span:not(.order-addr__tag) {
  display: inline;
  margin-top: 0;
  color: #9b8f97;
  font-style: italic;
  cursor: default;
}

.order-addr b {
  display: block;
  margin-top: 3px;
  font-weight: 700;
  color: #2b1124;
  overflow-wrap: anywhere;
}

.order-addr.is-same b { margin-top: 0; }

/* The full address, under the name. Three lines rather than two: cut at two it
   lost the city and the pincode, which are the parts anybody checking an
   address has come to check. The title still carries the whole string. */
.order-addr > span:not(.order-addr__tag) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  margin-top: 2px;
  cursor: help;
}

.order-items__table {
  /* Full width. It used to stop at 1100px so a price column would not drift
     too far from the name it belongs to — but the panel it sits in already
     spans the whole orders table, so the cap only ever left a ragged strip of
     empty down the right of an otherwise full-width row. The name column
     carries the slack instead. */
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-radius: 14px;
  overflow: hidden;
  background: #faf7f9;
  border: 1px solid #f0e7ee;
}

.table-wrapper .order-items__table th {
  padding: 8px 12px;
  background: #f4eef2;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b7f88;
  white-space: nowrap;
}

.table-wrapper .order-items__table td {
  padding: 9px 12px;
  border-top: 1px solid #f0e7ee;
  font-size: 13px;
  color: #1f2937;
  vertical-align: middle;
}

.table-wrapper .order-items__table tbody tr:first-child td { border-top: 0; }
.table-wrapper .order-items__table tbody tr:hover { background: #fff; }

.order-items__table .oi-name { display: flex; align-items: center; gap: 10px; }

.order-items__table .oi-name img {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  padding: 2px;
}

.order-items__table .oi-name span { font-weight: 600; line-height: 1.35; }

/* The name takes what is left after the three number columns, which need only
   as much as their widest figure. */
.order-items__table th:first-child { width: 100%; }
.order-items__table .oi-qty  { text-align: center; color: #7b8393; white-space: nowrap; }
.order-items__table .oi-num  { text-align: right; white-space: nowrap; }
.order-items__table .oi-total { font-weight: 700; }

.table-wrapper .order-items__table tfoot td {
  background: #f4eef2;
  border-top: 1.5px solid #e8dbe4;
  font-weight: 700;
  color: #26202a;
}

.table-wrapper .order-items__table tfoot td:first-child { text-align: right; color: #7b8393; font-weight: 600; }
.table-wrapper .order-items__table tfoot .oi-total { color: #ab2d72; font-size: 14px; }

/* The consignment number, once the parcel is with the courier. */
.order-track {
  display: block;
  min-width: 130px;
  font-size: 13px;
}

.order-track small {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7b8393;
}

.order-track a,
.order-track a:link,
.order-track a:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #ab2d72;
  text-decoration: none;
  word-break: break-all;
}

.order-track a:hover { text-decoration: underline; }
.order-track a i { font-size: 10px; }
.order-track b { font-weight: 700; word-break: break-all; }
.order-track.muted { color: #9aa3b0; font-weight: 600; }

/* ==========================================================================
   Category tree — shop sidebar
   ========================================================================== */

/* Rows rather than lines of text. A list of bare words with a number floated
   to the right gives the pointer nothing to land on and the eye nothing to
   follow; each row is its own soft target, and the one you are looking at is
   filled rather than merely bolded. */
.page-shop .filter-list.cat-tree { margin-bottom: 0; }

.page-shop .filter-list.cat-tree li {
  display: block;
  margin: 0 0 2px;
  font-size: inherit;
  color: inherit;
}

.page-shop .filter-list.cat-tree li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  /* index.css sets `a:link { font-size: 16px }`, a (0,1,1) selector that beat
     the 14px this list was designed at — which is why the rows ran long and
     the sidebar looked loose. Said here at (0,3,1), it sticks. */
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  color: #4a3a44;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.page-shop .filter-list.cat-tree li a:hover { background: #fdeef6; color: #8a2159; }

/* Filled, not bold. On a list where several rows carry a pink badge already,
   weight alone was not enough to say which one you were looking at. */
.page-shop .filter-list.cat-tree li.active > a {
  background: #ab2d72;
  color: #fff;
  font-weight: 700;
}

.page-shop .cat-tree__all a { font-weight: 700; }

/* The indent is the nesting, and the rule down the left is what says these
   belong to the row above rather than being peers of it — the same spine the
   header's catalogue panel uses, so the two read as one idea. */
.page-shop .filter-list.cat-tree li.is-sub > a {
  margin-left: calc(var(--depth, 1) * 10px);
  border-left: 2px solid #f4dde9;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 13.5px;
}

.page-shop .filter-list.cat-tree li.is-sub.active > a { border-left-color: #ab2d72; }

.cat-tree__tick {
  font-size: 9px;
  color: #cbb6c4;
  margin-right: 5px;
  vertical-align: 1px;
}

.page-shop .filter-list.cat-tree li.active > a .cat-tree__tick { color: #fff; }

/* "There is more inside this one." A direction, not a quantity — the number it
   replaced sat beside the toy count and the two of them read as a sum that did
   not add up. The exact figure is on the title for anyone who wants it. */
.cat-tree__more {
  margin-left: 5px;
  font-size: 9px;
  color: #c9b8c3;
  vertical-align: 1px;
  transition: transform 0.2s, color 0.15s;
}

.page-shop .filter-list.cat-tree li a:hover .cat-tree__more { color: #ab2d72; }

/* Pointing down once you are inside it, because that is where its
   sub-categories have just appeared. */
.page-shop .filter-list.cat-tree li.active > a .cat-tree__more {
  color: rgba(255, 255, 255, 0.85);
  transform: rotate(180deg);
}

/* The count sits in its own chip so it reads as a quantity rather than as part
   of the name. */
.page-shop .cat-tree__n {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f6f2f5;
  font-size: 12px;
  font-weight: 700;
  color: #6b5c66;

  /* ===== CENTRED BY FLEX, NOT BY line-height =============================
     This used to read `line-height: 20px; text-align: center`, which centres a
     digit only while a font's ascent and descent are roughly even. The site's
     face is Noto Serif Ahom now, and they are not:

         font              ascent  descent   baseline in a 20px box
         Noto Serif Ahom     12       8            12px
         the old sans        11       3            14px

     Ahom keeps eight of its twenty units for descenders - it is built for a
     script that has deep ones - so a fixed line-height parked the baseline two
     pixels high and the number sat visibly above the middle of its circle.

     With flex the text box is centred by the layout, so it no longer depends on
     how the font splits its em. What is left is the ink itself: digits have no
     descender, so their ink centre sits 0.33em above the baseline. Nudged back
     by .33em of padding-top - measured against a centre line at 10x, not
     guessed - and written in em so it stays right at any font-size. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  line-height: 1;
  padding-top: .33em;
}

/* Nothing under it. Kept, because the shape of the shop is worth showing, but
   dimmed — a column of identical black zeros buries the handful of rows that
   actually have toys behind them. */
.page-shop .cat-tree__n.is-zero { background: transparent; color: #c3b8c0; font-weight: 500; }

.page-shop .filter-list.cat-tree li a:hover .cat-tree__n { background: #fff; color: #8a2159; }

.page-shop .filter-list.cat-tree li.active > a .cat-tree__n {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}


/* Dashboard Pagination  */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-top: 1px solid #dcdfe3;
  background: #f6f7f9;
}
.pagination p {
  color: #6b7280;
}

.pagination-buttons {
  display: flex;
  gap: 10px;
}

.pagination-buttons button {
  min-width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #dcdfe3;
  background: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.pagination-buttons button.active {
  background: #000000;
  color: #ffffff;
}

.dashboard-section.active#accountSection {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.dashboard-sections {
  display: none;
}
.dashboard-sections.active {
  display: block;
}

.dashboard-section {
  display: none;
}
.content-grid.full-width {
  grid-template-columns: 1fr;
}
.dashboard-section.active {
  display: block;
}
.dashboard-form {
  background: #fff;
  padding: 30px;
  box-shadow: 0 8px 25px #d98b4a14;
  border-radius: 20px;
  margin-bottom: 30px;
}
/* Plum, and a transparent border at rest: adding the border only on hover
   reflowed the whole panel by a pixel every time the pointer crossed it. */
.dashboard-form {
  border: 1px solid transparent;
}

.dashboard-form:hover {
  border-color: #ab2d72;
}

.dashboard-form h2 {
  margin-bottom: 25px;
  font-size: 23px;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
}
/* Checkout fields. The border was #f6f6f6 — all but invisible against white,
   so eleven inputs read as eleven floating placeholders rather than boxes. A
   faint fill and a real border give each one an edge; focus then has somewhere
   to go. The hover ring used to be amber on a plum border, the two halves of
   one state disagreeing; both are plum now. */
.checkout-wrapper .input-group input,
.checkout-wrapper .input-group textarea,
.checkout-wrapper .input-group select {
  width: 100%;
  outline: none;
  height: 52px;
  font-family: inherit;
  font-size: 15px;
  color: #001430;
  background: #fff;
  border: 1.5px solid #eddfe8;
  border-radius: 12px;
  padding: 0 18px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.checkout-wrapper .input-group input::placeholder,
.checkout-wrapper .input-group textarea::placeholder {
  color: #a79aa3;
}

.checkout-wrapper .input-group input:hover,
.checkout-wrapper .input-group textarea:hover,
.checkout-wrapper .input-group select:hover {
  border-color: rgba(171, 45, 114, 0.42);
}

/* The field being filled in is the only one that should be lit. */
.checkout-wrapper .input-group input:focus,
.checkout-wrapper .input-group textarea:focus,
.checkout-wrapper .input-group select:focus {
  background: #fff;
  border-color: #ab2d72;
  box-shadow: 0 0 0 4px rgba(171, 45, 114, 0.13);
}

/* A white field on a white card is invisible; on the tinted card it needs the
   opposite help — a hairline lift so it reads as a raised control. */
.checkout-wrapper .input-group input,
.checkout-wrapper .input-group textarea,
.checkout-wrapper .input-group select {
  box-shadow: 0 1px 2px rgba(94, 16, 57, 0.04);
}

/* --- Leading icon ---------------------------------------------------------
   Eleven identical boxes are hard to scan; a glyph per field turns the column
   into a list you can read at a glance. Purely decorative — every field keeps
   its own <label>, so nothing depends on the icon being understood. */
.checkout-wrapper .field {
  position: relative;
  display: flex;
  align-items: center;
}

.checkout-wrapper .field > i {
  position: absolute;
  left: 17px;
  width: 15px;
  font-size: 14px;
  color: #b0a3ac;
  text-align: center;
  pointer-events: none;
  transition: color 0.2s;
  z-index: 1;
}

.checkout-wrapper .field:focus-within > i {
  color: #ab2d72;
}

.checkout-wrapper .field input,
.checkout-wrapper .field select,
.checkout-wrapper .field textarea {
  padding-left: 46px;
}

/* Native select arrows are the last browser-default furniture on the page. */
.checkout-wrapper .field--select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1.5 1.75 6 6.25l4.5-4.5' stroke='%23ab2d72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.checkout-wrapper .field--area {
  align-items: flex-start;
}

.checkout-wrapper .field--area > i {
  top: 17px;
}

.checkout-wrapper .field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #8b7f88;
}

.checkout-wrapper .input-group textarea {
  height: auto;
  min-height: 116px;
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 1.5;
  resize: vertical;
}

.input-group textarea {
  height: 120px;
  padding-top: 15px;
}

/* White on yellow never had the contrast for a primary button; on the plum it
   does. */
.theme-btn {
  height: 50px;
  padding: 0 30px;
  border: none;
  border-radius: 12px;
  background: #ab2d72;
  font-size: 15px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

/* Dashboard form fields — override Bootstrap's .input-group flex layout
   and add proper input styling (the global .input-group rules are scoped
   to .checkout-wrapper, so dashboard inputs need their own styling here) */
.dashboard-form .input-group {
  display: block;
  margin-bottom: 18px;
}

.dashboard-form .input-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #001430;
}

.dashboard-form .input-group input,
.dashboard-form .input-group select,
.dashboard-form .input-group textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #e6e8ee;
  border-radius: 10px;
  font-size: 14px;
  color: #303746;
  outline: none;
  background: #fff;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.dashboard-form .input-group input:focus,
.dashboard-form .input-group select:focus,
.dashboard-form .input-group textarea:focus {
  border-color: #ab2d72;
  box-shadow: 0 0 0 3px rgba(171, 45, 114, 0.16);
}

.dashboard-form .input-group textarea {
  height: 100px;
  padding: 12px 16px;
  resize: none;
}

/* end dashboard forms */

/* ==========================================================================
   Shop / Categories
   ========================================================================== */

/* The shop runs on the storefront's plum, same as the header, footer and the
   home page bands. The token is redefined here rather than page by page —
   every `.page-shop` rule below already reads it. Scoped to this page only:
   `--primary_color` is the yellow everywhere else on the site and stays that. */
.page-shop {
  --primary_color: #ab2d72;
  --secondary_color: #ab2d72;

  background: var(--white_color);
  font-family: var(--font);
  color: #001430;
}

/* Each brand fill on this page is fixed where it is defined further down — an
   override up here loses the specificity tie to those later rules. */

.page-shop a {
  text-decoration: none;
}

.page-shop .shop-wrapper {
  display: grid;
  grid-template-columns: 242px 1fr;
  gap: 18px;
  max-width: 1320px;
  width: 100%;
  margin: 1rem auto;
  padding: 22px 18px;
}

/* `.page-shop .product-grid` is defined below with auto-fit/210px/16px — every
   declaration this copy had was overridden by it. */

.page-shop .sidebar {
  background: #fff;
  border: 1px solid #f4e6ee;
  border-radius: 18px;
  padding: 6px 14px 12px;
  height: fit-content;
  position: sticky;
  top: 0;
  box-shadow: 0 10px 30px -22px rgba(43, 17, 36, 0.5);
}

.page-shop .filter-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 -4px;
  padding: 14px 4px 12px;
  border-bottom: 1px solid #f6ecf1;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  color: #2b1124;
}

.page-shop .filter-title i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #fdeef6;
  font-size: 12.5px;
  color: #ab2d72;
}

.page-shop .filter-section {
  margin-bottom: 0;
  border-bottom: 1px solid #f6ecf1;
}

.page-shop .filter-section:last-child { border-bottom: 0; }

/* A real button, because it does a real thing now — it used to draw a "—" that
   looked exactly like a collapse control with no script anywhere behind it. */
.page-shop .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 14px 2px 12px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.page-shop .section-header h4 {
  margin: 0;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8a7280;
}

.page-shop .section-header:hover h4 { color: #ab2d72; }

/* Chrome treats a click on this button as keyboard-ish and paints its default
   focus ring — a hard black rectangle round the whole heading, on every open
   and close. Replaced rather than removed: a keyboard user still has to be
   able to see where they are, so the ring stays and is drawn in the house
   colour, tucked inside the row instead of boxing it. */
.page-shop .section-header:focus { outline: none; }

.page-shop .section-header:focus-visible {
  outline: none;
  border-radius: 10px;
  box-shadow: 0 0 0 2px #f4d5e6;
}

.page-shop .section-header i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fdeef6;
  font-size: 10px;
  color: #ab2d72;
  transition: transform 0.22s ease, background 0.15s;
}

.page-shop .section-header:hover i { background: #fbdeeb; }
.page-shop .filter-section.is-closed .section-header i { transform: rotate(-90deg); }

/* Collapsing by grid rows rather than max-height: the sections are different
   lengths and one max-height big enough for the brand list makes the price
   slider snap open instead of sliding.

   A .filter-body must hold EXACTLY ONE child. Only the first row is declared,
   so a second child lands in an implicit `auto` row that the closed state
   below never touches — the section then stops short of shut by however tall
   that child is. The Price Range and Brand sections carry a plain wrapper
   <div> for this reason. */
.page-shop .filter-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.26s ease, opacity 0.2s ease;
}

.page-shop .filter-body > * { min-height: 0; }
.page-shop .filter-section.is-closed .filter-body { grid-template-rows: 0fr; opacity: 0; }

/* The 1fr/0fr pair has to stay bare. Writing it as minmax(0, 0fr) — the
   obvious way to force the track's minimum to zero — takes the track out of
   flexible sizing altogether in Chrome, and the section then does not close at
   all. So the track keeps its `auto` minimum, and `auto` counts the last row's
   bottom margin: without the line below, a folded section stayed exactly 14px
   tall. `min-height: 0` above does not cover it, because that is about the
   content box and this is a margin. */
.page-shop .filter-section.is-closed .filter-body > :last-child { margin-bottom: 0; }

/* The wrapper has to clip while it is closing, but a permanently hidden
   overflow would also cut anything that legitimately sticks out. Nothing in
   these panels does, so this is safe and it is what makes the slide read. */
.page-shop .filter-body { overflow: hidden; }

/* The last thing inside a section pays for the section's bottom padding, so
   the rule under it does not sit hard against the final row. */
.page-shop .filter-body > :last-child { margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) {
  .page-shop .filter-body,
  .page-shop .section-header i { transition: none; }
}

/* Native checkboxes paint a near-black border and tick, which was the last
   default-browser thing in the sidebar. `accent-color` alone only reaches the
   checked state, so the unchecked box — the one you actually see, since most
   filters are off — stayed black. Repainting the box is the only way to fix
   that; it is still a real <input type=checkbox>, so the label, keyboard and
   screen-reader behaviour are untouched. */
.page-shop input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-right: 5px;
  vertical-align: -3px;
  border: 2px solid #e6cede;
  border-radius: 5px;
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}

.page-shop input[type="checkbox"]::before {
  content: "";
  width: 9px;
  height: 9px;
  transform: scale(0);
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.3, 1);
  box-shadow: inset 1em 1em #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.page-shop input[type="checkbox"]:hover { border-color: #ab2d72; }

.page-shop input[type="checkbox"]:checked {
  background: #ab2d72;
  border-color: #ab2d72;
}

.page-shop input[type="checkbox"]:checked::before { transform: scale(1); }

.page-shop input[type="checkbox"]:focus-visible {
  outline: 2px solid #ab2d72;
  outline-offset: 2px;
}

.page-shop .filter-list {
  list-style: none;
  margin-bottom: 0;
}

/* Age and Brand. Rows with somewhere to land, matching the category list above
   — three lists in one panel that each behaved differently was most of why the
   sidebar read as three separate widgets stacked up. */
.page-shop .filter-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  padding: 7px 10px;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: #4a3a44;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.page-shop .filter-list li > span:first-child {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* The count, in the same chip the category list uses. */
.page-shop .filter-list li > span:last-child {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: #8a7280;
}

.page-shop .filter-list li:hover { background: #fdeef6; color: #8a2159; }

.page-shop .filter-list li.active {
  background: #fdeef6;
  color: #8a2159;
  font-weight: 700;
}

.page-shop .filter-list li.active > span:last-child { color: #ab2d72; }

/* The old `.page-shop .filter-list input { width: 12px; height: 12px }` is gone.
   It tied on specificity with the checkbox rule above and, being later in the
   file, won — squashing the 17px box to 12px, at which size the 5px corner
   radius rounds the whole thing into a circle. */

.page-shop .price-range {
  width: 100%;
  accent-color: var(--primary_color);
  cursor: pointer;
}

.page-shop .price-values {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 0.76rem;
}

.page-shop .filter-more {
  display: inline-block;
  margin-top: 2px;
  color: #001430;
  font-size: 14px;
  font-weight: 600;
}

/* The head of the page: where you are, what you are looking at, and how it is
   ordered. It read as three unrelated things dropped at the top — a breadcrumb
   floating in 2rem of its own padding, a title, and the sort controls stacked
   away in the corner. One block now, closed with a rule. */
.page-shop .content-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f2e8ee;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  background-color: transparent !important;
  border-radius: 0 !important;
  /* SPACING, AND WHY IT IS HERE AND !important.
     Bootstrap sets `.breadcrumb { padding: .75rem 1rem; margin-bottom: 1rem }`
     - the 1rem of LEFT padding is the problem, it indents the trail away from
     everything under it. So this rule has to win, hence !important, and once it
     wins it owns the vertical spacing too.

     It was `padding: 2rem 0` originally: 32px above and 32 below a line of 13px
     text, which is a lot of nothing. Somebody then took it to 0, which is the
     other end - the trail ended up touching the bottom of the header on all
     four pages that have one (product, category, cart, pricing).

     18/10 sits between them. With the 10px margin below that is 18px of air
     above the trail and 20px under it.

     NOTE: because of the !important, a page-level rule cannot change this. The
     ones in product-detail.css were doing nothing and have been removed rather
     than left to look as though they worked. */
  padding: 18px 0 10px !important;
  margin: 0 0 10px !important;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: #9b8f97;
}

.breadcrumb a {
  margin: 0 !important;
  padding: 3px 9px;
  border-radius: 999px;
  background: #faf5f8;
  color: #7a6270 !important;
  font-size: 13px !important;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}

.breadcrumb a:hover { background: #fdeef6; color: #8a2159 !important; }

.breadcrumb__sep {
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  color: #cbbcc5;
  user-select: none;
}

/* Where you are. Not a link, so it is not dressed as one — but it is the crumb
   that matters, so it is the darkest thing on the line. */
.breadcrumb__here {
  padding: 3px 9px;
  border-radius: 999px;
  background: #fdeef6;
  font-size: 13px;
  font-weight: 700;
  color: #8a2159;
}

.page-shop .page-title {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  color: #2b1124;
  margin-bottom: 5px;
}

.page-shop .page-desc {
  max-width: 62ch;
  color: #7a6270;
  font-size: 15px;
  margin-bottom: 0;
}

/* Sort and the count on one line, at the foot of the block so they sit level
   with the description rather than floating beside the title. */
.page-shop .shop-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.page-shop .right-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-shop .sort-label,
.page-shop .products-count {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: #8a7280;
  margin: 0;
}

/* The count is a fact about the page, so it is a quiet chip rather than a line
   of text competing with the control beside it. */
.page-shop .products-count {
  padding: 5px 12px;
  border-radius: 999px;
  background: #faf5f8;
  white-space: nowrap;
}

.page-shop .sort-box {
  border: 1.5px solid #f0dfe9;
  border-radius: 999px;
  padding: 7px 30px 7px 14px;
  background: #fff;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: #2b1124;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

.page-shop .sort-box:hover { border-color: #ab2d72; }
.page-shop .sort-box:focus-visible { border-color: #ab2d72; box-shadow: 0 0 0 3px rgba(171, 45, 114, 0.13); }

/* ==========================================================================
   Shop — nothing to show
   ========================================================================== */

.shop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  max-width: 460px;
  margin: 10px auto 40px;
  padding: 38px 26px 34px;
  border: 1px solid #f4e6ee;
  border-radius: 22px;
  background: linear-gradient(160deg, #fdf4f9 0%, #fffdfa 70%);
}

.shop-empty__art {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #fbdeeb;
  font-size: 26px;
  color: #ab2d72;
}

.shop-empty h2 {
  margin: 0;
  font-family: var(--font);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  color: #2b1124;
}

.shop-empty p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #7a6270;
}

.shop-empty__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.shop-empty__btn,
.shop-empty__btn:link,
.shop-empty__btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: #ab2d72;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 18px -9px rgba(171, 45, 114, 0.95);
  transition: background 0.15s;
}

.shop-empty__btn:hover { background: #8a2159; color: #fff; }

.shop-empty__btn--ghost,
.shop-empty__btn--ghost:link,
.shop-empty__btn--ghost:visited {
  background: #fff;
  border: 1.5px solid #f0dfe9;
  color: #8a2159;
  box-shadow: none;
}

.shop-empty__btn--ghost:hover { background: #fdeef6; color: #8a2159; }

.page-shop .view-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  cursor: pointer;
  transition: 0.3s;
  font-size: 0.82rem;
}

.page-shop .view-btn:hover,
.page-shop .view-btn.active {
  background: var(--primary_color);
  color: #fff;
  border-color: var(--primary_color);
}

.page-shop .filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-shop .tag {
  padding: 2px 18px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.page-shop .tag.clear {
  color: #001430;
  font-weight: 700;
}

.page-shop .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

.page-shop .product-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: 0.3s;
  display: flex;
  position: relative;
  flex-direction: column;
}

.page-shop .product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.page-shop .discount {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--primary_color);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 1px 12px;
  border-radius: 6px;
  z-index: 1;
}

.page-shop .wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: 0.2s;
  font-size: 0.72rem;
}

.page-shop .wishlist.active {
  color: #001430;
  border-color: var(--primary_color);
  background: rgba(171, 45, 114, 0.12);
}

.page-shop .product-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #fffcf1;
  height: 220px;
  overflow: hidden;
}

.page-shop .product-image img {
  max-width: 100%;
  max-height: 100%;
  /* contain, not cover — the tile height is fixed, so `cover` would crop a tall
     upload. `contain` letterboxes it instead, whatever size gets uploaded. */
  object-fit: contain;
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

.page-shop .product-info {
  padding: 12px;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* index.css sets a global `.rating { margin-top: 1rem }` for the home-page cards.
   The shop card is tighter, so cancel it here rather than scoping index.css. */
.page-shop .rating {
  color: var(--primary_color);
  font-size: 13px;
  margin-top: 0;
}

.page-shop .product-title {
  font-size: 14px;
  font-weight: 700;
  margin: 8px 0;
  line-height: 1.4;
}

.page-shop .price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}

.page-shop .old-price {
  color: #888;
  text-decoration: line-through;
  font-size: 13px;
}

.page-shop .new-price {
  color: #001430;
  font-size: 14px;
  font-weight: 700;
}

.page-shop .card-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
}

.page-shop .cart-btn {
  width: 100%;
  border-radius: 50px;
  border: none;
  font-weight: 500;
  background: rgba(171, 45, 114, 0.12);
  color: #ab2d72;
  cursor: pointer;
  transition: 0.3s;
  font-size: 0.82rem;
  font-size: 14px;
  /* font-weight: 600; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  padding: 11px;
  text-decoration: none;
}

.page-shop .cart-btn:hover {
  background: var(--primary_color);
  color: #fff;
}

/* Reset the dashboard .pagination band — shop pager sits directly on the page. */
.page-shop .pagination {
  margin: 32px 0 8px;
  padding: 0;
  background: none;
  border-top: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-shop .page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1;
  text-decoration: none;
}

.page-shop .page-btn.active,
.page-shop .page-btn:hover {
  background: var(--primary_color);
  color: #fff;
  border-color: var(--primary_color);
}

.page-shop .page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 38px;
  color: #9ca3af;
  font-weight: 600;
  line-height: 1;
}

.breadcrumb a:hover {
  color: var(--pink-dark);
}

/* ==========================================================================
   Shipping & delivery
   ========================================================================== */

body.page-shipping {
  /* Scoped to checkout only — the same token is the yellow everywhere else. */
  --primary_color: #ab2d72;
  --secondary_color: #ab2d72;

  background: var(--white_color);
  color: #001430;
}

/* Direct child only. header.php wraps each of its three rows in a `.container`
   too, and a descendant selector put 56px of padding under every one of them —
   which is the gap that opened up between the topbar, the logo row and the nav. */
body.page-shipping > .container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  /* Bottom padding keeps the feature strip from sitting flush against the footer. */
  padding: 0 16px 56px;
}

.page-shipping label {
  margin-bottom: 0 !important;
}
/* `.phone-row`, `.phone-code` and `.country-group` are all redefined further down
   (90px columns / 10px gap / max-width 100%); these copies never applied. */

.page-shipping .top-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 18px;
}

.page-shipping .title h1 {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 8px;
  font-weight: 700;
}

.page-shipping .title p {
  color: #6f7685;
  font-size: 16px;
}

.page-shipping .steps {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  flex-wrap: wrap;
}

.page-shipping .step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #949aa8;
  font-size: 13px;
}
.page-shipping .step span {
  font-size: 14px;
}
.page-shipping .step.active {
  color: #23272f;
}

.page-shipping .step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid #e1e4ea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  background: #fff;
  flex-shrink: 0;
}

.page-shipping .step.active .step-circle {
  background: var(--pink-dark);
  border-color: var(--pink-dark);
  color: #fff;
}

.page-shipping .line {
  width: 30px;
  height: 1px;
  background-color: #949aa8;
}

.page-shipping .checkout-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
  gap: 20px;
  align-items: start;
}

/* Flat white on a white page, with a nearly invisible grey border and a shadow
   you had to look for — the card had no edge at all. It now sits on a warm
   plum-tinted wash inside a plum hairline, and the shadow is two layers: a
   tight one for the edge, a wide soft one for the lift. */
.page-shipping .card {
  position: relative;
  background:
    radial-gradient(520px 300px at 100% 0%, rgba(252, 198, 3, 0.10), transparent 70%),
    radial-gradient(460px 320px at 0% 100%, rgba(232, 62, 140, 0.09), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fdf4f9 100%);
  border-radius: 22px;
  padding: 28px 28px 24px;
  border: 1px solid #f4dfec;
  box-shadow:
    0 1px 2px rgba(94, 16, 57, 0.05),
    0 20px 44px -20px rgba(94, 16, 57, 0.26);
}

/* ===== Shipping card header band =========================================
   Two earlier attempts put the teddy behind the card — as a watermark the
   opaque fields sliced it up, and peeking over the top edge it kept meeting
   the checkout step chips at narrower widths. Inside a coloured band of its
   own it has somewhere to live at every width, and the form gets a front door
   instead of opening on a bare heading. */
.page-shipping .shipping-card {
  overflow: hidden;
}

.page-shipping .ship-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Full bleed inside the card's padding. */
  margin: -28px -28px 26px;
  padding: 20px 28px;
  background:
    radial-gradient(320px 160px at 88% 120%, rgba(252, 198, 3, 0.30), transparent 70%),
    linear-gradient(120deg, #8a2159 0%, #ab2d72 52%, #e83e8c 100%);
  color: #fff;
}

.page-shipping .ship-head h2 {
  margin: 0;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}

.page-shipping .ship-head p {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.82);
}

.page-shipping .ship-head__teddy {
  flex: 0 0 auto;
  width: 86px;
  height: 90px;
  background: url("../images/illustrations/teddy.svg") center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(60, 8, 34, 0.35));
  animation: ck-bob 3.4s ease-in-out infinite;
}

/* A slow float — enough to catch the eye once, not enough to nag. */
@keyframes ck-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-7px) rotate(2deg); }
}

@media (max-width: 575px) {
  .page-shipping .ship-head__teddy {
    width: 62px;
    height: 66px;
  }
}

/* Direct child only. `.ship-head h2` and `.summary-top h2` both set margin 0,
   but they match at the same specificity and sit earlier in the file, so this
   rule was quietly winning and opening a gap under the band's title. The two
   nested headings own their own spacing; the bare h2 on checkout.php and
   payment.php still needs this. */
.page-shipping .card > h2 {
  font-size: 23px;
  margin-bottom: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Labels were the same weight and near the same size as the values inside the
   fields, so the eye had no order to follow down the column. */
.page-shipping .form-grid label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #4a3b45;
  margin-bottom: 7px;
}

.page-shipping .form-grid .input-group {
  display: block;
  width: 100%;
  margin-bottom: 18px;
}

/* ===== Entrance ==========================================================
   The groups fade up in order rather than all appearing at once, which reads
   as the form assembling itself and gives the eye a path down the column.
   Runs once on load; nth-of-type covers the eleven groups, anything past that
   simply starts visible. */
@keyframes ck-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.page-shipping .form-grid .input-group,
.page-shipping .form-section,
.page-shipping .checkbox,
.page-shipping .continue-btn {
  animation: ck-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-shipping .form-grid > *:nth-of-type(1)  { animation-delay: 0.02s; }
.page-shipping .form-grid > *:nth-of-type(2)  { animation-delay: 0.06s; }
.page-shipping .form-grid > *:nth-of-type(3)  { animation-delay: 0.10s; }
.page-shipping .form-grid > *:nth-of-type(4)  { animation-delay: 0.14s; }
.page-shipping .form-grid > *:nth-of-type(5)  { animation-delay: 0.18s; }
.page-shipping .form-grid > *:nth-of-type(6)  { animation-delay: 0.22s; }
.page-shipping .form-grid > *:nth-of-type(7)  { animation-delay: 0.26s; }
.page-shipping .form-grid > *:nth-of-type(8)  { animation-delay: 0.30s; }
.page-shipping .form-grid > *:nth-of-type(9)  { animation-delay: 0.34s; }
.page-shipping .form-grid > *:nth-of-type(10) { animation-delay: 0.38s; }
.page-shipping .form-grid > *:nth-of-type(n + 11) { animation-delay: 0.42s; }

/* ===== Field motion ======================================================
   The active field lifts off the card by a pixel and its icon grows a touch,
   so the one you are typing in is unmistakable without a colour change doing
   all the work. */
.checkout-wrapper .field {
  transition: transform 0.18s ease;
}

.checkout-wrapper .field:focus-within {
  transform: translateY(-1px);
}

.checkout-wrapper .field:focus-within > i {
  transform: scale(1.12);
}

.checkout-wrapper .field > i {
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* A filled field settles into a plum-tinted border and a plum icon, so the
   form shows its own progress as you go. :has lets the icon react to the
   input that follows it; where it is unsupported the field simply stays
   neutral until focused. */
.checkout-wrapper .field:has(input:not(:placeholder-shown)) > i,
.checkout-wrapper .field:has(select:valid) > i {
  color: #ab2d72;
}

.checkout-wrapper .field input:not(:placeholder-shown),
.checkout-wrapper .field select:valid {
  border-color: #e6c7db;
}

/* ===== Reduced motion ====================================================
   Everything above is decoration. Someone who has asked the OS for less of it
   gets the finished state immediately. */
@media (prefers-reduced-motion: reduce) {
  .page-shipping .form-grid .input-group,
  .page-shipping .form-section,
  .page-shipping .checkbox,
  .page-shipping .continue-btn,
  .page-shipping .ship-head__teddy {
    animation: none;
  }

  .checkout-wrapper .field,
  .checkout-wrapper .field > i,
  .page-shipping .delivery-card,
  .page-shipping .continue-btn {
    transition: none;
  }
}

/* Two columns, not three. At three, "Full Name + Phone" left a third of the
   row empty and Country sat alone with two empty cells beside it. Every row
   now either fills the width or splits it in half. */
.page-shipping .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  align-items: start;
}

/* Group heading. Not a fieldset legend because the grid is the layout and a
   legend cannot be a grid item in every browser. */
.page-shipping .form-section {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 16px;
  padding-bottom: 11px;
  border-bottom: 1.5px solid #f1ecf3;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ab2d72;
}

/* The first group sits right under the card title, which already has margin. */
.page-shipping .form-section:first-of-type {
  margin-top: 0;
}

/* Jumped to by "Change" beside Billed to on payment.php. The site's header is
   sticky, so a bare anchor parks the heading underneath it and the customer
   lands looking at the field below the one they came for. */
.page-shipping .form-section[id] {
  scroll-margin-top: 120px;
}

.page-shipping .form-section i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ab2d72, #e83e8c);
  color: #fff;
  font-size: 12px;
  box-shadow: 0 3px 8px rgba(171, 45, 114, 0.28);
}

.page-shipping .full {
  display: flex;
  /* flex-direction: column; */
  grid-column: 1 / -1;
}

/* Ink on a dark-blue token read as part of the label. An asterisk is a warning
   mark; it should look like one. */
.page-shipping .required {
  color: #e5484d;
  font-weight: 700;
}

.page-shipping .phone-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
}

/* The code select is its own leading element, so it keeps the plain padding
   the .field rule would otherwise push in. */
.checkout-wrapper .input-group .phone-row .field input {
  padding-left: 44px;
}

/* The shared select rule gives every field 20px of side padding and parks the
   arrow 18px in from the right. In a 90px box that leaves the code nowhere to
   sit, so "+91" came out clipped. Narrower padding, arrow pulled in, and a few
   more pixels of column. */
.page-shipping .phone-row { grid-template-columns: 104px 1fr; }

.checkout-wrapper .input-group select.phone-code {
  text-align: center;
  text-align-last: center;
  padding: 0 26px 0 10px;
  background-position: right 9px center;
}

.page-shipping .country-group {
  max-width: 100%;
}

.page-shipping .delivery-options {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}

.page-shipping .delivery-card {
  border: 1.5px solid #ece7ee;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 12px;
  /* Lifts on hover and settles when picked, so choosing one feels like
     pressing something rather than toggling a hidden radio. */
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  background: #fff;
  box-shadow: 0 1px 2px rgba(94, 16, 57, 0.04);
}

.page-shipping .delivery-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(94, 16, 57, 0.30);
}

.page-shipping .delivery-card.active {
  box-shadow: 0 8px 18px -10px rgba(94, 16, 57, 0.34);
}

.page-shipping .delivery-card .delivery-icon {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.page-shipping .delivery-card:hover .delivery-icon,
.page-shipping .delivery-card.active .delivery-icon {
  transform: scale(1.1) rotate(-6deg);
}

.page-shipping .delivery-card:hover {
  border-color: #cfd2d9;
}

.page-shipping .delivery-card.active {
  /* Not var(--pink-dark): that token is #001430, a near-black. A black outline
     around a plum-filled card looked like a focus ring left behind. */
  border-color: #ab2d72;
  background: rgba(171, 45, 114, 0.10);
}

/* Card and UPI while config/razorpay.php has no keys: visible so the customer
   knows they are coming, but not selectable, because there is nothing behind
   them to take the money. */
.page-shipping .delivery-card.is-off {
  opacity: 0.55;
  cursor: not-allowed;
  background: #fafbfc;
}

.page-shipping .delivery-card.is-off:hover { border-color: #ece7ee; }

.page-shipping .delivery-price.soon {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #8b96a5;
  background: #eef0f4;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Payment failures — the gateway's own message lands here. */
.page-shipping .pay-error {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: #ffeaf2;
  border: 1px solid #f7c4da;
  color: #a82a64;
  font-size: 14px;
  line-height: 1.55;
}

.page-shipping .pay-error i { margin-top: 2px; }

.page-shipping .continue-btn:disabled { opacity: 0.7; cursor: progress; }

.page-shipping .delivery-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #d6d8de;
  flex-shrink: 0;
  position: relative;
}

.page-shipping .delivery-card.active .delivery-radio {
  border-color: #ab2d72;
}

.page-shipping .delivery-card.active .delivery-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #ab2d72;
}

.page-shipping .delivery-left {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.page-shipping .delivery-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(171, 45, 114, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ab2d72;
  flex-shrink: 0;
}

.page-shipping .delivery-info h4 {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}

.page-shipping .delivery-info p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0;
}

.page-shipping .delivery-price {
  font-weight: 700;
  color: var(--pink-dark);
  font-size: 15px;
  white-space: nowrap;
}

.page-shipping .delivery-price.free {
  color: #001430;
}

.page-shipping .checkbox {
  /* margin-top: 4px; */
  display: flex;
  align-items: center;
  /* justify-content: center; */
  gap: 10px;
  color: #5f6776;
  font-size: 13px;
}

.page-shipping .checkbox input {
  width: 16px;
  height: 16px;
  accent-color: #ab2d72;
}

.page-shipping .checkbox label .hint { display: block; color: #9aa3b0; font-size: 12.5px; font-weight: 500; }

/* --- billing address ------------------------------------------------------
   Its own section in the same grid as the delivery one, not a panel hidden
   behind a checkbox: both addresses belong on screen, because the parcel goes
   to one and the invoice carries the other. */
.page-shipping .bill-same {
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: 14px;
  background: #fdf4f9;
  border: 1.5px solid #f6e3ef;
}

.page-shipping .bill-same input { margin-top: 2px; }
.page-shipping .bill-same label { cursor: pointer; font-weight: 700; color: #26202a; }

/* A field being copied from above rather than typed. Readonly, not disabled:
   disabled fields are skipped by the browser's own submit, and reading grey on
   grey is how a customer decides the form is broken. */
/* The input carries the border and the background on this form, not the
   wrapper — so the mirrored look has to go on the input itself or a white box
   sits on top of the tint. */
.page-shipping .input-group.is-mirrored input {
  background: #f7f5f8;
  border-style: dashed;
  color: #7b8393;
  cursor: default;
  box-shadow: none;
}

.page-shipping .input-group.is-mirrored .field > i { color: #c2b6bd; }
.page-shipping .input-group.is-mirrored label { color: #8b7f88; }

.page-shipping .continue-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 10px;
  height: 54px;
  padding: 0 20px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(120deg, #8a2159, #ab2d72 55%, #e83e8c);
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 10px 22px -10px rgba(94, 16, 57, 0.55);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* A light sweeping across the button on hover. Purely a hover affordance —
   the button is already the only filled element on the card. */
.page-shipping .continue-btn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
}

.page-shipping .continue-btn:hover::before {
  left: 120%;
}

.page-shipping .continue-btn .continue-arrow {
  transition: transform 0.22s ease;
}

.page-shipping .continue-btn:hover .continue-arrow {
  transform: translateX(5px);
}

.page-shipping .continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -12px rgba(94, 16, 57, 0.6);
}

.page-shipping .continue-btn:active {
  transform: translateY(0);
}

.page-shipping .continue-arrow {
  font-size: 16px;
  line-height: 1;
  margin-left: auto;
}

.page-shipping .secure-text {
  /* display: flex; */
  text-align: center;
  /* align-items: center; */
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Order summary (shipping, payment and checkout all render under .page-shipping)

   The card follows you down the page, the photos sit on the same tinted tile
   the product cards use, and the quantity is a badge on the tile rather than a
   line of grey text — which frees the second line for the unit price, the thing
   a customer actually wants when the quantity is more than one.
   -------------------------------------------------------------------------- */

.page-shipping .summary-card {
  position: sticky;
  top: 18px;
  border-radius: 20px;
  padding: 22px;
}

.page-shipping .summary-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 2px dashed #eceff4;
}

.page-shipping .summary-top h2 {
  font-family: var(--font);
  font-size: 21px;
  font-weight: 800;
  color: #001430;
  margin: 0;
}

.page-shipping .summary-top a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1.5px solid #f4d5e6;
  background: #fffafc;
  text-decoration: none;
  color: #8a2159;
  font-weight: 700;
  font-size: 12.5px;
  transition: 0.2s;
}

.page-shipping .summary-top a:hover {
  border-color: var(--primary_color);
  background: var(--primary_color);
  color: #fff;
}

/* --- items ---------------------------------------------------------------- */

/* A long cart shouldn't push the total off the screen; past about four items
   the list scrolls inside the card instead. */
.page-shipping .summary-card .product:first-of-type { margin-top: 0; }

.page-shipping .product {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px solid #f4f6f9;
}

.page-shipping .product:last-of-type { border-bottom: 0; padding-bottom: 14px; }

.page-shipping .product-left {
  display: flex;
  gap: 13px;
  align-items: center;
  min-width: 0;
}

.page-shipping .product-thumb {
  position: relative;
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  /* Same radial tint the product cards put behind a cut-out. */
  background: radial-gradient(circle at 50% 62%, #fbe4ef 0%, #fff 74%);
  border: 1.5px solid #f2e6c4;
}

/* Fixed box + contain, so a tall photo is shown whole rather than cropped. */
.page-shipping .product-thumb img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 20, 48, 0.16));
}

.page-shipping .product-qty {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: #001430;
  /* Centred by flex, not by line-height - see the note in style.css beside
     .cat-tree__n. `padding-top: .33em` is the ink nudge, in em so it scales
     with whatever font-size this badge is set at. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-top: .33em;

  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 21px;
  text-align: center;
  box-shadow: 0 0 0 2.5px #fff;
}

.page-shipping .product-info { min-width: 0; }

.page-shipping .product-info h4 {
  font-size: 18px;
  margin-bottom: 3px;
  line-height: 1.35;
  font-weight: 700;
  color: #001430;
  /* Two lines then ellipsis, so one long name can't stretch the row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-shipping .product-info p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0;
}

.page-shipping .product-price {
  color: #001430;
  font-weight: 800;
  font-size: 14.5px;
  white-space: nowrap;
}

/* --- totals --------------------------------------------------------------- */

.page-shipping .summary-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #55617a;
  font-size: 14px;
  margin-top: 9px;
}

.page-shipping .summary-line span:last-child { font-weight: 700; color: #001430; }

.page-shipping .summary-line.green span:last-child,
.page-shipping .summary-line .green,
.page-shipping .green {
  color: #1f9e78;
  font-weight: 800;
}

.page-shipping .total {
  border-top: 2px dashed #eceff4;
  padding-top: 16px;
  margin-top: 16px;
  margin-bottom: 18px;
}

.page-shipping .total .summary-line {
  align-items: baseline;
  margin: 0;
}

.page-shipping .total strong {
  font-size: 18px;
  color: #001430;
}

.page-shipping .total h2 {
  font-family: var(--font);
  color: #001430;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0;
}

.page-shipping .tax-note {
  text-align: right;
  color: #969cab;
  font-size: 14px;
  margin-top: 4px;
}

/* --- reassurance ---------------------------------------------------------- */

.page-shipping .secure-box {
  background: #fdeef6;
  border: 1px solid #f4d5e6;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.page-shipping .secure-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--primary_color);
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

.page-shipping .secure-box h4 {
  font-size: 16px;
  margin-bottom: 3px;
  font-weight: 700;
  color: #001430;
}

.page-shipping .secure-box p {
  font-size: 14px;
  color: #7a5f6d;
  line-height: 1.45;
  margin-bottom: 0;
}

.page-shipping .checkout-features {
  margin-top: 28px;
  background: rgba(171, 45, 114, 0.07);
  border-radius: 16px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  text-align: center;
  border: 1px solid var(--bg_soft);
}

.page-shipping .feature-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--pink-dark);
}

.page-shipping .pink,
.page-shipping .green-bg,
.page-shipping .blue {
  background: rgba(171, 45, 114, 0.12);
}

.page-shipping .checkout-features h4 {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}

.page-shipping .checkout-features p {
  color: var(--muted);
  font-size: 12px;
}
/* ===== Contact page  ===== */
.page-contact {
  background: #f6f6f8;
}
body.page-contact > .container {
  padding-top: 18px;
  padding-bottom: 44px;
}

.page-contact .page-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 28px;
}
.page-contact .page-head h1 {
  font-family: var(--font);
  font-size: 34px;
  font-weight: 800;
  color: #001430;
  margin-bottom: 6px;
}
.page-contact .page-head p {
  color: #7a8290;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.page-contact .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 22px;
  align-items: start;
}
.page-contact .card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  padding: 26px;
}
.page-contact .card h2 {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  color: #232a34;
  margin-bottom: 16px;
}

.page-contact .info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #f1f1f4;
}
.page-contact .info-item:last-of-type {
  border-bottom: 0;
}
.page-contact .info-ic {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fdeef6;
  color: #ab2d72;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.page-contact .info-item h4 {
  font-size: 15px;
  font-weight: 700;
  color: #232a34;
  margin: 2px 0 3px;
}
.page-contact .info-item p,.page-contact .info-item p a {
  font-size: 14px;
  color: #7a8290;
  margin: 0;
  line-height: 1.6;
}

.page-contact .socials {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.page-contact .socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fdeef6;
  color: #ab2d72;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: 0.2s;
}
.page-contact .socials a:hover {
  background: #ab2d72;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(171, 45, 114, 0.32);
}

.page-contact .field {
  margin-bottom: 16px;
}
.page-contact .field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #232a34;
  margin-bottom: 7px;
}
.page-contact .field input,
.page-contact .field textarea {
  width: 100%;
  border: 1px solid #e6e6ee;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: #232a34;
  background: #fbfbfd;
  transition: 0.2s;
}
.page-contact .field input:focus,
.page-contact .field textarea:focus {
  outline: none;
  border-color: #ab2d72;
  box-shadow: 0 0 0 3px rgba(171, 45, 114, 0.16);
  background: #fff;
}
.page-contact .field textarea {
  min-height: 130px;
  resize: vertical;
}
.page-contact .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.page-contact .send-btn {
  width: 100%;
  border: none;
  cursor: pointer;
  background: #ab2d72;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: 0.2s;
  font-family: var(--font);
}
.page-contact .send-btn:hover {
  background: #8a2159;
  box-shadow: 0 6px 16px rgba(171, 45, 114, 0.35);
}
/* ===== Terms & Conditions */
.page-terms {
  background: #fafafb;
}
body.page-terms > .container {
  padding-top: 16px;
  padding-bottom: 56px;
}
.page-terms .wrap {
  max-width: 720px;
  margin: 0 auto;
}

.page-terms .head {
  margin-bottom: 22px;
}
.page-terms .head h1 {
  font-family: var(--font);
  font-size: 30px;
  font-weight: 800;
  color: #1a1f2b;
  letter-spacing: -0.4px;
  margin: 0 0 6px;
}
.page-terms .head .meta {
  font-size: 13px;
  color: #9aa0ab;
}
.page-terms .head .meta b {
  color: #6b7280;
  font-weight: 600;
}

/* Accordion */
.page-terms .acc {
  background: #fff;
  border: 1px solid #ececf0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.page-terms .acc-item + .acc-item {
  border-top: 1px solid #f0f0f3;
}
.page-terms .acc-head {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 20px;
  text-align: left;
  transition: background 0.15s;
}
.page-terms .acc-head:hover {
  background: #fdf4f8;
}
.page-terms .acc-head:focus {
  outline: none;
}
.page-terms .acc-head:focus-visible {
  outline: 2px solid #ab2d72;
  outline-offset: -2px;
}
.page-terms .acc-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 700;
  color: #1f2533;
  letter-spacing: -0.2px;
}
.page-terms .acc-title .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #fbdcea;
  color: #8a2159;
  font-weight: 700;
  font-size: 12px;
  flex: 0 0 auto;
  transition: 0.2s;
}
.page-terms .acc-chev {
  color: #b0b6c0;
  font-size: 13px;
  transition: transform 0.28s ease;
  flex: 0 0 auto;
}
.page-terms .acc-item.open .acc-head {
  background: #fdeef6;
  box-shadow: inset 3px 0 0 #ab2d72;
}
.page-terms .acc-item.open .acc-chev {
  transform: rotate(180deg);
  color: #d39a00;
}
.page-terms .acc-item.open .acc-title .n {
  background: #ab2d72;
  color: #fff;
}

/* smooth collapse via grid-rows trick (auto-height, resize-safe) */
.page-terms .acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.page-terms .acc-item.open .acc-body {
  grid-template-rows: 1fr;
}
.page-terms .acc-body > .acc-inner {
  overflow: hidden;
}
.page-terms .acc-inner p,
.page-terms .acc-inner li {
  color: #5b6473;
  font-size: 14.5px;
  line-height: 1.8;
  margin: 0;
}
.page-terms .acc-inner > div {
  padding: 0 20px 20px 48px;
}
.page-terms .acc-inner ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.page-terms .acc-inner li {
  margin-bottom: 4px;
}
.page-terms .acc-inner a {
  color: #b98a00;
  font-weight: 600;
}
.page-terms .acc-inner a:hover {
  text-decoration: underline;
}

.page-terms .foot-note {
  color: #aab0ba;
  font-size: 12.5px;
  margin-top: 22px;
  text-align: center;
}
/* ===== Product details ===== */
body.page-product {
  background: #fff;
  font-family: var(--font);
  color: #001430;
}
body.page-product > .container {
  max-width: 1320px;
  margin: auto;
  padding-bottom: 56px;
}
.page-product a {
  text-decoration: none;
}

/* The mobile bottom dock lives in assets/css/chrome.css, which owns the footer.
   The copy that used to sit here is what kept the old cream bar alive: its
   `#ffe99b` and `color: #000` tied with chrome.css on specificity, and
   `span.fa { color: #000 }` outranked it outright — so the icons stayed black
   no matter what chrome.css said. */

@media (max-width: 1580px) {
  .page-dashboard .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1300px) {
  .form-wrapper .tab-btn {
    font-size: 14px;
  }
  .form-wrapper .submit-btn {
    font-size: 15px;
  }
  .form-wrapper .heading h2 {
    font-size: 26px !important;
  }
  .form .input-group label {
    font-size: 14px;
  }
  .form .input-group .input-box,
  form .input-group input {
    font-size: 13px;
  }
  .form-wrapper .heading p {
    font-size: 15px !important;
  }

  .dashboard-section.active#accountSection {
    grid-template-columns: 1fr;
  }
  .page-dashboard .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
}

@media (max-width: 1100px) {
  .page-shipping .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-shipping .delivery-options {
    grid-template-columns: 1fr;
  }

  .page-shipping .checkout-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1000px) {
  .main-wrapper {
    width: 100%;
  }
  .page-shipping .title h1 {
    font-size: 24px;
  }

  .theme-btn {
    font-size: 14px;
  }
  .input-group input,
  .input-group textarea,
  .input-group select {
    font-size: 14px;
  }

  .input-group label {
    font-size: 14px;
  }
  .page-dashboard .dashboard {
    grid-template-columns: 1fr;
  }

  .page-dashboard .sidebar {
    display: none;
    min-height: auto;
  }

  .page-dashboard.sidebar-open-mobile .sidebar {
    display: block;
    position: fixed;
    left: 16px;
    top: 16px;
    width: min(280px, calc(100vw - 32px));
    height: calc(100vh - 32px);
    z-index: 200;
  }

  .page-shipping .checkout-wrapper {
    grid-template-columns: 1fr;
  }

  .page-shipping .checkout-features {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-shipping .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .page-contact .contact-grid {
    grid-template-columns: 1fr;
  }

  .main-wrapper {
    flex-direction: column;
    height: unset;
    max-width: calc(100% - 32px);
    /* padding: 0; */
  }

  .main-wrapper .left-side,
  .main-wrapper .right-side {
    width: 100%;
  }
  .main-wrapper .right-side {
    padding: 2rem;
  }
}

@media (max-width: 900px) {

  .page-shipping .checkout-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-shipping .card {
    padding: 18px;
  }

  .page-shipping .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 768px) {
    .navbar-nav li a i {
        margin-right: 0;
      }
      .navbar-nav li a {
        font-size: 14px;
      }
      /* .sinPro width removed — .allProduct is a grid now and owns the column
         count at every breakpoint. A width here would size the card inside its
         track instead of filling it. */
  .right-side {
    padding: 30px 20px;
  }

  .password-row {
    grid-template-columns: 1fr;
  }

  .social-buttons {
    grid-template-columns: 1fr;
  }

  .heading h2 {
    font-size: 28px;
  }

  .left-content h1 {
    font-size: 34px;
  }

  .notification-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .notification-more {
    opacity: 1;
  }

  .notification-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .dashboard-section .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .dashboard-section .table-actions {
    flex-direction: column;
    width: 100%;
  }

  .search-box {
    width: 100%;
  }

  .search-box input {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .form-wrapper .checkbox {
    align-items: flex-start;
  }

  .main-wrapper .login-options a {
    font-size: 14px;
  }
  .page-dashboard .stat-meta small {
    font-size: 13px;
  }
  .page-dashboard .stat-link {
    font-size: 13px;
  }
  .page-dashboard .stat-card h2 {
    margin-top: 8px;
  }
  .page-dashboard .stat-card {
    align-items: center;
    text-align: center;
  }
  .page-dashboard .stat-top {
    flex-direction: column;
    text-align: center;
  }
  .page-dashboard .stat-top {
    flex-direction: column;
    text-align: center;
  }
  .page-dashboard .stats {
    grid-template-columns: 1fr;
  }
  .page-shop .sidebar {
    position: static;
  }
  .page-shop .shop-wrapper {
    grid-template-columns: 1fr;
  }

  .page-shop .page-title {
    font-size: 1.6rem;
  }

  .page-shop .content-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-shop .shop-tools {
    align-items: flex-start;
  }
}

@media (max-width: 700px) {
  body {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .page-dashboard .hero {
    flex-direction: column;
    text-align: center;
  }

  .page-dashboard .hero img {
    display: none;
  }

  .page-dashboard .hero-text h1 {
    font-size: 26px;
  }

  .page-dashboard .category-card h4 {
    font-size: 12px;
  }
  .page-dashboard .category-card p {
    font-size: 11px;
  }
  .page-dashboard .categories {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-dashboard .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-dashboard .offer {
    flex-direction: column;
    text-align: center;
  }

  .page-dashboard .offer-deco {
    margin-top: 10px;
  }

  .page-dashboard .topbar {
    flex-direction: column;
  }

  /* Compact dashboard topbar stays a single left-aligned row */
  .page-dashboard .topbar--compact {
    flex-direction: row;
    align-items: center;
  }

  /* Compact sidebar menu on phones */
  .page-dashboard .menu {
    gap: 2px;
  }

  .page-dashboard .menu a,
  .page-dashboard .sidebar-logout {
    padding: 8px 12px;
    font-size: 13px;
    gap: 10px;
  }

  .page-dashboard .menu i,
  .page-dashboard .sidebar-logout i {
    width: 18px;
  }

  body.page-shipping > .container {
    padding: 0 16px 36px;
  }

  .page-shipping .form-grid,
  .page-shipping .delivery-options,
  .page-shipping .checkout-features {
    grid-template-columns: 1fr;
  }

  .page-shipping .phone-row {
    grid-template-columns: 96px 1fr;
  }

  .page-shipping .top-section {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 18px;
  }

  .page-shipping .steps {
    flex-wrap: wrap;
    gap: 8px;
  }

  .page-shipping .title p {
    font-size: 14px;
  }

  .page-shipping .step span:not(.step-circle) {
    display: none;
  }

  .page-shipping .card {
    padding: 16px;
    border-radius: 14px;
  }

  .page-shipping .card h2 {
    margin-bottom: 14px;
  }

  .page-shipping .continue-btn {
    height: 46px;
    font-size: 14px;
  }

  .page-shipping .checkout-features {
    padding: 18px 16px;
    gap: 16px;
  }

  .page-shipping .total h2 {
    font-size: 20px;
  }
}

@media (max-width: 576px) {
   .sinPro .secend_card {
        top: 100px !important;
      }

  .page-dashboard.sidebar-open-mobile .sidebar {
    top: 155px;
    bottom: auto;
    height: auto;
    max-height: calc(100vh - 245px);
    min-height: 0;
    overflow-y: auto;
  }

  /* .page-dashboard .brand-logo, */
  /* .page-dashboard .sidebar-mascot { */
  /* display: none; */
  /* } */

  .page-dashboard .sidebar-inner {
    height: auto;
    min-height: auto;
  }

  .page-dashboard .menu {
    flex: 0 0 auto;
  }

  .page-shipping .card {
    padding: 14px;
  }

  .page-dashboard .brand-logo__img,
  .page-dashboard .sidebar-mascot img {
    width: 70px;
    height: 70px;
  }

  .page-shipping .delivery-card {
    padding: 12px;
  }

  .page-shipping .delivery-icon {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  .page-shipping .delivery-info h4 {
    font-size: 13px;
  }

  .page-shipping .delivery-info p {
    font-size: 11px;
  }

  .page-shipping .product-thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }

  .page-shipping .product-qty {
    min-width: 19px;
    height: 19px;
    line-height: 19px;
    font-size: 11px;
  }

  .page-shipping .product-info h4 {
    font-size: 13px;
  }

  .page-shipping .summary-line {
    font-size: 12px;
  }

  .page-shipping .total h2 {
    font-size: 18px;
  }

  .page-shipping .checkout-features {
    grid-template-columns: 1fr 1fr;
    padding: 16px 12px;
    gap: 12px;
  }

  .page-shipping .feature-icon {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  .page-shipping .continue-btn {
    font-size: 14px;
    padding: 0 14px;
  }

  .notification-body {
    padding: 16px;
  }

  .notification-content {
    padding: 18px;
  }

  .notification-left {
    align-items: flex-start;
  }

  .notification-header h3 {
    font-size: 20px;
  }

  .table-wrapper .table-scroll {
    overflow-x: auto;
  }

  /* Seven columns rather than five since the product and tracking cells
     arrived, so the phone scroller needs more room than it used to. */
  .table-wrapper > .table-scroll > table {
    min-width: 860px;
  }
  .page-contact .page-head h1 {
    font-size: 26px;
  }
  .page-contact .card {
    padding: 18px;
  }
  .page-contact .row2 {
    grid-template-columns: 1fr;
  }
  .page-terms .head h1 {
    font-size: 25px;
  }
  .page-terms .acc-head {
    padding: 15px 16px;
  }
  .page-terms .acc-inner > div {
    padding: 0 16px 18px 44px;
  }
}
@media (max-width: 360px) {
}

/* ===== About Us =========================================================
   Reuses the contact page's card chrome. Two differences: the wide column is
   the prose one here (contact puts the wide column second, for its form), and
   the business-identity table needs label/value rows that stay readable when
   a registered name wraps.
   ======================================================================== */
.page-about .contact-grid {
  grid-template-columns: 1.35fr 1fr;
}
.page-about .card p,
.page-about .card ul {
  color: #5c6470;
  font-size: 15px;
  line-height: 1.75;
}
.page-about .card ul {
  padding-left: 20px;
  margin-bottom: 0;
}
.page-about .card ul li {
  margin-bottom: 8px;
}
.page-about .card a {
  color: #ab2d72;
  font-weight: 600;
}

.page-about .legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.page-about .legal-table th,
.page-about .legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 0;
  border-bottom: 1px solid #f1f1f4;
  line-height: 1.6;
}
.page-about .legal-table th {
  width: 42%;
  padding-right: 14px;
  font-weight: 600;
  color: #7a8290;
  white-space: normal;
}
.page-about .legal-table td {
  color: #232a34;
  font-weight: 600;
  /* Registered names and GSTINs are long single tokens; without this they push
     the table wider than the card on narrow screens. */
  overflow-wrap: anywhere;
}
.page-about .legal-table tr:last-child th,
.page-about .legal-table tr:last-child td {
  border-bottom: 0;
}

.page-about .policy-links {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 0;
}
.page-about .policy-links li {
  margin-bottom: 0;
}
.page-about .policy-links a {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fdeef6;
  color: #ab2d72;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.page-about .policy-links a:hover {
  background: #ab2d72;
  color: #fff;
}

@media (max-width: 991px) {
  .page-about .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Desktop reading size — contact page
   --------------------------------------------------------------------------
   From the xl breakpoint up. "Our Store" / "Call Us" / "Email Us" go to 18px
   so the four info rows keep a step over the detail lines under them, which
   are now 16px alongside the form labels and the submit button.
   ========================================================================== */
@media (min-width: 1200px) {

  .page-contact .info-item h4 { font-size: 18px; }

  .page-contact .info-item p,
  .page-contact .info-item p a { font-size: 16px; }

  .page-contact .field label { font-size: 16px; }

  .page-contact .send-btn { font-size: 16px; }
}


/* ==========================================================================
   Order reference, stars and reviews

   Deliberately last in the file. `.dashboard-form .input-group label` further
   up styles every label in the dashboard panels — block, 14px, ink — and the
   star picker and the photo drop zone are labels too. Their rules have exactly
   the same specificity, so the only thing that decides the tie is which comes
   later. Moving these up would silently turn the stars back into a column of
   small dark glyphs.
   ========================================================================== */

/* A number people read out over the phone, set like one: mono digits on a
   tint, zero-padded so a column of them lines up. "#ORD3" as bold body text
   looked like a typo in the middle of a sentence. */
.order-ref,
.order-ref:link,
.order-ref:visited {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 5px 10px;
  border-radius: 9px;
  background: #f6eef3;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}

.order-ref span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #b98ba9;
}

.order-ref b {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #26202a;
}

.order-ref:hover { background: #ab2d72; }
.order-ref:hover span { color: #f0c4dd; }
.order-ref:hover b { color: #fff; }

.table-wrapper .col-orderid { white-space: nowrap; }

/* ==========================================================================
   Stars — shared by the review form, the customer's own list and the shop
   ========================================================================== */

.rv-stars, .pd-revstars { display: inline-flex; gap: 2px; line-height: 1; }
.rv-stars i, .pd-revstars i { font-style: normal; font-size: 14px; }
.rv-stars i.on, .pd-revstars i.on { color: #fcc603; }
.rv-stars i.off, .pd-revstars i.off { color: #e6dce2; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Writing a review — dashboard
   ========================================================================== */

.rv-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 15px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
}

.rv-notice--ok  { background: #e7f7ee; border: 1px solid #b9e5d3; color: #14654a; }
.rv-notice--bad { background: #fff0f0; border: 1px solid #ffc9c9; color: #a92222; }
.rv-notice i { margin-top: 2px; }

.rv-hint { font-weight: 500; color: #9aa3b0; font-size: 12.5px; }

/* --- the star picker ------------------------------------------------------
   Radios written 5 → 1 so `~` can light every star to the LEFT of the hovered
   one; row-reverse then puts them back in reading order on screen. This is the
   whole trick, and it is why the markup order looks backwards. */
.rv-rate {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.rv-rate input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Scoped through .dashboard-form because `.dashboard-form .input-group label`
   already styles every label in this panel — block, 14px, ink — and would
   otherwise win on specificity and turn the star picker back into a column of
   small dark glyphs. */
.dashboard-form .rv-rate label {
  display: inline-block;
  margin: 0;
  padding: 2px;
  font-size: 26px;
  line-height: 1;
  color: #e6dce2;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}

.dashboard-form .rv-rate label:hover,
.dashboard-form .rv-rate label:hover ~ label,
.dashboard-form .rv-rate input:checked ~ label { color: #fcc603; }

.dashboard-form .rv-rate label:hover { transform: scale(1.12); }
.dashboard-form .rv-rate input:focus-visible + label { outline: 3px solid #ab2d72; outline-offset: 3px; border-radius: 6px; }

/* Sits after the stars in the DOM, so row-reverse puts it on the far right. */
.rv-rate__word {
  order: -1;
  margin-left: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ab2d72;
}

/* --- the photo drop zone -------------------------------------------------- */

/* `label.rv-drop`, not `.rv-drop`: the rule this has to beat is
   `.dashboard-form .input-group label`, and a type selector counts — without
   the `label` here this loses the tie and the drop zone renders as a block,
   with its icon, text and button all on one line. */
.dashboard-form label.rv-drop,
.rv-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 20px;
  border: 2px dashed #e8d7e3;
  border-radius: 18px;
  background: #fdf9fb;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}

.rv-drop:hover,
.rv-drop.is-over { border-color: #ab2d72; background: #fdf4f9; }

.rv-drop > i { font-size: 26px; color: #ab2d72; margin-bottom: 4px; }
.dashboard-form .rv-drop b { font-size: 15px; font-weight: 700; color: #26202a; margin: 0; }
.rv-drop small { max-width: 46ch; font-size: 12.5px; line-height: 1.55; color: #8b7f88; }

.rv-drop__btn {
  margin-top: 10px;
  padding: 8px 20px;
  border-radius: 999px;
  background: #ab2d72;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

/* Once photos are picked the zone shrinks — the thumbnails below are the
   subject now, and a 150px dashed box above them is just noise. */
.rv-drop.has-files { padding: 14px; }
.rv-drop.has-files > i, .rv-drop.has-files small { display: none; }
.rv-drop.has-files b { font-size: 13.5px; }

.rv-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.rv-thumb {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: #f6eef3;
}

.rv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rv-thumb__x {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 8, 15, 0.62);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.rv-thumb__x:hover { background: #e03131; }

.rv-photo-error {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #e03131;
}

/* --- the customer's own reviews ------------------------------------------- */

.rv-mine { margin-top: 30px; padding-top: 22px; border-top: 1px solid #ececf1; }
.rv-mine h3 { margin: 0 0 14px; font-size: 17px; font-weight: 800; color: #26202a; }

.rv-card {
  padding: 15px 17px;
  margin-bottom: 12px;
  border: 1px solid #f0e7ee;
  border-radius: 16px;
  background: #fdf9fb;
}

.rv-card header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-card header b { font-size: 14.5px; color: #26202a; }
.rv-card p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.65; color: #5f6776; }
.rv-card footer { margin-top: 10px; font-size: 12px; color: #9aa3b0; }

.rv-state {
  margin-left: auto;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.rv-state--approved { background: #e7f7ee; color: #14654a; }
.rv-state--pending  { background: #fff4e0; color: #b06f00; }
.rv-state--rejected { background: #fff0f0; color: #a92222; }

.rv-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.rv-shots a {
  width: 74px;
  height: 74px;
  border-radius: 12px;
  overflow: hidden;
  background: #f6eef3;
}

.rv-shots img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.rv-shots a:hover img { transform: scale(1.07); }

@media (max-width: 575px) {
  .rv-drop { padding: 20px 14px; }
  .rv-thumbs { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .rv-rate label { font-size: 23px; }
}

/* ==========================================================================
   One-time code page
   ========================================================================== */

.page-otp { background: #fdf4f9; }

.otp-shell {
  display: grid;
  place-items: center;
  padding: 48px 18px 70px;
}

.otp-card {
  width: 100%;
  max-width: 470px;
  padding: 38px 34px 30px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid #f4dfec;
  box-shadow: 0 18px 48px rgba(94, 16, 57, 0.1);
  text-align: center;
}

.otp-mark {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ab2d72, #e83e8c);
  color: #fff;
  font-size: 26px;
  box-shadow: 0 12px 24px -10px rgba(171, 45, 114, 0.7);
}

.otp-card h1 {
  margin: 0 0 8px;
  font-family: var(--font);
  font-size: 27px;
  font-weight: 800;
  color: #001430;
}

.otp-lede { margin: 0 0 22px; font-size: 14.5px; line-height: 1.65; color: #69778a; }
.otp-lede b { color: #26202a; }

.otp-msg {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  text-align: left;
}

.otp-msg--ok  { background: #e7f7ee; border: 1px solid #b9e5d3; color: #14654a; }
.otp-msg--bad { background: #fff0f0; border: 1px solid #ffc9c9; color: #a92222; }
.otp-msg i { margin-top: 2px; }

/* --- the six boxes ---------------------------------------------------------
   One box per digit, because that is how a code is read off a phone. `ch` on
   the gap keeps them from touching on a 320px screen without needing a
   breakpoint of their own. */
.otp-boxes {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-bottom: 22px;
}

.otp-boxes input {
  width: 52px;
  height: 62px;
  padding: 0;
  border: 2px solid #f0dbe8;
  border-radius: 15px;
  background: #fdf9fb;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  color: #26202a;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s, transform 0.18s;
}

.otp-boxes input:focus {
  border-color: #ab2d72;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(171, 45, 114, 0.16);
  transform: translateY(-2px);
}

/* A filled box stops looking like an empty one, so you can see where you are
   without counting. */
.otp-boxes input:not(:placeholder-shown),
.otp-boxes input:valid { border-color: #d9a8c6; background: #fff; }

.otp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(120deg, #8a2159, #ab2d72 55%, #e83e8c);
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 22px -10px rgba(94, 16, 57, 0.55);
  transition: transform 0.18s, box-shadow 0.18s;
}

.otp-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(94, 16, 57, 0.65); }

.otp-foot { margin-top: 24px; padding-top: 20px; border-top: 1px dashed #f0dbe8; }

.otp-resend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 0 12px;
  font-size: 13.5px;
  color: #8b7f88;
}

.otp-resend button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: #ab2d72;
  cursor: pointer;
  text-decoration: underline;
}

/* Disabled while the countdown runs — and looking it, or people keep clicking
   and assume the page is broken. */
.otp-resend button:disabled { color: #b7abb3; cursor: default; text-decoration: none; }

.otp-hint { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: #9aa3b0; }

.otp-back,
.otp-back:link,
.otp-back:visited {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: #69778a;
  text-decoration: none;
}

.otp-back:hover { color: #ab2d72; }

@media (max-width: 430px) {
  .otp-card { padding: 30px 20px 24px; border-radius: 22px; }
  .otp-boxes { gap: 6px; }
  .otp-boxes input { width: 44px; height: 54px; font-size: 21px; border-radius: 13px; }
}

/* ==========================================================================
   Customer photo
   ========================================================================== */

/* The wrapper is the circle; whether it holds an <img> or a letter is
   user_avatar_html()'s decision, and neither should change the shape. */
.av-photo,
.side-me__face {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #ab2d72, #e83e8c);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  overflow: hidden;
}

.av-photo img,
.side-me__face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- account form --------------------------------------------------------- */

.dashboard-form .input-group.av-row,
.av-row {
  display: flex;
  /* nowrap explicitly: .input-group in this panel sets flex-wrap:wrap, which a
     flex child inherits — the photo and the buttons beside it were dropping
     onto two lines because of it. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fdf4f9;
  border: 1.5px solid #f6e3ef;
}

.av-photo { width: 78px; height: 78px; font-size: 30px; box-shadow: 0 8px 18px -8px rgba(171, 45, 114, 0.7); }

/* What the face check found, under the buttons. Its own line — flex-basis 100%
   in a wrapping row — so a two-line answer does not push the buttons about. */
.av-check {
  flex: 1 0 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

/* The dot in front. Drawn rather than an icon font, so the state reads even
   before Font Awesome has arrived. */
.av-check::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: currentColor;
}

.av-check.is-busy { color: #8a7280; }
.av-check.is-ok   { color: #1c6f2e; }
.av-check.is-warn { color: #96650a; }

/* Not red. Nothing has failed and nothing is being refused — a photo with no
   face in it still saves, so this is advice, and advice in error red is read
   as a wall. */
.av-check.is-bad  { color: #a8500b; }

/* The dot pulses only while the answer is still coming. */
.av-check.is-busy::before { animation: avPulse 1s ease-in-out infinite; }

@keyframes avPulse { 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  .av-check.is-busy::before { animation: none; }
}

/* The buttons sit on one line beside each other, with the note underneath —
   stacked, this row was four things in a column and read as four fields. */
.av-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  flex: 1 1 auto;
  min-width: 0;
}

.dashboard-form .input-group label.av-pick,
.av-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: #ab2d72;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}

.av-pick:hover { background: #8a2159; transform: translateY(-1px); }

/* "Remove photo", beside "Change photo". An outline button rather than a
   second solid one: it is the lesser of the two actions on this row and
   should not compete with it, but it is still a button — the checkbox it
   replaced read as a form field somebody had to notice and tick. */
.dashboard-form .input-group .av-drop,
.av-drop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 18px;
  width: auto;
  min-height: 0;
  border-radius: 999px;
  border: 1.5px solid #e3ccd9;
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: #8a5a74;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.av-drop:hover:not(:disabled) {
  border-color: #d98aa9;
  background: #fff5fa;
  color: #ab2d72;
}

/* Shown but inert while the account has no photo. Faded rather than removed:
   the point is that the option is there and will work once there is something
   to remove. */
.dashboard-form .input-group .av-drop:disabled,
.av-drop:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Once it is armed the button is the way back, so it stops looking like the
   thing that does the removing. */
.av-drop.is-undo {
  border-style: dashed;
  color: #69778a;
}

.av-drop.is-undo:hover { color: #3d4a5c; background: #f5f7fa; }

.dashboard-form .input-group label.av-remove,
.av-remove {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #69778a;
  cursor: pointer;
}

/* The dashboard's own `input` rule makes every box full width and 46px tall,
   which is what turned this checkbox into an empty white square the size of a
   text field. */
.dashboard-form .input-group .av-remove input,
.av-remove input {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  accent-color: #ab2d72;
}

/* Its own line under the buttons, because it is a caption and not a third
   control. */
.av-actions small {
  flex-basis: 100%;
  font-size: 12.5px;
  line-height: 1.5;
  color: #9aa3b0;
}

/* --- dashboard sidebar ---------------------------------------------------- */

.side-me,
.side-me:link,
.side-me:visited {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fdf4f9;
  text-decoration: none;
  color: #26202a;
  transition: background 0.18s;
}

.side-me:hover { background: #f9e6f1; }

.side-me__face { width: 42px; height: 42px; font-size: 17px; }
.side-me span { min-width: 0; }

.side-me b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-me small { display: block; font-size: 11.5px; color: #ab2d72; font-weight: 600; }

/* --- storefront header ---------------------------------------------------- */

/* Sits where the person icon was, so the row keeps its height. */
.header-face {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 575px) {
  .dashboard-form .input-group.av-row,
  .av-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .av-photo { width: 66px; height: 66px; font-size: 26px; }
}

/* ==========================================================================
   Uploaded photos
   user_avatar_html() adds .has-photo when there is a real picture rather than
   an initial. The size class beside it owns the box; this makes the picture
   fill it instead of rendering at whatever size the file happens to be.
   ========================================================================== */

.has-photo { overflow: hidden; padding: 0; }

.has-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crop, never squash */
  display: block;
}