/*
Theme Name: Storefront Lamps Child
Theme URI: https://example.com
Description: A minimal, full-width child theme of Storefront, built for SKET SHADES — burgundy, lilac, and sage green brand identity, no sidebar, mobile optimized.
Author: You
Template: storefront
Version: 1.1.0
Text Domain: storefront-lamps-child
*/

/* ==========================================================================
   1. Brand palette — pulled from SKET SHADES identity
   ========================================================================== */
:root {
  /* Exact tokens pulled from sket_shades_store_replica.html */
  --brand-maroon: #5c232b;
  --brand-maroon-dark: #431a20;
  --brand-cream: #f6f5f1;
  --brand-cream-alt: #f8f7f4;
  --brand-dark: #1c1917;
  --brand-sage: #9ab092;
  --brand-sage-dark: #7d9475;
  --brand-lilac: #b4a3c6;
  --brand-lilac-dark: #9585ab;

  /* Aliases so the rest of this file's existing selectors keep working */
  --brand-burgundy: var(--brand-maroon);
  --brand-burgundy-dark: var(--brand-maroon-dark);
  --brand-ink: var(--brand-dark);

  /* ------------------------------------------------------------------
     LAYOUT CONTROLS — change these numbers to flex any grid to
     one column (or any column count) at each breakpoint.
     Set a value to 1 to force single-column, full width.
     ------------------------------------------------------------------ */
  --shop-columns-desktop: 3;
  --shop-columns-tablet: 2;
  --shop-columns-mobile: 1;

  --category-columns-desktop: 3;
  --category-columns-tablet: 2;
  --category-columns-mobile: 1;

  /* Site-wide container width — every section (header, hero, footer,
     shop, cart, checkout, account, single product) reads from this ONE
     variable instead of each having its own hardcoded max-width. Increase
     this single number to make the whole site wider; it now controls
     every container consistently. */
  --site-max-width: 1680px;

  /* Checkout page palette — from the dedicated checkout mockup.
     Close to the main brand maroon but kept as its own token since it
     was supplied as an exact spec for this page. */
  --checkout-dark: #4A252A;
  --checkout-accent: #3E1D22;
  --checkout-light: #F8F6F4;
  --checkout-border: #D8CBC8;
  --checkout-muted: #7A6B69;
}

/* ==========================================================================
   2. Base + typography — Satoshi sitewide, proper heading hierarchy
   ========================================================================== */
body,
h1, h2, h3, h4, h5, h6,
button, input, select, textarea {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  background-color: var(--brand-cream);
  color: var(--brand-dark);
}

/* Base heading scale — this governs any heading WITHOUT a more specific
   class (WooCommerce/Storefront default titles: Checkout, Cart, My Account,
   Shop archive title, etc). Sections with their own design (hero, philosophy,
   featured products) set their own sizes via more specific selectors below,
   which still win over this base scale. */
h1, h2, h3, h4, h5, h6 {
  color: var(--brand-dark);
  letter-spacing: -0.01em;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.5em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; font-weight: 700; }
h5, h6 { font-size: 0.9rem; font-weight: 700; }

/* Default page/section titles WooCommerce renders on its own templates
   (Checkout, Cart, My Account, Shop) — kept to the same moderate h2-tier
   size so nothing feels oversized relative to the rest of the site. */
.entry-header .entry-title,
h1.entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart .entry-title,
.woocommerce-account .entry-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--brand-dark);
}

.site-title,
.woocommerce-loop-product__title,
.product_title,
.storefront-section-title {
  color: var(--brand-dark);
  font-weight: 600;
}

a {
  color: var(--brand-burgundy);
}
a:hover {
  color: var(--brand-sage-dark);
}

/* ==========================================================================
   3. Full-width layout — remove sidebar spacing site-wide
   ========================================================================== */

/* Higher-specificity + !important: Storefront's own core CSS floats
   .content-area for its sidebar layout. Since we remove the sidebar in
   functions.php, that float needs to be forcibly cancelled here — a plain
   class selector wasn't specific enough to beat Storefront's own rules. */
body #primary.content-area,
body div#primary.content-area,
.content-area,
.storefront-sidebar-removed .content-area {
  width: 100% !important;
  float: none !important;
  margin: 0 auto;
  max-width: var(--site-max-width);
}

/* Clearfix: even with the float cancelled above, any leftover floated
   context from Storefront's core layout can let following elements (like
   the footer) render up alongside content instead of below it. This forces
   every major wrapper to contain its own floats so nothing "escapes".
   NOTE: .sket-page and .sket-shop-page were removed from this list — they
   don't need it for the original footer bug (Storefront's own #content/#page
   wrappers were the real cause), and having overflow:hidden on .sket-page
   was silently clipping content on the My Account page. */
#content.site-content,
body #content,
#page.site {
  overflow: hidden;
}

#content.site-content::after,
body #content::after {
  content: "";
  display: table;
  clear: both;
}

/* Belt-and-braces: the footer itself always starts on its own new line,
   regardless of anything floated above it. */
.sket-footer {
  clear: both;
  position: relative;
}

.site-content .col-full {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* WooCommerce product grid stretches to full width, no cramped sidebar column.
   Now actually wired to the --shop-columns-* variables (previously hardcoded
   to repeat(4,1fr), which silently ignored the layout control variables
   defined above). Gap matches the HTML sample's gap-8 = 2rem exactly. */
ul.products {
  display: grid;
  grid-template-columns: repeat(var(--shop-columns-desktop), 1fr);
  gap: 2rem;
}

ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
}

/* ==========================================================================
   4. Header — sticky, blurred, matches mockup markup exactly
   ========================================================================== */
.sket-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: rgba(246, 245, 241, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(92, 35, 43, 0.1);
}

.sket-header-inner {
  position: relative; /* anchors the inline search overlay (.sket-inline-search) */
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sket-logo a {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: #000;
  text-transform: uppercase;
  text-decoration: none;
}

.sket-nav-list {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sket-nav-list a {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-dark);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
}

.sket-nav-list a:hover {
  color: var(--brand-maroon);
  border-bottom-color: var(--brand-maroon);
}

.sket-header-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sket-icon-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  line-height: 1;
  color: var(--brand-dark);
  font-size: 1.1rem;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

.sket-icon-btn:hover {
  color: var(--brand-maroon);
}

.sket-cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: var(--brand-maroon);
  color: var(--brand-cream);
  font-size: 10px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sket-mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--brand-dark);
  cursor: pointer;
}

/* Inline search — a contained, rounded pill anchored to the right side of
   the header on desktop (NOT a full-width overlay); expands to fill the
   width on mobile only, where a compact pill wouldn't leave enough room
   to comfortably type. */
.sket-inline-search {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 380px;
  max-width: calc(100% - 48px);
  height: 48px;
  display: flex;
  align-items: center;
  gap: 2px;
  background-color: var(--brand-cream);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 999px;
  padding: 0 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 20;
}

.sket-header.search-open .sket-inline-search {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 640px) {
  .sket-inline-search {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }
}

.sket-inline-search input[type="search"] {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 8px 4px;
  outline: none;
  color: var(--brand-dark);
}

.sket-inline-search input[type="search"]::placeholder {
  color: #8f8f8f;
}

.sket-inline-search input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

/* Submit + close buttons — same reset pattern as the header's other icon
   buttons, styled as small circular touch targets within the pill. */
.sket-inline-search-close,
.sket-inline-search-submit {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--brand-dark);
  font-size: 0.9rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.sket-inline-search-close:hover,
.sket-inline-search-submit:hover {
  background: rgba(0,0,0,0.06);
  color: var(--brand-maroon);
}

@media (max-width: 900px) {
  .sket-nav {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background-color: var(--brand-cream);
    border-bottom: 1px solid rgba(92, 35, 43, 0.1);
    padding: 20px 24px;
  }

  .sket-nav.open {
    display: block;
  }

  .sket-nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .sket-mobile-toggle {
    display: block;
  }
}

/* ==========================================================================
   5. Hero section (homepage) — full-bleed dark image, left-aligned text
   ========================================================================== */
.sket-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--brand-dark);
  margin-bottom: 0;
  padding: 0;
}

.sket-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sket-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sket-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.3), transparent);
}

.sket-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 42rem; /* matches mockup's max-w-2xl */
  padding: 96px 24px; /* py-24 px-6 */
  text-align: left;
}

@media (min-width: 640px) {
  .sket-hero-inner {
    padding: 96px 32px; /* sm:px-8 */
  }
}

.sket-hero-inner h1 {
  color: #fff;
  font-size: 2.25rem; /* text-4xl */
  font-weight: 500; /* font-medium */
  letter-spacing: -0.025em; /* tracking-tight */
  line-height: 1.25; /* leading-tight */
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  .sket-hero-inner h1 { font-size: 3rem; } /* sm:text-5xl */
}

@media (min-width: 1024px) {
  .sket-hero-inner h1 { font-size: 3.75rem; } /* lg:text-6xl */
}

.sket-hero-inner p {
  color: #e5e5e5;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.6;
  margin-bottom: 28px;
}

@media (min-width: 640px) {
  .sket-hero-inner p { font-size: 1rem; } /* sm:text-base */
}

.sket-hero-inner .button {
  background-color: #fff;
  border: none;
  color: var(--brand-dark);
  padding: 16px 32px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sket-hero-inner .button:hover {
  background-color: var(--brand-maroon);
  color: #fff;
}

/* ==========================================================================
   5a2. Two-tone section divider — thin lilac/sage bar, matches the
   original mockup's divider between major homepage sections.
   ========================================================================== */
.sket-section-divider {
  display: flex;
  width: 100%;
  height: 16px;
}

.sket-section-divider-half {
  width: 50%;
}

.sket-section-divider-half.lilac { background-color: var(--brand-lilac); }
.sket-section-divider-half.sage  { background-color: var(--brand-sage); }

/* ==========================================================================
   5b. Philosophy / about section — maroon background, text + image
   ========================================================================== */
.sket-philosophy {
  background-color: var(--brand-maroon);
  color: var(--brand-cream);
  padding: 96px 24px; /* py-24 */
}

.sket-philosophy-inner {
  max-width: var(--site-max-width);
  margin: 0 auto;
}

.sket-philosophy-heading-block,
.sket-philosophy-text {
  max-width: 760px;
}

.sket-philosophy h2 {
  color: #fff;
  font-size: 2.25rem; /* text-4xl — same scale as hero h1 in the mockup */
  font-weight: 500; /* font-medium */
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  .sket-philosophy h2 { font-size: 3rem; } /* sm:text-5xl */
}

@media (min-width: 1024px) {
  .sket-philosophy h2 { font-size: 3.75rem; } /* lg:text-6xl */
}

.sket-philosophy p {
  color: rgba(246, 245, 241, 0.8);
  font-size: 0.75rem; /* text-xs */
  line-height: 1.7;
}

@media (min-width: 640px) {
  .sket-philosophy p { font-size: 0.875rem; } /* sm:text-sm */
}

/* Tagline row: script word + text, with underline — now spans the FULL
   card width (not capped to the 760px text column), matching mockup's
   "الذكريات / Crafted with Threads, Light & Warm Memories" line width. */
.sket-philosophy-tagline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-cream);
  border-bottom: 1px solid rgba(246, 245, 241, 0.2);
  padding-bottom: 10px;
  margin: 0 0 24px;
  letter-spacing: 0.02em;
}

@media (min-width: 640px) {
  .sket-philosophy-tagline { font-size: 0.9rem; }
}

.sket-philosophy-tagline-script {
  font-style: italic;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--brand-sage);
  font-family: Georgia, "Times New Roman", serif; /* mockup's font-serif, scoped to just this word */
}

@media (min-width: 640px) {
  .sket-philosophy-tagline-script { font-size: 1.25rem; }
}

/* Process photos — 3 images side by side below the text (not a carousel).
   Portrait 3:4, edge-to-edge cover crop, no borders/radius. */
.sket-philosophy-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.sket-philosophy-image-item {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.sket-philosophy-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

@media (max-width: 640px) {
  .sket-philosophy-images {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ==========================================================================
   5c. Feature icon row — handcrafted / shipping / support
   ========================================================================== */
.sket-features {
  background-color: var(--brand-cream);
  padding: 64px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.sket-features-inner {
  max-width: var(--site-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.sket-feature-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  padding: 32px 20px;
}

.sket-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background-color: rgba(92, 35, 43, 0.1);
  color: var(--brand-maroon);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 1.1rem;
}

.sket-feature-card h4 {
  font-size: 0.75rem; /* text-xs */
  font-weight: 700; /* font-bold */
  text-transform: uppercase;
  letter-spacing: 0.05em; /* tracking-wider */
  color: var(--brand-dark);
  margin-bottom: 8px;
}

@media (min-width: 640px) {
  .sket-feature-card h4 { font-size: 0.875rem; } /* sm:text-sm */
}

.sket-feature-card p {
  font-size: 0.75rem; /* text-xs */
  color: #555;
  line-height: 1.6;
}

/* ==========================================================================
   6. Shop-by-category grid (homepage)
   ========================================================================== */
.sket-categories {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 64px 24px;
}

.sket-categories h2 {
  text-align: center;
  font-size: 1.875rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 32px;
}

.sket-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sket-category-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  transition: transform 0.3s ease;
}

.sket-category-tile.burgundy { background-color: var(--brand-burgundy); }
.sket-category-tile.lilac    { background-color: var(--brand-lilac); }
.sket-category-tile.sage     { background-color: var(--brand-sage); }

/* Cover photo tiles — real category image with a bottom gradient in the
   category's brand color, so the label stays readable and the tile still
   feels tied to the palette even though it's a photo now, not a flat color. */
.sket-category-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.sket-category-tile.has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sket-category-tile.has-image.burgundy::after {
  background: linear-gradient(to top, rgba(92, 35, 43, 0.85) 0%, rgba(92, 35, 43, 0.15) 55%, transparent 100%);
}

.sket-category-tile.has-image.lilac::after {
  background: linear-gradient(to top, rgba(185, 168, 209, 0.9) 0%, rgba(185, 168, 209, 0.2) 55%, transparent 100%);
}

.sket-category-tile.has-image.sage::after {
  background: linear-gradient(to top, rgba(138, 154, 126, 0.9) 0%, rgba(138, 154, 126, 0.2) 55%, transparent 100%);
}

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

.sket-category-tile-img {
  transition: transform 0.5s ease;
}

.sket-category-tile a {
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
}

.sket-category-tile.lilac:not(.has-image) a {
  color: var(--brand-burgundy-dark);
}

/* On a photo tile, always use white text regardless of tint color —
   the gradient overlay guarantees enough contrast in all three cases. */
.sket-category-tile.has-image a {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ==========================================================================
   7. Featured products section (homepage)
   ========================================================================== */
.sket-featured {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 80px 24px; /* py-20 */
}

/* ==========================================================================
   8. Buttons + price accents (shop-wide)
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
a.button.alt {
  background-color: var(--brand-sage);
  border-color: var(--brand-sage-dark);
  color: #fff;
  border-radius: 3px;
  transition: background-color 0.25s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
a.button.alt:hover {
  background-color: var(--brand-sage-dark);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--brand-burgundy);
  font-weight: 600;
}

/* ==========================================================================
   9. Footer — matches footer.php markup exactly
   ========================================================================== */
.sket-footer {
  background-color: var(--brand-dark);
  color: var(--brand-cream);
  border-top: 1px solid rgba(246, 245, 241, 0.1);
}

.sket-footer-inner {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 64px 24px;
}

.sket-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.sket-footer-brand a {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
}

.sket-footer-brand p {
  font-size: 0.8rem;
  color: rgba(246, 245, 241, 0.6);
  line-height: 1.6;
  max-width: 340px;
  margin-top: 12px;
}

.sket-footer-links h4 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  margin-bottom: 12px;
}

.sket-footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sket-footer-links li {
  margin-bottom: 8px;
}

.sket-footer-links a {
  font-size: 0.8rem;
  color: rgba(246, 245, 241, 0.7);
  text-decoration: none;
}

.sket-footer-links a:hover {
  color: #fff;
}

.sket-footer-bottom {
  border-top: 1px solid rgba(246, 245, 241, 0.1);
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 11px;
  color: rgba(246, 245, 241, 0.4);
}

.sket-footer-social {
  display: flex;
  gap: 24px;
}

.sket-footer-social a {
  color: rgba(246, 245, 241, 0.4);
  font-size: 1rem;
  text-decoration: none;
}

.sket-footer-social a:hover {
  color: #fff;
}

@media (max-width: 640px) {
  .sket-footer-grid {
    grid-template-columns: 1fr;
  }

  .sket-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   11. Product cards — matches mockup exactly (square corners, badge, pill button)
   ========================================================================== */
.sket-featured h2,
.sket-featured-heading h2 {
  text-align: center;
  font-size: 1.875rem; /* text-3xl */
  font-weight: 500; /* font-medium */
  letter-spacing: -0.025em; /* tracking-tight */
  margin-bottom: 8px;
}

@media (min-width: 640px) {
  .sket-featured h2,
  .sket-featured-heading h2 { font-size: 2.25rem; } /* sm:text-4xl */
}

.sket-featured-subtitle {
  text-align: center;
  font-size: 0.75rem; /* text-xs — already matched */
  color: #777;
  max-width: 500px;
  margin: 0 auto 48px;
}

ul.products li.product {
  background: transparent;
}

ul.products li.product img {
  border-radius: 0 !important;
  border: 1px solid rgba(0,0,0,0.1);
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  width: 100%;
  height: 100%;
}

ul.products li.product .onsale {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.15);
  color: #444 !important;
  font-size: 11px !important;
  font-weight: 500;
  padding: 2px 12px !important;
  border-radius: 999px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1.6 !important;
  text-transform: none;
}

/* Title: dark by default, maroon ONLY on hover — matches the mockup's
   group-hover:text-brand-maroon exactly (not a permanent maroon color).
   Hardened with !important and broader selectors since product cards
   have, on this build, sometimes rendered via WooCommerce Blocks markup
   with different class names than the classic template — this covers
   both cases plus a scoped fallback on the card's own link/anchor so the
   default color can't leak in from anywhere else on the page. */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .wc-block-components-product-title,
ul.products li.product a {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  color: #1c1917 !important;
  margin-top: 12px;
  text-decoration: none;
  transition: color 0.2s ease;
}

ul.products li.product:hover .woocommerce-loop-product__title,
ul.products li.product:hover .wc-block-components-product-title,
ul.products li.product a:hover {
  color: var(--brand-maroon) !important;
}

ul.products li.product .price {
  font-size: 0.8rem;
}

ul.products li.product .price del {
  color: #aaa;
  font-weight: 400;
  opacity: 1;
}

ul.products li.product .price ins {
  text-decoration: none;
  font-weight: 700;
}

ul.products li.product .star-rating {
  font-size: 11px;
  margin-top: 8px;
}

ul.products li.product .button,
ul.products li.product .add_to_cart_button {
  background: transparent !important;
  border: 1px solid var(--brand-dark) !important;
  color: var(--brand-dark) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600;
  padding: 10px 22px !important;
  text-transform: none;
  margin-top: 12px;
}

ul.products li.product .button:hover,
ul.products li.product .add_to_cart_button:hover {
  background: var(--brand-dark) !important;
  color: #fff !important;
}

.sket-view-all {
  text-align: center;
  margin-top: 48px;
}

.sket-view-all a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--brand-maroon);
  color: var(--brand-maroon);
  padding: 14px 32px;
  border-radius: 999px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.sket-view-all a:hover {
  background: var(--brand-maroon);
  color: #fff;
}

/* ==========================================================================
   10. Mobile optimization
   ========================================================================== */
@media (max-width: 768px) {
  ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .sket-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sket-hero {
    padding: 56px 20px;
  }

  .sket-hero h1 {
    font-size: 1.9rem;
  }
}

@media (max-width: 480px) {
  ul.products {
    grid-template-columns: 1fr;
  }

  .sket-category-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .sket-features-inner {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   12. My Account page — login/register + dashboard, matches brand style
   ========================================================================== */
.woocommerce-account .content-area {
  max-width: var(--site-max-width);
  margin: 48px auto;
  padding: 0 24px;
}

/* The generic .sket-page-content rule caps at 760px for readable text
   pages (About, Shipping & Returns, etc). Account has its own dashboard
   layout that should use the full site width instead. */
.woocommerce-account .sket-page-content {
  max-width: var(--site-max-width);
}

/* Subtitle showing the current tab name (e.g. "Orders", "Dashboard") —
   visible on every screen size, printed directly after the tab nav via
   the woocommerce_account_navigation hook in functions.php. The page's
   main H1 stays "My account" always; only this line changes per tab. */
.sket-account-subtitle {
  font-size: 1.15rem; /* matches global h3 scale */
  font-weight: 600;
  color: var(--brand-dark);
  margin: 20px 0 0;
}

/* ---------------------------------------------------------------------
   Tab bar — icons + text on desktop, icons only on mobile
   --------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0 0 1px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  margin: 0;
  flex: 0 0 auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 12px 18px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #777;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before      { content: "\f015"; } /* house */
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before         { content: "\f290"; } /* bag-shopping */
.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before      { content: "\f019"; } /* download */
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before   { content: "\f3c5"; } /* location-dot */
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before   { content: "\f007"; } /* user */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before{ content: "\f2f5"; } /* right-from-bracket */

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--brand-dark);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--brand-maroon);
  font-weight: 700;
  border-bottom-color: var(--brand-maroon);
}

@media (max-width: 640px) {
  /* Icon-only tabs: hide the text label but keep the icon visible by
     zeroing the link's own font-size (which hides the text node) then
     restoring size specifically on the icon pseudo-element. */
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    font-size: 0;
    padding: 12px 14px;
    gap: 0;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
    font-size: 1.1rem;
  }
}

/* ---------------------------------------------------------------------
   Login / register — pure minimal: no card box, just clean typography
   and generous spacing, using the site's real heading/body type scale
   instead of a decorative bordered box.
   --------------------------------------------------------------------- */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce form.login,
.woocommerce form.register {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: 420px;
  box-shadow: none;
}

.woocommerce-account .woocommerce-form-login-toggle,
.woocommerce-account .woocommerce-form-register-toggle {
  max-width: 420px;
}

.woocommerce-account .woocommerce-form-login .form-row:last-of-type,
.woocommerce-account .woocommerce-form-register .form-row:last-of-type {
  margin-bottom: 0;
}

/* Shared form field styling — used on login, register, checkout, addresses.
   Kept minimal: a plain hairline border, no heavy fill or shadow. */
.woocommerce form .form-row label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-dark);
  margin-bottom: 6px;
  display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input.input-text,
.select2-container .select2-selection--single {
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.2) !important;
  border-radius: 0 !important;
  padding: 10px 2px !important;
  font-family: inherit;
  font-size: 0.95rem;
  background: transparent !important;
  height: auto !important;
  width: 100%;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-account input.input-text:focus {
  border-bottom-color: var(--brand-maroon) !important;
  outline: none;
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   Account dashboard "orders" table — minimal lines, no boxed card
   --------------------------------------------------------------------- */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.1);
  border-radius: 0;
  overflow: visible;
  border-collapse: collapse;
  width: 100%;
}

.woocommerce-account table.shop_table th {
  background: transparent;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #888;
  padding: 14px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.woocommerce-account table.shop_table td {
  padding: 14px 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 0.9rem;
}

.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account table.shop_table .button {
  background: transparent;
  color: var(--brand-dark);
  border: 1px solid var(--brand-dark);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover {
  background: var(--brand-dark);
  color: #fff;
}

/* ==========================================================================
   13. Checkout page — matches "clean design" mockup: card sections,
   sticky order summary, striped header band, payment method cards
   ========================================================================== */

.woocommerce-checkout .content-area {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* Two-column layout: form sections left, sticky summary right —
   matches the mockup's lg:col-span-7 / lg:col-span-5 split */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}

.woocommerce-checkout #customer_details {
  grid-column: 1;
  width: 100%;
}

.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
  grid-column: 2;
  position: sticky;
  top: 24px;
}

/* Card treatment — billing and shipping each get their own white rounded
   card, matching the mockup's sectioning. Order notes render nested
   inside the billing card by WooCommerce's own template structure, so
   they inherit this card rather than getting a boxed-within-a-box look. */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  background: #fff;
  border: 1px solid #EBE5E2;
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.woocommerce-checkout .woocommerce-additional-fields {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #EBE5E2;
}

.woocommerce-checkout h3#ship-to-different-address {
  background: transparent;
  border: none;
  padding: 0 0 16px;
  margin: 0;
  box-shadow: none;
}

.woocommerce-checkout h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--checkout-dark, var(--brand-maroon));
}

/* Form fields — warm off-white background, rounded, matches mockup */
.woocommerce-checkout .form-row label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-dark);
  margin-bottom: 6px;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  background: #FAF7F6 !important;
  border: 1px solid #D8CBC8 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 0.9rem;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--checkout-dark, var(--brand-maroon)) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(74, 37, 42, 0.08);
}

/* Order summary card */
#order_review,
.woocommerce-checkout-review-order {
  background: #fff;
  border: 1px solid #EBE5E2;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

table.shop_table.woocommerce-checkout-review-order-table {
  border: none;
}

table.shop_table.woocommerce-checkout-review-order-table thead {
  display: none; /* mockup shows line items as cards, not a table header row */
}

table.shop_table.woocommerce-checkout-review-order-table td,
table.shop_table.woocommerce-checkout-review-order-table th {
  border-top: 1px solid #EBE5E2;
  padding: 14px 0;
  font-size: 0.85rem;
}

table.shop_table.woocommerce-checkout-review-order-table .order-total th,
table.shop_table.woocommerce-checkout-review-order-table .order-total .amount {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--checkout-dark, var(--brand-maroon));
}

table.shop_table.woocommerce-checkout-review-order-table .cart-subtotal .amount,
table.shop_table.woocommerce-checkout-review-order-table .shipping .amount {
  font-weight: 600;
  color: var(--brand-dark);
}

/* Payment methods — bordered selectable cards, matches mockup exactly */
#payment ul.payment_methods {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#payment ul.payment_methods li.wc_payment_method {
  border: 1px solid #D8CBC8;
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.2s ease;
}

#payment ul.payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--checkout-dark, var(--brand-maroon));
  background: #FAF7F6;
}

#payment ul.payment_methods li label {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

#payment div.payment_box {
  background: var(--brand-cream);
  border-radius: 10px;
  padding: 16px;
  margin-top: 12px;
  font-size: 0.8rem;
}

#payment div.payment_box::before {
  border-bottom-color: var(--brand-cream) !important;
}

/* Place order button — large, rounded, matches mockup weight/size */
#place_order,
.woocommerce-checkout #payment #place_order {
  width: 100%;
  background: var(--checkout-dark, var(--brand-maroon)) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 18px !important;
  font-size: 0.95rem !important;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  border: none !important;
  box-shadow: 0 8px 20px rgba(74, 37, 42, 0.25);
}

#place_order:hover {
  background: var(--checkout-accent, var(--brand-maroon-dark)) !important;
}

/* ==========================================================================
   13b. Checkout header band — maroon banner + title + subtitle + 3-stripe,
   rendered conditionally by page.php only on the checkout page
   ========================================================================== */
.sket-checkout-hero {
  background-color: #4A252A;
  color: #fff;
  text-align: center;
  padding: 40px 24px 32px;
  position: relative;
}

.sket-checkout-hero h1 {
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.sket-checkout-hero p {
  color: #D8CBC8;
  font-size: 0.8rem;
  font-weight: 500;
  margin: 0;
}

.sket-checkout-stripe {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  display: flex;
}

.sket-checkout-stripe span {
  flex: 1;
}

.sket-checkout-stripe span:nth-child(1) { background: #5C2A31; }
.sket-checkout-stripe span:nth-child(2) { background: #B8B1C3; }
.sket-checkout-stripe span:nth-child(3) { background: #9FA89A; }

/* ==========================================================================
   13c. Order received / thank-you page — styled as the functional
   equivalent of the mockup's success modal (WooCommerce redirects to a
   real confirmation page rather than showing an in-page modal, which is
   actually more reliable: it survives page refresh and gives a real,
   emailable/shareable order URL).
   ========================================================================== */
.woocommerce-order-received .sket-page-hero,
.woocommerce-order-received .sket-checkout-hero {
  background-color: #4A252A;
}

.woocommerce-order-received .woocommerce-thankyou-order-received {
  background: #fff;
  border: 1px solid #EBE5E2;
  border-radius: 16px;
  max-width: 480px;
  margin: 40px auto;
  padding: 36px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--brand-dark);
}

.woocommerce-order-received .woocommerce-thankyou-order-received::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  font-size: 1.3rem;
  font-weight: 700;
}

.woocommerce-order-received table.shop_table {
  max-width: 480px;
  margin: 24px auto 0;
  border: 1px solid #EBE5E2;
  border-radius: 12px;
}

/* ==========================================================================
   14. Mobile: account + checkout
   ========================================================================== */
@media (max-width: 900px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading {
    grid-column: 1;
    position: static;
  }

  .sket-checkout-hero h1 {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .woocommerce-account table.shop_table {
    display: block;
    overflow-x: auto;
  }
}

/* ==========================================================================
   15. Shop page — sidebar filters + toolbar (matches mockup exactly)
   ========================================================================== */
.sket-shop-page .sket-shop-mobile-bar {
  display: none;
  max-width: var(--site-max-width);
  margin: 24px auto 0;
  padding: 0 24px;
}

.sket-filter-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-dark);
  cursor: pointer;
}

.sket-shop-page {
  background-color: var(--brand-cream);
}

.sket-shop-layout {
  background-color: var(--brand-cream);
  max-width: var(--site-max-width);
  margin: 32px auto 80px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
}

.sket-shop-sidebar {
  background-color: transparent;
  border-right: 1px solid rgba(0,0,0,0.08);
  padding-right: 32px;
}

.sket-shop-main {
  background-color: transparent;
}

.sket-filter-block {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.sket-filter-block:last-child {
  border-bottom: none;
}

.sket-filter-block h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 14px;
  font-family: inherit;
  text-transform: none;
}

.sket-filter-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sket-filter-block li,
.sket-filter-block .wc-layered-nav-term {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #555;
  padding: 6px 0;
}

.sket-filter-block a {
  color: #555;
  text-decoration: none;
}

.sket-filter-block li:hover a,
.sket-filter-block a:hover {
  color: var(--brand-maroon);
}

.sket-sidebar-placeholder {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.6;
}

.sket-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  flex-wrap: wrap;
}

.sket-shop-toolbar .woocommerce-result-count {
  font-size: 11px;
  color: #888;
  margin: 0;
}

.sket-shop-toolbar select.orderby {
  border: 1px solid var(--brand-dark) !important;
  border-radius: 999px !important;
  padding: 8px 32px 8px 16px !important;
  font-size: 11px !important;
  font-weight: 500;
  color: var(--brand-dark) !important;
  background-color: #fff !important;
}

@media (max-width: 900px) {
  .sket-shop-mobile-bar {
    display: block;
  }

  .sket-shop-layout {
    grid-template-columns: 1fr;
  }

  .sket-shop-sidebar {
    display: none;
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 24px;
    margin-bottom: 24px;
  }

  .sket-shop-sidebar.open {
    display: block;
  }
}

/* ==========================================================================
   16. Single product page — back button, gallery/summary split, tabs, related
   ========================================================================== */
.sket-product-page {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.sket-back-button {
  margin-bottom: 24px;
}

.sket-back-button a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-dark);
  text-decoration: none;
}

.sket-back-button a:hover {
  color: var(--brand-maroon);
}

/* WooCommerce's real product layout — gallery left, summary right */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}

.woocommerce div.product div.images {
  border: 1px solid rgba(0,0,0,0.1);
}

.woocommerce div.product div.images img {
  border-radius: 0;
}

.woocommerce div.product .summary {
  grid-column: 2;
}

.woocommerce div.product .product_title {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 1.4rem;
  color: var(--brand-dark);
  font-weight: 400;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.7;
  margin: 16px 0;
}

/* Variation dropdowns (Color / Material) */
.woocommerce div.product table.variations select {
  border: 1px solid rgba(0,0,0,0.2) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.8rem;
}

.woocommerce div.product table.variations td.label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-dark);
}

/* Quantity + add to cart row */
.woocommerce div.product form.cart .quantity input.qty {
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 10px;
  padding: 10px;
  width: 60px;
  text-align: center;
}

.woocommerce div.product form.cart .button {
  background: var(--brand-dark) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 32px !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.woocommerce div.product form.cart .button:hover {
  background: var(--brand-maroon) !important;
}

/* Category / tag meta row */
.woocommerce div.product .product_meta {
  font-size: 0.75rem;
  color: #777;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.woocommerce div.product .product_meta a {
  color: var(--brand-maroon);
  text-decoration: underline;
}

/* Tabs (Description / Additional info / Reviews) */
.woocommerce-tabs ul.tabs {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 0;
  margin: 64px 0 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.woocommerce-tabs ul.tabs li {
  margin: 0;
}

.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding-bottom: 16px;
  margin-bottom: -1px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #999;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--brand-dark);
  border-bottom-color: var(--brand-dark);
}

.woocommerce-tabs .panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 0;
  font-size: 0.85rem;
  color: #666;
  line-height: 1.7;
}

.woocommerce-tabs table.shop_attributes {
  border: none;
  width: 100%;
}

.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 12px 0;
  font-size: 0.8rem;
}

/* Related products — reuses the same ul.products card styling from the homepage */
.related.products {
  max-width: 1200px;
  margin: 64px auto 0;
  padding-top: 48px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.related.products > h2 {
  font-size: 1.8rem;
  margin-bottom: 32px;
}

/* ==========================================================================
   17. Mobile: shop + single product
   ========================================================================== */
@media (max-width: 900px) {
  .woocommerce div.product {
    grid-template-columns: 1fr;
  }

  .woocommerce div.product .summary {
    grid-column: 1;
  }

  .woocommerce-tabs ul.tabs {
    gap: 20px;
    overflow-x: auto;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   18. Static pages (Us, Shipping & Returns, Care Instructions, etc.)
   ========================================================================== */
.sket-page-hero {
  background-color: var(--brand-maroon);
  color: #fff;
  text-align: center;
  padding: 64px 24px;
}

.sket-page-hero h1 {
  color: #fff;
  font-size: 2.2rem;
  margin: 0;
}

.sket-page-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 80px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #444;
}

.sket-page-content h2 {
  font-size: 1.4rem;
  margin-top: 40px;
  margin-bottom: 16px;
}

.sket-page-content h2:first-child {
  margin-top: 0;
}

.sket-page-content p {
  margin-bottom: 16px;
}

.sket-page-content ul {
  margin: 0 0 16px 20px;
}

.sket-page-content li {
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .sket-page-hero h1 {
    font-size: 1.6rem;
  }
}

/* ==========================================================================
   19. Cart page — table, coupon box, totals, proceed to checkout
   ========================================================================== */
.woocommerce-cart .sket-page-content {
  max-width: var(--site-max-width);
}

/* Cart items table */
.woocommerce-cart table.shop_table.cart,
.woocommerce table.shop_table.cart {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  overflow: hidden;
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
}

.woocommerce table.shop_table.cart thead th {
  background: var(--brand-cream);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--brand-dark);
}

.woocommerce table.shop_table.cart td {
  padding: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  vertical-align: middle;
}

.woocommerce table.shop_table.cart td.product-thumbnail img {
  border-radius: 0;
  border: 1px solid rgba(0,0,0,0.08);
  width: 72px;
  height: 72px;
  object-fit: cover;
}

.woocommerce table.shop_table.cart td.product-name a {
  color: var(--brand-dark);
  font-weight: 700;
  text-decoration: none;
}

.woocommerce table.shop_table.cart td.product-name a:hover {
  color: var(--brand-maroon);
}

.woocommerce table.shop_table.cart td.product-price .amount,
.woocommerce table.shop_table.cart td.product-subtotal .amount {
  color: var(--brand-maroon);
  font-weight: 700;
}

/* Quantity stepper */
.woocommerce table.shop_table.cart .quantity input.qty {
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  padding: 8px;
  width: 56px;
  text-align: center;
  font-family: inherit;
}

/* Remove (x) button */
.woocommerce table.shop_table.cart td.product-remove a.remove {
  background: transparent !important;
  color: #999 !important;
  font-size: 1.1rem;
}

.woocommerce table.shop_table.cart td.product-remove a.remove:hover {
  color: var(--brand-maroon) !important;
  background: transparent !important;
}

/* Coupon field + Update cart row */
.woocommerce-cart .coupon .input-text {
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-family: inherit;
  font-size: 0.85rem;
}

.woocommerce-cart table.shop_table.cart .button,
.woocommerce-cart .coupon .button {
  background: transparent !important;
  border: 1px solid var(--brand-dark) !important;
  color: var(--brand-dark) !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.woocommerce-cart table.shop_table.cart .button:hover,
.woocommerce-cart .coupon .button:hover {
  background: var(--brand-dark) !important;
  color: #fff !important;
}

/* Cart totals box (right side) */
.woocommerce-cart .cart-collaterals {
  margin-top: 40px;
}

.woocommerce-cart .cart_totals {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 24px;
  max-width: 420px;
  margin-left: auto;
}

.woocommerce-cart .cart_totals h2 {
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.woocommerce-cart .cart_totals table.shop_table {
  border: none;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 12px 0;
  font-size: 0.85rem;
}

.woocommerce-cart .cart_totals .order-total .amount {
  color: var(--brand-maroon);
  font-weight: 700;
  font-size: 1.1rem;
}

/* Proceed to Checkout — solid maroon pill, matches Place Order button */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--brand-maroon) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 16px !important;
  font-size: 0.8rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  margin-top: 12px;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  background: var(--brand-dark) !important;
}

/* Empty cart state */
.woocommerce-cart .woocommerce-notice,
.woocommerce-cart .cart-empty {
  background: var(--brand-cream);
  border-left: 3px solid var(--brand-maroon);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 0.85rem;
}

.woocommerce-cart .return-to-shop .button {
  background: var(--brand-dark) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  margin-top: 12px;
}

.woocommerce-cart .return-to-shop .button:hover {
  background: var(--brand-maroon) !important;
}

/* Cross-sells ("You may also like") on cart page — reuse product card styling */
.woocommerce-cart .cross-sells {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.woocommerce-cart .cross-sells h2 {
  font-size: 1.4rem;
  margin-bottom: 24px;
}

/* ==========================================================================
   20. Mobile: cart page
   ========================================================================== */
@media (max-width: 768px) {
  .woocommerce table.shop_table.cart,
  .woocommerce table.shop_table.cart thead {
    display: none;
  }

  .woocommerce table.shop_table.cart tbody tr {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }

  .woocommerce table.shop_table.cart tbody tr td {
    border-top: none;
    padding: 4px 0;
  }

  .woocommerce table.shop_table.cart td.product-thumbnail {
    grid-row: 1 / span 5;
  }

  .woocommerce-cart .cart_totals {
    max-width: 100%;
    margin-left: 0;
  }
}

/* ==========================================================================
   21. WooCommerce notices — replace default blue/green/red with brand colors
   ========================================================================== */

/* Base reset — remove WooCommerce's default colored top border + icon bg on all notice types */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
p.woocommerce-noreviews,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
ul.woocommerce-error {
  background-color: var(--brand-cream) !important;
  border-top: 3px solid var(--brand-maroon) !important;
  color: var(--brand-dark) !important;
  border-radius: 10px;
  padding: 16px 20px !important;
  font-size: 0.85rem;
  list-style: none;
  box-shadow: none !important;
}

/* "Add to cart" success message and similar confirmations — softer sage tint,
   still on-brand rather than WooCommerce's default green */
.woocommerce-message {
  background-color: rgba(154, 176, 146, 0.15) !important;
  border-top-color: var(--brand-sage) !important;
}

.woocommerce-message a.button.wc-forward {
  background: var(--brand-dark) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  font-weight: 600;
  float: none;
  margin-left: 12px;
}

/* Validation / form errors — kept distinguishable but muted maroon, not stock red */
.woocommerce-error,
ul.woocommerce-error {
  background-color: rgba(92, 35, 43, 0.06) !important;
  border-top-color: var(--brand-maroon) !important;
}

.woocommerce-error li {
  list-style: none;
  padding: 2px 0;
}

/* Informational notices ("no products found", coupon field toggle, etc.) —
   this is the one that renders WooCommerce-blue by default */
.woocommerce-info {
  background-color: var(--brand-cream) !important;
  border-top-color: var(--brand-sage) !important;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
  color: var(--brand-maroon) !important;
}

/* Password strength meter + other inline WC UI hints also default to blue */
.woocommerce-password-strength {
  border-radius: 8px !important;
  font-size: 0.75rem !important;
}

.woocommerce-password-strength.strong {
  background-color: rgba(154, 176, 146, 0.25) !important;
  color: var(--brand-dark) !important;
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
  background-color: rgba(92, 35, 43, 0.1) !important;
  color: var(--brand-dark) !important;
}

.woocommerce-password-strength.good {
  background-color: rgba(154, 176, 146, 0.15) !important;
  color: var(--brand-dark) !important;
}

/* ==========================================================================
   22. Text overflow safety — prevents long product/category names or
   unusually long headings from breaking out of fixed-width cards, tiles,
   and grid cells anywhere on the site.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.sket-category-tile a,
.woocommerce-loop-product__title,
.product_title,
.sket-footer-brand a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ==========================================================================
   23. Sorting/result-count failsafe — the shop page has shown THREE sets
   of "Default sorting" + "Showing X results" in testing, meaning something
   outside my archive-product.php template (likely WooCommerce's block-based
   Product Collection, similar to the block-checkout issue found separately)
   is rendering an extra copy. Root cause needs confirming via page source,
   but this guarantees only the first of each ever displays visually,
   regardless of how many actually exist in the DOM.
   ========================================================================== */
.woocommerce-result-count:not(:first-of-type),
.woocommerce-ordering:not(:first-of-type),
form.woocommerce-ordering:not(:first-of-type) {
  display: none !important;
}

/* If duplicates are siblings rather than matched by :first-of-type
   (e.g. wrapped in different parent elements), this backup rule hides
   any sorting/count elements that fall outside our own toolbar entirely —
   the safest assumption being that ONLY the one inside .sket-shop-toolbar
   is intentional. */
.woocommerce-result-count,
.woocommerce-ordering {
  display: none;
}

.sket-shop-toolbar .woocommerce-result-count,
.sket-shop-toolbar .woocommerce-ordering {
  display: block !important;
}