/* ============================================================
   EVANIA FINE JEWELLERY — MAIN STYLES
   ============================================================ */

/* ─── Announcement Bar ─── */
.announcement-bar {
  height: var(--announcement-height);
  background: var(--color-primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-8);
  position: relative;
  overflow: hidden;
}

.announcement-bar p {
  font-size: var(--text-xs);
  color: var(--color-gold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  animation: fadeIn 0.6s ease;
}

.announcement-close {
  position: absolute;
  right: var(--space-8);
  color: var(--color-gold);
  opacity: 0.5;
  cursor: pointer;
  font-size: var(--text-lg);
  transition: opacity var(--transition-fast);
}

.announcement-close:hover {
  opacity: 1;
}

/* ─── Navigation ─── */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  /* Was rgba(...,0.95) behind a 20px blur — at 95% opacity almost no content
     showed through, so the blur cost compositing work while being invisible.
     At 0.62 the material actually reads as translucent and content is visibly
     passing beneath it. saturate() keeps colours from going flat behind the
     blur, which is what stops it looking like grey fog. */
  background: var(--color-primary-bg);
  transition: background var(--transition-base), box-shadow var(--transition-base);
  height: var(--nav-height);
}

/* Translucency is a legibility risk when the user has asked for less of it,
   and some browsers/GPUs drop backdrop-filter entirely — in both cases fall
   back to a near-solid bar rather than unreadable text over live content. */
/* Once scrolled the bar sits over page content, most of it white, so it
   goes translucent and blurs what passes beneath. No saturate: on the dark
   hero that was lifting the whole bar to a pale grey, which is the white
   cast that was visible on desktop and phone alike. */
.nav.scrolled {
  background: rgba(30, 21, 50, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

/* These two must stay after the rule above, not before it: same specificity,
   so the later one wins. Translucency is a legibility risk when the reader
   has asked for less of it, and some browsers and GPUs drop backdrop-filter
   entirely. Either way the scrolled bar goes near solid. */
@media (prefers-reduced-transparency: reduce) {
  .nav.scrolled {
    background: rgba(30, 21, 50, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.scrolled { background: rgba(30, 21, 50, 0.97); }
}

.nav-inner {
  /* Grid, not flex: space-between centres the links between the logo and the
     actions, so a wide logo shoves them off-centre. Equal outer tracks put the
     links in the middle of the bar regardless of how wide the lockup is. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-gold);
  letter-spacing: var(--letter-spacing-wide);
  font-weight: var(--font-weight-semibold);
  position: relative;
  z-index: var(--z-dropdown);
}

.nav-logo span {
  color: var(--color-white);
}

/* Real logo, when one is set. Sized off height so any aspect ratio the
   artwork happens to have still fits the bar. */
.nav-logo-img {
  display: block;
  width: auto;
  height: 72px;
  max-width: 300px;
  object-fit: contain;
}

.footer-brand .nav-logo-img {
  height: 96px;
  max-width: 380px;
}

/* Explicit tracks. .nav-links is display:none below 1024, and a display:none
   child generates no grid item at all, so the actions collapsed into the
   middle track and sat stranded mid-bar with the right third empty. Pinning
   each child to its own column makes the layout independent of whether the
   links are rendered. */
.nav-logo {
  grid-column: 1;
}

.nav-links {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-self: center;
  gap: var(--space-8);
}

.nav-actions {
  grid-column: 3;
}

.nav-links a {
  font-size: var(--text-sm);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  opacity: 0.75;
  /* Named properties, not all. transition: all also animates anything the
     browser resolves late during a navigation, which showed up as the link
     settling into place after the page had drawn. */
  transition: color var(--transition-fast), opacity var(--transition-fast);
  position: relative;
  padding: var(--space-2) 0;
}

/* The current page reads as current. .active was styled in motion.css but
   nothing ever set it, so the indicator never appeared on any page. */
.nav-links a[aria-current="page"] {
  opacity: 1;
  color: var(--color-gold);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  /* Full width, revealed by scaling rather than grown by animating width.
     Animating width forces layout on every frame; scaleX runs on the
     compositor. Same visual, no layout thrash.
     This also fixes a real bug: motion.css already drives this underline with
     transform: scaleX(), but width:0 here meant it was scaling a zero-width
     element, so the hover and active-page underlines never appeared at all. */
  width: 100%;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ease-spring-duration) var(--ease-spring);
}

.nav-links a:hover {
  opacity: 1;
  color: var(--color-gold);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--space-3);
}

.nav-actions .btn-icon {
  position: relative;
}

.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: var(--color-gold);
  color: var(--color-primary-bg);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Mega Menu ─── */
.mega-menu {
  position: absolute;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: rgba(30, 21, 50, 0.98);
  backdrop-filter: blur(20px);
  padding: var(--space-12) var(--space-8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-base);
  z-index: var(--z-dropdown);
}

.mega-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu-grid {
  /* One column now the empty featured panel is gone. The category links
     inside spread themselves across the width. */
  max-width: var(--container-max);
  margin: 0 auto;
}

#megaMenuCategoryLinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-2) var(--space-8);
}

.mega-menu-col h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-gold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.mega-menu-col a {
  display: block;
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.82);
  padding: var(--space-3) 0;
  transition: all var(--transition-fast);
}

.mega-menu-col a:hover {
  color: var(--color-gold);
  padding-left: var(--space-2);
}

.mega-menu-featured {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 200px;
  background: var(--color-secondary-bg);
}

.mega-menu-featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-menu-featured-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
  background: linear-gradient(transparent, rgba(30, 21, 50, 0.9));
}

.mega-menu-featured-content h3 {
  color: var(--color-white);
  font-size: var(--text-xl);
  margin-bottom: var(--space-1);
}

.mega-menu-featured-content span {
  color: var(--color-gold);
  font-size: var(--text-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

/* ─── Mobile Menu ─── */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-2);
  z-index: var(--z-dropdown);
}

.mobile-menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: all var(--transition-base);
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ─── Hero Banner ─── */
.hero {
  position: relative;
  height: 90vh;
  min-height: 600px;
  max-height: 900px;
  overflow: hidden;
  /* Was a single flat fill. Two very wide, very low-opacity radial pools give
     the surface some depth so it reads as lit rather than as a blank swatch —
     it does not depend on a hero image, and still sits correctly underneath
     one once real photography lands. Colours are brand gold and the lighter
     brand aubergine, both at low alpha, so no new colour enters the palette. */
  background:
    radial-gradient(120% 80% at 78% 18%, rgba(212, 175, 55, 0.10) 0%, transparent 62%),
    radial-gradient(90% 70% at 12% 92%, rgba(43, 26, 69, 0.85) 0%, transparent 70%),
    var(--color-primary-bg);
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  /* Full bleed, edge to edge. The piece sits in the upper middle of every
     shot, so pulling the crop up from centre keeps the jewellery in frame
     and cuts the empty base of the display stand instead. */
  object-fit: cover;
  object-position: center 38%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Two layers: the original top-down wash for the nav, plus a left-hand
     scrim so the headline stays readable whatever photo is showing. */
  background:
    linear-gradient(90deg, rgba(30, 21, 50, 0.92) 0%, rgba(30, 21, 50, 0.72) 34%, rgba(30, 21, 50, 0) 62%),
    var(--gradient-hero);
  z-index: 1;
}

/* Each hero slide is a link to its product, so it needs to say what it is.
   Bottom right keeps it clear of .hero-content, which is centre left. */
.hero-slide-caption {
  position: absolute;
  right: var(--space-8);
  bottom: var(--space-8);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background: rgba(30, 21, 50, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: right;
  max-width: min(320px, 46vw);
  pointer-events: none;
}

@media (prefers-reduced-transparency: reduce) {
  .hero-slide-caption {
    background: rgba(30, 21, 50, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.hero-slide-name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-white);
  line-height: 1.35;
}

.hero-slide-price {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--space-8);
  max-width: var(--container-wide);
  margin: 0 auto;
}

.hero-title {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: var(--text-display-lg);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-tight);
  max-width: 700px;
  margin-bottom: var(--space-6);
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 0.5s;
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.7);
  max-width: 500px;
  margin-bottom: var(--space-10);
  font-weight: var(--font-weight-light);
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 0.7s;
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 0.9s;
}

.hero-nav {
  position: absolute;
  bottom: var(--space-12);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all var(--transition-base);
}

.hero-dot.active {
  width: 32px;
  background: var(--color-gold);
  border-radius: var(--radius-full);
}

.hero-arrow {
  color: var(--color-white);
  opacity: 0.5;
  cursor: pointer;
  padding: var(--space-2);
  transition: opacity var(--transition-fast);
}

.hero-arrow:hover {
  opacity: 1;
}

/* ─── Featured Categories ─── */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.category-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.category-card:hover img {
  transform: scale(1.05);
}

.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 50%, rgba(30, 21, 50, 0.8));
}

.category-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-8);
  text-align: center;
}

.category-card-content h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.category-card-content span {
  font-size: var(--text-sm);
  color: var(--color-gold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--transition-base);
}

.category-card:hover .category-card-content span {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Product Card ─── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.product-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-cream);
  transition: all var(--transition-base);
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.product-card-image {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #f0ece4;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-card-image img {
  transform: scale(1.08);
}

.product-card-actions {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  opacity: 0;
  transform: translateX(10px);
  transition: all var(--transition-base);
}

.product-card:hover .product-card-actions {
  opacity: 1;
  transform: translateX(0);
}

.product-card-actions button {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.product-card-actions button:hover {
  background: var(--color-gold);
  color: var(--color-white);
}

.product-card-actions button.wishlisted {
  color: var(--color-wishlist);
}

.product-card-badges {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-card-body {
  padding: var(--space-5);
}

.product-card-body h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.product-card-rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-gold);
}

.product-card-rating span {
  color: var(--color-muted);
  margin-left: var(--space-1);
}

.product-card-price {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.product-card-price .current {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-bg);
}

.product-card-price .original {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: line-through;
}

.product-card .btn {
  width: 100%;
}

/* ─── Collection Banner ─── */
.collection-banner {
  position: relative;
  height: 500px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  margin: var(--space-20) 0;
  background: var(--color-secondary-bg);
}

.collection-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(30, 21, 50, 0.85) 0%, transparent 100%);
  display: flex;
  align-items: center;
  padding: 0 var(--space-16);
}

.collection-banner-content {
  max-width: 500px;
}

.collection-banner-content .section-label {
  margin-bottom: var(--space-4);
}

.collection-banner-content h2 {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.collection-banner-content p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-light);
}

/* ─── Testimonials ─── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.testimonial-card {
  background: var(--color-white);
  padding: var(--space-10);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.testimonial-stars {
  color: var(--color-gold);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

.testimonial-card blockquote {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonial-author img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.testimonial-author-info strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.testimonial-author-info span {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ─── Follow Us (social icon row) ─── */
.social-row {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

/* An inline svg sits on the text baseline, which left a few pixels of gap
   under it and pushed the glyph off centre inside the circle. display:block
   removes the baseline entirely. Sized here rather than trusting the width
   attribute in the markup, so every icon matches whatever the circle is. */
.social-row a svg,
.newsletter-social a svg {
  display: block;
  width: 22px;
  height: 22px;
}

.social-row a {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.social-row a:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(212, 175, 55, 0.08);
}

/* ─── Newsletter ─── */
.newsletter {
  background: var(--color-primary-bg);
  padding: var(--space-24) 0;
  text-align: center;
}

.newsletter-content {
  max-width: 600px;
  margin: 0 auto;
}

.newsletter-content h2 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.newsletter-content p {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-light);
}

.newsletter-form {
  display: flex;
  gap: var(--space-3);
  max-width: 500px;
  margin: 0 auto;
}

.newsletter-form input {
  flex: 1;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-white);
  font-size: var(--text-sm);
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.newsletter-form input:focus {
  border-color: var(--color-gold);
}

.newsletter-social {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.newsletter-social a {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  transition: all var(--transition-fast);
}

.newsletter-social a:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(212, 175, 55, 0.1);
}

/* A full-width dark block, for a section that is deliberately a break in the
   page rather than an arbitrary stripe — the bespoke call to action. Flat, not
   faded: a gradient edge on a block this size reads as a printing fault. */
.section-dark {
  background: var(--color-primary-bg);
}

@media (max-width: 767px) {
  .hero-slide img {
    object-position: center 34%;
  }

  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(30, 21, 50, 0.55) 0%, rgba(30, 21, 50, 0.35) 40%, rgba(30, 21, 50, 0.9) 100%),
      var(--gradient-hero);
  }

  .hero-slide-caption {
    right: var(--space-4);
    bottom: var(--space-4);
    padding: var(--space-2) var(--space-3);
  }
}

/* The one line of brand on the homepage. Sized up from .section-subtitle
   because it is the only copy in its section and has to carry it. */
.brand-statement {
  font-size: var(--text-xl);
  line-height: 1.65;
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-base);
}

@media (max-width: 767px) {
  .brand-statement {
    font-size: var(--text-lg);
  }
}

/* ─── Category strip on the shop page ─────────────────────
   Deliberately the same shape as a product card: square image, label
   under it, quiet border. A different treatment here made the shop read
   as two unrelated grids stacked on each other. */
.category-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.category-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  text-align: center;
  transition: border-color var(--transition-fast), transform var(--transition-base);
}

.category-tile:hover {
  border-color: var(--color-gold);
  transform: translateY(-2px);
}

.category-tile-image {
  display: block;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--color-cream);
}

.category-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-tile-name {
  display: block;
  padding: var(--space-3) var(--space-2) 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text);
}

.category-tile-count {
  display: block;
  padding: 0 var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ─── Footer ─── */
.footer {
  background: var(--color-primary-bg);
  padding: var(--space-20) 0 var(--space-10);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
  gap: var(--space-10);
  margin-bottom: var(--space-16);
}

.footer-brand .nav-logo {
  margin-bottom: var(--space-4);
  display: inline-block;
}

.footer-brand p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  line-height: var(--line-height-relaxed);
  max-width: 300px;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-gold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.footer-col a {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  padding: var(--space-1) 0;
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: var(--color-gold);
}

.footer-contact p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-2);
}

.footer-contact strong {
  color: rgba(255, 255, 255, 0.8);
  font-weight: var(--font-weight-medium);
}

.footer-bottom {
  padding-top: var(--space-8);
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.09) 22%,
      rgba(255, 255, 255, 0.09) 78%,
      rgba(255, 255, 255, 0) 100%) top center / 100% 1px no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-bottom p {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
}

.footer-payments {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.footer-payments img {
  height: 24px;
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}

.footer-payments img:hover {
  opacity: 0.8;
}

/* ─── Page Header ─── */
.page-header {
  position: relative;
  padding: var(--space-24) 0 var(--space-16);
  background: var(--color-primary-bg);
  text-align: center;
}

.page-header h1 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: var(--text-display-md);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-3);
}

.page-header p {
  color: rgba(255, 255, 255, 0.6);
  font-weight: var(--font-weight-light);
}

/* ─── Breadcrumb ─── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.breadcrumb a {
  color: var(--color-muted);
}

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

.breadcrumb span {
  color: var(--color-text);
}

.breadcrumb .separator {
  color: var(--color-border);
}

/* ─── Toast / Notification ─── */
.toast {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  padding: var(--space-4) var(--space-6);
  background: var(--color-primary-bg);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transform: translateY(100px);
  opacity: 0;
  transition: all var(--transition-base);
}

.toast.active {
  transform: translateY(0);
  opacity: 1;
}

.toast .icon {
  color: var(--color-gold);
}

/* ─── Contact Page ─── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

.contact-info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.contact-card {
  padding: var(--space-6);
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  text-align: center;
}

.contact-card .icon {
  font-size: var(--text-2xl);
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.contact-card h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.contact-card p {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.contact-form {
  padding: var(--space-10);
  background: var(--color-cream);
  border-radius: var(--radius-2xl);
}

.contact-form h3 {
  margin-bottom: var(--space-6);
  font-size: var(--text-2xl);
}

/* ─── Forms (contact form only — WooCommerce reuses "form-row" as its own
   generic field-wrapper class, so this must stay scoped to .contact-form
   or it mangles every WooCommerce form into a 2-column grid). ─── */
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-gold);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

/* ─── Loading Skeleton ─── */
.skeleton {
  background: linear-gradient(90deg, #f0ece4 25%, #e8e2d6 50%, #f0ece4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ─── Quick View Modal ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform var(--transition-base);
}

.modal-overlay.active .modal {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.quick-view-modal {
  max-width: 800px;
  width: 90%;
}

.quick-view-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-height: 80vh;
  overflow-y: auto;
}

.quick-view-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quick-view-image {
  width: 100%;
  position: relative;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.quick-view-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.quick-view-info {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.quick-view-category {
  font-size: var(--text-xs);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  font-weight: var(--font-weight-medium);
}

.quick-view-info h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-primary-bg);
}

.quick-view-rating {
  color: var(--color-gold);
  font-size: var(--text-sm);
}

.quick-view-price {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-gold);
  font-weight: var(--font-weight-semibold);
}

.quick-view-desc {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

.quick-view-stock {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.quick-view-stock.in-stock {
  color: var(--color-success);
}

.quick-view-stock.out-of-stock {
  color: var(--color-error);
}

.quick-view-add-cart {
  margin-top: var(--space-2);
}

.quick-view-thumbnails {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.quick-view-thumbnails img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: .3s;
}

.quick-view-thumbnails img:hover,
.quick-view-thumbnails img.active {
  border-color: var(--color-gold);
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: #222;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: .3s;
  z-index: 10;
}

.gallery-arrow:hover {
  background: var(--color-gold);
  color: #fff;
}

.gallery-arrow.left { left: 15px; }
.gallery-arrow.right { right: 15px; }

/* ─── Sold / Disabled States ─── */
.badge-sold {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #c62828;
  color: #fff;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  z-index: 20;
  text-transform: uppercase;
}

.btn:disabled,
.add-to-cart:disabled {
  opacity: .6;
  cursor: not-allowed;
  background: #999 !important;
  border-color: #999 !important;
}

/* ─── Shop Archive (WooCommerce) ─── */
.shop-main {
  min-height: 60vh;
}

.shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.woocommerce-result-count {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}

.woocommerce-ordering {
  margin: 0;
}

.woocommerce-ordering select {
  padding: var(--space-2) var(--space-10) var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-white);
  cursor: pointer;
  appearance: none;
  min-width: 180px;
  font-family: var(--font-body);
}

.woocommerce-ordering select:focus {
  border-color: var(--color-gold);
  outline: none;
}

ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.products .product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  transition: all var(--transition-base);
  border: 1px solid var(--color-border);
  margin: 0;
}

ul.products .product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(212, 175, 55, 0.15);
}

ul.products .product-card-image {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--color-cream);
}

ul.products .product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

ul.products .product-card:hover .product-card-image img {
  transform: scale(1.08);
}

ul.products .product-card-badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 2;
}

ul.products .product-card-badges .badge {
  font-size: var(--text-xs);
  padding: 3px 10px;
  letter-spacing: var(--letter-spacing-wider);
}

ul.products .product-card-body {
  /* flex:1 plus margin-top:auto on the button makes every card the same
     height with the button on one line, however long the title runs. */
  flex: 1;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

ul.products .product-card-body h3 {
  /* Two lines maximum. Product names here run long and a third line was
     pushing the price and the button out of alignment across the row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

ul.products .product-card .add_to_cart_button,
ul.products .product-card .button {
  margin-top: auto;
  width: 100%;
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-xs);
  /* Square-ish, not the pill .btn uses elsewhere. At two columns on a phone
     a full-width pill with wrapping text renders as a circle. */
  border-radius: var(--radius-sm);
  white-space: nowrap;
  letter-spacing: var(--letter-spacing-wide);
  background: var(--color-primary-bg);
  color: var(--color-white);
  border: none;
}

ul.products .product-card .add_to_cart_button:hover,
ul.products .product-card .button:hover {
  background: var(--color-gold);
  color: var(--color-primary-bg);
}

ul.products .product-card-body h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-bg);
  line-height: var(--line-height-base);
  margin: 0;
}

ul.products .product-card-body h3 a {
  color: inherit;
}

ul.products .product-card-price {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

ul.products .product-card-price .current {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-bg);
  font-family: var(--font-body);
}

ul.products .product-card-price del {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: line-through;
  margin-right: var(--space-2);
}

ul.products .product-card .add-to-cart {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  text-align: center;
}

.woocommerce-pagination {
  margin-top: var(--space-12);
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-pagination .page-numbers li {
  display: contents;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.woocommerce-pagination .page-numbers a:hover,
.woocommerce-pagination .page-numbers span.current {
  background: var(--color-primary-bg);
  color: var(--color-white);
  border-color: var(--color-primary-bg);
}

.woocommerce-info {
  padding: var(--space-16) var(--space-8);
  text-align: center;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: var(--text-lg);
  border: none;
  background: var(--color-cream);
  border-radius: var(--radius-xl);
  list-style: none;
}

/* ─── Single Product (WooCommerce) ─── */
.single-product div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}

/* Hover to magnify. 2x against a 1200px source lands close to native
   resolution on a typical gallery box, so the detail is real rather than an
   upscale. transform-origin follows the pointer, set from JS. */
.woocommerce-product-gallery__image img {
  transition: transform var(--transition-base);
  will-change: transform;
}

.woocommerce-product-gallery__image {
  cursor: zoom-in;
}

.woocommerce-product-gallery__image.is-zooming {
  cursor: zoom-out;
}

.woocommerce-product-gallery__image.is-zooming img {
  transform: scale(2);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-product-gallery__image img {
    transition: none;
  }
}

.woocommerce-product-gallery__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--color-cream);
}

.woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.woocommerce-product-gallery__trigger {
  display: none;
}

.flex-control-thumbs {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
}

.flex-control-thumbs li {
  width: 80px;
  height: 80px;
}

.flex-control-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: all var(--transition-fast);
}

.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover {
  border-color: var(--color-gold);
  opacity: 1;
}

.summary.entry-summary {
  padding-top: var(--space-4);
}

.summary .product_title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  color: var(--color-primary-bg);
  margin-bottom: var(--space-3);
}

.summary .price {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-gold);
  margin-bottom: var(--space-6);
  display: block;
}

.summary .price del {
  color: var(--color-muted);
  font-size: var(--text-xl);
  margin-right: var(--space-3);
}

.summary .woocommerce-product-details__short-description {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
}

.summary form.cart {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.summary .quantity input {
  width: 64px;
  height: 54px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-body);
}

.summary .single_add_to_cart_button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  transition: all var(--transition-base);
  background: var(--gradient-gold);
  color: var(--color-white);
  box-shadow: var(--shadow-gold);
  border: none;
  cursor: pointer;
}

.summary .single_add_to_cart_button:hover {
  transform: translateY(-2px);
}

.summary .single_add_to_cart_button.disabled {
  opacity: .6;
  cursor: not-allowed;
  background: #999;
  box-shadow: none;
}

.summary .stock {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-success);
  margin-bottom: var(--space-4);
  display: block;
}

.summary .stock.out-of-stock {
  color: var(--color-error);
}

.summary .product_meta {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.summary .product_meta > span {
  display: block;
  margin-bottom: var(--space-2);
}

.summary .product_meta a {
  color: var(--color-text);
}

.woocommerce-tabs {
  grid-column: 1 / -1;
  margin-top: var(--space-8);
}

.woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
  list-style: none;
  padding: 0;
}

.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--color-primary-bg);
  border-bottom-color: var(--color-gold);
}

.woocommerce-tabs .panel p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  max-width: 720px;
}

.related.products {
  grid-column: 1 / -1;
  margin-top: var(--space-16);
}

.related.products > h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-primary-bg);
  margin-bottom: var(--space-8);
}

/* ─── WooCommerce Forms (checkout, login, register, account) ─── */
.woocommerce form .form-row {
  margin-bottom: var(--space-4);
}

.woocommerce form label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition-fast);
}

.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
  border-color: var(--color-gold);
  outline: none;
}

.woocommerce form .required {
  color: var(--color-error);
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-form-coupon {
  max-width: 480px;
  padding: var(--space-8);
  background: var(--color-cream);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-8);
}

.woocommerce-form-login .button,
.woocommerce-form-register .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #payment #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  transition: all var(--transition-base);
  background: var(--gradient-gold);
  color: var(--color-white);
  box-shadow: var(--shadow-gold);
  border: none;
  cursor: pointer;
}

.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  transform: translateY(-2px);
}

/* ─── Notices ─── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-NoticeGroup {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  /* A hairline border on all four sides with a tinted fill, rather than the
     usual thick coloured bar down one edge. The status colour still does the
     signalling, but as a wash across the whole panel instead of a stripe
     bolted to its side — quieter, and it sits better next to the rest of the
     surfaces here. */
  background: color-mix(in srgb, var(--color-gold) 7%, var(--color-cream));
  border: 1px solid color-mix(in srgb, var(--color-gold) 28%, transparent);
  margin-bottom: var(--space-6);
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.woocommerce-error {
  background: color-mix(in srgb, var(--color-error) 6%, var(--color-cream));
  border-color: color-mix(in srgb, var(--color-error) 26%, transparent);
}

/* ─── Tables (order review, order details, order history) ─── */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-8);
}

.woocommerce table.shop_table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
}

.woocommerce table.shop_table td {
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  border-bottom: none;
}

.woocommerce table.shop_table .product-name a {
  color: var(--color-primary-bg);
}

/* ─── Order Received (thank you) ─── */
.woocommerce-order {
  max-width: 800px;
}

.woocommerce-order > .woocommerce-notice,
.woocommerce-thankyou-order-received {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-primary-bg);
  display: block;
  padding: 0;
  background: none;
  border: none;
  margin-bottom: var(--space-6);
}

.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  list-style: none;
  padding: var(--space-6);
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
}

.woocommerce-order-overview li {
  font-size: var(--text-sm);
}

.woocommerce-order-overview li strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-primary-bg);
  margin-top: var(--space-1);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-primary-bg);
  margin: var(--space-8) 0 var(--space-4);
}

.woocommerce-customer-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.woocommerce-customer-details address {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

/* ─── My Account ─── */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--color-border);
}

.woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text);
}

.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--color-gold);
  background: var(--color-cream);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--color-error);
}

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-10);
  align-items: start;
}

.woocommerce-MyAccount-content > p:first-child {
  margin-top: 0;
}

.woocommerce-MyAccount-content mark {
  background: none;
  color: var(--color-gold);
  font-weight: var(--font-weight-semibold);
}

.woocommerce-orders-table__cell-order-actions .button {
  padding: var(--space-2) var(--space-4) !important;
  font-size: var(--text-xs) !important;
  margin: 2px;
}