@charset "UTF-8";
/* Inner pages — shop, product, gifting, cart, checkout, about, contact */
/* =========================================================
   BREADCRUMB — global, shared across all pages
   Matches OpenCart's default markup:
   <ul class="breadcrumb"><li><a href="">Text</a></li>...</ul>
   ========================================================= */

.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

/* separator between crumbs (skip before the very first one) */
.breadcrumb li + li::before {
  content: "›";
  margin: 0 10px;
  color: var(--gold);
  font-size: 15px;
  font-weight: 400;
}

.breadcrumb li a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb li a:hover {
  color: var(--red);
}

/* last crumb = current page, shown emphasized and non-clickable-looking */
.breadcrumb li:last-child a {
  color: var(--ink);
  font-weight: 600;
  pointer-events: none;
}

/* Home crumb icon — the text_home language string is literally an
   <i class="fa fa-home"> icon; style that one real icon instead of
   layering a separate CSS-drawn character on top of it, so every
   breadcrumb on the site (this classic list and the .crumbs hero-banner
   version) shows the exact same single gold fa-home icon. */
.breadcrumb li:first-child a i {
  color: var(--gold);
  margin-right: 5px;
}

@media (max-width: 600px) {
  .breadcrumb {
    font-size: 12px;
  }
  .breadcrumb li + li::before {
    margin: 0 6px;
  }
}

/* =========================================================
   PAGINATION — global, shared across all pages
   Matches OpenCart's default markup:
   <ul class="pagination"><li><a href="">1</a></li>...</ul>
   ========================================================= */

.pagination {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 34px 0 10px;
  padding: 0;
}

.pagination li a,
.pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s var(--ease);
}

.pagination li a:hover {
  border-color: var(--red);
  color: var(--red);
}

.pagination li.active span {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

@media (max-width: 600px) {
  .pagination {
    gap: 6px;
  }
  .pagination li a,
  .pagination li span {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
  }
}

/* ---- Page hero band ---- */
.page-hero {
  background: linear-gradient(115deg, #fdf6ea 0%, #f6e9d2 100%);
  position: relative;
  overflow: hidden;
}
.page-hero .container {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-top: 26px;
  padding-bottom: 34px;
}
.page-hero .ptext {
  flex: 0 0 40%;
}
.page-hero h1 {
  font-size: 46px;
  line-height: 1.08;
  margin: 14px 0 0;
}
.page-hero h1 .accent {
  color: var(--red);
  display: block;
  font-style: italic;
}
.page-hero .orn-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  margin: 16px 0;
}
.page-hero .orn-line::before,
.page-hero .orn-line::after {
  content: "";
  height: 1px;
  width: 70px;
  background: var(--gold);
  opacity: 0.6;
}
.page-hero p.lead {
  color: var(--ink-soft);
  font-size: 15.5px;
  max-width: 340px;
}
.page-hero .pimg-hero {
  flex: 1;
}
.page-hero .pimg-hero img {
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  animation: heroImgIn 1s var(--ease);
}

/* ---- Category chips (shop) ---- */
.chip-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: -26px;
  position: relative;
  z-index: 5;
}
.chip-cat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s var(--ease);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
.chip-cat img {
  width: 44px;
  height: 38px;
  object-fit: cover;
  border-radius: 6px;
}
.chip-cat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.chip-cat.on {
  border-color: var(--red);
  box-shadow:
    inset 0 -3px 0 var(--red),
    var(--shadow-md);
}

/* ---- Shop layout ---- */
.shop-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 26px;
  align-items: start;
  margin-top: 34px;
}
.filters {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 20px;
  position: sticky;
  top: 90px;
}
.filters h3 {
  font-family: var(--ff-body);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}
.fgroup {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.fgroup > summary {
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fgroup > summary::after {
  content: "⌃";
  color: var(--ink-soft);
  font-size: 12px;
  transition: transform 0.3s;
}
.fgroup:not([open]) > summary::after {
  transform: rotate(180deg);
}
.fgroup .fopts {
  display: grid;
  gap: 9px;
  padding-top: 12px;
}
.fopt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.fopt input {
  accent-color: var(--red);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.fopt .fopt-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fopt .cnt {
  font-size: 12px;
  color: #b3a792;
  flex-shrink: 0;
}
.fopt .fopt-caret {
  width: 14px;
  flex-shrink: 0;
  text-align: right;
  color: var(--ink-soft);
  font-size: 14px;
}
.fopt.on {
  color: var(--ink);
  font-weight: 500;
}
.fcat-group {
  margin: 0;
}
.fcat-group summary {
  list-style: none;
  cursor: pointer;
}
.fcat-group summary::-webkit-details-marker {
  display: none;
}
.fcat-group summary .fopt-caret {
  transition: transform 0.25s;
}
.fcat-group[open] > summary .fopt-caret {
  transform: rotate(90deg);
}
.fcat-children {
  display: grid;
  gap: 8px;
  padding: 8px 0 2px 24px;
  border-left: 2px solid var(--line);
  margin-left: 7px;
}
.fcat-children .fopt {
  font-size: 13px;
}
.price-slider {
  padding-top: 14px;
}
.price-slider input[type="range"] {
  width: 100%;
  accent-color: var(--red);
}
.price-vals {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 6px;
}
.clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  border: 1px solid var(--red);
  color: var(--red);
  background: none;
  border-radius: 999px;
  padding: 10px;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.25s;
}
.clear-btn:hover {
  background: var(--red);
  color: #fff;
}
.shop-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.shop-topbar .count {
  font-size: 14px;
  color: var(--ink-soft);
}
.sortbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}
.sortbox select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  background: #fff;
  outline: none;
  cursor: pointer;
}
#shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
#shop-grid .pcard {
  animation: cardIn 0.5s var(--ease) both;
}

/* Desktop only (mobile already handles this via its own @media max-width:767px
   rules) — once a product is already in the cart, the +/- stepper is wider
   than the plain "+" button, and with a long price+unit ("₹1,600" "1000g")
   the two together could overflow the card's single-row price line, getting
   clipped by .pcard's overflow:hidden. Tightening just the stepper's own
   padding/sizing (not wrapping the row, not touching mobile) reclaims enough
   width for the "+" to stay fully visible on one line. */
@media (min-width: 768px) {
  #shop-grid .prow {
    gap: 6px;
  }
  #shop-grid .qty-stepper {
    gap: 4px;
    padding: 3px;
    height: 32px;
  }
  #shop-grid .qty-btn {
    width: 22px;
    height: 22px;
    font-size: 13px;
  }
  #shop-grid .qty-val {
    min-width: 14px;
    font-size: 12.5px;
  }
}
@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 34px;
}
.pager button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  transition: all 0.25s;
}
.pager button.on,
.pager button:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.empty-msg {
  text-align: center;
  color: var(--ink-soft);
  padding: 60px 0;
  font-size: 15px;
  grid-column: 1/-1;
}

/* ---- Product page ---- */
.pd-layout {
  display: grid;
  grid-template-columns: 90px 480px 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 26px;
}
.pd-thumbs {
  display: grid;
  gap: 12px;
}
.pd-thumbs button {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  padding: 0;
  transition:
    border-color 0.25s,
    transform 0.25s;
}
.pd-thumbs button:hover {
  transform: scale(1.04);
}
.pd-thumbs button.on {
  border-color: var(--red);
}
.pd-thumbs img {
  width: 100%;
  height: 74px;
  object-fit: cover;
}
.pd-main {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: var(--cream-2);
  aspect-ratio: 1/0.92;
}
.pd-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity 0.3s,
    transform 0.3s;
  cursor: zoom-in;
}
.pd-main .zoom-hint {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.pd-main.zoomed img {
  transform: scale(1.8);
  cursor: zoom-out;
}
.pd-main.zoomed {
  overflow: hidden;
}
.pd-info h1 {
  font-size: 38px;
}
.pd-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.pd-sub {
  color: var(--ink-soft);
  font-size: 15px;
}
.pd-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 16px 0 4px;
}
.pd-price .now {
  font-size: 34px;
  font-weight: 600;
  color: var(--red);
}
.pd-price .was {
  font-size: 17px;
  color: var(--ink-soft);
  text-decoration: line-through;
}
.pd-price .off {
  font-size: 14px;
  color: var(--green);
  font-weight: 600;
}
.pd-price .unit {
  font-size: 15px;
  color: var(--ink-soft);
  font-weight: 400;
}
.pd-tax {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.wsel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0 18px;
}
.wopt {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
}
.wopt b {
  display: block;
  font-size: 15px;
}
.wopt .wp {
  font-size: 14.5px;
  font-weight: 600;
  margin-top: 2px;
}
.wopt small {
  color: var(--ink-soft);
  font-size: 11.5px;
}
.wopt.on {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.1);
}
.qty-row {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin: 16px 0;
}
/* Matches the same red-pill +/- stepper used on product cards site-wide
   (.qty-stepper/.qty-btn) instead of the old plain white bordered box —
   purely visual, the underlying quantity logic is unchanged. */
.qty {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  padding: 5px;
}
.qty button {
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--red);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s var(--ease);
}
.qty button:hover {
  background: var(--cream);
}
.qty button:active {
  transform: scale(0.88);
}
.qty input {
  width: 34px;
  text-align: center;
  border: 0;
  background: none;
  outline: none;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.pd-assure {
  display: flex;
  gap: 22px;
  margin: 14px 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.pd-assure span::before {
  content: "✓";
  color: var(--green);
  margin-right: 8px;
  font-weight: 700;
}
.pd-delivery {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;
}
.pd-delivery > div {
  padding: 18px 20px;
}
.pd-delivery > div + div {
  border-left: 1px dashed var(--line);
}
.pd-delivery b {
  font-size: 14.5px;
  display: block;
  margin-bottom: 4px;
}
.pd-delivery p {
  font-size: 13px;
  color: var(--ink-soft);
}
.pd-delivery .grn {
  color: var(--green);
  font-weight: 500;
}
.feat-strip {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-top: 44px;
}
.feat-item {
  padding: 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  position: relative;
}
.feat-item + .feat-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  height: 56%;
  width: 1px;
  background: var(--line);
}
.feat-item .fi {
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--gold-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 17px;
}
.feat-item b {
  font-size: 13.5px;
  display: block;
}
.feat-item span {
  font-size: 12px;
  color: var(--ink-soft);
}
.pd-tabs {
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.tab-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding: 0 22px;
}
.tab-nav button {
  border: 0;
  background: none;
  padding: 16px 18px;
  font-size: 14.5px;
  color: var(--ink-soft);
  position: relative;
  transition: color 0.25s;
}
.tab-nav button.on {
  color: var(--red);
  font-weight: 600;
}
.tab-nav button.on::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 2.5px;
  background: var(--red);
  border-radius: 2px;
}
.tab-body {
  display: none;
  padding: 26px;
  grid-template-columns: 1.2fr 1fr;
  gap: 30px;
  animation: heroIn 0.4s var(--ease);
}
.tab-body.on {
  display: grid;
}
.tab-body.on > *:only-child {
  grid-column: 1 / -1;
}
.tab-body .checks {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.tab-body .checks span::before {
  content: "✓";
  color: var(--green);
  margin-right: 8px;
  font-weight: 700;
}
.tab-body img {
  border-radius: 12px;
  width: 100%;
  object-fit: cover;
}
.rel-scroll {
  position: relative;
}
.rel-scroll .scroll-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px;
}
.rel-scroll .pcard {
  flex: 0 0 215px;
}
.rel-scroll .sc-prev,
.rel-scroll .sc-next {
  position: absolute;
  top: 40%;
  z-index: 5;
}
.rel-scroll .sc-prev {
  left: -16px;
}
.rel-scroll .sc-next {
  right: -16px;
}
.fbt {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px;
  margin-top: 20px;
}
.fbt-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}
.fbt-item img {
  width: 60px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
}
.fbt-item b {
  font-size: 13.5px;
  display: block;
}
.fbt-item span {
  font-size: 13px;
  color: var(--ink-soft);
}
.fbt .plus {
  font-size: 20px;
  color: var(--ink-soft);
}
.fbt-total {
  flex: 1;
  text-align: right;
}
.fbt-total .tp {
  font-size: 18px;
  font-weight: 600;
}
.fbt-total .sv {
  font-size: 13px;
  color: var(--green);
  display: block;
  margin: 2px 0 10px;
}

/* ---- Gifting ---- */
.gift-cats .occ-card img {
  height: 130px;
}
.enquiry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.enq-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 30px;
}
.enq-card h3 {
  font-size: 24px;
  margin-bottom: 6px;
}
.enq-card > p {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.enq-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.enq-form .full {
  grid-column: 1/-1;
}
.enq-form .text-danger {
  color: var(--red);
  font-size: 12.5px;
  margin-top: 4px;
}
.insp-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.insp-card img {
  border-radius: 10px;
  margin: 16px 0;
  height: 170px;
  object-fit: cover;
}
.insp-feats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: auto;
}
.insp-feats div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.insp-feats .ii {
  display: block;
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 6px;
}
.cta-band {
  background: linear-gradient(100deg, #8e1024, var(--red));
  border-radius: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 34px 44px;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "❁";
  position: absolute;
  right: -30px;
  top: -40px;
  font-size: 180px;
  color: rgba(255, 255, 255, 0.08);
}
.cta-band h2 {
  font-size: 30px;
}
.cta-band p {
  opacity: 0.9;
  font-size: 14.5px;
  margin-top: 6px;
}

/* ---- Alert / flash messages (success, error, warning, info) ---- */
.alert {
  position: relative;
  padding: 14px 20px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  animation: alertAutoHide 0.4s ease forwards;
  animation-delay: 3s;
}
@keyframes alertAutoHide {
  to {
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-width: 0;
    max-height: 0;
  }
}
.alert i {
  font-size: 16px;
}
.alert-success {
  background: #eaf6ee;
  border-color: var(--green);
  color: var(--green);
}
.alert-danger {
  background: #fceaea;
  border-color: var(--red);
  color: var(--red-dark);
}
.alert-warning {
  background: var(--gold-light);
  border-color: var(--gold);
  color: #7a5a12;
}
.alert-info {
  background: var(--cream-2);
  border-color: var(--gold);
  color: var(--ink-soft);
}
.alert-dismissible {
  padding-right: 44px;
}
.alert .close,
.alert button.close {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
}
.alert .close:hover,
.alert button.close:hover {
  opacity: 1;
}

/* ---- Cart ---- */
.cart-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.cart-heading-row h1 {
  margin: 0;
}
.cart-layout {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 26px;
  align-items: start;
  margin-top: 30px;
}
.cart-items {
  display: grid;
  gap: 14px;
}
.cart-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  animation: cardIn 0.4s var(--ease) both;
}
.cart-item img {
  width: 92px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
}
.cart-item .ci-name {
  flex: 1;
}
.cart-item .ci-name b {
  font-size: 16px;
  display: block;
}
.cart-item .ci-name span {
  font-size: 13px;
  color: var(--ink-soft);
}
.cart-item .ci-price {
  font-weight: 600;
  width: 90px;
  text-align: right;
}
.cart-item .rm {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 17px;
  transition:
    color 0.2s,
    transform 0.2s;
}
.cart-item .rm:hover {
  color: var(--red);
  transform: scale(1.15);
}
.summary {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 26px;
  position: sticky;
  top: 90px;
}
.summary h3 {
  font-size: 22px;
  margin-bottom: 18px;
}
.sum-row {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  padding: 8px 0;
  color: var(--ink-soft);
}
.sum-row.total {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.sum-row .free {
  color: var(--green);
  font-weight: 500;
}
.ship-note {
  background: var(--cream);
  border: 1px dashed var(--gold);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 14px 0;
}
.ship-bar {
  height: 6px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}
.ship-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--red));
  border-radius: 99px;
  transition: width 0.6s var(--ease);
}
.cart-empty {
  text-align: center;
  padding: 80px 0;
}
.cart-empty .big {
  font-size: 54px;
  display: block;
  margin-bottom: 14px;
}

/* ---- Checkout ---- */
.co-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 26px;
  align-items: start;
  margin-top: 30px;
}
/* Grid items default to a min-width based on their widest unbreakable
   descendant (e.g. the confirm-order table, or a long product name in the
   summary) — without this, that content silently pushes the whole grid,
   and the page, wider than the viewport instead of scrolling/wrapping
   inside its own box. */
.co-layout > * {
  min-width: 0;
}
.co-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 28px;
  margin-bottom: 20px;
}
.co-card h3 {
  font-family: var(--ff-body);
  font-size: 20px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}
.co-card h3 .stepn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.co-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.co-form .full {
  grid-column: 1/-1;
}

/* ---- Checkout step content injected via AJAX (raw Bootstrap markup, no Bootstrap CSS loaded) ----
   Single-column by default: every direct child (radio, wrapper divs like
   #shipping-new/#payment-new, buttons, forms, etc.) automatically gets the
   full width with no exceptions to maintain — this is deliberate, so any
   new wrapper div these AJAX-loaded partials introduce later stacks
   cleanly by default instead of silently getting trapped in a half-width
   column like #shipping-new/#payment-new did before. Naturally responsive
   too, since single-column needs no breakpoint to collapse. */
.co-form form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.co-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}
.co-form legend {
  font-family: var(--ff-display);
  font-size: 17px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 16px;
  width: 100%;
}
.co-form .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}
.co-form .row > [class*="col-sm"] {
  flex: 1;
  min-width: 260px;
}
/* Step 2 (Guest/Register account+address) specifically stacks instead of
   side-by-side — that split has noticeably uneven field counts (e.g. no
   password field in Guest mode), which left a large empty gap next to the
   shorter column. Step 1's New/Returning Customer split stays side-by-side
   since it's naturally balanced. */
#collapse-payment-address .row {
  display: block;
}
#collapse-payment-address .row > [class*="col-sm"] {
  width: 100%;
}
/* Step 1's Continue/Login buttons — same button used site-wide (Add to
   Cart, hero CTAs) reads oversized next to short labels in this compact,
   single-column step. */
#collapse-checkout-option .btn {
  padding: 10px 22px;
  font-size: 14px;
}
.co-form .form-group {
  margin-bottom: 16px;
}
.co-form .form-group .control-label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  text-align: left;
  width: auto;
  padding: 0;
}
.co-form .form-control {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  box-sizing: border-box;
  background: #fff;
}
.co-form .form-control:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.1);
}
.co-form textarea.form-control {
  resize: vertical;
}
.co-form select.form-control {
  cursor: pointer;
}
.co-form .radio,
.co-form .checkbox {
  font-size: 13.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.co-form .radio input,
.co-form .checkbox input {
  accent-color: var(--red);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.co-form .buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
/* Checkout step content (login.twig, shipping/payment method, etc.) is
   OpenCart's own default markup — bare h2/h3 headings and <p> text with
   no wrapping class, so the global *{margin:0} reset leaves zero space
   between them (confirmed on every step, not just this one). Radio
   rows and the .buttons row already had their own spacing above; these
   two were the only gaps. Matches the equivalent mobile-only fix
   already in mobile.css, so both are now consistent with each other. */
.co-form h1,
.co-form h2,
.co-form h3 {
  margin-bottom: 10px;
}
.co-form p {
  margin-bottom: 14px;
}
.co-form input[type="button"].btn,
.co-form input[type="submit"].btn,
.co-form button.btn {
  margin-top: 8px;
}
.co-form .buttons .pull-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.co-form .text-danger {
  color: var(--red);
  font-size: 12.5px;
  margin-top: 4px;
}

/* Order summary table (Confirm Order step) — raw Bootstrap table markup,
   no Bootstrap CSS loaded, so it needs its own borders/spacing/header. */
.co-form table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 16px;
  font-size: 14px;
}
.co-form table th,
.co-form table td {
  padding: 10px 12px;
  border: 1px solid var(--line);
}
.co-form table thead td {
  background: var(--cream-2);
  font-weight: 600;
  color: var(--ink);
}
.co-form table tbody tr:hover {
  background: var(--cream-2);
}
.co-form table tfoot td {
  border: 0;
  padding: 8px 12px;
}
.co-form table a {
  color: var(--ink);
  text-decoration: none;
}
.co-form table a:hover {
  color: var(--red);
}
@media (max-width: 600px) {
  .co-form .buttons .pull-right {
    width: 100%;
    justify-content: flex-end;
  }
}
.pay-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.25s;
  margin-bottom: 10px;
}
.pay-opt:hover {
  border-color: var(--gold);
}
.pay-opt.on {
  border-color: var(--red);
  background: #fff8f5;
}
.pay-opt input {
  accent-color: var(--red);
}
.pay-opt b {
  font-size: 14.5px;
}
.pay-opt span {
  font-size: 12.5px;
  color: var(--ink-soft);
  display: block;
}
.co-mini {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}
.co-mini:last-of-type {
  border: 0;
}
.co-mini img {
  width: 52px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
}
.co-mini > span:not(.p) {
  min-width: 0;
  overflow-wrap: break-word;
}
.co-mini .q {
  color: var(--ink-soft);
}
.co-mini .p {
  margin-left: auto;
  font-weight: 600;
  flex: 0 0 auto;
}

/* ---- About ---- */
.about-hero {
  background: linear-gradient(115deg, #fdf6ea, #f6e9d2);
  text-align: center;
  padding: 70px 0 60px;
}
.about-hero h1 {
  font-size: 48px;
}
.about-hero h1 em {
  color: var(--red);
  font-style: italic;
}
.about-hero p {
  max-width: 520px;
  margin: 16px auto 0;
  color: var(--ink-soft);
}
/* Mobile-only additions (see mobile.css) — hidden here so desktop stays
   exactly as it was. */
.about-hero .ah-orn,
.about-hero .ah-mobile-cta {
  display: none;
}
.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.about-story img {
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.about-story h2 {
  font-size: 32px;
  margin-bottom: 16px;
}
.about-story p {
  color: var(--ink-soft);
  margin-bottom: 14px;
  font-size: 15.5px;
}
.stats-band {
  background: linear-gradient(100deg, #8e1024, var(--red));
  border-radius: 16px;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  padding: 38px 20px;
}
.stat .n {
  font-family: var(--ff-display);
  font-size: 42px;
  font-weight: 700;
  color: var(--gold-light);
}
.stat span {
  font-size: 13.5px;
  opacity: 0.85;
}
.value-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 28px;
  text-align: center;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.value-card .vi {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border: 1px solid var(--gold-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--gold);
}
.value-card b {
  font-family: var(--ff-display);
  font-size: 19px;
  display: block;
  margin-bottom: 8px;
}
.value-card p {
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ---- Contact ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  grid-template-areas: "info form" "map map";
  gap: 26px;
  align-items: stretch;
  margin-top: 30px;
}
.cinfo-card {
  grid-area: info;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
  padding: 10px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contact-grid .enq-card {
  grid-area: form;
}
.map-ph {
  border-radius: 14px;
  border: 1px solid var(--line);
  height: 260px;
  background: repeating-linear-gradient(
    45deg,
    #f6eddd 0 14px,
    #fbf4e8 14px 28px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 13px;
  font-family: ui-monospace, monospace;
  margin-top: 50px;
}
.map-ph-full {
  grid-area: map;
  width: 100%;
  margin-top: 30px;
}

/* landscape hero fix */
.pimg-hero img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  object-position: right center;
}

/* shared: festive banner + occasion cards (inner pages) */
.fest-banner {
  background: radial-gradient(
    120% 200% at 90% 50%,
    #8e1024 0%,
    var(--red) 55%,
    #b00e22 100%
  );
  border-radius: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px 40px;
  position: relative;
  overflow: hidden;
}
.fest-banner .ftext {
  flex: 1;
  position: relative;
}
.fest-banner .ftext small {
  color: var(--gold-light);
  letter-spacing: 0.06em;
  font-size: 13px;
}
.fest-banner .ftext h2 {
  font-size: 32px;
  margin: 4px 0 6px;
  color: #fff;
}
.fest-banner .ftext p {
  font-size: 14.5px;
  opacity: 0.9;
  max-width: 460px;
}
.fest-banner .btn {
  position: relative;
  flex: none;
  white-space: nowrap;
}
.occ-card,
.gift-cats .occ-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  position: relative;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.occ-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.occ-card img {
  border-radius: 8px;
  height: 160px;
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.occ-card:hover img {
  transform: scale(1.06);
}
.occ-card b {
  font-family: var(--ff-display);
  font-size: 18px;
}
.occ-card p {
  font-size: 13.5px;
  color: var(--ink-soft);
  flex: 1;
}
.gift-cats .occ-card img {
  height: 160px;
}

/* category pages */
.cat-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cat-banner img {
  width: 100%;
  display: block;
  transform-origin: center;
  animation: catZoom 18s ease-in-out infinite alternate;
  height: 300px;
  object-fit: cover;
}
@keyframes catZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.055);
  }
}
.cat-banner .cat-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 32%;
  background: linear-gradient(
    105deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: skewX(-18deg);
  animation: catSheen 6.5s ease-in-out infinite;
}
@keyframes catSheen {
  0%,
  55% {
    left: -45%;
  }
  85%,
  100% {
    left: 130%;
  }
}
.sec-head .kicker {
  font-size: 14.5px;
  color: var(--ink-soft);
}
.sec-head .kicker em {
  color: var(--gold);
  font-style: normal;
}
.sec-head h2 em {
  font-style: italic;
}
.cat-chips {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap;
}
.cat-chips span {
  border: 1px solid var(--gold-light);
  background: #fff;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  color: var(--ink-soft);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.cat-chips span:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: var(--red);
  border-color: var(--red);
}
.breadcrumb {
  font-size: 13.5px;
  color: var(--ink-soft);
  padding-top: 6px;
}
.breadcrumb a {
  color: var(--ink-soft);
}
.breadcrumb a:hover {
  color: var(--red);
}
.breadcrumb b {
  color: var(--red);
  font-weight: 600;
}
.addbtn {
  width: 100%;
  margin-top: 12px;
  border: 0;
  background: var(--red);
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition:
    background 0.25s,
    transform 0.2s;
}
.addbtn:hover {
  background: var(--red-dark);
}
.addbtn:active {
  transform: scale(0.98);
}

/* =========================================================
   CART PAGE
   ========================================================= */

.cart-layout {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 26px;
  align-items: start;
  margin-top: 30px;
}

/* ---- Items list ---- */
.cart-items-list {
  display: grid;
  gap: 14px;
}

.cart-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  animation: cartRowIn 0.4s var(--ease) both;
}
@keyframes cartRowIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cart-row img {
  width: 92px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
}

.cart-row-info {
  flex: 1;
}
.cart-row-info .cart-title {
  font-size: 16px;
  display: block;
  font-weight: 600;
  color: var(--ink);
}
.cart-row-info .cart-title a {
  color: inherit;
  text-decoration: none;
}
.cart-row-info .cart-model {
  color: var(--ink-soft);
  font-size: 12.5px;
  display: block;
  margin-top: 2px;
}
.cart-row-info .cart-option {
  color: var(--ink-soft);
  font-size: 12.5px;
  display: block;
}
.cart-row-info .cart-oos {
  color: var(--red);
  font-weight: 700;
  margin-left: 4px;
}

/* Same red-pill +/- look used everywhere else on the site (product-card
   steppers, product detail page's own Quantity control) instead of the
   old plain white bordered box. */
.cart-qty-box {
  display: flex;
  align-items: center;
  gap: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  padding: 3px;
}
.cart-qty-box input {
  width: 16px;
  text-align: center;
  border: 0;
  background: none;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.cart-qty-box button {
  width: 22px;
  height: 22px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s var(--ease);
  cursor: pointer;
}
.cart-qty-box button:hover {
  background: var(--cream);
}
.cart-qty-box button:active {
  transform: scale(0.88);
}

.cart-price {
  font-weight: 500;
  width: 90px;
  text-align: right;
  color: var(--ink-soft);
}
.cart-total {
  font-weight: 700;
  width: 100px;
  text-align: right;
  color: var(--ink);
}

.cart-remove-btn {
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  padding: 6px;
  transition:
    color 0.2s,
    transform 0.2s;
  cursor: pointer;
}
.cart-remove-btn:hover {
  color: var(--red);
  transform: scale(1.15);
}

/* Voucher row variant */
.cart-row.cart-voucher-row {
  background: var(--cream);
  border-style: dashed;
}

/* ---- Order summary panel ---- */
.cart-summary-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 26px;
  position: sticky;
  top: 90px;
}
.cart-summary-panel h3 {
  font-size: 22px;
  margin-bottom: 18px;
  color: var(--ink);
}

.cart-sum-row {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  padding: 8px 0;
  color: var(--ink-soft);
}
.cart-sum-row.cart-sum-total {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.cart-sum-row .cart-free-tag {
  color: var(--green);
  font-weight: 500;
}

.cart-ship-note {
  background: var(--cream);
  border: 1px dashed var(--gold);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 14px 0;
}

/* ---- Inline coupon apply (summary panel) ---- */
.cart-coupon-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 14px 0;
  overflow: hidden;
}
.cart-coupon-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cream-2);
  border: 0;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.cart-coupon-chev {
  transition: transform 0.25s var(--ease);
}
.cart-coupon-toggle.open .cart-coupon-chev {
  transform: rotate(180deg);
}
.cart-coupon-body {
  display: none;
  padding: 14px;
}
.cart-coupon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cart-coupon-input {
  flex: 1;
  min-width: 140px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  box-sizing: border-box;
}
.cart-coupon-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.1);
}
.cart-coupon-apply {
  width: auto;
  padding: 10px 22px;
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s;
}
.cart-coupon-apply:hover {
  background: var(--red-dark);
}
@media (max-width: 480px) {
  .cart-coupon-row {
    flex-direction: column;
  }
  .cart-coupon-input,
  .cart-coupon-apply {
    width: 100%;
  }
}
.cart-coupon-jump {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: center;
  margin: -4px 0 14px;
  text-decoration: underline;
  text-decoration-color: var(--line);
}
.cart-coupon-jump:hover {
  color: var(--red);
}
.cart-ship-bar {
  height: 6px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}
.cart-ship-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--red));
  border-radius: 99px;
  transition: width 0.6s var(--ease);
}

.cart-actions {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.cart-actions .cart-btn {
  width: 100%;
  text-align: center;
  border-radius: 999px;
  padding: 12px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  text-decoration: none;
  display: block;
}
.cart-actions .cart-btn-primary {
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
}
.cart-actions .cart-btn-primary:hover {
  background: var(--red-dark);
}
.cart-actions .cart-btn-secondary {
  background: none;
  color: var(--ink);
  border: 1px solid var(--line);
}
.cart-actions .cart-btn-secondary:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ---- Cross-sell / "you may also add" module wrapper ---- */
.cart-modules-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 26px;
  margin-top: 30px;
}
.cart-modules-box h3 {
  font-size: 20px;
  margin-bottom: 6px;
}
.cart-modules-box p {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

/* ---- Coupon / Voucher / Reward / Shipping-estimate forms (raw Bootstrap markup, no Bootstrap CSS loaded) ---- */
.cart-modules-box .panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 14px;
  overflow: hidden;
}
.cart-modules-box .panel:last-child {
  margin-bottom: 0;
}
.cart-modules-box .panel-heading {
  padding: 14px 18px;
  background: var(--cream-2);
}
.cart-modules-box .panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.cart-modules-box .panel-title a {
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-decoration: none;
}
.cart-modules-box .panel-body {
  padding: 16px 18px;
}
.cart-modules-box label.control-label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.cart-modules-box .form-control {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  box-sizing: border-box;
  background: #fff;
}
.cart-modules-box .form-control:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.1);
}
.cart-modules-box .input-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cart-modules-box .input-group .form-control {
  flex: 1;
  min-width: 180px;
}
.cart-modules-box .input-group-btn {
  display: flex;
}
@media (max-width: 600px) {
  .cart-modules-box .input-group {
    flex-direction: column;
  }
  .cart-modules-box .input-group .form-control,
  .cart-modules-box .input-group-btn .btn {
    width: 100%;
  }
}

/* ---- Empty cart state ---- */
.cart-empty-state {
  text-align: center;
  padding: 80px 0;
}
.cart-empty-state .cart-empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 14px;
  color: var(--gold);
}
.cart-empty-state p {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 16px;
}
.cart-empty-state .cart-btn-primary {
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s;
}
.cart-empty-state .cart-btn-primary:hover {
  background: var(--red-dark);
}

/* ---- Information pages (Privacy/Terms/Shipping etc.) — the admin's
   rich-text editor writes inline font-family/font-size onto whatever
   it saves, which otherwise beats the theme's CSS; force the site's
   own fonts back regardless of what the editor applied. ---- */
.info-content,
.info-content * {
  font-family: var(--ff-body) !important;
}
.info-content h1,
.info-content h2,
.info-content h3,
.info-content h4 {
  font-family: var(--ff-display) !important;
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */

.login-wrap {
  display: flex;
  justify-content: center;
  padding: 50px 20px 70px;
}

.login-card {
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-md);
  padding: 38px 36px;
  position: relative;
  overflow: hidden;
  animation: loginCardIn 0.5s var(--ease) both;
}
@keyframes loginCardIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.login-card::before {
  content: "❁";
  position: absolute;
  top: -26px;
  right: -22px;
  font-size: 120px;
  color: var(--gold-light);
  opacity: 0.25;
}

.login-orn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  margin-bottom: 10px;
  justify-content: center;
}
.login-orn::before,
.login-orn::after {
  content: "";
  height: 1px;
  width: 36px;
  background: var(--gold);
  opacity: 0.6;
}
.login-orn span {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-card h2 {
  font-family: var(--ff-display);
  font-size: 28px;
  text-align: center;
  color: var(--ink);
  margin-bottom: 6px;
}
.login-card .login-sub {
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 26px;
}

.login-group {
  margin-bottom: 18px;
  position: relative;
}
.login-group label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.login-group input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  box-sizing: border-box;
}
.login-group input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.1);
}

.login-forgot {
  display: block;
  text-align: right;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 8px;
  transition: color 0.2s;
}
.login-forgot:hover {
  color: var(--red);
}

.login-submit {
  width: 100%;
  border: 0;
  background: var(--red);
  color: #fff;
  padding: 13px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.2s;
  margin-top: 6px;
}
.login-submit:hover {
  background: var(--red-dark);
}
.login-submit:active {
  transform: scale(0.98);
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 18px;
  color: var(--ink-soft);
  font-size: 12px;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.login-register {
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.login-register a {
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
}
.login-register a:hover {
  text-decoration: underline;
}

.login-alert {
  max-width: 440px;
  margin: 0 auto 18px;
}

/* =========================================================
   REGISTER PAGE
   ========================================================= */

.register-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 70px;
}

.register-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-md);
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
  animation: registerCardIn 0.5s var(--ease) both;
}
@keyframes registerCardIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.register-card::before {
  content: "❁";
  position: absolute;
  top: -30px;
  right: -24px;
  font-size: 130px;
  color: var(--gold-light);
  opacity: 0.22;
}

.register-head {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}
.register-orn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  margin-bottom: 10px;
  justify-content: center;
}
.register-orn::before,
.register-orn::after {
  content: "";
  height: 1px;
  width: 36px;
  background: var(--gold);
  opacity: 0.6;
}
.register-orn span {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.register-head h1 {
  font-family: var(--ff-display);
  font-size: 30px;
  color: var(--ink);
  margin-bottom: 6px;
}
.register-head p {
  font-size: 14px;
  color: var(--ink-soft);
}

.register-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 30px;
}
.register-fieldset:last-of-type {
  margin-bottom: 0;
}
.register-fieldset legend {
  font-family: var(--ff-display);
  font-size: 19px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 20px;
  width: 100%;
}

/* Field rows — override bootstrap col-sm layout visually */
.register-fieldset .form-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-bottom: 18px;
  border: 0;
  padding: 0;
}
.register-fieldset .form-group .control-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  width: auto;
  text-align: left;
  padding: 0;
}
.register-fieldset .form-group > div {
  width: 100%;
}

.register-fieldset .form-control {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  box-sizing: border-box;
  background: #fff;
}
.register-fieldset .form-control:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.1);
}

.register-fieldset textarea.form-control {
  resize: vertical;
}

/* Two-column grid for name/email/telephone/password pairs */
.register-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .register-row2 {
    grid-template-columns: 1fr;
  }
}

.register-fieldset .radio,
.register-fieldset .radio-inline {
  font-size: 13.5px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 18px;
}
.register-fieldset .radio input,
.register-fieldset .radio-inline input {
  accent-color: var(--red);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.register-fieldset .text-danger {
  color: var(--red);
  font-size: 12.5px;
  margin-top: 4px;
}

.register-fieldset .btn-default {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.25s;
}
.register-fieldset .btn-default:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.register-agree {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 10px;
}
.register-agree input[type="checkbox"] {
  accent-color: var(--red);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.register-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
}
.register-submit {
  border: 0;
  background: var(--red);
  color: #fff;
  padding: 13px 34px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.2s;
}
.register-submit:hover {
  background: var(--red-dark);
}
.register-submit:active {
  transform: scale(0.98);
}

.register-note {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 24px;
}

.register-alert {
  max-width: 760px;
  margin: 0 auto 18px;
}

/* =========================================================
   FORGOTTEN PASSWORD PAGE
   ========================================================= */

.forgotten-wrap {
  display: flex;
  justify-content: center;
  padding: 50px 20px 70px;
}

.forgotten-card {
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-md);
  padding: 38px 36px;
  position: relative;
  overflow: hidden;
  animation: forgottenCardIn 0.5s var(--ease) both;
}
@keyframes forgottenCardIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.forgotten-card::before {
  content: "❁";
  position: absolute;
  top: -26px;
  right: -22px;
  font-size: 120px;
  color: var(--gold-light);
  opacity: 0.25;
}

.forgotten-orn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  margin-bottom: 10px;
  justify-content: center;
}
.forgotten-orn::before,
.forgotten-orn::after {
  content: "";
  height: 1px;
  width: 36px;
  background: var(--gold);
  opacity: 0.6;
}
.forgotten-orn span {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.forgotten-card h1 {
  font-family: var(--ff-display);
  font-size: 26px;
  text-align: center;
  color: var(--ink);
  margin-bottom: 6px;
}
.forgotten-card .forgotten-sub {
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 26px;
  line-height: 1.5;
}

.forgotten-group {
  margin-bottom: 22px;
}
.forgotten-group label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.forgotten-group input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  box-sizing: border-box;
}
.forgotten-group input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.1);
}

.forgotten-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
}

.forgotten-back {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s;
}
.forgotten-back:hover {
  color: var(--red);
}

.forgotten-submit {
  border: 0;
  background: var(--red);
  color: #fff;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.2s;
  white-space: nowrap;
}
.forgotten-submit:hover {
  background: var(--red-dark);
}
.forgotten-submit:active {
  transform: scale(0.98);
}

.forgotten-alert {
  max-width: 440px;
  margin: 0 auto 18px;
}

/* =========================================================
   SIDEBAR COLUMNS (column-left / column-right) — sidebar.css
   Shared partial used across pages; scoped via #column-left
   and #column-right so nothing else is affected.
   ========================================================= */

#column-left,
#column-right {
  display: grid;
  gap: 20px;
}

/* Generic wrapper for whatever OpenCart module renders inside
   (category list, banner, best-sellers, etc.) */
#column-left .sidebar-module,
#column-right .sidebar-module {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease);
  margin-top: 50px;
}
#column-left .sidebar-module:hover,
#column-right .sidebar-module:hover {
  box-shadow: var(--shadow-md);
}

#column-left .sidebar-module h3,
#column-right .sidebar-module h3 {
  font-family: var(--ff-display);
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

/* Generic link list style, in case a module renders <ul><li><a> */
#column-left .sidebar-module ul,
#column-right .sidebar-module ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
#column-left .sidebar-module ul li,
#column-right .sidebar-module ul li {
  border-top: 1px solid var(--line);
}
#column-left .sidebar-module ul li:first-child,
#column-right .sidebar-module ul li:first-child {
  border-top: 0;
}
#column-left .sidebar-module a,
#column-right .sidebar-module a {
  display: block;
  padding: 9px 2px;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  transition:
    color 0.2s,
    padding-left 0.2s;
}
#column-left .sidebar-module a:hover,
#column-right .sidebar-module a:hover {
  color: var(--red);
  padding-left: 5px;
}

/* Generic image/banner module */
#column-left .sidebar-module img,
#column-right .sidebar-module img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

/* =========================================================
   ACCOUNT DASHBOARD PAGE 
   ========================================================= */
/* =========================================================
   ACCOUNT DASHBOARD PAGE — standalone styles (account.css)
   Namespaced with "account-" prefix.
   Fixed: cards no longer stretch too wide on full-width layouts.
   ========================================================= */

.account-wrap {
  margin: 20px auto 0;
  max-width: 1000px;
}

.account-intro {
  text-align: center;
  margin-bottom: 30px;
}
.account-orn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  margin-bottom: 10px;
  justify-content: center;
}
.account-orn::before,
.account-orn::after {
  content: "";
  height: 1px;
  width: 36px;
  background: var(--gold);
  opacity: 0.6;
}
.account-orn span {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.account-intro h1 {
  font-family: var(--ff-display);
  font-size: 27px;
  color: var(--ink);
}

.account-top-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.account-logout-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  text-decoration: none;
  transition:
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.account-logout-link svg {
  width: 14px;
  height: 14px;
}
.account-logout-link:hover {
  color: var(--red);
  border-color: var(--red);
}

.account-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  animation: accountCardIn 0.45s var(--ease) both;
}
@keyframes accountCardIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.account-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 26px 24px;
  min-height: 132px;
  text-decoration: none;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.account-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold-light);
}

.account-tile-ic {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 1px solid var(--gold-light);
  color: var(--gold);
  font-size: 19px;
  transition:
    background 0.25s var(--ease),
    border-color 0.25s var(--ease),
    color 0.25s var(--ease);
}
.account-tile:hover .account-tile-ic {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.account-tile-body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.account-tile-body b {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
.account-tile-body span {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.account-tile-arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--red);
  font-size: 12px;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.account-tile:hover .account-tile-arrow {
  opacity: 1;
  transform: translateX(0);
}

.account-alert {
  margin-bottom: 20px;
  max-width: 1000px;
}

@media (max-width: 767px) {
  .account-tile-grid {
    grid-template-columns: 1fr;
  }
  .account-tile {
    min-height: auto;
  }
}

/* =========================================================
   EDIT ACCOUNT PAGE
   ========================================================= */

.edit-account-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 70px;
}

.edit-account-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-md);
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
  animation: editAccountCardIn 0.5s var(--ease) both;
}
@keyframes editAccountCardIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.edit-account-card::before {
  content: "❁";
  position: absolute;
  top: -30px;
  right: -24px;
  font-size: 130px;
  color: var(--gold-light);
  opacity: 0.22;
}

.edit-account-head {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}
.edit-account-orn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  margin-bottom: 10px;
  justify-content: center;
}
.edit-account-orn::before,
.edit-account-orn::after {
  content: "";
  height: 1px;
  width: 36px;
  background: var(--gold);
  opacity: 0.6;
}
.edit-account-orn span {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.edit-account-head h1 {
  font-family: var(--ff-display);
  font-size: 28px;
  color: var(--ink);
}

.edit-account-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.edit-account-fieldset legend {
  font-family: var(--ff-display);
  font-size: 19px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 20px;
  width: 100%;
}

.edit-account-fieldset .form-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-bottom: 18px;
  border: 0;
  padding: 0;
}
.edit-account-fieldset .form-group .control-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  width: auto;
  text-align: left;
  padding: 0;
}
.edit-account-fieldset .form-group > div {
  width: 100%;
}

.edit-account-fieldset .form-control {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  box-sizing: border-box;
  background: #fff;
}
.edit-account-fieldset .form-control:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.1);
}
.edit-account-fieldset textarea.form-control {
  resize: vertical;
}

.edit-account-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .edit-account-row2 {
    grid-template-columns: 1fr;
  }
}

.edit-account-fieldset .radio,
.edit-account-fieldset .checkbox {
  font-size: 13.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.edit-account-fieldset .radio input,
.edit-account-fieldset .checkbox input {
  accent-color: var(--red);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.edit-account-fieldset .text-danger {
  color: var(--red);
  font-size: 12.5px;
  margin-top: 4px;
}

.edit-account-fieldset .btn-default {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.25s;
}
.edit-account-fieldset .btn-default:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.edit-account-fieldset span {
  font-size: 13px;
  color: var(--ink-soft);
  margin-left: 10px;
}

.edit-account-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
}
.edit-account-back {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s;
}
.edit-account-back:hover {
  color: var(--red);
}
.edit-account-submit {
  border: 0;
  background: var(--red);
  color: #fff;
  padding: 12px 30px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.2s;
}
.edit-account-submit:hover {
  background: var(--red-dark);
}
.edit-account-submit:active {
  transform: scale(0.98);
}

.edit-account-alert {
  max-width: 760px;
  margin: 0 auto 18px;
}

/* =========================================================
   CHANGE PASSWORD PAGE — standalone styles (change-password.css)
   Namespaced with "change-password-" prefix.
   ========================================================= */

.change-password-wrap {
  display: flex;
  justify-content: center;
  padding: 50px 20px 70px;
}

.change-password-card {
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-md);
  padding: 38px 36px;
  position: relative;
  overflow: hidden;
  animation: changePasswordCardIn 0.5s var(--ease) both;
}
@keyframes changePasswordCardIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.change-password-card::before {
  content: "❁";
  position: absolute;
  top: -26px;
  right: -22px;
  font-size: 120px;
  color: var(--gold-light);
  opacity: 0.25;
}

.change-password-orn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  margin-bottom: 10px;
  justify-content: center;
}
.change-password-orn::before,
.change-password-orn::after {
  content: "";
  height: 1px;
  width: 36px;
  background: var(--gold);
  opacity: 0.6;
}
.change-password-orn span {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.change-password-card h1 {
  font-family: var(--ff-display);
  font-size: 26px;
  text-align: center;
  color: var(--ink);
  margin-bottom: 26px;
}

.change-password-group {
  margin-bottom: 20px;
}
.change-password-group label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.change-password-group input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  box-sizing: border-box;
}
.change-password-group input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.1);
}
.change-password-group .text-danger {
  color: var(--red);
  font-size: 12.5px;
  margin-top: 5px;
}

.change-password-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}
.change-password-back {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s;
}
.change-password-back:hover {
  color: var(--red);
}

.change-password-submit {
  border: 0;
  background: var(--red);
  color: #fff;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.2s;
  white-space: nowrap;
}
.change-password-submit:hover {
  background: var(--red-dark);
}
.change-password-submit:active {
  transform: scale(0.98);
}

/* =========================================================
   ADDRESS FORM PAGE — standalone styles (address.css)
   Namespaced with "address-" prefix.
   IMPORTANT: .form-group > div > input nesting kept exactly
   as-is — required for the postcode/country JS logic
   ($('input[name=postcode]').parent().parent()...).
   ========================================================= */

.address-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 70px;
}

.address-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-md);
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
  animation: addressCardIn 0.5s var(--ease) both;
}
@keyframes addressCardIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.address-card::before {
  content: "❁";
  position: absolute;
  top: -30px;
  right: -24px;
  font-size: 130px;
  color: var(--gold-light);
  opacity: 0.22;
}

.address-head {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}
.address-orn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  margin-bottom: 10px;
  justify-content: center;
}
.address-orn::before,
.address-orn::after {
  content: "";
  height: 1px;
  width: 36px;
  background: var(--gold);
  opacity: 0.6;
}
.address-orn span {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.address-head h2 {
  font-family: var(--ff-display);
  font-size: 26px;
  color: var(--ink);
}

.address-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.address-fieldset .form-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-bottom: 18px;
  border: 0;
  padding: 0;
}
.address-fieldset .form-group .control-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  width: auto;
  text-align: left;
  padding: 0;
}
.address-fieldset .form-group > div {
  width: 100%;
}

.address-fieldset .form-control {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  box-sizing: border-box;
  background: #fff;
}
.address-fieldset .form-control:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.1);
}
.address-fieldset select.form-control {
  cursor: pointer;
}
.address-fieldset textarea.form-control {
  resize: vertical;
}

.address-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 600px) {
  .address-row2 {
    grid-template-columns: 1fr;
  }
}

/* when a two-column pair is generated by wrapping two .form-group
   divs, this class goes on the wrapping element */
.address-row2 .form-group {
  margin-bottom: 0;
}

.address-fieldset .radio,
.address-fieldset .checkbox,
.address-fieldset .radio-inline {
  font-size: 13.5px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 18px;
}
.address-fieldset .radio input,
.address-fieldset .checkbox input,
.address-fieldset .radio-inline input {
  accent-color: var(--red);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.address-fieldset .text-danger {
  color: var(--red);
  font-size: 12.5px;
  margin-top: 4px;
}

.address-fieldset .btn-default {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.25s;
}
.address-fieldset .btn-default:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.address-fieldset span {
  font-size: 13px;
  color: var(--ink-soft);
  margin-left: 10px;
}

.address-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
}
.address-back {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s;
}
.address-back:hover {
  color: var(--red);
}
.address-submit {
  border: 0;
  background: var(--red);
  color: #fff;
  padding: 12px 30px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.2s;
}
.address-submit:hover {
  background: var(--red-dark);
}
.address-submit:active {
  transform: scale(0.98);
}

/* ---- FIX: Add Address button not visible ---- */
.address-book-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  float: none; /* reset any legacy .buttons float rules */
}
.address-book-buttons > * {
  float: none !important; /* kill any old .pull-left/.pull-right float */
}

.address-book-back {
  font-size: 13.5px;
  color: var(--ink-soft, #8a7f6d);
  text-decoration: none;
  transition: color 0.2s;
}
.address-book-back:hover {
  color: var(--red, #ce1126);
}

.address-book-new {
  display: inline-block;
  border: 1px solid var(--red, #ce1126);
  background: var(--red, #ce1126);
  color: #fff !important;
  padding: 11px 26px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.25s,
    transform 0.2s;
  visibility: visible;
  opacity: 1;
  z-index: 1;
  position: relative;
}
.address-book-new:hover {
  background: var(--red-dark, #a80d1f);
}
.address-book-new:active {
  transform: scale(0.98);
}

/* =========================================================
   WISHLIST PAGE — standalone styles (wishlist.css)
   Namespaced with "wishlist-" prefix.
   ========================================================= */

.wishlist-wrap {
  margin-top: 20px;
}

.wishlist-head {
  text-align: center;
  margin-bottom: 28px;
}
.wishlist-orn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold, #c9a227);
  margin-bottom: 10px;
  justify-content: center;
}
.wishlist-orn::before,
.wishlist-orn::after {
  content: "";
  height: 1px;
  width: 36px;
  background: var(--gold, #c9a227);
  opacity: 0.6;
}
.wishlist-orn span {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wishlist-head h2 {
  font-family: var(--ff-display);
  font-size: 26px;
  color: var(--ink, #2b2116);
}

.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.wishlist-card {
  border: 1px solid var(--line, #eae1cf);
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    transform 0.3s var(--ease, ease),
    box-shadow 0.3s var(--ease, ease);
  animation: wishlistCardIn 0.4s var(--ease, ease) both;
}
@keyframes wishlistCardIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.wishlist-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
}

.wishlist-card .wl-img {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream, #fdf6ea);
}
.wishlist-card .wl-img img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.wishlist-card .wl-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #2b2116);
  text-decoration: none;
  line-height: 1.35;
}
.wishlist-card .wl-name:hover {
  color: var(--red, #ce1126);
}

.wishlist-card .wl-model {
  font-size: 12px;
  color: var(--ink-soft, #8a7f6d);
}
.wishlist-card .wl-stock {
  font-size: 12px;
  color: var(--green, #3a7d44);
}

.wishlist-card .wl-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--red, #ce1126);
}
.wishlist-card .wl-price s {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft, #8a7f6d);
  margin-left: 8px;
}
.wishlist-card .wl-price b {
  color: var(--red, #ce1126);
}

.wishlist-card .wl-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}

.wishlist-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s var(--ease, ease);
  border: 1px solid transparent;
}

.wishlist-add-btn {
  background: var(--red, #ce1126) !important;
  color: #fff !important;
  border-color: var(--red, #ce1126);
}
.wishlist-add-btn:hover {
  background: var(--red-dark, #a80d1f) !important;
}

.wishlist-remove-btn {
  background: none !important;
  color: var(--ink-soft, #8a7f6d) !important;
  border-color: var(--line, #eae1cf);
  flex: 0 0 44px;
}
.wishlist-remove-btn:hover {
  color: var(--red, #ce1126) !important;
  border-color: var(--red, #ce1126);
}

.wishlist-empty {
  text-align: center;
  padding: 60px 0;
  color: var(--ink-soft, #8a7f6d);
  font-size: 14.5px;
}

.wishlist-footer-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
.wishlist-continue {
  display: inline-block;
  border: 0;
  background: var(--red, #ce1126) !important;
  color: #fff !important;
  padding: 11px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.25s,
    transform 0.2s;
}
.wishlist-continue:hover {
  background: var(--red-dark, #a80d1f) !important;
}
.wishlist-continue:active {
  transform: scale(0.98);
}

/* ---- FAQ ---- */
.faq-page {
  background: #fff;
}
.faq-hero {
  background: linear-gradient(115deg, #fdf6ea 0%, #f6e9d2 100%);
  overflow: hidden;
}
.faq-hero .container {
  padding-top: 26px;
  padding-bottom: 44px;
}
.faq-hero-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.8fr;
  gap: 34px;
  align-items: end;
  margin-top: 22px;
}
.faq-hero-copy {
  max-width: 690px;
}
.faq-eyebrow,
.faq-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.faq-eyebrow::before,
.faq-section-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}
.faq-hero h1 {
  font-size: 46px;
  line-height: 1.08;
  margin: 13px 0 12px;
}
.faq-hero h1::first-letter {
  color: var(--red);
}
.faq-hero-copy p {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 560px;
}
.faq-help-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 26px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.faq-help-panel::before {
  content: "";
  position: absolute;
  right: -36px;
  top: -36px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--gold-light);
  opacity: 0.55;
}
.faq-help-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 24px;
  margin-bottom: 16px;
  position: relative;
}
.faq-help-panel h2 {
  font-size: 22px;
  margin-bottom: 7px;
}
.faq-help-panel p {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.faq-help-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.faq-help-actions .btn {
  border-radius: 8px;
}
.faq-secondary-link {
  font-size: 14px;
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
}
.faq-section {
  padding: 48px 0 68px;
}
.faq-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.faq-toolbar h2 {
  font-size: 30px;
  margin-top: 8px;
}
.faq-search {
  min-width: 280px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.faq-search input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  background: #fff;
}
.faq-search input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.1);
}
.faq-list {
  display: grid;
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  animation: faqItemIn 0.42s var(--ease) both;
}
@keyframes faqItemIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.faq-question {
  width: 100%;
  border: 0;
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  padding: 19px 22px;
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.faq-question i {
  width: 28px;
  height: 28px;
  border: 1px solid var(--gold-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: all 0.25s;
  position: relative;
}
.faq-question i::before,
.faq-question i::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 2px;
  background: var(--gold);
  border-radius: 99px;
}
.faq-question i::after {
  transform: rotate(90deg);
  transition: transform 0.25s;
}
.faq-question[aria-expanded="true"] {
  color: var(--red);
}
.faq-question[aria-expanded="true"] i {
  background: var(--gold-light);
}
.faq-question[aria-expanded="true"] i::after {
  transform: rotate(0);
}
.faq-answer {
  border-top: 1px dashed var(--line);
  padding: 0 22px 20px;
}
.faq-answer p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 920px;
  padding-top: 16px;
}
.faq-empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 34px 0;
  font-size: 14.5px;
}
@media (max-width: 800px) {
  .faq-hero-grid {
    grid-template-columns: 1fr;
  }
  .faq-hero h1 {
    font-size: 36px;
  }
  .faq-toolbar {
    display: grid;
    align-items: start;
  }
  .faq-search {
    min-width: 0;
    width: 100%;
  }
}

/* =========================================================
   ORDER HISTORY / ORDER INFO PAGES — standalone styles
   Namespaced with "order-" prefix.
   ========================================================= */

.order-list-wrap,
.order-info-wrap {
  margin-top: 20px;
  max-width: 960px;
}
.order-list-wrap h1,
.order-info-wrap h1 {
  font-family: var(--ff-display);
  font-size: 27px;
  color: var(--ink);
  margin-bottom: 18px;
}

.order-list-card,
.order-info-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.order-info-card h3 {
  font-family: var(--ff-display);
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 10px;
}
.order-info-card p {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--ink);
}
.order-table thead td {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--line);
  padding: 10px 12px;
}
.order-table tbody td,
.order-table tfoot td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.order-table tbody tr:last-child td {
  border-bottom: 0;
}
.order-table-plain td {
  border-bottom: 0;
  vertical-align: top;
  padding: 4px 12px;
}

.order-btn {
  display: inline-block;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.2s;
  white-space: nowrap;
  margin: 2px;
}
.order-btn:hover {
  border-color: var(--red);
  color: var(--red);
}
.order-btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.order-btn-primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: #fff;
}

.order-list-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.order-continue-btn {
  display: inline-block;
  border: 0;
  background: var(--red);
  color: #fff;
  padding: 11px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.25s,
    transform 0.2s;
}
.order-continue-btn:hover {
  background: var(--red-dark);
  color: #fff;
}
.order-continue-btn:active {
  transform: scale(0.98);
}

.order-total-line {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

/* =========================================================
   ADDRESS BOOK LIST PAGE — standalone styles
   Namespaced with "address-book-" prefix.
   ========================================================= */

.address-book-wrap {
  margin-top: 20px;
  max-width: 980px;
}

.address-book-head {
  text-align: center;
  margin-bottom: 26px;
}
.address-book-orn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  margin-bottom: 8px;
  justify-content: center;
}
.address-book-orn::before,
.address-book-orn::after {
  content: "";
  height: 1px;
  width: 36px;
  background: var(--gold);
  opacity: 0.6;
}
.address-book-orn span {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.address-book-head h2 {
  font-family: var(--ff-display);
  font-size: 26px;
  color: var(--ink);
}

.address-book-top-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.address-book-table-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 20px;
}
.address-book-table {
  width: 100%;
  border-collapse: collapse;
}
.address-book-table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--cream, #fdf8f0);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.address-book-table td {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.address-book-table tbody tr:last-child td {
  border-bottom: 0;
}
.address-book-table tbody tr:hover {
  background: var(--cream, #fdf8f0);
}
.address-book-company {
  color: var(--ink-soft);
  font-size: 12.5px;
}

.address-book-default-col {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}
.address-book-default-col input {
  accent-color: var(--red);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.address-book-actions-cell {
  white-space: nowrap;
}
.address-book-actions {
  display: flex;
  gap: 8px;
  flex: none;
}

.address-book-btn {
  display: inline-block;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.address-book-edit {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.address-book-edit:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.address-book-delete {
  border: 1px solid var(--red);
  background: #fff;
  color: var(--red);
}
.address-book-delete:hover {
  background: var(--red);
  color: #fff;
}

.address-book-empty {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

/* Mobile: the 7-column table has no room to breathe, so each row becomes
   a stacked label:value card instead — same data, no sideways scrolling. */
@media (max-width: 767px) {
  .address-book-table thead {
    display: none;
  }
  .address-book-table,
  .address-book-table tbody,
  .address-book-table tr,
  .address-book-table td {
    display: block;
    width: 100%;
  }
  .address-book-table tr {
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
  }
  .address-book-table tbody tr:last-child {
    border-bottom: 0;
  }
  .address-book-table td {
    border-bottom: 0;
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
  .address-book-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gold);
    padding-top: 2px;
  }
  .address-book-table td:not(.address-book-actions-cell) {
    text-align: right;
  }
  .address-book-actions-cell {
    justify-content: flex-end;
    margin-top: 8px;
  }
  .address-book-actions-cell::before {
    display: none;
  }
}
.wishlist-continue:active {
  transform: scale(0.98);
}

/* =========================================================
   PRODUCT RETURNS FORM PAGE — standalone styles
   Namespaced with "return-form-"/"return-" prefix.
   ========================================================= */

.return-form-wrap {
  max-width: 820px;
  margin: 20px auto 0;
}

.return-form-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-md);
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
}
.return-form-head {
  text-align: center;
  margin-bottom: 30px;
}
.return-form-head h1 {
  font-family: var(--ff-display);
  font-size: 27px;
  color: var(--ink);
  margin-bottom: 8px;
}
.return-form-head p {
  font-size: 13.5px;
  color: var(--ink-soft);
}

.return-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 26px;
}
.return-fieldset legend {
  font-family: var(--ff-display);
  font-size: 18px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 18px;
  width: 100%;
}

.return-fieldset .form-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-bottom: 16px;
  border: 0;
  padding: 0;
}
.return-fieldset .form-group .control-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  width: auto;
  text-align: left;
  padding: 0;
}
.return-fieldset .form-group > div {
  width: 100%;
}

.return-fieldset .form-control {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  box-sizing: border-box;
  background: #fff;
}
.return-fieldset .form-control:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.1);
}
.return-fieldset textarea.form-control {
  resize: vertical;
}

.return-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .return-row2 {
    grid-template-columns: 1fr;
  }
}

.return-fieldset .radio,
.return-fieldset .radio-inline {
  font-size: 13.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.return-fieldset .radio-inline {
  display: inline-flex;
  margin-right: 18px;
}
.return-fieldset .radio input,
.return-fieldset .radio-inline input {
  accent-color: var(--red);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.return-fieldset .text-danger {
  color: var(--red);
  font-size: 12.5px;
  margin-top: 4px;
}

.return-form-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 14px;
}
.return-form-back {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s;
}
.return-form-back:hover {
  color: var(--red);
}
.return-form-agree {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.return-form-agree label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.return-form-agree input[type="checkbox"] {
  accent-color: var(--red);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.return-form-submit {
  border: 0;
  background: var(--red);
  color: #fff;
  padding: 12px 30px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.2s;
}
.return-form-submit:hover {
  background: var(--red-dark);
}
.return-form-submit:active {
  transform: scale(0.98);
}

/* =========================================================
   COMMON SUCCESS PAGE (account created, newsletter, etc.)
   Namespaced with "success-" prefix.
   ========================================================= */

.success-wrap {
  max-width: 760px;
  margin: 20px auto 0;
}

.success-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-md);
  padding: 40px 44px;
}
.success-card h1 {
  font-family: var(--ff-display);
  font-size: 27px;
  color: var(--ink);
  margin-bottom: 18px;
}

.success-message {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.success-message p {
  margin: 0 0 14px;
}
.success-message p:last-child {
  margin-bottom: 0;
}
.success-message a {
  color: var(--red);
  text-decoration: none;
}

/* =========================================================
   SELECT DROPDOWN ARROW — global, every <select> on the site
   Every select context (generic .field, shop/search sort-by,
   checkout, cart voucher, registration, account edit, address
   book, returns) used the browser's native arrow with symmetric
   padding and no reserved space for it, so the arrow rendered
   flush against the box's right edge everywhere. One consistent
   custom chevron + right padding, applied once here, fixes every
   context at once instead of patching each page separately.
   Loaded after style.css, so this wins any specificity ties with
   the plainer rules that set the shared padding today.
   ========================================================= */
select,
.field select,
.sortbox select,
.co-form select.form-control,
.cart-modules-box select.form-control,
.register-fieldset select.form-control,
.edit-account-fieldset select.form-control,
.address-fieldset select.form-control,
.return-fieldset select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B5F55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
  padding-right: 38px;
  cursor: pointer;
}
select::-ms-expand {
  display: none;
}
.success-message a:hover {
  color: var(--red-dark);
}