/* ==========================================================================
   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: "Poppins-Regular", sans-serif;
}

*,
*::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:'Baloo 2',sans-serif; */
  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: "Baloo 2", sans-serif;
  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: "Baloo 2", sans-serif;
  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); }

/* --- 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: "Baloo 2", sans-serif;
  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: 230px;
  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;
}

.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;
}

.filter-menu label + .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;
}

.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(230px, calc(100vw - 60px));
  }
}

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

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

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

.table-wrapper td {
  padding: 22px 24px;
  border-top: 1px solid #ececec;
  font-size: 14px;
}

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

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

.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;
}

/* 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 var(--border);
  border-radius: 14px;
  padding: 16px 16px 18px;
  height: fit-content;
  position: sticky;
  top: 0;
}

.page-shop .filter-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
}

.page-shop .filter-section {
  margin-bottom: 22px;
}

.page-shop .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-shop .section-header h4 {
  font-size: 14px;
  font-weight: 700;
}

/* Brand plum, not the near-black grey these were. Every other control on the
   page had moved to the plum and the collapse toggles were the last thing still
   reading as default-browser furniture. */
.page-shop .section-header i {
  font-size: 0.7rem;
  color: #ab2d72;
}

/* 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: 20px;
}

.page-shop .filter-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 14px;
  color: #555;
  cursor: pointer;
  transition: 0.3s;
}

.page-shop .filter-list li:hover,
.page-shop .filter-list li.active {
  color: #001430;
  font-weight: 700;
}

/* 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;
}

.page-shop .content-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
}

.breadcrumb {
  background-color: transparent !important;
  border-radius: 0 !important;
  color: #7b8393;
  margin-bottom: -5px !important;
  font-size: 14px;
  font-weight: 500;
 padding: 2rem 0 ;
}
.breadcrumb a {
  color: #7b8393 !important;
  font-size: 14px !important;
  margin: 0 5px;
}
.breadcrumb a:first-child {
  margin-left: 0;
}

.page-shop .page-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.15;
}

.page-shop .page-desc {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 10px;
}

.page-shop .shop-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.page-shop .sort-label,
.page-shop .products-count {
  font-size: 14px;
  font-weight: 500;
  color: #68707f;
}

.page-shop .sort-box {
  border: 1px solid #e5e7ee;
  border-radius: 8px;
  padding: 5px 20px 5px 8px;
  background: #fff;
  font-family: inherit;
  font-size: 0.76rem;
  color: #303743;
  outline: none;
}

.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: 13px;
  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: 12.5px;
  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;
}

.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: 12px;
  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 .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: 13px;
}

/* --------------------------------------------------------------------------
   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: "Baloo 2", sans-serif;
  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;
  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: 14px;
  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: 12.5px;
  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: 13.5px;
  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: 15px;
  color: #001430;
}

.page-shipping .total h2 {
  font-family: "Baloo 2", sans-serif;
  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: 11px;
  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: 13.5px;
  margin-bottom: 3px;
  font-weight: 700;
  color: #001430;
}

.page-shipping .secure-box p {
  font-size: 12.5px;
  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: "Baloo 2", sans-serif;
  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: "Baloo 2", sans-serif;
  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: "Baloo 2", sans-serif;
}
.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: "Baloo 2", sans-serif;
  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;
  }

  .table-wrapper table {
    min-width: 700px;
  }
  .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; }
}