/*
Theme Name:   GeneratePress Child — Dee Cartel
Theme URI:    https://generatepress.com
Description:  Dee Cartel child theme. Brand design system, animations and WooCommerce styling. Casual, but never basic.
Author:       Dee Cartel Dev
Template:     generatepress
Version:      1.0.0
Text Domain:  generatepress-child
*/

/* =====================================================
   1. DEE CARTEL DESIGN TOKENS
===================================================== */
:root {
  --dc-burgundy: #8b1a1a;
  --dc-burgundy-dark: #6e1414;
  --dc-sand: #c4b5a5;
  --dc-sand-light: #d4c8bc;
  --dc-cream: #f5f0eb;
  --dc-charcoal: #1c1c1c;
  --dc-white: #ffffff;
  --dc-text-muted: #7a6a60;
  --dc-gold: #9b7b5b;

  --dc-font-heading: "Cormorant Garamond", Georgia, serif;
  --dc-font-body: "DM Sans", -apple-system, sans-serif;

  --dc-section-pad: 96px;
  --dc-radius: 2px;
  --dc-transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =====================================================
   2. GLOBAL BASE
===================================================== */
body {
  font-family: var(--dc-font-body);
  background-color: var(--dc-cream);
  color: var(--dc-charcoal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  padding-top: 80px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--dc-font-heading);
  font-weight: 500;
  color: var(--dc-charcoal);
  line-height: 1.15;
}

h1 em,
h2 em,
h3 em {
  color: var(--dc-burgundy);
  font-style: italic;
}

a {
  color: var(--dc-burgundy);
  transition: var(--dc-transition);
}
a:hover {
  color: var(--dc-burgundy-dark);
}

::selection {
  background: var(--dc-burgundy);
  color: var(--dc-cream);
}

.dc-eyebrow {
  font-family: var(--dc-font-body);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dc-burgundy);
  font-weight: 500;
}

/* Header offset for WP admin bar */
.admin-bar .dc-site-header {
  top: 32px;
}
.admin-bar body {
  padding-top: 80px;
}

@media (max-width: 782px) {
  .admin-bar .dc-site-header {
    top: 46px;
  }
  body {
    padding-top: 64px;
  }
}
@media (max-width: 768px) {
  body {
    padding-top: 64px;
  }
}

/* =====================================================
   3. BUTTONS (general site buttons, NOT product cards)
===================================================== */
.dc-btn,
.elementor-button,
.woocommerce a.button:not(ul.products .button),
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: var(--dc-burgundy);
  color: var(--dc-white);
  font-family: var(--dc-font-body);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--dc-burgundy);
  border-radius: var(--dc-radius);
  padding: 14px 32px;
  transition: var(--dc-transition);
}

.dc-btn:hover,
.elementor-button:hover,
.woocommerce a.button:not(ul.products .button):hover,
.woocommerce button.button:hover {
  background-color: var(--dc-burgundy-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 26, 26, 0.25);
}

.dc-btn-outline {
  background: transparent;
  color: var(--dc-burgundy);
  border: 1px solid var(--dc-burgundy);
}
.dc-btn-outline:hover {
  background: var(--dc-burgundy);
  color: var(--dc-white);
}

/* =====================================================
   4. ANNOUNCEMENT / SALES BANNER
===================================================== */
.dc-announcement {
  display: none;
  background: var(--dc-burgundy);
  color: var(--dc-cream);
  text-align: center;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 11px 48px;
  position: relative;
  z-index: 999;
}
body.dc-sale-active .dc-announcement {
  display: block;
}
body.dc-announcement-dismissed .dc-announcement {
  display: none !important;
}

.dc-announcement__close {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--dc-cream);
  opacity: 0.6;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.dc-announcement__close:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .dc-announcement {
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: 9px 40px;
  }
}

/* =====================================================
   5. STICKY HEADER
===================================================== */
.site-header,
.dc-header {
  transition:
    background-color 0.4s ease,
    box-shadow 0.4s ease;
}
body.dc-scrolled .site-header,
body.dc-scrolled .dc-header {
  background-color: rgba(245, 240, 235, 0.96);
  box-shadow: 0 1px 0 var(--dc-sand);
  backdrop-filter: blur(8px);
}

/* =====================================================
   6. SCROLLING TICKER STRIP
===================================================== */
.dc-ticker {
  background: var(--dc-charcoal);
  overflow: hidden;
  padding: 13px 0;
  border-top: 1px solid var(--dc-sand);
  border-bottom: 1px solid var(--dc-sand);
}
.dc-ticker__track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: dc-ticker-scroll 22s linear infinite;
}
.dc-ticker__track span {
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--dc-sand);
  padding: 0 44px;
}
.dc-ticker__track span:nth-child(odd) {
  color: var(--dc-cream);
}

@keyframes dc-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.dc-ticker:hover .dc-ticker__track {
  animation-play-state: paused;
}

.dc-ticker__track span::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--dc-burgundy);
  transform: rotate(45deg) translateY(-2px);
  margin-left: 44px;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .dc-ticker__track span {
    padding: 0 28px;
  }
}

/* =====================================================
   7. HERO ENTRANCE ANIMATION
===================================================== */
.dc-hero-line {
  opacity: 0;
  transform: translateY(28px);
  animation: dc-rise 0.9s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
.dc-hero-line:nth-child(1) {
  animation-delay: 0.1s;
}
.dc-hero-line:nth-child(2) {
  animation-delay: 0.3s;
}
.dc-hero-line:nth-child(3) {
  animation-delay: 0.5s;
}
.dc-hero-line:nth-child(4) {
  animation-delay: 0.7s;
}

@keyframes dc-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dc-watermark {
  position: absolute;
  font-family: var(--dc-font-heading);
  font-weight: 600;
  font-size: clamp(120px, 22vw, 280px);
  color: var(--dc-burgundy);
  opacity: 0.05;
  letter-spacing: -8px;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

/* =====================================================
   8. SCROLL REVEAL
===================================================== */
.dc-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.dc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.dc-reveal-delay-1 {
  transition-delay: 0.15s;
}
.dc-reveal-delay-2 {
  transition-delay: 0.3s;
}
.dc-reveal-delay-3 {
  transition-delay: 0.45s;
}

@media (prefers-reduced-motion: reduce) {
  .dc-reveal,
  .dc-hero-line {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .dc-ticker__track {
    animation: none;
  }
}

/* =====================================================
   9. PRODUCT CARDS — COLOR/FONT/SPACING ONLY
   Uses WooCommerce's default grid/column structure as-is.
   No grid override, no column changes — just consistent
   spacing, brand colors and fonts on top of the default.
===================================================== */

.woocommerce ul.products li.product {
  text-align: left;
  padding-bottom: 16px;
}

.woocommerce ul.products li.product img {
  transition: transform 0.5s ease;
  width: 100%;
  display: block;
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--dc-font-heading);
  font-size: 17px;
  font-weight: 500;
  color: var(--dc-charcoal);
  margin: 12px 0 4px;
  padding: 0;
}

.woocommerce ul.products li.product .price {
  font-family: var(--dc-font-body);
  color: var(--dc-burgundy);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 12px;
  display: block;
}
.woocommerce ul.products li.product .price del {
  color: var(--dc-gold);
  opacity: 0.8;
  font-weight: 300;
  margin-right: 6px;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  background: none;
}

.woocommerce span.onsale {
  background: var(--dc-burgundy);
  color: var(--dc-white);
  font-family: var(--dc-font-body);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
}

.woocommerce ul.products li.product .button {
  background: var(--dc-burgundy);
  color: var(--dc-white);
  font-family: var(--dc-font-body);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  border-radius: 0;
  margin-top: 4px;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--dc-burgundy-dark);
}

.related.products > h2,
.upsells.products > h2 {
  font-family: var(--dc-font-heading);
  font-size: 28px;
  font-weight: 600;
  color: var(--dc-charcoal);
  text-align: center;
}

@media (max-width: 600px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
    margin: 10px 0 4px;
  }
  .woocommerce ul.products li.product .price {
    font-size: 13px;
    margin-bottom: 10px;
  }
  .woocommerce ul.products li.product .button {
    font-size: 10px;
    padding: 10px 14px;
  }
}

/* =====================================================
   10. CUSTOMER LOOKS GRID (curated photo reviews)
===================================================== */
.dc-look {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.dc-look img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.dc-look:hover img {
  transform: scale(1.06);
}

.dc-look__overlay {
  position: absolute;
  inset: 0;
  background: rgba(139, 26, 26, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.dc-look:hover .dc-look__overlay {
  opacity: 1;
}

.dc-look__stars {
  color: var(--dc-cream);
  font-size: 13px;
  letter-spacing: 2px;
}
.dc-look__name {
  color: var(--dc-cream);
  font-size: 13px;
  letter-spacing: 1px;
}
.dc-look__product {
  color: var(--dc-sand);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.dc-review-card {
  background: var(--dc-white);
  border: 1px solid var(--dc-sand);
  padding: 24px;
}
.dc-review-card .stars {
  color: var(--dc-burgundy);
  letter-spacing: 2px;
}
.dc-review-card .quote {
  font-style: italic;
  color: var(--dc-text-muted);
  line-height: 1.8;
  font-size: 14px;
}

/* =====================================================
   11. FORMS & NEWSLETTER
===================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select,
.woocommerce form .form-row input.input-text {
  background: var(--dc-white);
  border: 1px solid var(--dc-sand);
  border-radius: var(--dc-radius);
  font-family: var(--dc-font-body);
  font-size: 14px;
  padding: 13px 16px;
  color: var(--dc-charcoal);
  transition: var(--dc-transition);
  outline: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus {
  border-color: var(--dc-burgundy);
  box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.12);
}
::placeholder {
  color: var(--dc-text-muted);
  opacity: 0.7;
}

/* =====================================================
   12. CART PAGE
===================================================== */
.woocommerce table.shop_table {
  border: 1px solid var(--dc-sand);
  border-radius: 0;
}
.woocommerce table.shop_table th {
  font-family: var(--dc-font-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dc-text-muted);
}
.woocommerce table.shop_table td {
  border-top: 1px solid var(--dc-sand-light);
}

.dc-secure-note {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  text-align: center;
  margin-top: 14px;
}

/* =====================================================
   13. CHECKOUT PAGE
===================================================== */
.woocommerce-checkout {
  background: var(--dc-cream);
  font-family: var(--dc-font-body);
}
.woocommerce-checkout .woocommerce {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 60px 80px;
}
.woocommerce-checkout .entry-title,
.woocommerce-checkout h1.entry-title {
  display: none;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: rgba(139, 26, 26, 0.05);
  border-top: 3px solid var(--dc-burgundy);
  border-left: none;
  border-right: none;
  border-bottom: none;
  color: var(--dc-text-muted);
  font-size: 13px;
  font-weight: 300;
  padding: 14px 20px;
  margin-bottom: 32px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--dc-burgundy);
  font-weight: 500;
}
.woocommerce-checkout .woocommerce-form-coupon .form-row input {
  border: 1px solid var(--dc-sand);
  border-radius: 0;
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
}
.woocommerce-checkout .woocommerce-form-coupon .form-row input:focus {
  border-color: var(--dc-burgundy);
  box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.1);
}
.woocommerce-checkout .woocommerce-form-coupon .button {
  background: transparent;
  border: 1px solid var(--dc-sand);
  color: var(--dc-text-muted);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 0;
}
.woocommerce-checkout .woocommerce-form-coupon .button:hover {
  border-color: var(--dc-burgundy);
  color: var(--dc-burgundy);
}

.woocommerce-checkout h3 {
  font-family: var(--dc-font-heading);
  font-size: 26px;
  font-weight: 500;
  color: var(--dc-charcoal);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--dc-sand);
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.woocommerce-checkout .form-row {
  margin-bottom: 0;
  grid-column: span 1;
}
.woocommerce-checkout .form-row.form-row-wide,
.woocommerce-checkout .form-row.address-field.form-row-wide {
  grid-column: span 2;
}
.woocommerce-checkout .form-row label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  font-weight: 500;
  margin-bottom: 7px;
  display: block;
}
.woocommerce-checkout .form-row label .required {
  color: var(--dc-burgundy);
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  border: 1px solid var(--dc-sand);
  border-radius: 0;
  font-size: 14px;
  color: var(--dc-charcoal);
  padding: 13px 16px;
  background: #fff;
  width: 100%;
  outline: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--dc-burgundy);
  box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.1);
}
.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
  color: var(--dc-sand);
}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: var(--dc-burgundy);
}

#order_review_heading,
.woocommerce-checkout #order_review_heading {
  font-family: var(--dc-font-heading);
  font-size: 26px;
  font-weight: 500;
  color: var(--dc-charcoal);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--dc-sand);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  border: 1px solid var(--dc-sand);
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 24px;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table th {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dc-gold);
  font-weight: 500;
  padding: 14px 20px;
  background: #ede8e2;
  border-bottom: 1px solid var(--dc-sand);
  text-align: left;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--dc-sand-light);
  color: #555;
  font-weight: 300;
  font-size: 14px;
}
.woocommerce-checkout
  table.woocommerce-checkout-review-order-table
  .order-total
  th,
.woocommerce-checkout
  table.woocommerce-checkout-review-order-table
  .order-total
  td {
  font-size: 15px;
  font-weight: 600;
  color: var(--dc-charcoal);
  background: var(--dc-cream);
}
.woocommerce-checkout .order-total .woocommerce-Price-amount {
  color: var(--dc-burgundy);
  font-size: 20px;
}

.woocommerce-checkout #payment {
  background: #fff;
  border: 1px solid var(--dc-sand);
  border-radius: 0;
  padding: 28px;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--dc-sand-light);
  padding-bottom: 20px;
  margin-bottom: 20px;
  list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 14px 0;
  border-bottom: 1px solid #f0ebe4;
}
.woocommerce-checkout #payment ul.payment_methods li:last-child {
  border-bottom: none;
}
.woocommerce-checkout #payment ul.payment_methods li label {
  font-size: 14px;
  color: var(--dc-charcoal);
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--dc-burgundy);
  width: 16px;
  height: 16px;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--dc-cream);
  color: var(--dc-text-muted);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  padding: 16px 20px;
  margin-top: 10px;
}
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--dc-cream);
}

.woocommerce-checkout #payment .woocommerce-bacs-bank-details {
  background: #fff;
  border: 1px solid var(--dc-sand);
  padding: 20px;
  margin-top: 16px;
}
.woocommerce-checkout #payment .woocommerce-bacs-bank-details h3 {
  font-family: var(--dc-font-heading);
  font-size: 18px;
  font-weight: 500;
  color: var(--dc-charcoal);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e0d8;
}
.woocommerce-checkout #payment .woocommerce-bacs-bank-details ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.woocommerce-checkout #payment .woocommerce-bacs-bank-details ul li {
  font-size: 13px;
  color: #555;
  font-weight: 300;
}
.woocommerce-checkout #payment .woocommerce-bacs-bank-details ul li strong {
  color: var(--dc-charcoal);
  font-weight: 500;
}

.woocommerce-checkout #payment #place_order {
  background: var(--dc-burgundy);
  color: var(--dc-white);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 18px 32px;
  border-radius: 0;
  border: none;
  width: 100%;
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;
  margin-top: 8px;
}
.woocommerce-checkout #payment #place_order:hover {
  background: var(--dc-burgundy-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 26, 26, 0.25);
}

.woocommerce-checkout .place-order::after {
  content: "Your order is secured by Paystack. Your payment details never touch this server.";
  display: block;
  text-align: center;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--dc-sand);
  margin-top: 14px;
  line-height: 1.6;
  font-weight: 300;
}

.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
  font-size: 13px;
  font-weight: 300;
  border-radius: 0;
  padding: 14px 20px;
  margin-bottom: 24px;
}
.woocommerce-checkout .woocommerce-error {
  background: rgba(139, 26, 26, 0.05);
  border-top: 3px solid var(--dc-burgundy);
  color: var(--dc-burgundy);
}
.woocommerce-checkout .woocommerce-message {
  background: rgba(15, 110, 86, 0.05);
  border-top: 3px solid #0f6e56;
  color: #0f6e56;
}

@media (max-width: 768px) {
  .woocommerce-checkout .woocommerce {
    padding: 40px 20px 60px;
  }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
  .woocommerce-checkout .form-row.form-row-wide,
  .woocommerce-checkout .form-row.address-field.form-row-wide {
    grid-column: span 1;
  }
  .woocommerce-checkout #payment {
    padding: 20px;
  }
}

/* =====================================================
   14. ORDER CONFIRMATION / THANK YOU PAGE
===================================================== */
.woocommerce-order {
  background: var(--dc-cream);
  font-family: var(--dc-font-body);
}
.woocommerce-thankyou-order-received {
  font-family: var(--dc-font-heading);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 500;
  color: var(--dc-charcoal);
  text-align: center;
  padding: 48px 60px 0;
  margin-bottom: 8px;
}
.woocommerce-order .woocommerce-notice--success,
.woocommerce-order p.woocommerce-notice {
  background: rgba(15, 110, 86, 0.06);
  border: 1px solid rgba(15, 110, 86, 0.2);
  color: #0f6e56;
  font-size: 14px;
  padding: 16px 24px;
  margin: 0 60px 40px;
  font-weight: 300;
  line-height: 1.7;
  border-radius: 0;
  list-style: none;
}
.woocommerce-order ul.woocommerce-order-overview {
  background: #fff;
  border: 1px solid var(--dc-sand);
  padding: 28px 60px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 48px;
  flex-wrap: wrap;
}
.woocommerce-order ul.woocommerce-order-overview li {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dc-gold);
  font-weight: 500;
  border-right: none;
  padding: 0;
  flex: 1;
  min-width: 120px;
}
.woocommerce-order ul.woocommerce-order-overview li strong {
  display: block;
  font-family: var(--dc-font-heading);
  font-size: 18px;
  color: var(--dc-charcoal);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 6px;
}
.woocommerce-order ul.woocommerce-order-overview .woocommerce-Price-amount {
  color: var(--dc-burgundy);
}

.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
  padding: 0 60px;
  margin-bottom: 40px;
}
.woocommerce-order-details__title,
.woocommerce-column__title {
  font-family: var(--dc-font-heading);
  font-size: 26px;
  font-weight: 500;
  color: var(--dc-charcoal);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dc-sand);
}
.woocommerce-order table.woocommerce-table {
  border: 1px solid var(--dc-sand);
  border-collapse: collapse;
  width: 100%;
}
.woocommerce-order table.woocommerce-table th {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dc-gold);
  font-weight: 500;
  padding: 14px 20px;
  background: #ede8e2;
  border-bottom: 1px solid var(--dc-sand);
  text-align: left;
}
.woocommerce-order table.woocommerce-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--dc-sand-light);
  color: #555;
  font-weight: 300;
  font-size: 14px;
}
.woocommerce-order table.woocommerce-table tfoot th,
.woocommerce-order table.woocommerce-table tfoot td {
  font-weight: 500;
  color: var(--dc-charcoal);
  font-size: 14px;
}
.woocommerce-order
  table.woocommerce-table
  tfoot
  .order-total
  td
  .woocommerce-Price-amount {
  color: var(--dc-burgundy);
  font-size: 20px;
  font-family: var(--dc-font-heading);
  font-weight: 600;
}
.woocommerce-order .woocommerce-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 60px;
  margin-bottom: 48px;
}
.woocommerce-order .woocommerce-customer-details address {
  background: #fff;
  border: 1px solid var(--dc-sand);
  padding: 24px;
  font-style: normal;
  font-size: 14px;
  color: #555;
  line-height: 1.9;
  font-weight: 300;
}
.woocommerce-order .woocommerce-bacs-bank-details {
  margin: 0 60px 40px;
  background: #fff;
  border: 1px solid var(--dc-sand);
  padding: 28px;
}
.woocommerce-order .woocommerce-bacs-bank-details h2 {
  font-family: var(--dc-font-heading);
  font-size: 22px;
  font-weight: 500;
  color: var(--dc-charcoal);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e0d8;
}
.woocommerce-order .woocommerce-bacs-bank-details ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.woocommerce-order .woocommerce-bacs-bank-details li {
  font-size: 13px;
  color: #555;
  font-weight: 300;
  line-height: 1.7;
}
.woocommerce-order .woocommerce-bacs-bank-details li strong {
  color: var(--dc-charcoal);
  font-weight: 500;
}
.woocommerce-order p a.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--dc-burgundy);
  color: var(--dc-white);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 32px;
  text-decoration: none;
  border: 1px solid var(--dc-burgundy);
  border-radius: 0;
  transition: all 0.3s ease;
  margin: 0 60px 60px;
}
.woocommerce-order p a.button:hover {
  background: var(--dc-burgundy-dark);
  border-color: var(--dc-burgundy-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 26, 26, 0.2);
}

@media (max-width: 768px) {
  .woocommerce-thankyou-order-received {
    padding: 40px 24px 0;
  }
  .woocommerce-order .woocommerce-notice--success,
  .woocommerce-order p.woocommerce-notice {
    margin: 0 24px 32px;
  }
  .woocommerce-order ul.woocommerce-order-overview {
    padding: 20px 24px;
  }
  .woocommerce-order .woocommerce-order-details,
  .woocommerce-order .woocommerce-customer-details {
    padding: 0 24px;
  }
  .woocommerce-order .woocommerce-columns {
    grid-template-columns: 1fr;
    padding: 0 24px;
  }
  .woocommerce-order .woocommerce-bacs-bank-details {
    margin: 0 24px 32px;
    padding: 20px;
  }
  .woocommerce-order p a.button {
    margin: 0 24px 40px;
  }
}
@media (max-width: 480px) {
  .woocommerce-thankyou-order-received {
    padding: 32px 20px 0;
  }
  .woocommerce-order ul.woocommerce-order-overview {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }
  .woocommerce-order .woocommerce-order-details,
  .woocommerce-order .woocommerce-customer-details {
    padding: 0 20px;
  }
  .woocommerce-order .woocommerce-columns {
    padding: 0 20px;
  }
  .woocommerce-order .woocommerce-bacs-bank-details {
    margin: 0 20px 32px;
  }
  .woocommerce-order p a.button {
    margin: 0 20px 40px;
  }
}

/* =====================================================
   15. SINGLE PRODUCT PAGE
===================================================== */
.woocommerce-breadcrumb {
  font-family: var(--dc-font-body);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--dc-gold);
  padding: 18px 60px;
  background: var(--dc-cream);
  border-bottom: 1px solid #e8e0d8;
  margin: 0;
}
.woocommerce-breadcrumb a {
  color: var(--dc-gold);
  text-decoration: none;
  transition: color 0.2s ease;
}
.woocommerce-breadcrumb a:hover {
  color: var(--dc-burgundy);
}

.dc-product-main-section {
  background: var(--dc-cream);
  padding: 48px 60px 80px;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
}

.woocommerce-product-gallery {
  margin: 0;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image {
  border-radius: 0;
  overflow: hidden;
  background: #e8e0d8;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
  border-radius: 0;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.woocommerce-product-gallery .flex-control-thumbs {
  margin-top: 12px;
  gap: 8px;
  display: flex;
}
.woocommerce-product-gallery .flex-control-thumbs li {
  border: none;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
  border: 2px solid transparent;
  border-radius: 0;
  opacity: 1;
  transition: border-color 0.25s ease;
}
.woocommerce-product-gallery .flex-control-thumbs li img:hover,
.woocommerce-product-gallery .flex-control-thumbs li.flex-active-slide img {
  border-color: var(--dc-burgundy);
}

.product_title.entry-title,
.elementor-widget-woocommerce-product-title h1 {
  font-family: var(--dc-font-heading);
  font-size: 38px;
  font-weight: 600;
  color: var(--dc-charcoal);
  line-height: 1.15;
  margin-bottom: 16px;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}

.woocommerce-product-rating {
  margin-bottom: 20px;
}
.star-rating {
  color: var(--dc-burgundy);
  font-size: 16px;
}
.star-rating span::before {
  color: var(--dc-burgundy);
}
.woocommerce-review-link {
  font-size: 12px;
  color: var(--dc-burgundy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.product .price,
.summary .price {
  font-family: var(--dc-font-heading);
  font-size: 32px;
  font-weight: 600;
  color: var(--dc-burgundy);
  margin-bottom: 20px;
  display: block;
}
.product .price del,
.summary .price del {
  font-family: var(--dc-font-body);
  font-size: 18px;
  font-weight: 300;
  color: var(--dc-gold);
  margin-right: 10px;
  text-decoration: line-through;
}
.product .price ins,
.summary .price ins {
  text-decoration: none;
  background: none;
}

.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
  font-size: 14px;
  color: var(--dc-text-muted);
  line-height: 1.9;
  font-weight: 300;
  margin-bottom: 24px;
}

.stock {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dc-gold);
  font-weight: 500;
  margin-bottom: 20px;
  display: block;
}
.stock.out-of-stock {
  color: var(--dc-burgundy);
}
.stock.in-stock {
  color: #0f6e56;
}

.quantity .qty {
  border: 1px solid var(--dc-sand);
  border-radius: 0;
  width: 60px;
  height: 48px;
  text-align: center;
  font-size: 14px;
  color: var(--dc-charcoal);
  background: #fff;
}
.quantity .qty:focus {
  border-color: var(--dc-burgundy);
  outline: none;
}

.single_add_to_cart_button,
.woocommerce div.product form.cart .button {
  background: var(--dc-burgundy);
  color: var(--dc-white);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 18px 32px;
  border-radius: 0;
  border: none;
  transition:
    background 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
}
.single_add_to_cart_button:hover {
  background: var(--dc-burgundy-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 26, 26, 0.25);
}

.variations select {
  border: 1px solid var(--dc-sand);
  border-radius: 0;
  font-size: 14px;
  color: var(--dc-charcoal);
  padding: 12px 16px;
  background: #fff;
  width: 100%;
}
.variations select:focus {
  border-color: var(--dc-burgundy);
  outline: none;
}
.variations label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  font-weight: 500;
}
.woocommerce-variation-price .price {
  font-size: 28px;
}
.reset_variations {
  font-size: 11px;
  color: var(--dc-burgundy);
  text-decoration: underline;
}

form.cart {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.product_meta {
  font-size: 11px;
  color: var(--dc-gold);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid #e8e0d8;
}
.product_meta a {
  color: var(--dc-burgundy);
  text-decoration: none;
}
.product_meta a:hover {
  text-decoration: underline;
}

.woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--dc-sand);
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.woocommerce-tabs ul.tabs li {
  margin: 0;
}
.woocommerce-tabs ul.tabs li a {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dc-gold);
  font-weight: 500;
  padding: 14px 28px;
  display: block;
  border: none;
  background: none;
  text-decoration: none;
  transition: color 0.2s ease;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--dc-burgundy);
  border-bottom: 2px solid var(--dc-burgundy);
}
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--dc-burgundy);
}
.woocommerce-tabs .panel {
  font-size: 14px;
  color: var(--dc-text-muted);
  line-height: 1.9;
  font-weight: 300;
}
.woocommerce-tabs .panel h2 {
  font-family: var(--dc-font-heading);
  font-size: 24px;
  font-weight: 500;
  color: var(--dc-charcoal);
  margin-bottom: 20px;
}

#reviews .commentlist {
  list-style: none;
  padding: 0;
}
#reviews .comment-text {
  background: #fff;
  border: 1px solid var(--dc-sand);
  padding: 20px;
  border-radius: 0;
}
#reviews .star-rating {
  margin-bottom: 10px;
}
#reviews .woocommerce-review__author {
  font-weight: 500;
  color: var(--dc-charcoal);
}
#reviews .woocommerce-review__published-date {
  color: var(--dc-sand);
  font-size: 12px;
}

.woocommerce-tabs {
  background: var(--dc-cream);
  padding: 60px;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .dc-product-main-section {
    padding: 40px 40px 60px;
  }
  .woocommerce-tabs {
    padding: 48px 40px;
  }
}
@media (max-width: 768px) {
  .woocommerce-breadcrumb {
    padding: 14px 24px;
  }
  .dc-product-main-section {
    padding: 32px 24px 48px;
  }
  .product_title.entry-title {
    font-size: 28px;
  }
  .product .price,
  .summary .price {
    font-size: 26px;
  }
  .woocommerce-tabs {
    padding: 40px 24px;
  }
  form.cart {
    flex-direction: column;
    align-items: stretch;
  }
  .single_add_to_cart_button {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .woocommerce-tabs ul.tabs li a {
    padding: 12px 16px;
    font-size: 10px;
  }
}

/* =====================================================
   16. STATEMENT SECTION (burgundy full-width strip)
===================================================== */
.dc-statement {
  background: var(--dc-burgundy);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--dc-section-pad) 24px;
}
.dc-statement h2 {
  color: var(--dc-cream);
  font-style: italic;
  font-size: clamp(28px, 4vw, 44px);
  position: relative;
  z-index: 1;
}
.dc-statement .dc-eyebrow {
  color: var(--dc-sand);
}
.dc-statement .dc-watermark {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--dc-white);
  opacity: 0.04;
}

/* =====================================================
   17. GLOBAL RESPONSIVE FALLBACK
===================================================== */
@media (max-width: 768px) {
  :root {
    --dc-section-pad: 64px;
  }
}
/* .woocommerce ul.products {
  margin-bottom: 250px !important;
} */

.dc-looks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

/* =====================================================
   CUSTOMER LOOKS — PREMIUM GRID
   Styles the [dc_customer_looks] shortcode output.
   Add this to the bottom of style.css
===================================================== */

.dc-looks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 60px;
}

.dc-look {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #1c1c1c;
  text-decoration: none;
}

.dc-look img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1),
    filter 0.4s ease;
}

.dc-look:hover img {
  transform: scale(1.08);
  filter: brightness(0.55);
}

/* Overlay — hidden by default, fades in on hover */
.dc-look__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  pointer-events: none;
}

.dc-look:hover .dc-look__overlay {
  opacity: 1;
  transform: translateY(0);
}

.dc-look__stars {
  color: #c4947a;
  font-size: 14px;
  letter-spacing: 3px;
  line-height: 1;
}

.dc-look__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: #f5f0eb;
  letter-spacing: 0.3px;
}

.dc-look__product {
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #c4b5a5;
  font-weight: 500;
  position: relative;
  padding-top: 8px;
}

.dc-look__product::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 1px;
  background: #8b1a1a;
}

/* Subtle permanent gradient at the bottom so the section
   never looks like a flat dead grid even without hover —
   gives it a touch of depth on first paint */
.dc-look::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(28, 28, 28, 0.35) 0%,
    rgba(28, 28, 28, 0) 45%
  );
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.dc-look:hover::after {
  opacity: 0;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1024px) {
  .dc-looks-grid {
    padding: 0 32px;
    gap: 3px;
  }
}

@media (max-width: 768px) {
  .dc-looks-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    padding: 0 20px;
  }
  .dc-look__name {
    font-size: 16px;
  }
  .dc-look__overlay {
    padding: 18px;
  }
}

@media (max-width: 480px) {
  .dc-looks-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    padding: 0 12px;
  }
  .dc-look__stars {
    font-size: 12px;
    letter-spacing: 2px;
  }
  .dc-look__name {
    font-size: 14px;
  }
  .dc-look__product {
    font-size: 9px;
    letter-spacing: 2px;
  }
  .dc-look__overlay {
    padding: 14px;
    gap: 6px;
  }
}

/* On touch devices (no real hover), keep overlay subtly
   visible at all times so info isn't hidden behind a tap-only
   interaction customers might not discover */
@media (hover: none) {
  .dc-look__overlay {
    opacity: 1;
    transform: translateY(0);
    background: linear-gradient(
      to top,
      rgba(28, 28, 28, 0.78) 0%,
      rgba(28, 28, 28, 0) 60%
    );
    justify-content: flex-end;
    padding-bottom: 18px;
  }
  .dc-look img {
    filter: none;
  }
  .dc-look:hover img {
    filter: none;
  }
  .dc-look::after {
    display: none;
  }
}

/* =====================================================
   LOOP GRID — PREMIUM CARD DESIGN
   Wraps each card with a real visual container: white
   background, border, consistent height regardless of
   title length or price format (sale vs regular), subtle
   hover lift, and refined spacing. Targets the REAL
   Elementor Loop Grid markup confirmed from inspection.

   Add to the bottom of style.css
===================================================== */

.elementor-loop-container.elementor-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
  align-items: stretch;
}

/* The card itself — each [data-elementor-type="loop-item"] */
[data-elementor-type="loop-item"] {
  height: 100%;
  display: flex;
}

/* The inner container Elementor wraps around each card's content */
[data-elementor-type="loop-item"] > .e-con {
  background: #FFFFFF;
  border: 1px solid #E8E0D8;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
  position: relative;
}
[data-elementor-type="loop-item"]:hover > .e-con {
  box-shadow: 0 18px 44px rgba(28, 28, 28, 0.10);
  transform: translateY(-4px);
}

/* Image area — fixed aspect ratio so every card's image
   block is the exact same height regardless of the photo's
   original dimensions */
.elementor-widget-theme-post-featured-image {
  overflow: hidden;
  flex-shrink: 0;
}
.elementor-widget-theme-post-featured-image img {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center top;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}
[data-elementor-type="loop-item"]:hover .elementor-widget-theme-post-featured-image img {
  transform: scale(1.06);
}

/* Title — fixed line-height and a minimum height so a
   1-line title and a 2-line title both reserve the same
   vertical space, keeping every card the same height */
.elementor-widget-woocommerce-product-title {
  flex-shrink: 0;
}
.elementor-widget-woocommerce-product-title h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #1C1C1C !important;
  margin: 16px 18px 4px !important;
  line-height: 1.3 !important;
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
}
.elementor-widget-woocommerce-product-title h1 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
[data-elementor-type="loop-item"]:hover .elementor-widget-woocommerce-product-title h1 a {
  color: #8B1A1A !important;
}

/* Price */
.elementor-widget-woocommerce-product-price {
  margin: 0 18px 14px !important;
  flex-shrink: 0;
}
.elementor-widget-woocommerce-product-price .woocommerce-Price-amount {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #8B1A1A !important;
  letter-spacing: 0.2px;
}
.elementor-widget-woocommerce-product-price del .woocommerce-Price-amount {
  color: #9B7B5B !important;
  opacity: 0.7;
  font-weight: 300 !important;
  font-size: 13px !important;
  text-decoration: line-through;
}
.elementor-widget-woocommerce-product-price del {
  margin-right: 8px;
}
.elementor-widget-woocommerce-product-price ins {
  text-decoration: none;
  background: none;
}

/* Spacer pushes Add to Cart to the bottom of the card
   regardless of title/price height above it */
.elementor-widget-woocommerce-product-price::after {
  content: "";
}
[data-elementor-type="loop-item"] > .e-con > .e-con-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.elementor-widget-wc-add-to-cart {
  margin: auto 18px 18px !important;
}

/* Add to Cart button */
.elementor-widget-wc-add-to-cart .elementor-button {
  background: #8B1A1A !important;
  color: #FFFFFF !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 13px 18px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.elementor-widget-wc-add-to-cart .elementor-button:hover {
  background: #6E1414 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(139, 26, 26, 0.25);
}
.elementor-widget-wc-add-to-cart .e-font-icon-svg {
  width: 13px;
  height: 13px;
}

/* Sale badge — clean corner ribbon */
.product.sale .elementor-widget-theme-post-featured-image::before {
  content: "Sale";
  position: absolute;
  top: 14px;
  left: 14px;
  background: #8B1A1A;
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 5px 12px;
  z-index: 3;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1024px) {
  .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px;
  }
}

@media (max-width: 600px) {
  .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .elementor-widget-woocommerce-product-title h1 {
    font-size: 14px !important;
    margin: 12px 14px 3px !important;
    min-height: 2.4em;
  }
  .elementor-widget-woocommerce-product-price {
    margin: 0 14px 10px !important;
  }
  .elementor-widget-woocommerce-product-price .woocommerce-Price-amount {
    font-size: 13px !important;
  }
  .elementor-widget-woocommerce-product-price del .woocommerce-Price-amount {
    font-size: 11px !important;
  }
  .elementor-widget-wc-add-to-cart {
    margin: auto 14px 14px !important;
  }
  .elementor-widget-wc-add-to-cart .elementor-button {
    font-size: 9.5px !important;
    padding: 11px 14px !important;
    letter-spacing: 1.2px !important;
  }
  .product.sale .elementor-widget-theme-post-featured-image::before {
    font-size: 9px;
    padding: 4px 10px;
    top: 10px;
    left: 10px;
  }
}

/* =====================================================
   LOOP GRID — PAGINATION STYLING
   Targets Elementor Loop Grid's built-in pagination
   (numbered page links below the product grid).
   Add to the bottom of style.css.
===================================================== */

.e-loop-pagination,
.elementor-pagination {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 48px 0 16px;
  padding: 0;
  list-style: none;
}

.e-loop-pagination .page-numbers,
.elementor-pagination .page-numbers {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #7A6A60;
  background: #FFFFFF;
  border: 1px solid #C4B5A5;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.25s ease;
}

.e-loop-pagination .page-numbers:hover,
.elementor-pagination .page-numbers:hover {
  border-color: #8B1A1A;
  color: #8B1A1A;
}

.e-loop-pagination .page-numbers.current,
.elementor-pagination .page-numbers.current {
  background: #8B1A1A;
  border-color: #8B1A1A;
  color: #FFFFFF;
}

.e-loop-pagination .page-numbers.dots {
  border: none;
  background: none;
  color: #C4B5A5;
}

@media (max-width: 600px) {
  .e-loop-pagination .page-numbers,
  .elementor-pagination .page-numbers {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }
}




/* =====================================================
   LOOP GRID — PREMIUM CARD DESIGN
   Wraps each card with a real visual container: white
   background, border, consistent height regardless of
   title length or price format (sale vs regular), subtle
   hover lift, and refined spacing. Targets the REAL
   Elementor Loop Grid markup confirmed from inspection.

   Add to the bottom of style.css
===================================================== */

.elementor-loop-container.elementor-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
  align-items: stretch;
}

/* The card itself — each [data-elementor-type="loop-item"] */
[data-elementor-type="loop-item"] {
  height: 100%;
  display: flex;
}

/* The inner container Elementor wraps around each card's content */
/* Kill Elementor's built-in 20px container gap between
   widgets — our own margins on each widget below handle
   spacing instead, so this must be zero to avoid double
   spacing stacking on top of our margins. */
[data-elementor-type="loop-item"] > .e-con > .e-con-inner {
  --row-gap: 0px !important;
  --column-gap: 0px !important;
  gap: 0 !important;
}

[data-elementor-type="loop-item"] > .e-con {
  background: #FFFFFF;
  border: 1px solid #E8E0D8;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
  position: relative;
}
[data-elementor-type="loop-item"]:hover > .e-con {
  box-shadow: 0 18px 44px rgba(28, 28, 28, 0.10);
  transform: translateY(-4px);
}

/* Image area — fixed aspect ratio so every card's image
   block is the exact same height regardless of the photo's
   original dimensions */
.elementor-widget-theme-post-featured-image {
  overflow: hidden;
  flex-shrink: 0;
}
.elementor-widget-theme-post-featured-image img {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center top;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}
[data-elementor-type="loop-item"]:hover .elementor-widget-theme-post-featured-image img {
  transform: scale(1.06);
}

/* Title — fixed line-height and a minimum height so a
   1-line title and a 2-line title both reserve the same
   vertical space, keeping every card the same height */
.elementor-widget-woocommerce-product-title {
  flex-shrink: 0;
}
.elementor-widget-woocommerce-product-title h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #1C1C1C !important;
  margin: 14px 18px 4px !important;
  line-height: 1.3 !important;
  min-height: 1.3em;
  display: block;
}
.elementor-widget-woocommerce-product-title h1 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
[data-elementor-type="loop-item"]:hover .elementor-widget-woocommerce-product-title h1 a {
  color: #8B1A1A !important;
}

/* Price */
.elementor-widget-woocommerce-product-price {
  margin: 0 18px 14px !important;
  flex-shrink: 0;
  min-height: 1.4em;
}
.elementor-widget-woocommerce-product-price .woocommerce-Price-amount {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #8B1A1A !important;
  letter-spacing: 0.2px;
}
.elementor-widget-woocommerce-product-price del .woocommerce-Price-amount {
  color: #9B7B5B !important;
  opacity: 0.7;
  font-weight: 300 !important;
  font-size: 13px !important;
  text-decoration: line-through;
}
.elementor-widget-woocommerce-product-price del {
  margin-right: 8px;
}
.elementor-widget-woocommerce-product-price ins {
  text-decoration: none;
  background: none;
}

/* Spacer pushes Add to Cart to the bottom of the card
   regardless of title/price height above it */
.elementor-widget-woocommerce-product-price::after {
  content: "";
}
[data-elementor-type="loop-item"] > .e-con > .e-con-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.elementor-widget-wc-add-to-cart {
  margin: auto 18px 18px !important;
}

/* Add to Cart button */
.elementor-widget-wc-add-to-cart .elementor-button {
  background: #8B1A1A !important;
  color: #FFFFFF !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 13px 18px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.elementor-widget-wc-add-to-cart .elementor-button:hover {
  background: #6E1414 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(139, 26, 26, 0.25);
}
.elementor-widget-wc-add-to-cart .e-font-icon-svg {
  width: 13px;
  height: 13px;
}

/* Sale badge — clean corner ribbon */
.product.sale .elementor-widget-theme-post-featured-image::before {
  content: "Sale";
  position: absolute;
  top: 14px;
  left: 14px;
  background: #8B1A1A;
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 5px 12px;
  z-index: 3;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1024px) {
  .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px;
  }
}

@media (max-width: 600px) {
  .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .elementor-widget-woocommerce-product-title h1 {
    font-size: 14px !important;
    margin: 12px 14px 3px !important;
    min-height: 2.4em;
  }
  .elementor-widget-woocommerce-product-price {
    margin: 0 14px 10px !important;
  }
  .elementor-widget-woocommerce-product-price .woocommerce-Price-amount {
    font-size: 13px !important;
  }
  .elementor-widget-woocommerce-product-price del .woocommerce-Price-amount {
    font-size: 11px !important;
  }
  .elementor-widget-wc-add-to-cart {
    margin: auto 14px 14px !important;
  }
  .elementor-widget-wc-add-to-cart .elementor-button {
    font-size: 9.5px !important;
    padding: 11px 14px !important;
    letter-spacing: 1.2px !important;
  }
  .product.sale .elementor-widget-theme-post-featured-image::before {
    font-size: 9px;
    padding: 4px 10px;
    top: 10px;
    left: 10px;
  }
}