/* ==========================================================================
   Mirro Craft: internal pages and WooCommerce.

   Written entirely against the design tokens declared in style.css, so this
   sheet inherits the homepage's palette, type scale, spacing and radii rather
   than restating them. WooCommerce's own stylesheets are dequeued (see
   inc/woocommerce.php), so everything a shop screen needs is here.

   Order: page furniture -> editorial pages -> shop -> product -> cart ->
   checkout -> account -> notices & forms -> responsive.
   ========================================================================== */

/* ==========================================================================
   Page banner
   ========================================================================== */
.page-banner {
  position: relative;
  isolation: isolate;
  background: var(--color-ink);
  color: var(--color-text-on-dark);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.page-banner__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.page-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The banner carries white type, so the photograph has to sit well back. */
  opacity: 0.34;
  filter: saturate(0.85);
}
.page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(26, 23, 19, 0.72) 0%, rgba(26, 23, 19, 0.88) 100%);
}
.page-banner__inner { max-width: 760px; }
.page-banner .eyebrow { color: var(--color-gold-light); }
.page-banner__title {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 500;
  color: var(--color-text-on-dark);
}
.page-banner__sub {
  margin-top: var(--space-4);
  color: var(--color-text-on-dark-muted);
  font-size: 1.02rem;
  max-width: 60ch;
}

/* A product page only needs the trail, not the whole banner. */
.page-banner--slim {
  padding-block: var(--space-4);
  background: var(--color-cream-dim);
  color: var(--color-text-muted);
}
.page-banner--slim::after,
.page-banner--slim .page-banner__media { display: none; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.crumbs { margin-bottom: var(--space-4); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.crumbs li { display: inline-flex; align-items: center; gap: 0.6rem; }
.crumbs li:not(:last-child)::after {
  content: '/';
  opacity: 0.45;
}
.crumbs a { color: inherit; opacity: 0.78; transition: opacity var(--dur-fast) var(--ease-out); }
.crumbs a:hover { opacity: 1; }
.page-banner .crumbs { color: var(--color-text-on-dark-muted); }
.page-banner .crumbs [aria-current] { color: var(--color-gold-light); }

/* WooCommerce prints its breadcrumb through the same wrapper classes. */
.woocommerce-breadcrumb { margin-bottom: var(--space-4); }

/* ==========================================================================
   Editorial pages
   ========================================================================== */
.entry-content { color: var(--color-text); }
.entry-content > * + * { margin-top: var(--space-4); }
.entry-content h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 600;
  margin-top: var(--space-7);
}
.entry-content h3 {
  font-size: 1.35rem;
  margin-top: var(--space-6);
}
.entry-content h4 {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  margin-top: var(--space-5);
}
.entry-content p { max-width: 68ch; }
.entry-content a {
  color: var(--color-gold-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.entry-content a:hover { color: var(--color-ink); }
.entry-content ul,
.entry-content ol {
  padding-left: 1.3rem;
  max-width: 68ch;
}
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: 0.4rem; }
.entry-content blockquote {
  border-left: 3px solid var(--color-gold);
  padding-left: var(--space-5);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-ink);
}
.entry-content img { border-radius: var(--radius-md); }
.entry-content hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin-block: var(--space-7);
}
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.entry-content th,
.entry-content td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
}

.entry--narrow,
.entry--legal { max-width: 780px; }
.entry--page { max-width: 860px; }

.entry-media { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-6); }
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
.entry-tags {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.entry-tags a {
  font-size: 0.76rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-cream-dim);
  color: var(--color-text-muted);
}
.entry-tags a:hover { background: var(--color-gold); color: var(--color-ink); }

.entry-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  font-size: 0.92rem;
}
.entry-nav__next { margin-left: auto; text-align: right; }

.entry-layout { display: grid; gap: var(--space-7); }
.entry-sidebar .widget + .widget { margin-top: var(--space-6); }
.widget__title {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: var(--space-3);
}

/* ---- Legal pages ---- */
.legal-layout { display: grid; gap: var(--space-7); }
.legal-toc {
  background: var(--color-cream-dim);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  align-self: start;
}
.legal-toc h2 {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: var(--space-3);
}
.legal-toc li + li { margin-top: 0.5rem; }
.legal-toc a { font-size: 0.92rem; color: var(--color-text-muted); }
.legal-toc a:hover { color: var(--color-ink); }
.legal-updated {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

/* ---- Blog grid ---- */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.post-card {
  background: var(--color-paper);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.post-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-cream-dim); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--space-5); }
.post-card__date {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.post-card__title { font-size: 1.25rem; margin-top: 0.4rem; }
.post-card__excerpt { margin-top: 0.6rem; font-size: 0.92rem; color: var(--color-text-muted); }

/* ---- Stat row ---- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  text-align: center;
}
.stat-row__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--color-ink);
  line-height: 1;
}
.stat-row__item span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.contact-card {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.contact-card:hover { border-color: var(--color-gold); box-shadow: var(--shadow-md); }
.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-cream-dim);
  color: var(--color-gold-dark);
  margin-bottom: var(--space-4);
}
.contact-card h3 { font-size: 1.2rem; }
.contact-card p { margin-top: 0.4rem; font-size: 0.94rem; color: var(--color-text-muted); }
.contact-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-4);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-gold-dark);
}
.contact-card__link i { transition: transform var(--dur-med) var(--ease-out); }
.contact-card__link:hover i { transform: translateX(4px); }

.contact-layout { display: grid; gap: var(--space-7); align-items: start; }
.contact-list { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.contact-list li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--color-text-on-dark-muted); font-size: 0.94rem; }
.contact-list i { color: var(--color-gold-light); margin-top: 0.25rem; }
.contact-list a { color: var(--color-text-on-dark); }
.contact-list a:hover { color: var(--color-gold-light); }

.contact-map { line-height: 0; }
.contact-map iframe { width: 100%; height: clamp(280px, 42vw, 460px); border: 0; }

/* ==========================================================================
   Shared: pagination, empty state, search form
   ========================================================================== */
.mc-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-7);
}
.mc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-width: 42px;
  min-height: 42px;
  padding-inline: 0.9rem;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  transition: all var(--dur-fast) var(--ease-out);
}
.mc-pagination a.page-numbers:hover { border-color: var(--color-gold); color: var(--color-ink); }
.mc-pagination .page-numbers.current {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-cream);
}
.mc-pagination .page-numbers.dots { border-color: transparent; background: none; }

.empty-state {
  text-align: center;
  max-width: 46ch;
  margin-inline: auto;
  padding-block: var(--space-8);
}
.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--color-cream-dim);
  color: var(--color-gold-dark);
  font-size: 1.5rem;
  margin-bottom: var(--space-5);
}
.empty-state__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; }
.empty-state__text { margin-top: var(--space-3); color: var(--color-text-muted); }
.empty-state .btn { margin-top: var(--space-5); }

.mc-search-form { display: flex; gap: 0.5rem; max-width: 460px; }
.mc-search-form input[type="search"] {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-size: 0.94rem;
}
.mc-search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--color-gold);
}
.search-again { margin-bottom: var(--space-6); }

.error-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
  padding-block: var(--space-6) var(--space-8);
}
.error-links { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ==========================================================================
   Shop: wrapper and toolbar
   ========================================================================== */
.shop-main { padding-block: var(--space-8); }

.shop-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.shop-toolbar .product-toolbar { margin-bottom: 0; }
.shop-toolbar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.woocommerce-result-count {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.woocommerce-ordering select {
  padding: 0.55rem 2.2rem 0.55rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-size: 0.85rem;
  color: var(--color-text);
  appearance: none;
  /* Inline chevron: no extra HTTP request, and it inherits the ink colour. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6255' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 10px;
}
.woocommerce-ordering select:focus { outline: none; border-color: var(--color-gold); }

a.chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  text-decoration: none;
}
.chip-filter__count {
  font-size: 0.72rem;
  opacity: 0.6;
}

/* Product cards get two extras beyond the homepage prototype. */
.product-card__subtitle {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0;
}
.product-card__rating { font-size: 0.8rem; }
.product-card__image { display: block; position: absolute; inset: 0; }
.product-card__price { flex-wrap: wrap; }
.product-card__price .price { display: inline-flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.product-card__price .price ins {
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-ink);
}
.product-card__price .price del {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  opacity: 0.85;
}
.product-card__price .price bdi { font-weight: 700; color: var(--color-ink); }
.product-card__price .price del bdi { font-weight: 400; }
.product-card__price .price-note { flex-basis: 100%; }
.badge--out { background: var(--color-text-muted); }

/* The add-to-cart button WooCommerce prints, given the prototype's shape. */
.product-card__foot .button,
.product-card__foot .added_to_cart {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-cream);
  font-size: 0.82rem;
  font-weight: 600;
  border: 0;
  min-height: 42px;
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.product-card__foot .button:hover,
.product-card__foot .added_to_cart:hover { background: var(--color-gold-dark); }
.product-card__foot .button.loading { opacity: 0.7; pointer-events: none; }
.product-card__foot .button.added { background: var(--color-success); }
.product-card__foot .added_to_cart {
  background: transparent;
  color: var(--color-gold-dark);
  border: 1px solid var(--color-line);
  flex: 0 0 auto;
  padding-inline: 1rem;
}

/* ==========================================================================
   Single product
   ========================================================================== */
.single-product div.product {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}
.single-product .woocommerce-product-gallery {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-cream-dim);
}
.single-product .woocommerce-product-gallery img { width: 100%; }
.single-product .woocommerce-product-gallery__trigger {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  font-size: 0;
}
.single-product .woocommerce-product-gallery__trigger::after {
  content: '\f00e'; /* magnifying-glass-plus */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.9rem;
}
.single-product .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
}
.single-product .flex-control-thumbs li { cursor: pointer; }
.single-product .flex-control-thumbs img {
  border-radius: var(--radius-sm);
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { opacity: 1; }

.single-product .summary .product_title {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 500;
}
.product-subtitle {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: 1rem;
}
.single-product .summary .price {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-block: var(--space-4);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink);
}
.single-product .summary .price del { font-size: 1rem; font-weight: 400; color: var(--color-text-muted); }
.single-product .summary .price ins { text-decoration: none; }
.single-product .woocommerce-product-details__short-description {
  color: var(--color-text-muted);
  max-width: 58ch;
}
.single-product .woocommerce-product-details__short-description p + p { margin-top: var(--space-3); }

.single-product .stock { font-size: 0.88rem; font-weight: 600; }
.single-product .stock.in-stock { color: var(--color-success); }
.single-product .stock.out-of-stock { color: var(--color-sale); }

.single-product form.cart { margin-block: var(--space-5); }
.single-product form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.single-product .single_add_to_cart_button {
  flex: 1 1 220px;
  min-height: 52px;
  padding: 0.9rem 1.7rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.single-product .single_add_to_cart_button:hover { background: var(--color-gold-light); box-shadow: var(--shadow-md); }
.single-product .single_add_to_cart_button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Variations ---- */
.variations { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); }
.variations th,
.variations td { padding: 0.4rem 0; text-align: left; vertical-align: middle; }
.variations th {
  width: 30%;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}
.variations select {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  font-size: 0.92rem;
}
.variations select:focus { outline: none; border-color: var(--color-gold); }
/*
 * WooCommerce hides its "Clear" link with visibility rather than display, and a
 * visibility-hidden element still takes up its space. That made the last
 * variation row taller than the rest, so its label — centred against a taller
 * cell — sat visibly lower than the ones above it. Invisible to notice when a
 * product had one option row; obvious now there are three.
 *
 * Taking it out of the layout while it is hidden keeps every row the same
 * height. When WooCommerce reveals it, it takes its place under the last
 * option as before.
 */
.reset_variations {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
}
.reset_variations:not([style*="hidden"]) { display: inline-block; }
.single_variation_wrap { margin-top: var(--space-4); }
.woocommerce-variation-price { margin-bottom: var(--space-3); }
.woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---- Quantity stepper ---- */
.quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  overflow: hidden;
}
.quantity .qty {
  width: 3.2rem;
  min-height: 50px;
  text-align: center;
  border: 0;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity .qty:focus { outline: none; }
.qty-btn {
  width: 42px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.qty-btn:hover { background: var(--color-cream-dim); color: var(--color-ink); }

/* ---- Specs, reassurance, meta ---- */
.product-specs { margin-top: var(--space-5); border-top: 1px solid var(--color-line); }
.product-specs li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.9rem;
}
.product-specs i { color: var(--color-gold-dark); }
.product-specs__label { color: var(--color-text-muted); }
.product-specs__value { font-weight: 600; color: var(--color-ink); }

.product-trust {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
}
.product-trust li { display: flex; gap: 0.8rem; align-items: flex-start; }
.product-trust i { color: var(--color-gold-dark); margin-top: 0.25rem; }
.product-trust strong { display: block; font-size: 0.92rem; color: var(--color-ink); }
.product-trust span { font-size: 0.85rem; color: var(--color-text-muted); }

.product-extra-cta { margin-block: var(--space-3); }

.product_meta {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: 0.84rem;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.product_meta a { color: var(--color-gold-dark); }

/* ---- Tabs ---- */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: var(--space-6); }
.woocommerce-tabs .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-6);
}
.woocommerce-tabs .tabs li a {
  display: inline-block;
  padding: 0.8rem 1.3rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.woocommerce-tabs .tabs li a:hover { color: var(--color-ink); }
.woocommerce-tabs .tabs li.active a {
  color: var(--color-ink);
  border-bottom-color: var(--color-gold);
}
.woocommerce-tabs .panel { max-width: 78ch; }
.woocommerce-tabs .panel h2 {
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}
.shop_attributes { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.shop_attributes th,
.shop_attributes td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
}
.shop_attributes th { width: 30%; color: var(--color-text-muted); font-weight: 500; }
.shop_attributes p { margin: 0; }

.product-extra {
  grid-column: 1 / -1;
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}
.product-extra__title { font-size: 1.6rem; margin-bottom: var(--space-4); }
.product-extra__body { max-width: 72ch; color: var(--color-text-muted); }
.product-extra__body > * + * { margin-top: var(--space-3); }
.product-extra__doc { margin-top: var(--space-5); }

.related,
.up-sells {
  grid-column: 1 / -1;
  margin-top: var(--space-8);
}
.related > h2,
.up-sells > h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 500;
  margin-bottom: var(--space-6);
}

/* ---- Reviews ---- */
.woocommerce-Reviews { display: grid; gap: var(--space-6); }
.commentlist { display: grid; gap: var(--space-5); }
.commentlist .comment_container {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.commentlist img.avatar { border-radius: 50%; }
.woocommerce-review__author { font-weight: 600; color: var(--color-ink); }
.woocommerce-review__published-date { font-size: 0.8rem; color: var(--color-text-muted); }
.star-rating,
.woocommerce-product-rating .star-rating { color: var(--color-gold-dark); }

/* ==========================================================================
   Cart
   ========================================================================== */
.cart-layout { display: grid; gap: var(--space-7); align-items: start; }
.cart-layout > form.woocommerce-cart-form { min-width: 0; }

.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.shop_table th {
  padding: 0.9rem 1rem;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  background: var(--color-cream-dim);
}
.shop_table td {
  padding: 1rem;
  border-top: 1px solid var(--color-line);
  vertical-align: middle;
  font-size: 0.94rem;
}
.shop_table .product-thumbnail img {
  width: 76px;
  border-radius: var(--radius-sm);
}
.shop_table .product-name a { font-weight: 600; color: var(--color-ink); }
.shop_table .product-name a:hover { color: var(--color-gold-dark); }
.shop_table .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-cream-dim);
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.shop_table .product-remove a.remove:hover { background: var(--color-sale); color: #fff; }
.shop_table td.actions {
  background: var(--color-cream-dim);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
}
.shop_table .coupon { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.shop_table .coupon .input-text {
  padding: 0.65rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-size: 0.88rem;
  min-width: 180px;
}
.shop_table .coupon .input-text:focus { outline: none; border-color: var(--color-gold); }
/*
 * Chosen options, wherever they are listed: the cart, the drawer, the checkout
 * review, an order.
 *
 * These used to run inline — "Size: Large (3 x 5 ft) Color: Matt Black Light
 * Tone: Neon White Installation: Yes Installation cost: Rs. 300" as one
 * sentence, wrapping wherever the column happened to end. That was readable
 * with one option and unreadable with five, which is what a variable product
 * now produces on every line.
 *
 * A two-column grid is what a definition list is for: labels line up down the
 * left, values down the right, one pair per row, and the eye can find "Size"
 * without reading the rest.
 */
.variation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.6rem;
  row-gap: 0.12rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.variation dt {
  margin: 0;
  font-weight: 500;
  color: var(--color-text-muted);
}
.variation dd { margin: 0; color: var(--color-ink); }
.variation p { margin: 0; }

/*
 * The summary follows the cart down the page, and it is the column — not the
 * card — that sticks.
 *
 * It used to be the card, and the card also picks up `position: relative` from
 * the shared `.cart_totals, #order_review` rule further down this file. Same
 * weight, later in the source, so relative won and sticky never applied — but
 * the `top` offset it was written with stayed behind. A `top` on a relative box
 * does not pin anything: it pushes the box down and leaves its space in the
 * layout. The summary was being shifted 100px below the cart it belongs beside
 * and hanging past the bottom of its own column, which is exactly how it looked.
 *
 * Sticking the column instead keeps the card free to be `relative` for its own
 * gold top edge, and gives the sticky box a containing block — the grid area,
 * which is as tall as the cart beside it — that it can actually travel inside.
 */
.cart-collaterals { align-self: start; }
.cart_totals {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.cart_totals h2 { font-size: 1.35rem; margin-bottom: var(--space-4); }
.cart_totals table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.cart_totals th,
.cart_totals td {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
}
.cart_totals td { text-align: right; }
.cart_totals .order-total th,
.cart_totals .order-total td {
  border-bottom: 0;
  padding-top: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-ink);
}
.wc-proceed-to-checkout { margin-top: var(--space-5); }
.woocommerce-shipping-destination { font-size: 0.82rem; color: var(--color-text-muted); }
.shipping-calculator-button { font-size: 0.82rem; color: var(--color-gold-dark); text-decoration: underline; }
.cross-sells { margin-top: var(--space-8); }
.cross-sells > h2 { font-size: 1.6rem; margin-bottom: var(--space-5); }

/* ==========================================================================
   Checkout
   ========================================================================== */
.woocommerce-checkout .woocommerce { display: grid; gap: var(--space-7); align-items: start; }
.woocommerce-checkout form.checkout { display: grid; gap: var(--space-7); align-items: start; }
#customer_details { display: grid; gap: var(--space-6); }
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-size: 1.35rem;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}
#order_review {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.woocommerce-checkout-review-order-table { border: 0; }
.woocommerce-checkout-review-order-table th { background: none; padding-inline: 0; }
.woocommerce-checkout-review-order-table td { padding-inline: 0; }
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-ink);
}
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child { text-align: right; }
.product-quantity { color: var(--color-text-muted); }

#payment { margin-top: var(--space-5); }
#payment ul.payment_methods {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
#payment ul.payment_methods li {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out);
}
#payment ul.payment_methods li:has(input:checked) { border-color: var(--color-gold); }
#payment ul.payment_methods label { font-weight: 600; cursor: pointer; }
#payment .payment_box {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-cream-dim);
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
#payment .payment_box p { margin: 0; }
#place_order,
.checkout-button {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 600;
  margin-top: var(--space-5);
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
#place_order:hover,
.checkout-button:hover { background: var(--color-gold-light); box-shadow: var(--shadow-md); }
.checkout-button { display: inline-flex; align-items: center; justify-content: center; }
.woocommerce-terms-and-conditions-wrapper { margin-top: var(--space-4); font-size: 0.86rem; }
.woocommerce-privacy-policy-text { font-size: 0.84rem; color: var(--color-text-muted); }
.woocommerce-form-coupon-toggle,
.woocommerce-form-login-toggle { margin-bottom: var(--space-5); }

/* ---- Order received ---- */
.order-received__head {
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
  padding-block: var(--space-6) var(--space-7);
}
.order-received__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(75, 122, 91, 0.14);
  color: var(--color-success);
  font-size: 1.8rem;
  margin-bottom: var(--space-5);
}
.order-received__head--failed .order-received__icon {
  background: rgba(168, 69, 47, 0.12);
  color: var(--color-sale);
}
.order-received__head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 500; }
.order-received__head p { margin-top: var(--space-3); color: var(--color-text-muted); }

.order-received__overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-7);
}
.order-received__overview li {
  background: var(--color-paper);
  padding: var(--space-5);
}
.order-received__overview span {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}
.order-received__overview strong { font-size: 1.02rem; color: var(--color-ink); }

.order-received__details > * + * { margin-top: var(--space-6); }
.order-received__details h2,
.woocommerce-order-details__title,
.woocommerce-column__title {
  font-size: 1.4rem;
  margin-bottom: var(--space-4);
}
.woocommerce-order-details .shop_table,
.woocommerce-table--order-details { margin-bottom: var(--space-6); }
.woocommerce-customer-details .woocommerce-columns {
  display: grid;
  gap: var(--space-5);
}
.woocommerce-customer-details address {
  font-style: normal;
  background: var(--color-cream-dim);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-size: 0.94rem;
  line-height: 1.7;
}
.order-received__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-7);
}

/* ==========================================================================
   My account
   ========================================================================== */
.woocommerce-account .woocommerce {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}
.account-nav ul {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.account-nav li + li { border-top: 1px solid var(--color-line); }
.account-nav a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem 1.2rem;
  font-size: 0.94rem;
  color: var(--color-text-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.account-nav a i { width: 18px; text-align: center; color: var(--color-gold-dark); }
.account-nav a:hover { background: var(--color-cream-dim); color: var(--color-ink); }
.account-nav .is-active a {
  background: var(--color-ink);
  color: var(--color-cream);
}
.account-nav .is-active a i { color: var(--color-gold-light); }

.woocommerce-MyAccount-content > p:first-child { color: var(--color-text-muted); }
.woocommerce-MyAccount-content .shop_table { margin-top: var(--space-4); }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { font-size: 1.35rem; margin-block: var(--space-6) var(--space-3); }
.woocommerce-MyAccount-content .button,
.woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.6rem 1.15rem;
  min-height: 38px;
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all var(--dur-fast) var(--ease-out);
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-Button:hover { background: var(--color-ink); color: var(--color-cream); }

.woocommerce-address-fields__field-wrapper,
.woocommerce-EditAccountForm { max-width: 640px; }

/* ---- Login and registration ---- */
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
.woocommerce-account .u-columns.col2-set {
  display: grid;
  gap: var(--space-6);
}
.woocommerce-form-login,
.woocommerce-form-register {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.u-column1 > h2,
.u-column2 > h2 {
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}
.woocommerce-LostPassword { margin-top: var(--space-3); font-size: 0.86rem; }
.woocommerce-LostPassword a { color: var(--color-gold-dark); text-decoration: underline; }
.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
/*
 * WooCommerce's script inserts a show/hide toggle after every password field.
 * Its own stylesheet — which is dequeued here — turns that span into an eye
 * icon inside the field; without styling it renders as a small bare box
 * loose under the input. It is a genuinely useful control, so it is dressed
 * properly rather than hidden.
 */
/* WooCommerce wraps the field in this span and appends the toggle to it, so
   this — not the form row — is what has to establish the positioning context. */
.password-input { position: relative; display: block; }
.show-password-input {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  cursor: pointer;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur-fast) var(--ease-out);
}
.show-password-input::after {
  content: '\f06e'; /* eye */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.9rem;
}
.show-password-input.display-password::after { content: '\f070'; /* eye-slash */ }
.show-password-input:hover { color: var(--color-ink); }
/* Keep the typed characters clear of the toggle. */
.woocommerce form .form-row input#password.input-text,
.woocommerce form .form-row input[type="password"].input-text { padding-right: 2.8rem; }

/*
 * WooCommerce puts "Remember me" and the submit button inside one <p>, and
 * relies on its own stylesheet to float them apart. That sheet is dequeued, so
 * without this the button sits jammed against the tick box on the same line.
 */
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit {
  display: block;
  width: 100%;
  margin-top: var(--space-4);
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-ink);
  min-height: 48px;
  padding-inline: 1.7rem;
}
.woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce-form-register .woocommerce-form-register__submit:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  color: var(--color-ink);
}

/* ==========================================================================
   WooCommerce forms and notices
   ========================================================================== */
.form-row,
.woocommerce-input-wrapper { display: block; }

.woocommerce form .form-row { margin-bottom: var(--space-4); }
.woocommerce form .form-row label,
.woocommerce-address-fields label,
.woocommerce-EditAccountForm label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}
.woocommerce form .form-row .required { color: var(--color-sale); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  padding: 0.75rem 0.9rem;
  min-height: 48px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-text);
  font-size: 0.94rem;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--color-gold);
}
.woocommerce form .form-row textarea { min-height: 120px; resize: vertical; }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--color-sale); }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: rgba(75, 122, 91, 0.55); }
.woocommerce .select2-container .select2-selection--single { display: flex; align-items: center; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); }
.woocommerce-form__label-for-checkbox {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.88rem;
}
.woocommerce-form__label-for-checkbox input { margin-top: 0.25rem; }

.woocommerce-notices-wrapper:not(:empty) { margin-bottom: var(--space-5); }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border-left: 3px solid;
  font-size: 0.92rem;
  margin-bottom: var(--space-4);
}
.woocommerce-message {
  background: rgba(75, 122, 91, 0.10);
  border-color: var(--color-success);
  color: #2f5540;
}
.woocommerce-info {
  background: var(--color-cream-dim);
  border-color: var(--color-gold);
  color: var(--color-text);
}
.woocommerce-error {
  background: rgba(168, 69, 47, 0.09);
  border-color: var(--color-sale);
  color: #7d3322;
  flex-direction: column;
  align-items: flex-start;
}
.woocommerce-error li { list-style: none; }
.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-cream);
  font-size: 0.8rem;
  font-weight: 600;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover { background: var(--color-gold-dark); }

/* Theme form notices, shared by the quote, contact and newsletter forms. */
.mc-form-notice {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: var(--space-4);
  border: 1px solid;
}
.mc-form-notice.is-success {
  background: rgba(75, 122, 91, 0.16);
  border-color: rgba(75, 122, 91, 0.4);
  color: #bfe3ca;
}
.mc-form-notice.is-error {
  background: rgba(168, 69, 47, 0.16);
  border-color: rgba(168, 69, 47, 0.45);
  color: #f0c3b8;
}
/* On light grounds the same notice needs darker text to stay readable. */
.section:not(.section--dark) .mc-form-notice.is-success { color: #2f5540; }
.section:not(.section--dark) .mc-form-notice.is-error { color: #7d3322; }

.form-error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #f0a894;
}
.section:not(.section--dark) .form-error { color: var(--color-sale); }
[aria-invalid="true"] { border-color: var(--color-sale) !important; }

/* The honeypot. Off-screen rather than display:none, because some automated
   submitters skip anything that is explicitly hidden. */
.mc-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Quick view
   ========================================================================== */
.quick-view__panel {
  max-width: 620px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  position: relative;
}
.quick-view__panel > .search-overlay__close { position: absolute; right: 1.25rem; top: 1.25rem; }
.quick-view__panel img { border-radius: var(--radius-md); width: 100%; }
.quick-view__body #qvCat {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}
.quick-view__body h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.quick-view__body #qvPrice { font-weight: 700; margin-bottom: var(--space-4); color: var(--color-ink); }
.quick-view__body #qvPrice del { font-weight: 400; color: var(--color-text-muted); font-size: 0.9rem; }
.quick-view__body #qvPrice ins { text-decoration: none; }
.quick-view__body .price-note { display: block; font-weight: 400; font-size: 0.72rem; color: var(--color-text-muted); }

/* ==========================================================================
   Cart drawer additions
   ========================================================================== */
.cart-drawer__body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cart-item__media { display: block; flex-shrink: 0; }
.cart-drawer .empty-state { padding-block: var(--space-7); }

/* ==========================================================================
   Footer additions
   ========================================================================== */
.footer-payments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-line-dark);
}
.footer-payments img { height: 26px; width: auto; opacity: 0.85; }

/* ==========================================================================
   Shop refinements

   The screens below were readable but flat: a table, a form and a list of
   links. What follows gives each of them a focal point — a buy panel, a
   summary card, a dashboard — so the shop reads as deliberately designed
   rather than as WooCommerce with the colours changed.
   ========================================================================== */

/* ---- WooCommerce shortcode screens (cart, checkout, account) ----
   These are WordPress pages, so they arrive through page.php. They are given
   this wrapper instead of .entry-content: an interface should not inherit the
   prose measure, the disc bullets or the table typography written for an
   article. */
.section--shop { padding-block: var(--space-7) var(--space-9); }
.shop-screen { width: 100%; }
/*
 * There was a `.shop-screen ul, .shop-screen ol { list-style: none; padding: 0;
 * margin: 0 }` reset here. It has been removed, and deliberately not replaced.
 *
 * style.css already resets every list on the site in exactly those three
 * declarations, so this restated a rule that was already in force — but at one
 * class plus one element it outranked the components inside it. Two of them lost
 * spacing they were written with and nobody could see why: the checkout progress
 * bar sat flush against the cart, and the note under Proceed to Checkout sat
 * flush against the button. Both looked like missing margins; both were margins
 * being overruled by a reset that did nothing.
 */
.shop-screen p { max-width: none; }
/* An empty notices wrapper otherwise leaves a gap the size of a paragraph
   above the first thing on the page. */
.shop-screen .woocommerce-notices-wrapper:empty { display: none; }
.shop-screen .woocommerce-notices-wrapper { margin-bottom: var(--space-5); }

/* ---- Checkout progress ----
   A rail, not three cards. Three bordered boxes side by side read as three
   choices; a marker on a connecting line reads as one journey with a position
   on it, which is the only thing this element is for. The line behind the
   markers is drawn in the muted rule colour and overdrawn in gold as far as the
   step the customer has reached. */
.checkout-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: var(--space-8);
  padding: var(--space-6) var(--space-4) var(--space-5);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.checkout-steps__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding-inline: 0.4rem;
  text-align: center;
}
/* The connector. Half a segment either side of every marker, so the joins land
   under the marker itself and the run reads as one continuous line. The outer
   halves — before the first marker and after the last — are switched off, since
   a journey does not start or end in mid-air. */
.checkout-steps__step::before,
.checkout-steps__step::after {
  content: '';
  position: absolute;
  top: 21px;
  height: 2px;
  background: var(--color-line);
  z-index: 0;
}
.checkout-steps__step::before { left: 0; right: 50%; }
.checkout-steps__step::after { left: 50%; right: 0; }
.checkout-steps__step:first-child::before,
.checkout-steps__step:last-child::after { content: none; }

/* Progress: the run is gold up to and including the current marker. */
.checkout-steps__step.is-done::before,
.checkout-steps__step.is-done::after,
.checkout-steps__step.is-current::before { background: var(--color-gold); }

.checkout-steps__mark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-paper);
  border: 2px solid var(--color-line);
  color: var(--color-text-muted);
  font-size: 0.92rem;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.checkout-steps__label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-ink);
}
.checkout-steps__label em {
  order: -1;
  font-style: normal;
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.checkout-steps__step.is-current .checkout-steps__mark {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-ink);
  /* A ring rather than a drop shadow: the marker sits on a line, and a shadow
     under it would read as the line casting one. */
  box-shadow: 0 0 0 5px rgba(191, 168, 71, 0.18);
}
.checkout-steps__step.is-current .checkout-steps__label em { color: var(--color-gold-dark); }
.checkout-steps__step.is-done .checkout-steps__mark {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-ink);
}
.checkout-steps__step.is-upcoming .checkout-steps__label { color: var(--color-text-muted); font-weight: 500; }

/* On the checkout the rail is a child of a grid that already spaces its rows,
   so its own bottom margin was being added to that gap and the rail floated
   120px above the page. The cart is not a grid there and still needs it. */
.woocommerce-checkout .checkout-steps { margin-bottom: 0; }

/* ---- Single product: gallery and buy panel ---- */
.single-product .woocommerce-product-gallery {
  box-shadow: var(--shadow-sm);
}
.single-product div.product > .summary { min-width: 0; }

.product-buybox {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: var(--shadow-sm);
  position: relative;
}
/* A thin gold rule along the top edge, the same accent the cart totals and
   the order summary carry, so the three "this is the money" panels match. */
.product-buybox::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
}
.single-product .product-buybox .price { margin-top: var(--space-2); margin-bottom: 0; }
.product-saving {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--space-3);
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  background: rgba(168, 69, 47, 0.1);
  color: var(--color-sale);
  font-size: 0.8rem;
  font-weight: 600;
}
.product-saving .amount { color: inherit; }
.single-product .product-buybox form.cart { margin-bottom: 0; }
.product-buybox__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.product-buybox__note i { color: var(--color-gold-dark); margin-top: 0.15rem; }

/* ---- Optional installation ----
   Sits inside form.cart, which is a flex row on simple products, so it has to
   claim a whole line of its own rather than queue up beside the quantity box. */
.product-install {
  flex: 1 0 100%;
  width: 100%;
  margin-bottom: var(--space-4);
}
.product-install__row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-cream-dim);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.product-install__row:hover { border-color: var(--color-gold); }
.product-install__row:focus-within { border-color: var(--color-gold); box-shadow: var(--shadow-sm); }
.product-install__row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0.15rem 0 0;
  accent-color: var(--color-gold-dark);
  cursor: pointer;
}
.product-install__text { display: block; min-width: 0; }
.product-install__label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.35;
}
.product-install__cost {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.product-install__cost .amount { color: var(--color-gold-dark); font-weight: 600; }

/* Reassurance points become bordered cards rather than a loose list. */
.product-trust {
  margin-top: var(--space-5);
  gap: var(--space-3);
}
.product-trust li {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-cream-dim);
}
/*
 * Inside the product summary the column is only ~380px wide, so three across
 * turns every heading into two cramped lines. Stack them there and let the
 * three-across version apply everywhere else it is used.
 */
.single-product .summary .product-trust { grid-template-columns: 1fr; }
.single-product .summary .product-trust li { align-items: center; }

/* ---- Product gallery lightbox ---- */
.woocommerce-product-gallery.has-lightbox .woocommerce-product-gallery__image { cursor: zoom-in; }

.mc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
}
.mc-lightbox.is-open { display: block; }
.mc-lightbox__scrim { position: absolute; inset: 0; background: rgba(16, 14, 11, 0.92); }
.mc-lightbox__panel {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
}
.mc-lightbox__stage {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The panel centres its items, which would let this figure size to the
     photograph and run underneath the counter. Stretching it to the row, with
     min-height:0 so it may also shrink, keeps the image inside its own area. */
  align-self: stretch;
  min-height: 0;
  height: 100%;
}
.mc-lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.mc-lightbox__close,
.mc-lightbox__nav {
  position: relative;
  z-index: 2;
  width: 46px; height: 46px;
  border: 1px solid rgba(243, 239, 225, 0.28);
  border-radius: 50%;
  background: rgba(26, 23, 19, 0.6);
  color: var(--color-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.mc-lightbox__close:hover,
.mc-lightbox__nav:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-ink); }
.mc-lightbox__close { position: absolute; top: var(--space-5); right: var(--space-5); }
.mc-lightbox__nav--prev { grid-column: 1; grid-row: 1; }
.mc-lightbox__nav--next { grid-column: 3; grid-row: 1; }
.mc-lightbox.is-single .mc-lightbox__nav,
.mc-lightbox.is-single .mc-lightbox__thumbs { display: none; }

.mc-lightbox__bar {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.mc-lightbox__count {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--color-text-on-dark-muted);
}
.mc-lightbox__thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.mc-lightbox__thumb {
  width: 58px; height: 58px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.mc-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mc-lightbox__thumb:hover { opacity: 1; }
.mc-lightbox__thumb.is-active { opacity: 1; border-color: var(--color-gold); }

@media (max-width: 640px) {
  .mc-lightbox__panel { padding: var(--space-4); gap: var(--space-2); }
  .mc-lightbox__close { top: var(--space-4); right: var(--space-4); }
  .mc-lightbox__close,
  .mc-lightbox__nav { width: 40px; height: 40px; }
  .mc-lightbox__thumb { width: 46px; height: 46px; }
}

/* ---- Sticky buy bar (small screens) ---- */
.product-sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.7rem var(--space-4);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--color-paper);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -6px 24px rgba(26, 23, 19, 0.1);
}
.product-sticky-bar__info { display: flex; flex-direction: column; min-width: 0; }
.product-sticky-bar__name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-sticky-bar__price { font-size: 0.86rem; color: var(--color-text-muted); }
.product-sticky-bar__price del { display: none; }
.product-sticky-bar .btn { flex: 0 0 auto; }

/* Only ever on phones: on a wide screen the real form is already in view. */
@media (min-width: 900px) {
  .product-sticky-bar { display: none; }
}

/* ---- Cart: a list of product cards ---- */
.cart-lines {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* The column labels. A row of headings rather than a table head, so the lines
   below are free to lay out their own way on a narrow screen. */
.cart-lines__head {
  display: none;
  padding: 0.9rem var(--space-5);
  background: var(--color-cream-dim);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cart-line {
  display: grid;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-5);
  align-items: center;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas:
    'media info'
    'price price'
    'qty   total';
}
.cart-line + .cart-line { border-top: 1px solid var(--color-line); }

.cart-line__media { grid-area: media; }
.cart-line__media img {
  width: 84px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-cream-dim);
}
.cart-line__info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.cart-line__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; line-height: 1.25; }
.cart-line__name a { color: var(--color-ink); }
.cart-line__name a:hover { color: var(--color-gold-dark); }
.cart-line__sku { font-size: 0.74rem; letter-spacing: 0.06em; color: var(--color-text-muted); }
.cart-line__info .variation { margin: 0; }
.cart-line__remove {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.cart-line__remove:hover { color: var(--color-sale); }

.cart-line__price { grid-area: price; }
.cart-line__qty { grid-area: qty; }
.cart-line__total { grid-area: total; font-weight: 700; color: var(--color-ink); text-align: right; }
.cart-line__price,
.cart-line__total { font-size: 0.98rem; }
/* On a narrow screen each figure names itself, since the column headings are
   not shown there. */
.cart-line__price::before,
.cart-line__total::before {
  content: attr(data-label) ': ';
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 400;
}

.cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--color-cream-dim);
  border-top: 1px solid var(--color-line);
}
.cart-actions .coupon { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.cart-actions .coupon .input-text {
  padding: 0.6rem 1rem;
  min-height: 40px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-size: 0.88rem;
  min-width: 170px;
}
.cart-actions .coupon .input-text:focus { outline: none; border-color: var(--color-gold); }
.cart-actions__right { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

.cart-continue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.cart-continue:hover { color: var(--color-ink); }
.cart-continue i { transition: transform var(--dur-fast) var(--ease-out); }
.cart-continue:hover i { transform: translateX(-3px); }

.cart_totals,
#order_review {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/*
 * The totals panel reuses .shop_table for its markup, which carries a filled
 * heading cell meant for a real table head. Inside a summary card that reads
 * as a grey block floating behind the labels, so it is cleared here.
 */
.cart_totals .shop_table,
.cart_totals table {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.cart_totals th {
  background: none;
  padding-inline: 0;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.74rem;
}
.cart_totals td { padding-inline: 0; }
/* The delivery row runs to several lines while its label is one word. Centred,
   the label floats halfway down a paragraph it is naming; at the top it reads
   as the heading it is. */
.cart_totals th,
.cart_totals td { vertical-align: top; }
.cart_totals .order-total th,
.cart_totals .order-total td { vertical-align: baseline; }
/* The heading already draws the rule under itself; the first row must not
   draw a second one a pixel below it. */
.cart_totals table tr:first-child th,
.cart_totals table tr:first-child td { border-top: 0; }
.cart_totals::before,
#order_review::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
}
.cart_totals h2 {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

/* The delivery row carries two different things: a charge, which belongs on the
   right with the other figures, and the address it is being charged to, which is
   a sentence and reads as one only when it is set left at its own size. */
.cart_totals .woocommerce-shipping-methods { margin: 0; }
.cart_totals .woocommerce-shipping-methods li + li { margin-top: 0.35rem; }
.cart_totals .woocommerce-shipping-destination {
  display: block;
  margin-top: 0.5rem;
  text-align: left;
  font-size: 0.76rem;
  line-height: 1.55;
}
.cart_totals .shipping-calculator-button { display: inline-block; margin-top: 0.4rem; }

/* The total is the figure the whole card exists to state. Room above it, and a
   rule that separates it from the arithmetic rather than continuing it. */
.cart_totals .order-total th,
.cart_totals .order-total td { padding-top: var(--space-4); }

.wc-proceed-to-checkout .btn,
.wc-proceed-to-checkout .checkout-button { width: 100%; }

/* The reassurance list under the Proceed to Checkout button. It needs room above
   it: the button is a solid gold pill, so text set close underneath reads as
   attached to it rather than as a separate note. */
.order-trust {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 0.6rem;
}
.order-trust li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.order-trust i { color: var(--color-gold-dark); width: 16px; text-align: center; }

/* ---- Checkout ---- */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
#order_review_heading { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--space-4); }

/* Line items in the order summary get their thumbnail back, because a column
   of names and figures gives a customer nothing to recognise at the moment
   they are deciding whether to pay. */
.review-item { display: flex; align-items: center; gap: 0.8rem; }
.review-item__media { flex: 0 0 auto; }
.review-item__media img {
  width: 52px; height: 52px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-cream-dim);
}
.review-item__name { font-weight: 600; color: var(--color-ink); line-height: 1.35; }
.woocommerce-checkout-review-order-table td { padding-block: 0.85rem; }

.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info { margin-bottom: var(--space-4); }

/* ---- My account: side column ---- */
.account-side { display: grid; gap: var(--space-4); align-content: start; }
.account-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-cream);
}
.account-card__avatar { flex: 0 0 auto; }
.account-card__avatar img {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 106, 0.5);
}
.account-card__id { display: flex; flex-direction: column; min-width: 0; }
.account-card__id strong { font-size: 0.95rem; color: #fff; }
.account-card__id span {
  font-size: 0.78rem;
  color: var(--color-text-on-dark-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- My account: dashboard ---- */
.account-dash { display: grid; gap: var(--space-6); }
.account-dash__greeting h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; }
.account-dash__greeting p { margin-top: var(--space-2); color: var(--color-text-muted); }
.account-dash__greeting a { color: var(--color-gold-dark); text-decoration: underline; }

.account-dash__grid { display: grid; gap: var(--space-4); }
.account-dash__card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.account-dash__card:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.account-dash__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-cream-dim);
  color: var(--color-gold-dark);
}
.account-dash__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.account-dash__body strong { font-size: 0.98rem; color: var(--color-ink); }
.account-dash__body span { font-size: 0.85rem; color: var(--color-text-muted); }
.account-dash__go { color: var(--color-text-muted); font-size: 0.8rem; transition: transform var(--dur-fast) var(--ease-out); }
.account-dash__card:hover .account-dash__go { transform: translateX(3px); color: var(--color-gold-dark); }

.account-dash__help {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-cream);
}
.account-dash__help h3 { font-size: 1.3rem; color: #fff; }
.account-dash__help p { margin-top: var(--space-2); color: var(--color-text-on-dark-muted); font-size: 0.92rem; }
.account-dash__help-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.account-dash__help-actions .btn--outline { color: var(--color-cream); border-color: rgba(243, 239, 225, 0.35); }
.account-dash__help-actions .btn--outline:hover { background: rgba(243, 239, 225, 0.1); }

/* ---- My account: signed out ---- */
.account-intro {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}
.account-intro__copy .section-title { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
.account-intro__copy .section-sub { margin-top: var(--space-3); max-width: 48ch; }
.account-intro__points { display: grid; gap: var(--space-4); align-content: center; }
.account-intro__points li { display: flex; gap: 0.9rem; align-items: flex-start; }
.account-intro__points i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-cream-dim);
  color: var(--color-gold-dark);
  font-size: 0.85rem;
}
.account-intro__points strong { display: block; font-size: 0.95rem; color: var(--color-ink); }
.account-intro__points span { font-size: 0.85rem; color: var(--color-text-muted); }

.woocommerce-form-login,
.woocommerce-form-register { box-shadow: var(--shadow-sm); }

/*
 * The signed-out screen is not the two-column account layout — there is no
 * navigation yet. Take it out of that grid entirely and centre it, so the
 * sign-in and register cards get equal, generous width instead of being
 * squeezed into whatever the account grid left over.
 */
.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
  max-width: 1040px;
  margin-inline: auto;
}

/* WooCommerce's checkbox labels wrap the input and a span. Without this the
   box and its text fall onto separate lines at opposite ends of the row. */
.woocommerce-form__label-for-checkbox,
.woocommerce-form-login__rememberme {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0;
  cursor: pointer;
}
.woocommerce-form__input-checkbox,
.woocommerce-form-login__rememberme input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--color-gold);
}
.woocommerce-form__label-for-checkbox span { font-size: 0.88rem; color: var(--color-text); }

/* ---- Homepage product tabs ---- */
/* The grid used to dim itself while a category was fetched; it now fills with
   skeleton cards, which keeps its height and says what is coming. */
.product-grid__empty {
  grid-column: 1 / -1;
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-line-dark);
  border-radius: var(--radius-md);
}
a.chip-filter { display: inline-flex; align-items: center; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 640px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(4, 1fr); }
  .quick-view__panel { grid-template-columns: 200px 1fr; align-items: start; }
  .order-received__overview { grid-template-columns: repeat(3, 1fr); }
  .woocommerce-customer-details .woocommerce-columns { grid-template-columns: repeat(2, 1fr); }
  .product-trust { grid-template-columns: repeat(2, 1fr); }
  .account-dash__grid { grid-template-columns: repeat(2, 1fr); }
  .account-dash__help { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 900px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-cards { grid-template-columns: repeat(4, 1fr); }
  .contact-layout { grid-template-columns: 0.9fr 1.1fr; }
  .single-product div.product { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .cart-layout { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr); }
  /* Placed explicitly so anything WooCommerce or a plugin drops into this
     wrapper cannot displace the two things that belong in it. */
  .cart-layout > form.woocommerce-cart-form { grid-column: 1; grid-row: 1; }
  .cart-layout > .cart-collaterals { grid-column: 2; grid-row: 1; }
  .cart-collaterals {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }

  /* Wide enough for one row per line: photo, details, price, quantity, total.
     The three figure columns are held to what a figure needs and no more —
     every pixel they do not use goes to the details column, which now carries
     five labelled options per line and was wrapping "Large (3 x 5 ft)" onto two
     lines to pay for whitespace beside a price. */
  .cart-lines__head,
  .cart-line {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 6.5rem 7.5rem 6.5rem;
    grid-template-areas: 'media info price qty total';
    align-items: center;
    column-gap: var(--space-3);
  }
  .cart-lines__head { grid-template-columns: 84px minmax(0, 1fr) 6.5rem 7.5rem 6.5rem; }
  .cart-lines__head-product { grid-column: 2; }
  .cart-lines__head-qty { text-align: center; }
  .cart-lines__head-total { text-align: right; }
  .cart-line__price { text-align: left; }
  .cart-line__qty { justify-self: center; }
  .cart-line__price::before,
  .cart-line__total::before { content: none; }
  .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr); }
  .woocommerce-account .woocommerce { grid-template-columns: minmax(220px, 0.3fr) minmax(0, 1fr); }
  .woocommerce-account .u-columns.col2-set,
  .woocommerce-account:not(.logged-in) .woocommerce > .u-columns { grid-template-columns: repeat(2, 1fr); }
  .legal-layout.has-toc { grid-template-columns: minmax(200px, 0.3fr) minmax(0, 1fr); }
  .legal-toc { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
  .entry-layout.has-sidebar { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr); }
  .shop-toolbar { flex-direction: column; }
  .product-trust { grid-template-columns: repeat(3, 1fr); }
  .account-intro { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--space-8); }

  /*
   * Images on the left, information on the right — the arrangement every other
   * shop uses, so it is the one customers arrive already knowing how to read.
   *
   * This matches the DOM order WooCommerce prints, but both are still placed
   * explicitly: `.summary` is not the gallery's immediate next sibling on every
   * product, and leaving either to flow lets anything a plugin injects take a
   * column that belongs to one of these two.
   *
   * Deliberately not sticky. A pinned image that stays put while the rest of
   * the page moves reads as a stuck viewport rather than as a feature.
   */
  .single-product div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
  .single-product div.product > .summary { grid-column: 2; grid-row: 1; }

  /*
   * form.checkout has three children — the customer details, the summary
   * heading and the summary itself. Left to flow, the heading takes the
   * second column and the summary wraps back under the address fields, which
   * is not a two-column checkout at all. Place all three explicitly.
   */
  /* Row one is sized to the heading, so "Your order" sits level with
     "Billing details" instead of floating halfway down the form. */
  .woocommerce-checkout form.checkout { grid-template-rows: min-content minmax(0, 1fr); row-gap: 0; }
  .woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  .woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; }

  /* The order summary is the reference a customer keeps glancing back at
     while filling in a long address form. */
  #order_review {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
    align-self: start;
  }
}

/* The account layout is a two-column grid, but the login screen is not:
   there it is the intro and then the two cards side by side. The layout rule
   itself lives with the rest of the signed-out styles above. */

/* ---- Cart and order tables collapse to stacked rows on small screens ---- */
@media (max-width: 767px) {
  .shop_table thead { display: none; }
  .shop_table,
  .shop_table tbody,
  .shop_table tr,
  .shop_table td { display: block; width: 100%; }
  .shop_table tr {
    border-top: 1px solid var(--color-line);
    padding: var(--space-4) 0;
    position: relative;
  }
  .shop_table td {
    border: 0;
    padding: 0.35rem 1rem 0.35rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    text-align: right;
  }
  .shop_table td::before {
    content: attr(data-title);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: left;
  }
  .shop_table td.product-thumbnail::before,
  .shop_table td.product-remove::before { content: none; }
  .shop_table td.product-thumbnail { justify-content: flex-start; }
  .shop_table td.product-remove {
    position: absolute;
    top: var(--space-4);
    right: 0.5rem;
    width: auto;
    padding: 0;
  }
  .shop_table td.actions {
    flex-direction: column;
    align-items: stretch;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: var(--space-4);
  }
  .shop_table td.actions::before { content: none; }
  .shop_table .coupon { width: 100%; }
  .shop_table .coupon .input-text { flex: 1; min-width: 0; }

  /* The order tables on the account and confirmation screens keep their
     headers, since those rows are short enough to stay readable. */
  .woocommerce-table--order-details td,
  .woocommerce-checkout-review-order-table td { text-align: right; }

  /*
   * The totals panel is a two-column label/figure table that already reads
   * fine on a phone. Stacking it would print each label twice — once as the
   * heading cell and again from the data-title rule above.
   */
  .cart_totals table,
  .cart_totals table tbody,
  .cart_totals table tr { display: table; width: 100%; }
  .cart_totals table tbody { display: table-row-group; }
  .cart_totals table tr { display: table-row; }
  .cart_totals table th,
  .cart_totals table td { display: table-cell; padding-block: 0.7rem; }
  .cart_totals table td { text-align: right; }
  .cart_totals table td::before { content: none; }

  .cart-collaterals { position: static; }
  .single-product .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); }
  .order-received__overview { grid-template-columns: 1fr; }

  /* The rail already stacks its marker over its label, so a phone only needs
     the type brought down and the step numbers dropped — the markers on the
     line say which step this is without repeating it in words. */
  .checkout-steps { padding: var(--space-5) 0.2rem var(--space-4); margin-bottom: var(--space-6); }
  .checkout-steps__step { padding-inline: 0.2rem; gap: 0.45rem; }
  .checkout-steps__mark { width: 38px; height: 38px; font-size: 0.8rem; }
  .checkout-steps__step::before,
  .checkout-steps__step::after { top: 18px; }
  .checkout-steps__label { font-size: 0.74rem; line-height: 1.3; }
  .checkout-steps__label em { display: none; }

  /* The sticky bar covers the bottom of the page, so give the footer room. */
  .single-product .site-footer { padding-bottom: 84px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .contact-card__link:hover i { transform: none; }
}