/* ============================================================================
   YXIN Marketplace — UI layer
   Loaded AFTER style.css / header.css / typography.css / responsive.css.
   Restyles the existing class names; no markup contracts are renamed.
   ----------------------------------------------------------------------------
   Colour has three jobs and three colours:
     gold  = brand chrome (header, eyebrows, PV)
     teal  = action (buttons, links, focus, selected)
     ember = money (prices only)
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root {
  /* neutrals */
  --y-ink:        #16202b;
  --y-ink-soft:   #2c3a48;
  --y-body:       #4a5763;
  --y-muted:      #7c8894;
  --y-faint:      #9aa4ae;
  --y-line:       #e3e7ec;
  --y-line-soft:  #eff2f5;
  --y-canvas:     #f4f6f8;
  --y-surface:    #ffffff;

  /* brand gold */
  --y-gold-700:   #8f6d12;
  --y-gold-600:   #a8801c;
  --y-gold-500:   #c9a227;
  --y-gold-300:   #e4c769;
  --y-gold-100:   #f6e9c2;
  --y-gold-050:   #fcf6e6;

  /* action teal */
  --y-teal-800:   #044f6b;
  --y-teal-700:   #06617f;
  --y-teal-600:   #0a7ba0;
  --y-teal-200:   #b9dded;
  --y-teal-100:   #dceef6;
  --y-teal-050:   #eff7fb;

  /* money */
  --y-ember:      #c2571b;
  --y-ember-050:  #fdf1e8;

  /* status */
  --y-ok:         #12704a;
  --y-ok-050:     #e7f5ef;
  --y-warn:       #9a6209;
  --y-warn-050:   #fdf3e2;
  --y-bad:        #b3261e;
  --y-bad-050:    #fdeceb;

  /* radius */
  --y-r-xs: 4px;
  --y-r-sm: 8px;
  --y-r:    12px;
  --y-r-lg: 16px;
  --y-r-pill: 999px;

  /* elevation */
  --y-sh-1: 0 1px 2px rgba(22,32,43,.06), 0 1px 3px rgba(22,32,43,.05);
  --y-sh-2: 0 2px 4px rgba(22,32,43,.05), 0 8px 20px -8px rgba(22,32,43,.14);
  --y-sh-3: 0 16px 40px -12px rgba(22,32,43,.22);
  --y-ring: 0 0 0 3px rgba(10,123,160,.28);

  /* type */
  --y-f-display: "Jost", "Poppins", system-ui, sans-serif;
  --y-f-serif:   "EB Garamond", Georgia, "Times New Roman", serif;
  --y-f-ui:      "Inter", "Jost", system-ui, sans-serif;

  /* metrics */
  --y-header-h: 118px;
}

/* ------------------------------------------------------------------ 2. base */
body {
  font-family: var(--y-f-display) !important;
  color: var(--y-body);
  background-color: var(--y-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--y-header-h);
}
main { min-height: 60vh; }

h1, h2, h3, h4, h5, h6, .heading {
  font-family: var(--y-f-display);
  color: var(--y-ink);
  letter-spacing: -0.011em;
}
.text  { color: var(--y-body); }
.text-grey  { color: var(--y-muted) !important; }
.text-black { color: var(--y-ink) !important; }
.text-dark  { color: var(--y-ink) !important; }
.bg-grey    { background-color: var(--y-canvas) !important; }

a { color: var(--y-teal-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--y-teal-800); }
hr { border-color: var(--y-line); opacity: 1; }
hr.text-grey, hr.text-dark {
  color: var(--y-line) !important;
  background-color: var(--y-line) !important;
  opacity: 1;
}

::selection { background: var(--y-gold-100); color: var(--y-ink); }

/* one focus ring everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--y-teal-600);
  outline-offset: 2px;
  border-radius: var(--y-r-xs);
}

/* money and counts line up in columns */
.price, .new-amount, .new-amount2, .cross-amount, .cross-amount2,
.y-num, #productsubtotal, #producttotal, #headercartprice {
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ----------------------------------------------------- 3. typography remaps */
.font-garmond { font-family: var(--y-f-serif) !important; }
.text-orange  { color: var(--y-gold-600) !important; }
.text-yellow  { color: var(--y-gold-500) !important; }
.text-blue    { color: var(--y-teal-600) !important; }

.f-14 { font-size: 14px; }
.f-15 { font-size: 15px; }
.f-16 { font-size: 15.5px; }
.f-18 { font-size: 17px; }
.f-20 { font-size: 19px; }
.f-22 { font-size: 21px; }
.f-24 { font-size: 23px; }
.f-40 { font-size: 34px; letter-spacing: -.02em; }
.f-64 { font-size: 52px; letter-spacing: -.028em; }

/* section header: serif italic eyebrow over a geometric-sans title */
.y-sec-head { text-align: center; margin-bottom: 6px; }
.y-eyebrow {
  display: inline-block;
  font-family: var(--y-f-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  color: var(--y-gold-600);
  letter-spacing: .01em;
}
.y-eyebrow::before,
.y-eyebrow::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  vertical-align: middle;
  background: var(--y-gold-300);
  margin: 0 12px 3px;
}
.y-sec-title {
  font-family: var(--y-f-display);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -.02em;
  color: var(--y-ink);
  margin: 6px 0 0;
}
.y-sec-note {
  font-size: 13px;
  color: var(--y-muted);
  margin: 6px 0 0;
  letter-spacing: .02em;
}

/* page title block used above listings and account pages */
.y-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.y-page-head h1 {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 600;
  letter-spacing: -.024em;
  margin: 0;
}
.y-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--y-muted);
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.y-crumbs a { color: var(--y-muted); text-decoration: none; }
.y-crumbs a:hover { color: var(--y-teal-600); text-decoration: underline; }
.y-crumbs li { display: flex; align-items: center; }
.y-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--y-ink); }
.y-crumbs [aria-current] { color: var(--y-ink); font-weight: 500; }

/* --------------------------------------------------------------- 4. buttons */
.btn-main,
.btn-main-yellow,
.btn-main2,
.cart-btn,
.orange-btn,
.y-btn {
  --y-btn-bg: var(--y-teal-600);
  --y-btn-bg-hover: var(--y-teal-800);
  --y-btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--y-f-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .005em;
  color: var(--y-btn-fg) !important;
  background-color: var(--y-btn-bg);
  border: 1px solid transparent;
  border-radius: var(--y-r-sm);
  padding: 10px 18px;
  min-height: 40px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn-main:hover,
.btn-main-yellow:hover,
.btn-main2:hover,
.cart-btn:hover,
.orange-btn:hover,
.y-btn:hover {
  background-color: var(--y-btn-bg-hover);
  color: var(--y-btn-fg) !important;
  box-shadow: var(--y-sh-2);
}
.btn-main:active, .cart-btn:active, .y-btn:active { transform: translateY(1px); box-shadow: none; }
.btn-main:disabled, .y-btn:disabled, .btn-main[disabled] {
  background-color: var(--y-line);
  color: var(--y-faint) !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* gold variant — reserved for brand moments, not for every CTA */
.btn-main-yellow, .y-btn--gold {
  --y-btn-bg: var(--y-gold-600);
  --y-btn-bg-hover: var(--y-gold-700);
}
/* destructive */
.btn-main.bg-danger, .y-btn--danger {
  --y-btn-bg: transparent;
  --y-btn-bg-hover: var(--y-bad-050);
  background-color: transparent !important;
  color: var(--y-bad) !important;
  border-color: var(--y-line);
}
.btn-main.bg-danger:hover, .y-btn--danger:hover {
  background-color: var(--y-bad-050) !important;
  border-color: #f0c4c1;
  color: var(--y-bad) !important;
  box-shadow: none;
}
/* quiet / outline */
.y-btn--ghost {
  --y-btn-bg: transparent;
  --y-btn-bg-hover: var(--y-teal-050);
  background: transparent;
  color: var(--y-teal-700) !important;
  border-color: var(--y-line);
}
.y-btn--ghost:hover {
  background: var(--y-teal-050);
  color: var(--y-teal-800) !important;
  border-color: var(--y-teal-200);
  box-shadow: none;
}
.y-btn--sm { min-height: 32px; padding: 6px 12px; font-size: 13.5px; border-radius: var(--y-r-xs); }
.y-btn--block, .full-btn { width: 100%; }

.btn-transparent {
  font-family: var(--y-f-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--y-teal-600);
  background: transparent;
  border: none;
  padding: 6px 8px;
  border-radius: var(--y-r-xs);
  cursor: pointer;
}
.btn-transparent:hover { background: var(--y-teal-050); color: var(--y-teal-800); }

.edit-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  border-radius: var(--y-r-xs);
  color: var(--y-teal-700);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  cursor: pointer;
}
.edit-btn:hover { border-color: var(--y-teal-200); background: var(--y-teal-050); }

/* icon-only button (cart row delete) */
.y-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--y-r-sm);
  border: 1px solid var(--y-line);
  background: var(--y-surface);
  color: var(--y-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}
.y-icon-btn:hover { color: var(--y-bad); border-color: #f0c4c1; background: var(--y-bad-050); }

/* ----------------------------------------------------------------- 5. forms */
.form-control,
.form-select,
.textarea,
.form-textarea,
.voucher-input {
  font-family: var(--y-f-display);
  font-size: 15px;
  color: var(--y-ink);
  background-color: var(--y-surface);
  border: 1px solid var(--y-line) !important;
  border-radius: var(--y-r-sm) !important;
  padding: 10px 14px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder, .textarea::placeholder { color: var(--y-faint); }
.form-control:focus,
.form-select:focus,
.textarea:focus,
.form-textarea:focus,
.voucher-input:focus {
  border-color: var(--y-teal-600) !important;
  box-shadow: var(--y-ring);
  outline: none;
}
.form-control:disabled, .form-control[readonly] { background: var(--y-line-soft); color: var(--y-muted); }

.textarea { width: 100%; min-height: 120px; resize: vertical; }

.form-control-label, .form-label { font-size: 13.5px; font-weight: 500; color: var(--y-body); }

.form-floating > label { color: var(--y-muted); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--y-teal-700); }

/* checkboxes / radios */
.form-check-input {
  width: 18px;
  height: 18px;
  margin-top: .18em;
  border: 1.5px solid var(--y-line);
  cursor: pointer;
}
.form-check-input:checked { background-color: var(--y-teal-600); border-color: var(--y-teal-600); }
.form-check-input:focus { border-color: var(--y-teal-600); box-shadow: var(--y-ring); }
.form-check-label { cursor: pointer; color: var(--y-body); }

/* the cart's oversized native checkboxes */
.checkbox-btn, .upsizecheckbox, input.productCheckbox[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--y-teal-600);
  cursor: pointer;
  flex-shrink: 0;
}

/* a radio row that behaves like a selectable card */
.y-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--y-line);
  border-radius: var(--y-r-sm);
  background: var(--y-surface);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.y-choice:hover { border-color: var(--y-teal-200); background: var(--y-teal-050); }
.y-choice:has(input:checked) {
  border-color: var(--y-teal-600);
  background: var(--y-teal-050);
  box-shadow: inset 0 0 0 1px var(--y-teal-600);
}

/* --------------------------------------------------------- 6. header chrome */
/* Two-tone gold: a darker utility strip riding above the main bar, closed by a
   thin bronze rule. Keeps YXIN gold as the identity while giving the header
   the depth the flat mustard slab was missing. */
.nav-header {
  background-color: var(--y-gold-500);
  background-image: linear-gradient(180deg, #cfa92c 0%, #c19a22 100%);
  border-bottom: 1px solid rgba(85, 62, 8, .35);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
  transition: box-shadow .2s ease;
}
.nav-header.is-scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 20px -8px rgba(22,32,43,.35); }

.header-section-top {
  padding: 8px 0;
  background: rgba(74, 54, 6, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.header-section-navbar { padding: 11px 0; }

.log-in {
  font-family: var(--y-f-display);
  font-size: 14px;
  font-weight: 500;
  color: #fffaeb !important;
  display: inline-flex;
  align-items: center;
  border-radius: var(--y-r-sm);
  padding: 4px 8px;
  transition: color .15s, background-color .15s;
}
.log-in:hover, .log-in:hover .log-in-icon {
  color: #fff !important;
  fill: #fff !important;
  background-color: rgba(255,255,255,.14);
}
.log-in-icon { fill: #fffaeb !important; }
.log-in svg { width: 19px; height: 19px; }

/* country / language chip */
.arrow-div.log-in, .language-sm {
  gap: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.flag-icon { height: 20px; width: 20px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.arrow-icon { fill: #fffaeb; }

/* search */
.searchbar-input {
  width: 268px;
  height: 38px;
  border-radius: var(--y-r-pill);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(85,62,8,.18);
  padding: 0 16px 0 40px;
  font-family: var(--y-f-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--y-ink);
  transition: width .2s ease, box-shadow .18s ease, background-color .18s ease;
}
.searchbar-input::placeholder { font-family: var(--y-f-display); font-size: 13.5px; font-weight: 400; color: var(--y-faint); }
.searchbar-input:hover { background: #fff; }
.searchbar-input:focus {
  width: 320px;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.55);
}
.searchbar-icon { top: 50%; left: 16px; transform: translateY(-50%); }

/* main nav */
.nav-list li:not(:last-child) { margin-right: 2px; }
.nav-list li a,
.nav-list .btn-secondary {
  font-family: var(--y-f-display) !important;
  font-size: 14.5px !important;
  font-weight: 500;
  color: #fffaeb !important;
  background-color: transparent !important;
  padding: 8px 12px !important;
  border-radius: var(--y-r-pill);
  transition: background-color .15s ease, color .15s ease;
  box-shadow: none !important;
  outline: none !important;
}
/* padding is repeated on every state: header.css sets a narrower 8px 5px on
   :hover / .active-nav at a higher specificity, which shrank each item by 14px
   and made the whole nav shift on hover */
.nav-list li a:hover, .nav-list .btn-secondary:hover,
.nav-list li a:focus, .nav-list .btn-secondary:focus,
.nav-list li a:active, .nav-list .btn-secondary:active {
  background-color: rgba(255,255,255,.16) !important;
  color: #fff !important;
  padding: 8px 12px !important;
}
.nav-list li a.active-nav,
.nav-list li a.active {
  background-color: #fff !important;
  color: var(--y-teal-700) !important;
  font-weight: 600;
  padding: 8px 12px !important;
  box-shadow: 0 1px 2px rgba(85,62,8,.2);
}
/* the catalog trigger keeps its gold chrome even when its dropdown is the
   current section - it never turns into a white pill like the plain links */
.nav-list .btn-secondary.active,
.nav-list .btn-secondary.active-nav {
  color: #fffaeb !important;
  font-weight: 600;
}
.drop-arrow2 { fill: #fffaeb; }

/* category dropdown */
.nav-header .dropdown-menu {
  border: 1px solid var(--y-line);
  border-radius: var(--y-r);
  box-shadow: var(--y-sh-3);
  padding: 6px;
  margin-top: 8px;
  min-width: 224px;
  background: var(--y-surface);
}
.nav-header .dropdown-menu .dropdown-item {
  font-family: var(--y-f-display);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--y-ink) !important;
  border-radius: var(--y-r-sm);
  padding: 9px 12px;
}
.nav-header .dropdown-menu .dropdown-item:hover,
.nav-header .dropdown-menu li:hover > .dropdown-item {
  background-color: var(--y-teal-050);
  color: var(--y-teal-800) !important;
}
.nav-header .dropdown-menu li { position: relative; }
.nav-header .dropdown-submenu {
  display: none;
  top: -6px;
  left: 100%;
  margin-left: 4px;
}
.nav-header .dropdown-menu li:hover > .dropdown-submenu {
  display: block;
}

/* cart badge + flyout */
.cart-icon .notification {
  top: -4px;
  right: -6px;
  height: 17px;
  min-width: 17px;
  width: auto;
  padding: 0 4px;
  border-radius: var(--y-r-pill);
  background-color: var(--y-bad);
  border: 1.5px solid var(--y-gold-500);
  font-family: var(--y-f-ui);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.cart { fill: #fffaeb; }
.cart-div:hover .cart { fill: #fff; }
.cart-div .log-in {
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.cart-items {
  width: 320px;
  padding: 14px;
  border: 1px solid var(--y-line);
  border-radius: var(--y-r);
  box-shadow: var(--y-sh-3);
  filter: none;
  max-height: 66vh;
  overflow-y: auto;
}
.arrow-up2 { display: none; }
.cart-items--item {
  background-color: transparent;
  border-bottom: 1px solid var(--y-line-soft);
  border-radius: 0;
  padding: 10px 4px;
  margin-bottom: 0;
}
.cart-items--item:hover { background-color: var(--y-teal-050); border-radius: var(--y-r-sm); }
.cart-items--item img { border-radius: var(--y-r-xs); object-fit: contain; background: var(--y-line-soft); }
.cart-items--item .text { color: var(--y-ink); }
.cart-items > .f-16 {
  border-top: 1px solid var(--y-line);
  margin-top: 12px !important;
  padding-top: 12px;
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  color: var(--y-ink) !important;
  font-weight: 600 !important;
}
.cart-items .btn-main2 { margin-top: 4px; }

/* country / language popover */
.languages-dropdown {
  border-radius: var(--y-r);
  box-shadow: var(--y-sh-3);
  border: 1px solid var(--y-line);
  padding: 8px 14px 14px;
}
.arrow-up-div { display: none; }
.tabcountrylanguage { border-bottom: 1px solid var(--y-line); display: flex; gap: 4px; }
.tablinkscountrylanguage,
.tablinks2countrylanguage {
  font-family: var(--y-f-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--y-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 12px;
  cursor: pointer;
}
.tablinkscountrylanguage.active,
.tablinks2countrylanguage.active-lang {
  color: var(--y-teal-700);
  border-bottom-color: var(--y-teal-600);
}
.select-text { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--y-muted); }
.count-lang { border-radius: var(--y-r-sm); padding: 10px; }
.count-lang:hover { background-color: var(--y-teal-050); }
.count-lang-active { background-color: var(--y-teal-050); box-shadow: inset 0 0 0 1px var(--y-teal-200); }
.count-lang-active p { color: var(--y-teal-800) !important; font-weight: 600 !important; }

/* mobile drawer */
.menu-icon { cursor: pointer; opacity: .95; }
.menu-icon:hover { opacity: 1; }

/* --------------------------------------------------------------- 7. footer */
.footer-div {
  background: var(--y-ink);
  color: #c3ccd5;
  padding: 30px 0 26px;
  margin-top: 40px !important;
  border-top: 3px solid var(--y-gold-500);
}
.footer-div p { color: #aab5c0; }
.footer-div a { color: #dfe5ea; text-decoration: none; }
.footer-div a:hover { color: var(--y-gold-300); text-decoration: underline; }
.footer-div img { filter: none; }
.footer-logos img { opacity: .85; }

/* ------------------------------------------------- 8. product grid + cards */
/* A plain CSS grid. Every card is the same height, so the shelf reads as a
   grid rather than a masonry drift. */
.grid-mall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.gutter-sizer { display: none !important; }
.mall-product {
  width: auto !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin-top: 0 !important;
  display: flex;
  flex-direction: column;
}
.mall-product[hidden] { display: none; }

/* the card itself */
.mall-product > a { display: block; flex: 1 1 auto; }
.mall-product > a > .products-card,
.mall-product > .products-card {
  height: 100%;
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mall-product > a > .products-card {
  border-radius: var(--y-r) var(--y-r) 0 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
}
/* the detached "add to cart" block that follows the anchor */
.mall-product > .products-card:last-child {
  margin-top: 0 !important;
  border-radius: 0 0 var(--y-r) var(--y-r);
  border-top: none;
  padding: 0 14px 14px;
}
.mall-product > .products-card:last-child > div { margin-top: 0 !important; }
.mall-product:hover > a > .products-card,
.mall-product:hover > .products-card {
  border-color: var(--y-teal-200);
  box-shadow: var(--y-sh-2);
}
.mall-product:hover { z-index: 2; }
.products-card:hover { transform: none; box-shadow: none; background: var(--y-surface); }

/* image plate — square, contained, never cropped */
.product-card-img {
  border: none;
  border-bottom: 1px solid var(--y-line-soft);
  background: #fff;
  border-radius: var(--y-r) var(--y-r) 0 0;
  overflow: hidden;
}
.product-card-img .carousel__slide { border-radius: 0; }
.product-card-img figure { margin: 0; }
.product-card-img figure > div {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
}
.product-card-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.mall-product:hover .product-card-img img { transform: scale(1.04); }

.product-card-text {
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.product-heading {
  font-family: var(--y-f-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--y-ink);
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
}
.product-dec { font-size: 13.5px; line-height: 1.5; color: var(--y-muted) !important; }

/* price: ember, and the only ember on the page */
.new-amount {
  font-size: 19px;
  font-weight: 600;
  color: var(--y-ember);
  letter-spacing: -.015em;
  align-items: baseline;
  gap: 1px;
}
.new-amount .price, .new-amount2 .price { display: inline; }
.new-amount2 { display: inline-block; }
.cross-amount { font-size: 13px; font-weight: 400; color: var(--y-faint); }
del { text-decoration-color: var(--y-faint); }

/* PV — the number that makes this a YXIN shop and not any other shop.
   Same gold chip wherever PV appears: card, detail, cart, order. */
.in-stock, .y-pv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1;
  color: var(--y-gold-700) !important;
  background: var(--y-gold-050);
  border: 1px solid var(--y-gold-100);
  border-radius: var(--y-r-xs);
  padding: 5px 8px;
  white-space: nowrap;
}
.in-stock:empty { display: none; }
.weight {
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  color: var(--y-muted);
  background: var(--y-line-soft);
  border-radius: var(--y-r-xs);
  padding: 5px 8px;
  line-height: 1;
}
.product-card-text .my-lg-3 { margin-top: auto !important; margin-bottom: 0 !important; }

/* add to cart inside the card */
.mall-product .btn-main.addtocartclass {
  width: 100% !important;
  min-height: 38px;
  font-size: 14px;
}

/* rating row */
.product-card-text .bi-star-fill { font-size: 12px !important; color: var(--y-line); }
.product-card-text .bi-star-fill.text-yellow { color: var(--y-gold-500) !important; }

/* -------------------------------------------------------------- 9. empty state */
.y-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: var(--y-surface);
  border: 1px dashed var(--y-line);
  border-radius: var(--y-r-lg);
  padding: 56px 24px;
}
.y-empty i { font-size: 34px; color: var(--y-teal-200); line-height: 1; }
.y-empty h3 { font-size: 19px; font-weight: 600; color: var(--y-ink); margin: 0; }
.y-empty p { font-size: 14.5px; color: var(--y-muted); margin: 0; max-width: 42ch; }
.y-empty .y-btn { margin-top: 6px; }

/* ------------------------------------------------------------- 10. pagination */
.isotope-pager, .y-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: transparent;
  width: fit-content;
  margin: 28px auto 4px;
  padding: 0;
}
.isotope-pager a, .y-pager a {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--y-line);
  border-radius: var(--y-r-sm);
  background: var(--y-surface);
  color: var(--y-body);
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
.isotope-pager a:hover, .y-pager a:hover {
  border-color: var(--y-teal-200);
  background: var(--y-teal-050);
  color: var(--y-teal-800);
}
.isotope-pager a.active-page, .y-pager a.active-page {
  background: var(--y-teal-600);
  border-color: var(--y-teal-600);
  color: #fff !important;
}
.isotope-pager a.disabled-page, .y-pager a.disabled-page {
  background: var(--y-line-soft);
  border-color: var(--y-line-soft);
  color: var(--y-faint);
  pointer-events: none;
}

/* ------------------------------------------------------------------ 11. sort */
.mall-sort-p {
  position: relative;
  width: fit-content;
}
#sort {
  gap: 10px;
  min-width: 178px;
  height: 38px;
  padding: 0 14px;
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  border-radius: var(--y-r-sm);
  font-family: var(--y-f-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--y-ink);
  cursor: pointer;
  user-select: none;
}
#sort:hover { border-color: var(--y-teal-200); }
.mall-sort-child {
  border-radius: var(--y-r);
  border: 1px solid var(--y-line);
  box-shadow: var(--y-sh-3);
  background: var(--y-surface);
  padding: 6px;
  margin-top: 6px;
  min-width: 100%;
}
.mall-sort {
  font-family: var(--y-f-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--y-body);
  padding: 9px 12px;
  border-radius: var(--y-r-sm);
  cursor: pointer;
  white-space: nowrap;
}
.mall-sort:hover, .mall-sort.is-checked { background: var(--y-teal-050); color: var(--y-teal-800); }

/* --------------------------------------------------------- 12. category hero */
.top-banner {
  height: 240px;
  background: var(--y-ink);
}
.top-banner img { opacity: .38; width: 100%; }
.top-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,32,43,.35) 0%, rgba(22,32,43,.78) 100%);
}
.top-carousel-content2 { z-index: 2; }
.top-carousel-content2 h2 { font-size: clamp(28px, 5vw, 46px) !important; letter-spacing: -.028em; font-weight: 600; }
.top-carousel-content2 h3 { color: var(--y-gold-300) !important; font-family: var(--y-f-serif) !important; font-size: 18px !important; }

/* -------------------------------------------------------- 13. product detail */
.y-pdp-gallery {
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  border-radius: var(--y-r-lg);
  padding: 18px;
  overflow: hidden;
}
.y-pdp-gallery .carousel__slide { border-radius: var(--y-r); overflow: hidden; }
/* keep the square frame the cards use, but contain the photo inside it */
.y-pdp-gallery { max-width: 540px; margin-inline: auto; }
.y-pdp-gallery .carousel__slide div > img,
.y-pdp-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.y-pdp-panel {
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  border-radius: var(--y-r-lg);
  padding: 24px;
}
.y-pdp-panel > h1 { font-size: clamp(21px, 2.6vw, 28px); letter-spacing: -.022em; line-height: 1.25; }

.details { display: grid; gap: 2px; }
.details > .d-flex { padding: 9px 0; border-bottom: 1px solid var(--y-line-soft); margin-bottom: 0 !important; }
.details > .d-flex:last-child { border-bottom: none; }
.tag-label {
  min-width: 118px;
  font-family: var(--y-f-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--y-muted);
}
.tag-text { font-size: 14.5px; font-weight: 500; color: var(--y-ink); }

.new-amount2 {
  white-space: nowrap;
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--y-ember);
  align-items: baseline;
  gap: 2px;
}
.cross-amount2 { font-size: 17px; color: var(--y-faint); }

/* quantity stepper — one control, not two floating circles */
.wrapper, .wrapper2 {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  border-radius: var(--y-r-sm);
  padding: 0;
  overflow: hidden;
  width: fit-content;
}
.minus, .plus, .minus2, .plus2 {
  height: 40px;
  width: 40px;
  border-radius: 0;
  background: var(--y-surface);
  color: var(--y-teal-700);
  font-size: 0;
  transition: background-color .15s, color .15s;
}
.minus2, .plus2 { height: 34px; width: 34px; }
.minus:hover, .plus:hover, .minus2:hover, .plus2:hover { background: var(--y-teal-050); color: var(--y-teal-800); }
.minus i, .plus i, .minus2 i, .plus2 i {
  font-size: 17px !important;
  color: currentColor !important;
  line-height: 1;
}
.wrapper span.num, .wrapper2 span.num2 {
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  color: var(--y-ink);
  width: 46px;
  margin: 0;
  border-left: 1px solid var(--y-line);
  border-right: 1px solid var(--y-line);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper span.num { width: 56px; font-size: 16px; }

.cart-btn {
  font-size: 16px;
  padding: 13px 30px;
  margin-bottom: 0;
  width: 100%;
  max-width: 340px;
}
.view-btn {
  font-size: 16px;
  padding: 13px 30px;
  margin-bottom: 0;
  border-radius: var(--y-r-sm);
  background: var(--y-gold-600);
}
.view-btn:hover { background: var(--y-gold-700); }

/* description / review tabs */
.product-tab, .account-tab, .tab.product-tab {
  background: transparent !important;
  border: none;
  border-bottom: 1px solid var(--y-line);
  border-radius: 0;
  overflow: visible;
  display: flex;
  gap: 4px;
}
.product-tab button, .account-tab button {
  font-family: var(--y-f-display);
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--y-muted) !important;
  background: transparent !important;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 16px !important;
  float: none;
}
.product-tab button:hover, .account-tab button:hover {
  color: var(--y-ink) !important;
  background: transparent !important;
}
.product-tab button.active-tab, .account-tab button.active-tab {
  color: var(--y-teal-700) !important;
  background: transparent !important;
  border-bottom-color: var(--y-teal-600);
  font-weight: 600 !important;
}
.tabcontent-product, .tabcontent2 {
  border: none;
  padding: 22px 2px;
}

.review-card, .review-card-full {
  background: var(--y-surface) !important;
  border: 1px solid var(--y-line);
  border-radius: var(--y-r);
  padding: 18px;
  height: auto !important;
}
.mark { display: none; }
.review-img, .review-img img { height: 44px; width: 44px; }

/* ------------------------------------------------------------------ 14. cart */
.cart-main-content, .account-main-content {
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  box-shadow: none;
  border-radius: var(--y-r-lg);
  padding: 20px 22px !important;
}
.cart-main-content + .cart-main-content { margin-top: 16px; }

/* merchant / shop group heading */
.cart-main-content .border-bottom-1 {
  border-bottom: 1px solid var(--y-line) !important;
  padding-bottom: 12px !important;
}
.cart-main-content .border-bottom-1 .f-18 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.cart-card {
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  border-radius: var(--y-r);
  padding: 14px !important;
  gap: 12px;
  margin-bottom: 10px !important;
  transition: border-color .15s, box-shadow .15s;
}
.cart-card:hover { border-color: var(--y-teal-200); box-shadow: var(--y-sh-1); }

.account-img {
  height: 74px;
  width: 74px;
  margin-right: 14px;
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  border-radius: var(--y-r-sm);
  padding: 6px;
  overflow: hidden;
}
.cart-card h1.f-16 { font-size: 15px; font-weight: 500; line-height: 1.35; }
.cart-card .text-orange { color: var(--y-ember) !important; font-family: var(--y-f-ui); font-variant-numeric: tabular-nums; font-weight: 600 !important; }

/* the delete control was a filled button holding a bin glyph */
.cart-card .btn-main:has(.delete-cart) {
  background: var(--y-surface) !important;
  border: 1px solid var(--y-line);
  color: var(--y-muted) !important;
  width: 38px;
  min-height: 38px;
  padding: 0;
}
.cart-card .btn-main:has(.delete-cart):hover {
  background: var(--y-bad-050) !important;
  border-color: #f0c4c1;
  color: var(--y-bad) !important;
  box-shadow: none;
}
.cart-card .btn-main:has(.delete-cart) i { color: currentColor; font-size: 16px; }

/* order summary rail */
.account-side-bar {
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  box-shadow: none;
  border-radius: var(--y-r-lg);
  padding: 6px 14px 14px !important;
}
.table-div2 { position: sticky; top: calc(var(--y-header-h) + 16px); }
.table-div2 .table { margin-bottom: 12px; }
.table-heading {
  font-family: var(--y-f-display);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--y-muted) !important;
  border-bottom: 1px solid var(--y-line);
  padding-bottom: 10px;
}
.table-div2 .data-row { border: none; padding-left: 0; padding-right: 0; }
.table-div2 .data-row p { font-size: 14px; margin-left: 0 !important; }
.table-div2 .data-row p:last-child { font-family: var(--y-f-ui); font-variant-numeric: tabular-nums; color: var(--y-ink) !important; }
.table-div2 tbody tr:last-child .data-row {
  border-top: 1px solid var(--y-line);
  padding-top: 12px !important;
}
.table-div2 tbody tr:last-child .data-row p { font-size: 16px !important; font-weight: 600 !important; color: var(--y-ink) !important; }
.table-div2 tbody tr:last-child .data-row p:last-child { color: var(--y-ember) !important; font-size: 19px !important; letter-spacing: -.02em; }
.table-div2 .btn-main { min-height: 46px; font-size: 15.5px; font-weight: 600; }

/* --------------------------------------------------------------- 15. checkout */
.account-card {
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  border-radius: var(--y-r);
  padding: 16px;
}
.account-main-content .border-bottom-1 {
  border-bottom: 1px solid var(--y-line) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--y-muted) !important;
  padding-bottom: 10px !important;
}
.account-main-content .form-check { padding-left: 0; }
.account-main-content .form-check .form-check-input { margin-left: 0; float: none; }

/* checkout progress — three steps, and they are a real sequence */
.y-steps {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  border-radius: var(--y-r-lg);
  overflow-x: auto;
}
.y-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--y-f-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--y-muted);
  white-space: nowrap;
}
.y-steps li + li::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--y-line);
  margin: 0 14px;
  flex: 0 0 auto;
}
.y-steps .y-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--y-line);
  background: var(--y-surface);
  font-family: var(--y-f-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--y-muted);
}
.y-steps li.is-done { color: var(--y-body); }
.y-steps li.is-done .y-step-n {
  background: var(--y-teal-050);
  border-color: var(--y-teal-200);
  color: var(--y-teal-700);
}
.y-steps li.is-current { color: var(--y-ink); font-weight: 600; }
.y-steps li.is-current .y-step-n {
  background: var(--y-teal-600);
  border-color: var(--y-teal-600);
  color: #fff;
}

/* small inline notice used for stock / terms warnings */
.y-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: var(--y-r-sm);
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.5;
}
.y-note--info { background: var(--y-teal-050); color: var(--y-teal-800); border: 1px solid var(--y-teal-100); }
.y-note--warn { background: var(--y-warn-050); color: var(--y-warn); border: 1px solid #f2dfb8; }
.y-note--bad  { background: var(--y-bad-050);  color: var(--y-bad);  border: 1px solid #f4cdca; }
.y-note i { font-size: 15px; line-height: 1.35; }

/* ---------------------------------------------------------------- 16. account */
.account-side-bar ul { margin: 0; padding: 0; }
.account-side-bar ul li,
.account-side-bar ul li.tablinks {
  border-bottom: none;
  margin-bottom: 2px !important;
  padding: 0;
  border-radius: var(--y-r-sm);
}
.account-side-bar ul li.tablinks {
  font-family: var(--y-f-display);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--y-body);
  padding: 11px 13px;
  cursor: pointer;
  transition: background-color .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.account-side-bar ul li.tablinks:hover { background: var(--y-line-soft); color: var(--y-ink); }
.account-side-bar ul li.tablinks.active-account-side,
.account-side-bar ul li.tablinks.active {
  background: var(--y-teal-050);
  color: var(--y-teal-800) !important;
  font-weight: 600 !important;
  box-shadow: inset 2px 0 0 var(--y-teal-600);
}
.active-account-side { color: var(--y-teal-800) !important; }

/* order card */
.account-card .qty {
  position: static;
  background: var(--y-line-soft);
  border-radius: var(--y-r-xs);
  padding: 4px 8px;
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  color: var(--y-body);
  flex: 0 0 auto;
}
.status {
  position: absolute;
  right: 12px;
  top: -10px;
  background: var(--y-teal-600);
  border-radius: var(--y-r-pill);
  font-family: var(--y-f-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 11px;
  box-shadow: 0 0 0 3px var(--y-surface);
}
.status.bg-success { background: var(--y-ok) !important; }
.status.bg-danger  { background: var(--y-bad) !important; }
.status.bg-warning { background: var(--y-warn) !important; color: #fff !important; }

.profile-large { border: 3px solid var(--y-gold-300); box-shadow: var(--y-sh-2); }

/* ----------------------------------------------------------------- 17. modals */
.modal-content {
  border: none;
  border-radius: var(--y-r-lg);
  box-shadow: var(--y-sh-3);
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--y-line);
  padding: 16px 20px;
  align-items: center;
}
.modal-title { font-family: var(--y-f-display); font-size: 17px; font-weight: 600; color: var(--y-ink); }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--y-line); padding: 14px 20px; }
.modal-footer .btn {
  border-radius: var(--y-r-sm) !important;
  border: 1px solid var(--y-line) !important;
  font-family: var(--y-f-display);
  font-size: 14.5px;
  font-weight: 500;
  padding: 9px 16px;
}

/* sweetalert to match */
.swal2-popup { border-radius: var(--y-r-lg) !important; font-family: var(--y-f-display) !important; }
.swal2-title { color: var(--y-ink) !important; font-weight: 600 !important; }
.swal2-styled.swal2-confirm {
  background-color: var(--y-teal-600) !important;
  border-radius: var(--y-r-sm) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.swal2-styled.swal2-cancel { border-radius: var(--y-r-sm) !important; font-weight: 500 !important; }

/* notyf toasts */
.notyf__toast { border-radius: var(--y-r-sm) !important; font-family: var(--y-f-display) !important; }

/* ------------------------------------------------------------- 18. responsive */
@media (max-width: 1200px) {
  .grid-mall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  :root { --y-header-h: 62px; }
  body { padding-top: var(--y-header-h); }
  /* .log-in sets a display value, so the legacy hide-sm needs to out-rank it */
  .hide-sm { display: none !important; }
  .logo-sm img { width: 96px !important; }
  .header-section-navbar { padding: 0 !important; }
  .header-section-top { padding: 7px 0; }
  .grid-mall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .table-div2 { position: static; }
  .navside { background-color: var(--y-ink) !important; }
  .nav-list li a:hover, .nav-list li a.active-nav, .nav-list li a.active {
    background-color: rgba(255,255,255,.12) !important;
    color: #fff !important;
    box-shadow: none;
  }
  .account-side-bar { padding: 8px 10px !important; }
  .top-banner { height: 170px; }
}
@media (max-width: 767px) {
  .grid-mall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-card-text { padding: 12px 11px 8px; gap: 6px; }
  .product-heading { font-size: 14px; }
  .new-amount { font-size: 17px; }
  .mall-product > .products-card:last-child { padding: 0 11px 11px; }
  /* row 1: pick + thumbnail + name. row 2: quantity, line total, remove. */
  .cart-card { gap: 10px 12px; }
  .y-line-info { flex: 1 1 55%; order: 1; }
  .y-line-qty { order: 2; }
  .y-line-total { order: 3; min-width: 0; margin-left: auto; align-items: flex-end; }
  .cart-card > .y-icon-btn, .cart-card > .btn-main { order: 4; }
  .account-img { height: 60px; width: 60px; margin-right: 0; }
  .cart-main-content, .account-main-content, .account-side-bar { padding: 14px !important; }
  .y-pdp-panel { padding: 18px; }
  .cart-btn, .view-btn { max-width: none; }
  .y-steps { padding: 12px; font-size: 13px; }
  .y-steps li + li::before { width: 14px; margin: 0 8px; }
  .footer-div { text-align: center; }
}
@media (max-width: 420px) {
  .grid-mall { gap: 10px; }
  .product-card-img figure > div { padding: 10px; }
}

/* --------------------------------------------------------------- 19. motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .mall-product:hover .product-card-img img { transform: none; }
}

/* print: receipts and order pages */
@media print {
  .nav-header, .footer-div, .account-side-bar, .y-steps, .btn-main, .cart-btn { display: none !important; }
  body { padding-top: 0; background: #fff; }
  .cart-main-content, .account-main-content { border: none; padding: 0 !important; }
}

/* ============================================================================
   20. components introduced by the new markup
   ========================================================================== */

/* --- shelves --------------------------------------------------------------- */
.y-shelf { padding: 40px 0; }
.y-shelf + .y-shelf { padding-top: 0; }
.y-shelf .y-sec-head { margin-bottom: 26px; }
.y-shelf--related { border-top: 1px solid var(--y-line); margin-top: 44px; }
.y-shelf > .container-fluid { padding-left: clamp(16px, 4vw, 56px); padding-right: clamp(16px, 4vw, 56px); }

/* --- product card extras --------------------------------------------------- */
.y-card-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: var(--y-ember);
  border-radius: var(--y-r-xs);
  padding: 4px 7px;
  line-height: 1;
}
.product-card-img { position: relative; }
.y-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.y-cur { font-size: .72em; font-weight: 500; margin-right: 1px; }
.y-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 2px; }

/* the add-to-cart block sits in its own .products-card sibling */
.mall-product > .products-card { padding: 0 14px 14px; }
.mall-product .btn-main.addtocartclass i { font-size: 15px; }

/* related-products rail: owl wraps each card in .owl-item */
.related-products .mall-product { height: 100%; }
.related-products .owl-stage { display: flex; }
.related-products .owl-item { display: flex; }
.related-products .owl-item > .mall-product { width: 100% !important; }

/* --- header cart flyout empty state --------------------------------------- */
.y-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 6px 12px;
  text-align: center;
}
.y-cart-empty i { font-size: 26px; color: var(--y-teal-200); }
.y-cart-empty p { margin: 0; font-size: 14px; color: var(--y-muted); }

/* --- sort trigger label ---------------------------------------------------- */
.y-sort-label { font-weight: 500; }
#sort .bi { color: var(--y-muted); font-size: 12px; }

/* --- product detail -------------------------------------------------------- */
.y-pdp { padding: 28px 0 0; }
.y-pdp-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--y-line);
}
.y-pdp-price .y-pv { align-self: center; font-size: 13px !important; padding: 6px 10px; }
.y-pdp-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--y-line);
}
.y-pdp-qty-label {
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--y-muted);
  margin: 0;
}
.y-pdp-buy .cart-btn { flex: 1 1 200px; }

/* --- cart / checkout line -------------------------------------------------- */
.cart-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* style.css sets space-between, which scatters the row once it wraps */
  justify-content: flex-start;
  gap: 14px;
}
.y-line-info { flex: 1 1 220px; min-width: 0; }
.y-line-info h1 { margin: 0 0 4px; overflow-wrap: anywhere; }
.y-line-total { flex-shrink: 0; }
.y-line-sku, .y-line-unit {
  margin: 0;
  font-size: 13px;
  color: var(--y-muted);
  font-variant-numeric: tabular-nums;
}
.y-line-qty { flex: 0 0 auto; }
.y-line-total {
  flex: 0 0 auto;
  min-width: 118px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}
.y-line-total .y-num {
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
  color: var(--y-ember);
  letter-spacing: -.015em;
}
.y-icon-btn i {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* --- selectable option rows ------------------------------------------------ */
.y-choice-group { display: grid; gap: 8px; }
.y-choice-body { display: flex; flex-direction: column; gap: 2px; }
.y-choice-title { font-size: 14.5px; font-weight: 500; color: var(--y-ink); }
.y-choice .form-check-input { margin-top: 1px; flex: 0 0 auto; }

/* --- order outcome --------------------------------------------------------- */
.y-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  border-radius: var(--y-r-lg);
  padding: 40px 24px;
  margin-bottom: 22px;
}
.y-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--y-ok-050);
  color: var(--y-ok);
  font-size: 28px;
  box-shadow: 0 0 0 6px rgba(18,112,74,.07);
}
.y-success h1 {
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 600;
  letter-spacing: -.024em;
  margin: 0;
}
.y-success-ref { margin: 0; font-size: 14.5px; color: var(--y-muted); }
.y-success-ref strong { font-family: var(--y-f-ui); font-variant-numeric: tabular-nums; color: var(--y-ink); }
.y-success-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }

.y-success--fail .y-success-mark {
  background: var(--y-bad-050);
  color: var(--y-bad);
  box-shadow: 0 0 0 6px rgba(179,38,30,.07);
}

/* --- account tab counters -------------------------------------------------- */
.account-tab { flex-wrap: wrap; }
.account-tab button { display: inline-flex; align-items: center; gap: 8px; }
.y-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--y-r-pill);
  background: var(--y-line-soft);
  color: var(--y-muted);
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
}
.account-tab button.active-tab .y-tab-count { background: var(--y-teal-100); color: var(--y-teal-800); }

.account-side-bar ul li.tablinks > span { display: inline-flex; align-items: center; }
.account-side-bar ul li.tablinks .bi-chevron-right { font-size: 11px; color: var(--y-faint); }

/* --- footer ---------------------------------------------------------------- */
.y-footer-top { row-gap: 28px; }
.y-footer-logo { width: 118px; height: auto; margin-bottom: 12px; }
.y-footer-addr {
  font-size: 13px;
  line-height: 1.6;
  color: #a3aeb9;
  max-width: 34ch;
  margin: 0;
}
.y-footer-title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7f8b97;
  margin: 0 0 12px;
}
.y-footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.y-footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; }
.y-footer-contact img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; margin-top: 1px; }
.y-footer-contact em { display: block; font-style: normal; font-size: 12px; color: #7f8b97; }
.y-footer-sep { color: #58626d; margin: 0 4px; }
.footer-logos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-logos img { max-height: 34px; width: auto; }
.y-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.y-footer-copy { margin: 0; font-size: 12.5px; color: #7f8b97; }
.y-footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.y-footer-links a { font-size: 12.5px; }

@media (max-width: 767px) {
  .y-shelf { padding: 26px 0; }
  .y-pdp-buy .cart-btn { flex: 1 1 100%; }
  .footer-logos { justify-content: center; }
  .y-footer-bottom { justify-content: center; text-align: center; }
  .y-footer-links { justify-content: center; gap: 12px; }
  .y-footer-addr { max-width: none; }
  .y-footer-contact li { justify-content: center; }
  .y-success { padding: 30px 18px; }
}

/* the add-to-cart block is auto height inside the column-flex card */
.mall-product > .products-card { height: auto; }

/* --- account order rows ---------------------------------------------------- */
.account-card > .d-flex.position-relative { gap: 12px; }
.account-card > .d-flex.position-relative > .qty + .d-flex { flex: 1 1 auto; min-width: 0; }
.account-card > .d-flex.position-relative .ms-4 { margin-left: 0 !important; }
.account-card > .d-flex.position-relative h1.text-orange {
  color: var(--y-ember) !important;
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  font-size: 16px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.account-card .account-img { height: 64px; width: 64px; margin-right: 12px; }

/* --- address picker (Select Address modal) --------------------------------- */
.account-main-content .form-check + .form-check,
#address .form-check + form { margin-top: 10px; }
#address form + form { margin-top: 10px; }
#address .account-card,
.account-main-content .account-card {
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
/* the radio + card sit on one row, and the card takes all remaining width
   instead of shrink-wrapping its text */
#address .modal-body { padding: 18px 20px 20px; }
#address form + form { margin-top: 0; }
#address form { margin: 0; }
#address form + form .form-check { margin-top: 10px; }
#address .form-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0;
  margin: 0;
}
#address .form-check > .form-check-input {
  margin: 0;
  float: none;
  flex: none;
}
#address .form-check-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
#address .account-card {
  padding: 18px 90px 18px 18px;
  position: relative;
  width: 100%;
}
#address .account-card .radiobuttonDiv h1 { margin-bottom: 6px; }
#address .account-card .radiobuttonDiv p { line-height: 1.5; }
#address .edit-btn { top: 14px; right: 14px; }
#address .account-card:hover,
.account-main-content .account-card:hover {
  border-color: var(--y-teal-200);
}
.form-check-input.SelectedAddressBtn:checked + label .account-card,
.form-check-input:checked + label .account-card {
  border-color: var(--y-teal-600);
  background: var(--y-teal-050);
  box-shadow: 0 0 0 1px var(--y-teal-600) inset;
}

/* --- address form modal (shared partial) ------------------------------------
   Two panes: the fields on the left, and a live "Deliver To" card on the right
   that renders exactly like the address cards the customer picks from, so the
   modal shows the card being written rather than a blank sheet. ------------- */
.y-addr-dialog { max-width: 880px; }
.y-addr-modal .modal-body { padding: 24px 26px 26px; }

.y-addr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 30px;
  align-items: start;
}

.y-form-section {
  font-family: var(--y-f-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--y-gold-700);
  margin: 0 0 14px;
}
.y-addr-fields .y-form-section + .y-field { margin-top: 0; }
.y-addr-fields .y-form-section:not(:first-child) { margin-top: 26px; }

.y-field { margin-bottom: 14px; }
.y-field:last-child { margin-bottom: 0; }
.y-label {
  display: block;
  font-family: var(--y-f-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--y-ink-soft);
  margin-bottom: 6px;
}
.y-req { color: var(--y-bad); font-size: 11px; vertical-align: 2px; margin-left: 1px; }

.y-addr-modal .form-control {
  font-size: 14.5px;
  padding: 9px 12px;
  min-height: 42px;
}
.y-addr-modal select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237c8894'%3E%3Cpath d='M4.5 6.2 8 9.7l3.5-3.5'  stroke='%237c8894' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  padding-right: 32px;
}
.y-addr-textarea { min-height: 86px; resize: vertical; }

.y-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.y-phone-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--y-line);
  border-radius: var(--y-r-sm);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.y-phone-group select.form-control,
.y-phone-group input.form-control {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0;
}
.y-phone-group select.form-control {
  flex: none;
  width: 92px;
  border-right: 1px solid var(--y-line) !important;
  background-color: var(--y-line-soft);
  color: var(--y-ink-soft);
  font-weight: 500;
}
.y-phone-group input.form-control { flex: 1 1 auto; min-width: 0; }
.y-phone-group:focus-within { border-color: var(--y-teal-600); box-shadow: var(--y-ring); }

/* the live preview card */
.y-addr-aside { position: sticky; top: 0; }
.y-addr-card {
  border: 1px solid var(--y-line);
  border-top: 3px solid var(--y-gold-500);
  border-radius: var(--y-r);
  background: var(--y-surface);
  box-shadow: var(--y-sh-1);
  padding: 16px 18px 18px;
}
.y-addr-card p { margin: 0; }
.y-addr-card__name {
  font-family: var(--y-f-display);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--y-ink);
  line-height: 1.35;
  word-break: break-word;
}
.y-addr-card__phone {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--y-teal-700);
  margin-top: 2px !important;
}
.y-addr-card__lines {
  white-space: pre-line;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--y-body);
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px dashed var(--y-line);
  word-break: break-word;
}
.y-addr-card .is-empty { color: var(--y-faint); font-weight: 400; font-style: italic; }

/* mandatory-field state */
.y-addr-modal .form-control.is-invalid {
  border-color: var(--y-bad) !important;
  background-color: var(--y-bad-050);
  background-image: none;
}
.y-addr-modal .form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .22);
}
.y-addr-modal .y-field.has-error .y-label { color: var(--y-bad); }
.y-phone-group:has(.is-invalid) { border-color: var(--y-bad); }
.y-addr-error {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 auto 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--y-bad);
}

.y-addr-modal .modal-footer { gap: 10px; }
.y-addr-modal .modal-footer .y-btn { border-radius: var(--y-r-sm) !important; }

@media (max-width: 767.98px) {
  .y-addr-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .y-addr-aside { position: static; }
  .y-addr-modal .modal-body { padding: 18px; }
}
@media (max-width: 575.98px) {
  .y-field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ============================================================================
   21. Product card — the marketplace's front door
   ----------------------------------------------------------------------------
   Written against what this catalogue actually is: ~210 energy artifacts, a
   quarter of them carrying a 【campaign】 tag inside the product name, 84% of
   them carrying a PV value, priced anywhere from RM9 to RM54,000.

   So the card does three things the old one didn't:
     - lifts the campaign tag out of the name and gives it its own mark
     - gives PV equal billing with price, because PV is the number that makes
       this a YXIN shop and not any other shop
     - stands the piece on a warm plate with a faint concentric energy field,
       instead of a flat white square

   Everything here is deliberately last in the file: it restyles the same
   selectors section 8 established, so source order does the overriding and no
   !important is needed.
   ========================================================================== */

:root {
  /* the shop's own surfaces — warm, so they belong under the gold header */
  --y-paper:       #fdfcf8;
  --y-paper-line:  #e7e2d5;
  /* seal red: the discount mark, kept distinct from the ember used for money */
  --y-cinnabar:    #9c2f26;
  /* product names are artifacts' names — set them in a Song-style serif */
  --y-f-cjk: "Noto Serif SC", "Songti SC", "Source Han Serif SC", "SimSun", Georgia, serif;
  /* stone table, so the paper cards have something warm to sit on */
  --y-canvas: #eceee7;
}

/* --- the card -------------------------------------------------------------- */
.mall-product > a > .products-card,
.mall-product > .products-card {
  background: var(--y-paper);
  border-color: var(--y-paper-line);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mall-product:hover > a > .products-card,
.mall-product:hover > .products-card {
  border-color: var(--y-gold-300);
  box-shadow: 0 2px 4px rgba(60,48,20,.05), 0 14px 30px -14px rgba(60,48,20,.28);
}
/* The whole card lifts as one piece, not two stacked halves.
   Section 8 pins `transform: none !important` on .mall-product to undo
   isotope's absolute positioning, so the lift has to answer in kind. */
.mall-product { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.mall-product:hover { transform: translateY(-3px) !important; }

/* --- the plate ------------------------------------------------------------- */
/* The paper lives on the plate itself and the slide above it stays clear, so
   the ring field can sit between the paper and the piece. Section 8 painted an
   opaque gradient on the inner div, which would bury the rings entirely. */
.product-card-img {
  border-bottom-color: var(--y-paper-line);
  background: radial-gradient(115% 90% at 50% 42%, #fffefb 0%, #fbf7ee 58%, #f5f0e3 100%);
}
.product-card-img figure > div {
  padding: 16px;
  background: none;
}

/* the energy field: three hairline rings breathing out from the piece */
.product-card-img::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: 78%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 33.2%, rgba(168,128,28,.16) 33.2% 33.8%, transparent 34.4%),
    radial-gradient(circle, transparent 0 50.2%, rgba(168,128,28,.12) 50.2% 50.8%, transparent 51.4%),
    radial-gradient(circle, transparent 0 67.2%, rgba(168,128,28,.08) 67.2% 67.8%, transparent 68.4%);
  opacity: .75;
  pointer-events: none;
  z-index: 0;
  transition: transform .55s cubic-bezier(.2,.7,.3,1), opacity .4s ease;
}
.mall-product:hover .product-card-img::before {
  transform: translate(-50%, -50%) scale(1.11);
  opacity: 1;
}
/* the piece sits above its own field */
.product-card-img .carousel__slide { position: relative; z-index: 1; }

/* --- marks on the plate ---------------------------------------------------- */
/* campaign tag, lifted out of the product name */
.y-card-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  max-width: calc(100% - 76px);
  display: block;
  font-family: var(--y-f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--y-gold-700);
  background: rgba(255,253,246,.94);
  border: 1px solid var(--y-gold-100);
  border-left: 3px solid var(--y-gold-500);
  border-radius: 2px var(--y-r-xs) var(--y-r-xs) 2px;
  padding: 4px 8px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* discount, as a seal in the opposite corner */
.y-card-flag {
  top: 10px;
  left: auto;
  right: 10px;
  background: var(--y-cinnabar);
  border-radius: var(--y-r-xs);
  padding: 4px 7px;
  box-shadow: 0 1px 3px rgba(90,20,15,.28);
}

/* --- the name -------------------------------------------------------------- */
.product-card-text { padding: 14px 15px 11px; gap: 9px; }
.product-heading {
  font-family: var(--y-f-cjk);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--y-ink);
  min-height: 3em;
  letter-spacing: 0;
}
.mall-product:hover .product-heading { color: var(--y-gold-700); }

/* --- price and PV, side by side -------------------------------------------- */
/* Price is what it costs. PV is what it earns. A member reads both, so neither
   is allowed to become a footnote to the other. */
.y-card-figures {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 2px;
}
.y-price-row { flex: 1 1 auto; min-width: 0; row-gap: 1px; }
.new-amount { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.cross-amount { font-size: 12.5px; }

.y-pv-value {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  color: var(--y-gold-700) !important;
  background: linear-gradient(180deg, #fdf7e6 0%, #f9edd0 100%);
  border: 1px solid #eeddaf;
  border-radius: var(--y-r-xs);
  padding: 4px 8px;
  line-height: 1;
}
.y-pv-value b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.y-pv-value em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  opacity: .72;
}

/* --- quiet meta ------------------------------------------------------------ */
.y-card-meta { gap: 6px; margin-top: 0; padding-top: 0; }
.weight {
  background: transparent;
  border: 1px solid var(--y-paper-line);
  color: var(--y-muted);
  font-size: 11.5px;
  padding: 3px 7px;
}
/* set marker: how many pieces the price covers */
.y-card-set {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--y-f-ui);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--y-teal-700);
  background: var(--y-teal-050);
  border: 1px solid var(--y-teal-100);
  border-radius: var(--y-r-xs);
  padding: 3px 7px;
}
.y-card-set i { font-size: 11px; }

/* --- add to cart ----------------------------------------------------------- */
.mall-product > .products-card:last-child { padding: 0 15px 15px; }
.mall-product .btn-main.addtocartclass {
  min-height: 40px;
  font-weight: 500;
  letter-spacing: .01em;
  background-color: var(--y-teal-700);
}
.mall-product:hover .btn-main.addtocartclass { background-color: var(--y-teal-800); }

/* --- shelves sit on the stone too ------------------------------------------ */
.grid-mall { gap: 20px; }

@media (max-width: 991px) {
  .grid-mall { gap: 15px; }
}
@media (max-width: 767px) {
  .grid-mall { gap: 12px; }
  .product-card-text { padding: 12px 12px 9px; gap: 7px; }
  .product-heading { font-size: 13.5px; min-height: 2.9em; }
  .new-amount { font-size: 17px; }
  /* price over PV once the card is too narrow to hold both on one line */
  .y-card-figures { flex-direction: column; align-items: flex-start; gap: 7px; }
  .y-card-tag { max-width: calc(100% - 66px); font-size: 10px; padding: 3px 6px; }
  .mall-product > .products-card:last-child { padding: 0 12px 12px; }
  .mall-product:hover { transform: none !important; }
}
@media (max-width: 420px) {
  .product-card-img figure > div { padding: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .mall-product:hover { transform: none !important; }
  .mall-product:hover .product-card-img::before { transform: translate(-50%, -50%); }
}