/*
Theme Name: Twelve Clothing
Theme URI: https://twelve-clothing.example/
Author: PixelPress Studio
Author URI: https://example.com/
Description: Bespoke editorial theme for the Twelve Clothing WooCommerce store — light/dark toggle, announcement rotator, marquees, carousels, COD + bank-transfer (receipt upload) checkout.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twelve-clothing
*/

/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
  --tw-ivory: #F4EFE6;
  --tw-cream: #EDE6D6;
  --tw-ink: #141414;
  --tw-smoke: #6B675E;
  --tw-dark-ink: #141414;      /* footer / dark sections (same in both modes) */

  --tw-bg: var(--tw-ivory);
  --tw-surface: var(--tw-cream);
  --tw-text: var(--tw-ink);
  --tw-muted: var(--tw-smoke);
  --tw-card: rgba(255, 255, 255, 0.6);
  --tw-line: rgba(20, 20, 20, 0.12);
  --tw-line-strong: rgba(20, 20, 20, 0.22);
  --tw-input-bg: rgba(255, 255, 255, 0.6);
  --tw-btn-bg: var(--tw-ink);
  --tw-btn-text: var(--tw-ivory);
  --tw-header-bg: rgba(244, 239, 230, 0.95);
  --tw-overlay-scrim: rgba(20, 20, 20, 0.4);
  --tw-red: #b91c1c;

  --tw-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --tw-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --tw-maxw: 80rem; /* 1280px */
  --tw-pad: 1rem;
}

html.dark {
  color-scheme: dark;
  --tw-bg: #0e0e0e;
  --tw-surface: #1a1a1a;
  --tw-text: #F4EFE6;
  --tw-muted: rgba(244, 239, 230, 0.6);
  --tw-card: rgba(255, 255, 255, 0.05);
  --tw-line: rgba(244, 239, 230, 0.15);
  --tw-line-strong: rgba(244, 239, 230, 0.28);
  --tw-input-bg: rgba(255, 255, 255, 0.05);
  --tw-btn-bg: var(--tw-ivory);
  --tw-btn-text: var(--tw-ink);
  --tw-header-bg: rgba(14, 14, 14, 0.95);
}

/* ============================================================
   2. Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tw-bg);
  color: var(--tw-text);
  font-family: var(--tw-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  transition: background 0.25s ease, color 0.25s ease;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

.tw-container { max-width: var(--tw-maxw); margin: 0 auto; padding-left: var(--tw-pad); padding-right: var(--tw-pad); }
.tw-serif { font-family: var(--tw-serif); }

/* Eyebrow labels — wide letterspaced small caps */
.tw-eyebrow {
  font-size: 11px;
  letter-spacing: 0.45em;
  color: var(--tw-muted);
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

/* Thin elegant scrollbar for drawers */
.tw-nice-scroll::-webkit-scrollbar { width: 6px; }
.tw-nice-scroll::-webkit-scrollbar-thumb { background: #c9c2b2; border-radius: 9999px; }

.tw-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tw-no-scrollbar::-webkit-scrollbar { display: none; }
.tw-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   3. Keyframe animations (ported from the React site)
   ============================================================ */
@keyframes twelve-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.tw-marquee-track { display: inline-flex; animation: twelve-marquee 28s linear infinite; }
.tw-marquee-track.fast { animation-duration: 18s; }

@keyframes twelve-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.tw-fade-up { animation: twelve-fade-up 0.9s ease-out both; }

@keyframes twelve-fade-swap {
  0% { opacity: 0; transform: translateY(6px); }
  12%, 88% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}
.tw-fade-swap { animation: twelve-fade-swap 4s ease-in-out infinite; }

/* ============================================================
   4. Buttons
   ============================================================ */
.tw-btn {
  display: inline-block;
  background: var(--tw-btn-bg);
  color: var(--tw-btn-text);
  font-size: 0.8125rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  border: 1px solid var(--tw-btn-bg);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  font-family: var(--tw-sans);
}
.tw-btn:hover { opacity: 0.9; }
.tw-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tw-btn-block { display: block; width: 100%; text-align: center; }

.tw-btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--tw-text);
  border: 1px solid var(--tw-line-strong);
  font-size: 0.8125rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  font-family: var(--tw-sans);
}
.tw-btn-outline:hover { background: var(--tw-text); color: var(--tw-bg); }

.tw-btn-light {
  background: var(--tw-ivory);
  color: var(--tw-ink);
  border-color: var(--tw-ivory);
}
.tw-btn-ghost-light {
  background: transparent;
  color: var(--tw-ivory);
  border: 1px solid rgba(244, 239, 230, 0.6);
}
.tw-btn-ghost-light:hover { background: rgba(244, 239, 230, 0.1); }

/* ============================================================
   5. Announcement bar + header
   ============================================================ */
.tw-announce {
  background: #141414;
  color: var(--tw-ivory);
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.25em;
  padding: 0.55rem 1rem;
  text-transform: uppercase;
}
.tw-announce span { display: inline-block; }
@media (min-width: 768px) { .tw-announce { font-size: 11px; } }

.tw-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--tw-header-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tw-line);
}
body.admin-bar .tw-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .tw-header { top: 46px; } }

.tw-header-inner {
  max-width: var(--tw-maxw);
  margin: 0 auto;
  padding: 0.75rem var(--tw-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.tw-wordmark { text-decoration: none; line-height: 1; display: inline-flex; flex-direction: column; align-items: flex-start; user-select: none; }
.tw-wordmark .tw-mark {
  font-family: var(--tw-serif);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.18em;
}
.tw-wordmark .tw-sub {
  font-size: 9px;
  letter-spacing: 0.5em;
  color: var(--tw-muted);
  margin-top: 0.15rem;
}

.tw-nav-center { display: none; }
@media (min-width: 1024px) {
  .tw-nav-center { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
}
.tw-nav-row { display: flex; align-items: center; gap: 2rem; }
.tw-nav-row a {
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity 0.2s;
}
.tw-nav-row a:hover { opacity: 0.6; }
.tw-nav-row a.tw-active { text-decoration: underline; text-underline-offset: 4px; }

.tw-header-icons { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
.tw-icon-btn {
  background: none;
  border: none;
  color: var(--tw-text);
  padding: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tw-icon-btn:hover { opacity: 0.65; }

.tw-cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--tw-text);
  color: var(--tw-bg);
  font-size: 10px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Account popover */
.tw-account-wrap { position: relative; }
.tw-account-pop {
  display: none;
  position: absolute;
  right: 0;
  top: 2.75rem;
  z-index: 50;
  width: 16rem;
  background: var(--tw-bg);
  border: 1px solid var(--tw-line-strong);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  padding: 1.25rem;
}
.tw-account-pop.open { display: block; }
.tw-account-pop .tw-eyebrow { margin-bottom: 0.5rem; }
.tw-account-pop p { font-size: 0.875rem; margin: 0 0 1rem; }
.tw-account-pop a.tw-link { display: block; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 4px; margin-bottom: 0.5rem; }

/* Search overlay */
.tw-search-overlay { display: none; position: fixed; inset: 0; z-index: 60; }
.tw-search-overlay.open { display: block; }
.tw-search-scrim { position: absolute; inset: 0; background: var(--tw-overlay-scrim); }
.tw-search-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--tw-bg);
  border-bottom: 1px solid var(--tw-line);
  padding: 1.5rem var(--tw-pad);
}
@media (min-width: 768px) { .tw-search-bar { padding: 2.5rem var(--tw-pad); } }
.tw-search-form { max-width: 48rem; margin: 0 auto; display: flex; align-items: center; gap: 1rem; }
.tw-search-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--tw-serif);
  font-size: 1.5rem;
  color: var(--tw-text);
}
@media (min-width: 768px) { .tw-search-form input { font-size: 2.25rem; } }
.tw-search-form input::placeholder { color: var(--tw-muted); opacity: 0.6; }

/* Mobile drawer */
.tw-drawer { display: none; position: fixed; inset: 0; z-index: 60; }
.tw-drawer.open { display: block; }
@media (min-width: 1024px) { .tw-drawer { display: none !important; } }
.tw-drawer-scrim { position: absolute; inset: 0; background: var(--tw-overlay-scrim); }
.tw-drawer-panel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 18rem;
  background: var(--tw-bg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: 8px 0 32px rgba(0,0,0,0.18);
  overflow-y: auto;
}
.tw-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.tw-drawer-head .tw-icons { display: flex; align-items: center; gap: 0.25rem; }
.tw-drawer-panel > a.tw-drawer-link,
.tw-drawer-panel > button.tw-drawer-link {
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--tw-line);
  padding: 0.9rem 0;
  font-family: var(--tw-serif);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--tw-text);
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
.tw-hamburger { display: inline-flex; }
@media (min-width: 1024px) { .tw-hamburger { display: none; } }

/* ============================================================
   6. Footer (always dark)
   ============================================================ */
.tw-footer { background: #141414; color: var(--tw-ivory); margin-top: 4rem; }
.tw-footer-grid {
  max-width: var(--tw-maxw);
  margin: 0 auto;
  padding: 3rem var(--tw-pad) 2rem;
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .tw-footer-grid { grid-template-columns: repeat(4, 1fr); padding-top: 4rem; padding-bottom: 4rem; }
}
.tw-footer h4.tw-foot-news { font-family: var(--tw-serif); font-size: 1.5rem; margin: 0 0 0.5rem; font-weight: 500; }
.tw-footer h5 {
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  color: rgba(244, 239, 230, 0.6);
  margin: 0 0 1rem;
  text-transform: uppercase;
  font-weight: 600;
}
.tw-footer ul { list-style: none; margin: 0; padding: 0; }
.tw-footer ul li { margin-bottom: 0.625rem; font-size: 0.875rem; }
.tw-footer ul li.muted { color: rgba(244, 239, 230, 0.6); }
.tw-footer a { text-decoration: none; }
.tw-footer a:hover { opacity: 0.7; }

.tw-news-form { display: flex; border: 1px solid rgba(244, 239, 230, 0.25); margin-top: 1rem; }
.tw-news-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 0.8rem 1rem;
  color: var(--tw-ivory);
  font-size: 0.875rem;
  min-width: 0;
}
.tw-news-form input::placeholder { color: rgba(244, 239, 230, 0.4); }
.tw-news-form button {
  background: none;
  border: none;
  color: rgba(244, 239, 230, 0.8);
  padding: 0 1.25rem;
  cursor: pointer;
}
.tw-news-form button:hover { color: var(--tw-ivory); }
.tw-news-note { font-size: 0.75rem; color: rgba(244, 239, 230, 0.5); margin-top: 0.5rem; }

.tw-foot-social { max-width: var(--tw-maxw); margin: 0 auto; padding: 0 var(--tw-pad) 2rem; display: flex; gap: 1.25rem; }
.tw-foot-social a:hover { opacity: 0.7; }
.tw-foot-copy { border-top: 1px solid rgba(244, 239, 230, 0.15); }
.tw-foot-copy p {
  max-width: var(--tw-maxw);
  margin: 0 auto;
  padding: 1rem var(--tw-pad);
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: rgba(244, 239, 230, 0.5);
}

/* ============================================================
   7. Hero + homepage sections
   ============================================================ */
.tw-hero { position: relative; background: #141414; color: var(--tw-ivory); overflow: hidden; }
.tw-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.tw-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, #141414, rgba(20,20,20,0.4) 55%, rgba(20,20,20,0.2)); }
.tw-hero-inner { position: relative; max-width: var(--tw-maxw); margin: 0 auto; padding: 6rem var(--tw-pad); }
@media (min-width: 768px) { .tw-hero-inner { padding: 9rem var(--tw-pad); } }
.tw-hero h1 {
  font-family: var(--tw-serif);
  font-size: 3rem;
  line-height: 1.05;
  margin: 0 0 1.25rem;
  font-weight: 500;
}
@media (min-width: 768px) { .tw-hero h1 { font-size: 4.5rem; } }
@media (min-width: 1024px) { .tw-hero h1 { font-size: 5.5rem; } }
.tw-hero .tw-hero-kicker { font-size: 11px; letter-spacing: 0.45em; color: rgba(244,239,230,0.7); margin-bottom: 1.25rem; }
.tw-hero p.tw-hero-lede { color: rgba(244,239,230,0.75); max-width: 28rem; font-size: 0.9375rem; line-height: 1.7; margin: 0 0 2rem; }
.tw-hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

.tw-marquee { overflow: hidden; white-space: nowrap; }
.tw-marquee.offer {
  background: #141414;
  color: rgba(244, 239, 230, 0.9);
  border-top: 1px solid rgba(244, 239, 230, 0.1);
  padding: 0.65rem 0;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.tw-marquee.trust { border-top: 1px solid var(--tw-line); border-bottom: 1px solid var(--tw-line); padding: 0.8rem 0; font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; }
.tw-marquee span.tw-mi { padding-right: 2rem; }

.tw-section { padding: 2.5rem 0; }
@media (min-width: 768px) { .tw-section { padding: 3.5rem 0; } }

.tw-cat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
@media (min-width: 768px) { .tw-cat-tiles { gap: 1rem; } }
.tw-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--tw-surface);
  aspect-ratio: 4 / 5;
  text-decoration: none;
}
@media (min-width: 768px) { .tw-tile { aspect-ratio: 16 / 10; } }
.tw-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.tw-tile:hover img { transform: scale(1.05); }
.tw-tile-shade { position: absolute; inset: 0; background: rgba(20,20,20,0.35); transition: background 0.3s; }
.tw-tile:hover .tw-tile-shade { background: rgba(20,20,20,0.25); }
.tw-tile-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.75rem; color: var(--tw-ivory); }
@media (min-width: 768px) { .tw-tile-cap { padding: 1.25rem; } }
.tw-tile-cap .t { font-family: var(--tw-serif); font-size: 1.125rem; letter-spacing: 0.04em; margin: 0; }
@media (min-width: 768px) { .tw-tile-cap .t { font-size: 1.5rem; } }
.tw-tile-cap .b { font-size: 10px; letter-spacing: 0.25em; color: rgba(244,239,230,0.75); margin: 0.15rem 0 0; text-transform: uppercase; }
@media (min-width: 768px) { .tw-tile-cap .b { font-size: 0.75rem; } }

/* Carousel */
.tw-carousel-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 0.5rem; }
.tw-carousel-head h2 { font-family: var(--tw-serif); font-size: 1.875rem; letter-spacing: 0.02em; margin: 0; font-weight: 500; }
@media (min-width: 768px) { .tw-carousel-head h2 { font-size: 2.25rem; } }
.tw-carousel-sub { font-size: 0.875rem; color: var(--tw-muted); margin: 0 0 1.5rem; }
.tw-viewall { font-size: 0.875rem; letter-spacing: 0.2em; text-decoration: underline; text-underline-offset: 4px; text-transform: uppercase; }
.tw-viewall:hover { opacity: 0.6; }
.tw-carousel-track { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
@media (min-width: 768px) { .tw-carousel-track { gap: 1.25rem; } }
.tw-carousel-item { scroll-snap-align: start; flex-shrink: 0; flex-basis: 68%; }
@media (min-width: 640px) { .tw-carousel-item { flex-basis: 42%; } }
@media (min-width: 768px) { .tw-carousel-item { flex-basis: 30%; } }
@media (min-width: 1024px) { .tw-carousel-item { flex-basis: 22.5%; } }
.tw-carousel-arrows { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.tw-arrow {
  width: 2.5rem; height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid var(--tw-line-strong);
  background: transparent;
  color: var(--tw-text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s;
}
.tw-arrow:hover { opacity: 0.7; }

/* Product card */
.tw-card { display: block; text-decoration: none; color: inherit; }
.tw-card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tw-surface); }
.tw-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.tw-card:hover .tw-card-media img { transform: scale(1.05); }
.tw-card-media .tw-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--tw-serif); font-size: 1.75rem; color: var(--tw-muted); }
.tw-badge {
  position: absolute;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.65rem;
  border-radius: 9999px;
}
@media (min-width: 768px) { .tw-badge { font-size: 0.75rem; } }
.tw-badge.save { top: 0.75rem; left: 0.75rem; background: var(--tw-red); color: #fff; }
.tw-badge.soldout { top: 0.75rem; left: 0.75rem; background: rgba(20,20,20,0.85); color: var(--tw-ivory); letter-spacing: 0.2em; }
.tw-badge.new { top: 0.75rem; right: 0.75rem; background: rgba(244,239,230,0.9); color: #141414; letter-spacing: 0.2em; }
.tw-card-body { padding-top: 0.75rem; }
.tw-card-body h3 { font-family: var(--tw-serif); font-size: 1rem; line-height: 1.3; margin: 0; font-weight: 500; transition: opacity 0.2s; }
@media (min-width: 768px) { .tw-card-body h3 { font-size: 1.125rem; } }
.tw-card:hover .tw-card-body h3 { opacity: 0.7; }
.tw-card-price { margin-top: 0.25rem; display: flex; align-items: baseline; gap: 0.5rem; }
.tw-card-price .now { font-weight: 500; }
.tw-card-price .was { color: var(--tw-muted); font-size: 0.875rem; text-decoration: line-through; }

/* Split sections */
.tw-split { display: grid; gap: 2rem; align-items: center; padding: 3rem 0; }
@media (min-width: 768px) { .tw-split { grid-template-columns: 1fr 1fr; gap: 3.5rem; padding: 5rem 0; } }
.tw-split h2 { font-family: var(--tw-serif); font-size: 2.25rem; line-height: 1.15; margin: 0 0 1.5rem; font-weight: 500; }
@media (min-width: 768px) { .tw-split h2 { font-size: 3rem; } }
.tw-split .tw-body-copy { color: var(--tw-text); opacity: 0.8; font-size: 0.9375rem; line-height: 1.75; }
.tw-split .tw-body-copy p { margin: 0 0 1rem; }
.tw-split-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--tw-surface); }
@media (min-width: 768px) { .tw-split-media { aspect-ratio: 3 / 4; } }
.tw-split-media img { width: 100%; height: 100%; object-fit: cover; }
.tw-split-media .tw-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--tw-serif); font-size: 1.75rem; color: var(--tw-muted); }
.tw-split .tw-order-2 { order: 2; }
.tw-split .tw-order-1 { order: 1; }
@media (min-width: 768px) {
  .tw-split .tw-order-md-1 { order: 1; }
  .tw-split .tw-order-md-2 { order: 2; }
}
.tw-split .tw-cta { margin-top: 2rem; }

/* Dark category banner */
.tw-dark-banner { background: #141414; color: var(--tw-ivory); }
.tw-dark-banner-inner { max-width: var(--tw-maxw); margin: 0 auto; padding: 3rem var(--tw-pad); }
@media (min-width: 768px) { .tw-dark-banner-inner { padding: 4rem var(--tw-pad); } }
.tw-dark-banner h2 { font-family: var(--tw-serif); font-size: 1.5rem; margin: 0 0 2rem; font-weight: 500; }
@media (min-width: 768px) { .tw-dark-banner h2 { font-size: 2.25rem; } }
.tw-dark-banner .tw-cat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
@media (min-width: 768px) { .tw-dark-banner .tw-cat-row { gap: 1rem; } }
.tw-dark-banner a {
  display: block;
  border: 1px solid rgba(244,239,230,0.2);
  padding: 1.5rem 0.5rem;
  text-align: center;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
@media (min-width: 768px) { .tw-dark-banner a { padding: 2.5rem 0.5rem; } }
.tw-dark-banner a:hover { background: var(--tw-ivory); color: #141414; }
.tw-dark-banner a .t { font-family: var(--tw-serif); font-size: 1.125rem; letter-spacing: 0.04em; margin: 0; }
@media (min-width: 768px) { .tw-dark-banner a .t { font-size: 1.5rem; } }
.tw-dark-banner a .b { font-size: 10px; letter-spacing: 0.3em; opacity: 0.6; margin: 0.25rem 0 0; }
@media (min-width: 768px) { .tw-dark-banner a .b { font-size: 0.75rem; } }

/* Reviews */
.tw-reviews h2 { font-family: var(--tw-serif); font-size: 1.875rem; margin: 0 0 0.25rem; font-weight: 500; }
@media (min-width: 768px) { .tw-reviews h2 { font-size: 2.25rem; } }
.tw-reviews .tw-illus { font-size: 0.75rem; color: var(--tw-muted); letter-spacing: 0.04em; margin: 0 0 2rem; }
.tw-review-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
.tw-review {
  scroll-snap-align: start;
  flex-shrink: 0;
  flex-basis: 80%;
  border: 1px solid var(--tw-line);
  background: var(--tw-card);
  padding: 1.5rem;
}
@media (min-width: 640px) { .tw-review { flex-basis: 45%; } }
@media (min-width: 1024px) { .tw-review { flex-basis: 30%; } }
.tw-stars { display: flex; gap: 0.15rem; color: #f59e0b; }
.tw-review p.tw-quote { font-size: 0.875rem; line-height: 1.7; color: var(--tw-text); opacity: 0.8; margin: 1rem 0; }
.tw-review p.tw-who { font-size: 0.75rem; color: var(--tw-muted); letter-spacing: 0.2em; margin: 0; text-transform: uppercase; }

/* Trust icons */
.tw-trust { border-top: 1px solid var(--tw-line); }
.tw-trust-inner { max-width: var(--tw-maxw); margin: 0 auto; padding: 2.5rem var(--tw-pad); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; }
.tw-trust .tw-ti-icon {
  width: 3rem; height: 3rem;
  border-radius: 9999px;
  background: var(--tw-text);
  color: var(--tw-bg);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 0.75rem;
}
.tw-trust .t { font-weight: 500; font-size: 0.875rem; margin: 0; }
@media (min-width: 768px) { .tw-trust .t { font-size: 1rem; } }
.tw-trust .d { font-size: 0.75rem; color: var(--tw-muted); margin: 0.25rem 0 0; }

/* ============================================================
   8. Shop archive (sidebar filters + drawer + grid)
   ============================================================ */
.tw-page-head { padding: 2rem 0 0.5rem; }
.tw-page-head h1 { font-family: var(--tw-serif); font-size: 2.5rem; margin: 0 0 0.5rem; font-weight: 500; }
@media (min-width: 768px) { .tw-page-head h1 { font-size: 3rem; } }
.tw-page-head .tw-count { font-size: 0.875rem; color: var(--tw-muted); margin: 0 0 2rem; }

.tw-shop-layout { display: block; padding-bottom: 3rem; }
@media (min-width: 768px) {
  .tw-shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: start; }
}
.tw-filters-desktop { display: none; }
@media (min-width: 768px) {
  .tw-filters-desktop { display: block; position: sticky; top: 9rem; }
}
.tw-filter-group { margin-bottom: 1.25rem; }
.tw-filter-group .tw-eyebrow { font-size: 11px; letter-spacing: 0.3em; margin-bottom: 0.5rem; }
.tw-select, .tw-input {
  width: 100%;
  border: 1px solid var(--tw-line-strong);
  background: var(--tw-input-bg);
  color: var(--tw-text);
  padding: 0.7rem 0.8rem;
  font-size: 0.875rem;
  outline: none;
  font-family: var(--tw-sans);
}
.tw-select:focus, .tw-input:focus { border-color: var(--tw-text); }
.tw-select option { color: #141414; }
.tw-check { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; cursor: pointer; }
.tw-check input { width: 1rem; height: 1rem; accent-color: #141414; }

.tw-shop-search { margin-bottom: 1.5rem; }

.tw-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.5rem; }
.tw-toolbar .tw-showing { display: none; font-size: 0.875rem; color: var(--tw-muted); }
@media (min-width: 768px) { .tw-toolbar .tw-showing { display: block; } }
.tw-filters-btn {
  display: inline-block;
  border: 1px solid var(--tw-line-strong);
  background: transparent;
  color: var(--tw-text);
  padding: 0.65rem 1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  font-family: var(--tw-sans);
}
@media (min-width: 768px) { .tw-filters-btn { display: none; } }
.tw-toolbar .tw-select { width: auto; }

.tw-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 768px) { .tw-product-grid { gap: 1.5rem; } }
@media (min-width: 1024px) { .tw-product-grid { grid-template-columns: repeat(3, 1fr); } }

.tw-empty { text-align: center; padding: 4rem 1rem; }
.tw-empty h2 { font-family: var(--tw-serif); font-size: 1.5rem; margin: 0 0 0.5rem; }
.tw-empty p { color: var(--tw-muted); font-size: 0.875rem; margin: 0; }

/* Mobile filter drawer (reuses drawer shell) */
.tw-filter-drawer { display: none; position: fixed; inset: 0; z-index: 60; }
.tw-filter-drawer.open { display: block; }
@media (min-width: 768px) { .tw-filter-drawer { display: none !important; } }
.tw-filter-panel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 20rem; max-width: 85vw;
  background: var(--tw-bg);
  padding: 1.5rem;
  overflow-y: auto;
  box-shadow: 8px 0 32px rgba(0,0,0,0.18);
}
.tw-filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.tw-filter-head h2 { font-family: var(--tw-serif); font-size: 1.5rem; margin: 0; }

/* ============================================================
   9. Single product
   ============================================================ */
.tw-product { display: grid; gap: 2.5rem; padding: 2rem 0 3rem; }
@media (min-width: 768px) { .tw-product { grid-template-columns: 1fr 1fr; padding: 3rem 0 4rem; } }

.tw-gallery-main { position: relative; aspect-ratio: 4 / 5; background: var(--tw-surface); overflow: hidden; }
.tw-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.tw-gallery-main .tw-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--tw-serif); font-size: 1.75rem; color: var(--tw-muted); }
.tw-thumbs { display: flex; gap: 0.5rem; margin-top: 0.75rem; overflow-x: auto; }
.tw-thumb {
  width: 4rem; height: 5rem;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--tw-surface);
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, border-color 0.2s;
}
.tw-thumb.active { border-color: var(--tw-text); opacity: 1; }
.tw-thumb:hover { opacity: 1; }
.tw-thumb img { width: 100%; height: 100%; object-fit: cover; }

.tw-pd-cat { font-size: 11px; letter-spacing: 0.35em; color: var(--tw-muted); text-transform: uppercase; margin: 0; }
.tw-pd-title { font-family: var(--tw-serif); font-size: 1.875rem; line-height: 1.2; margin: 0.5rem 0 0; font-weight: 500; }
@media (min-width: 768px) { .tw-pd-title { font-size: 3rem; } }
.tw-pd-price { margin-top: 1rem; display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.tw-pd-price .now { font-size: 1.5rem; font-weight: 500; }
.tw-pd-price .was { color: var(--tw-muted); text-decoration: line-through; }
.tw-pd-price .save { color: var(--tw-red); font-size: 0.875rem; font-weight: 500; }
.tw-pd-stock { font-size: 0.875rem; margin-top: 0.5rem; }
.tw-pd-stock.in { color: #166534; }
html.dark .tw-pd-stock.in { color: #4ade80; }
.tw-pd-stock.out { color: var(--tw-red); }

.tw-opt-label { font-size: 0.75rem; letter-spacing: 0.3em; color: var(--tw-muted); text-transform: uppercase; margin: 0 0 0.5rem; }
.tw-opt-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tw-opt-btn {
  min-width: 3rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--tw-line-strong);
  background: transparent;
  color: var(--tw-text);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  font-family: var(--tw-sans);
}
.tw-opt-btn:hover { border-color: var(--tw-text); }
.tw-opt-btn.selected { background: var(--tw-text); color: var(--tw-bg); border-color: var(--tw-text); }
.tw-opt-block { margin-top: 1.75rem; }
.tw-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.tw-buy-row { display: flex; align-items: stretch; gap: 0.75rem; margin-top: 1.75rem; }
.tw-qty { display: flex; align-items: center; border: 1px solid var(--tw-line-strong); }
.tw-qty button {
  background: none; border: none; color: var(--tw-text);
  padding: 0.9rem 1rem; font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.tw-qty button:hover { opacity: 0.6; }
.tw-qty input {
  width: 2rem; text-align: center; border: none; background: transparent;
  color: var(--tw-text); font-size: 0.875rem; outline: none;
  -moz-appearance: textfield; appearance: textfield;
}
.tw-qty input::-webkit-outer-spin-button, .tw-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tw-buy-row .tw-btn { flex: 1; }
.tw-buy-now { width: 100%; margin-top: 0.75rem; }
.tw-form-error { color: var(--tw-red); font-size: 0.875rem; margin-top: 0.75rem; }

/* Accordions */
.tw-accordion { border-bottom: 1px solid var(--tw-line); }
.tw-accordion:first-of-type { border-top: 1px solid var(--tw-line); }
.tw-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--tw-text);
  padding: 1rem 0;
  cursor: pointer;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--tw-sans);
}
.tw-accordion-toggle svg { transition: transform 0.25s; }
.tw-accordion.open .tw-accordion-toggle svg { transform: rotate(45deg); }
.tw-accordion-body { display: none; padding-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.7; color: var(--tw-text); opacity: 0.75; }
.tw-accordion.open .tw-accordion-body { display: block; }
.tw-accordions { margin-top: 2rem; }

/* ============================================================
   10. Cart
   ============================================================ */
.tw-cart-layout { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 1024px) { .tw-cart-layout { grid-template-columns: 1fr 360px; } }
.tw-cart-item { display: flex; gap: 1rem; border-bottom: 1px solid var(--tw-line); padding-bottom: 1rem; margin-bottom: 1rem; }
.tw-cart-item .tw-ci-img { width: 6rem; flex-shrink: 0; background: var(--tw-surface); aspect-ratio: 4 / 5; overflow: hidden; }
.tw-cart-item .tw-ci-img img { width: 100%; height: 100%; object-fit: cover; }
.tw-cart-item .tw-ci-main { flex: 1; min-width: 0; }
.tw-cart-item h3 { font-family: var(--tw-serif); font-size: 1.125rem; line-height: 1.3; margin: 0; font-weight: 500; }
@media (min-width: 768px) { .tw-cart-item h3 { font-size: 1.25rem; } }
.tw-cart-item .tw-ci-meta { font-size: 0.75rem; color: var(--tw-muted); letter-spacing: 0.04em; margin: 0.25rem 0 0; }
.tw-cart-item .tw-ci-row { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; }
.tw-cart-item .tw-ci-price { font-weight: 500; }
.tw-cart-item .tw-ci-remove {
  align-self: flex-start;
  background: none; border: none; color: var(--tw-muted);
  font-size: 0.75rem; letter-spacing: 0.2em;
  text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer; padding: 0.25rem;
  font-family: var(--tw-sans);
}
.tw-cart-item .tw-ci-remove:hover { color: var(--tw-text); }
.tw-cart-item .tw-qty button { padding: 0.4rem 0.75rem; }

.tw-summary {
  border: 1px solid var(--tw-line-strong);
  background: var(--tw-card);
  padding: 1.5rem;
  height: fit-content;
}
@media (min-width: 1024px) { .tw-summary { position: sticky; top: 9rem; } }
.tw-summary h2 { font-family: var(--tw-serif); font-size: 1.5rem; margin: 0 0 1.25rem; font-weight: 500; }
.tw-sum-row { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 0.5rem; }
.tw-sum-row .lbl { color: var(--tw-muted); }
.tw-sum-total { display: flex; justify-content: space-between; font-size: 1.125rem; font-weight: 600; border-top: 1px solid var(--tw-line-strong); padding-top: 1rem; margin: 1rem 0 1.5rem; }
.tw-sum-note { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--tw-line); font-size: 0.75rem; color: var(--tw-muted); }
.tw-sum-note p { margin: 0 0 0.25rem; }
.tw-continue-link { display: block; text-align: center; font-size: 0.875rem; letter-spacing: 0.2em; text-decoration: underline; text-underline-offset: 4px; margin-top: 1rem; text-transform: uppercase; }
.tw-continue-link:hover { opacity: 0.6; }

/* ============================================================
   11. Checkout (COD only)
   ============================================================ */
.tw-checkout-grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 1024px) { .tw-checkout-grid { grid-template-columns: 1fr 380px; } }
.tw-checkout-section { margin-bottom: 1.75rem; }
.tw-field { margin-bottom: 1rem; }
.tw-field .tw-eyebrow { font-size: 11px; letter-spacing: 0.3em; }
.tw-checkout-section > .tw-eyebrow { margin-bottom: 1rem; }
.tw-field-error { color: var(--tw-red); font-size: 0.75rem; margin-top: 0.25rem; }

.tw-pay-box { border: 1px solid var(--tw-line-strong); background: var(--tw-card); padding: 1.25rem; }
.tw-pay-box .tw-eyebrow { font-size: 11px; letter-spacing: 0.3em; margin-bottom: 0.75rem; }
.tw-pay-row { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
.tw-pay-row input[type="radio"] { accent-color: #141414; }
.tw-pay-row .tw-hint { font-size: 0.75rem; color: var(--tw-muted); }
.tw-place-order { width: 100%; margin-top: 1.5rem; }
.tw-checkout-agree { font-size: 0.75rem; color: var(--tw-muted); text-align: center; margin-top: 0.75rem; }

.tw-order-items { max-height: 20rem; overflow-y: auto; padding-right: 0.25rem; }
.tw-order-item { display: flex; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.875rem; }
.tw-order-item .tw-oi-img { width: 3.5rem; height: 4rem; flex-shrink: 0; background: var(--tw-surface); overflow: hidden; }
.tw-order-item .tw-oi-img img { width: 100%; height: 100%; object-fit: cover; }
.tw-order-item .tw-oi-main { flex: 1; min-width: 0; }
.tw-order-item .tw-oi-name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-order-item .tw-oi-meta { font-size: 0.75rem; color: var(--tw-muted); margin: 0.15rem 0 0; }
.tw-order-item .tw-oi-price { flex-shrink: 0; }

/* WooCommerce notices (Woo styles are dequeued; style them here) */
.woocommerce-notices-wrapper { margin-bottom: 1rem; }
.woocommerce-error, .woocommerce-info, .woocommerce-message {
  list-style: none;
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--tw-line-strong);
  background: var(--tw-card);
  font-size: 0.875rem;
}
.woocommerce-error { border-color: var(--tw-red); color: var(--tw-red); }

/* ============================================================
   12. Thank-you page
   ============================================================ */
.tw-thankyou { max-width: 42rem; margin: 0 auto; padding: 5rem var(--tw-pad); text-align: center; }
.tw-thankyou .tw-check-circle {
  width: 4rem; height: 4rem;
  margin: 0 auto 1.5rem;
  border-radius: 9999px;
  background: var(--tw-text);
  color: var(--tw-bg);
  display: flex; align-items: center; justify-content: center;
}
.tw-thankyou h1 { font-family: var(--tw-serif); font-size: 2.5rem; margin: 0 0 1rem; font-weight: 500; }
.tw-thankyou > p { color: var(--tw-text); opacity: 0.8; margin: 0 auto; max-width: 26rem; }
.tw-order-box {
  display: inline-block;
  margin-top: 1.5rem;
  border: 1px solid var(--tw-line-strong);
  background: var(--tw-card);
  padding: 1rem 2rem;
}
.tw-order-box .tw-eyebrow { margin-bottom: 0.25rem; }
.tw-order-box .tw-order-no { font-family: var(--tw-serif); font-size: 1.5rem; letter-spacing: 0.06em; margin: 0; }
.tw-thankyou .tw-cta { margin-top: 2.5rem; }
.tw-thankyou .tw-wa-note { margin-top: 1.5rem; font-size: 0.875rem; color: var(--tw-muted); }

/* ============================================================
   13. Contact / About + policies
   ============================================================ */
.tw-contact { max-width: 48rem; margin: 0 auto; padding: 3rem var(--tw-pad) 4rem; }
.tw-contact-head { text-align: center; margin-bottom: 2.5rem; }
.tw-contact-head h1 { font-family: var(--tw-serif); font-size: 2.5rem; margin: 0.5rem 0; font-weight: 500; }
@media (min-width: 768px) { .tw-contact-head h1 { font-size: 3rem; } }
.tw-contact-head .tw-tagline { color: var(--tw-muted); font-size: 0.875rem; letter-spacing: 0.3em; margin: 0; }
.tw-contact .tw-about-copy { color: var(--tw-text); opacity: 0.85; line-height: 1.75; }
.tw-contact .tw-about-copy p { margin: 0 0 1.25rem; }
.tw-contact-cards { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .tw-contact-cards { grid-template-columns: 1fr 1fr; } }
.tw-contact-card {
  display: block;
  border: 1px solid var(--tw-line-strong);
  background: var(--tw-card);
  padding: 1.5rem;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s;
}
.tw-contact-card:hover { border-color: var(--tw-text); }
.tw-contact-card .tw-eyebrow { margin-bottom: 0.5rem; }
.tw-contact-card .tw-big { font-weight: 500; margin: 0; }
.tw-contact-card .tw-small { font-size: 0.875rem; color: var(--tw-muted); margin: 0.25rem 0 0; }
.tw-policy { border-top: 1px solid var(--tw-line); padding-top: 2rem; margin-top: 2.5rem; scroll-margin-top: 8rem; }
.tw-policy h2 { font-family: var(--tw-serif); font-size: 1.5rem; margin: 0 0 0.75rem; font-weight: 500; }
.tw-policy .tw-policy-body { font-size: 0.875rem; line-height: 1.7; color: var(--tw-text); opacity: 0.75; }
.tw-policy .tw-policy-body p { margin: 0 0 0.5rem; }

/* ============================================================
   14. Generic content pages + 404
   ============================================================ */
.tw-content { max-width: 48rem; margin: 0 auto; padding: 3rem var(--tw-pad) 4rem; }
.tw-content h1 { font-family: var(--tw-serif); font-size: 2.5rem; font-weight: 500; margin: 0 0 1.5rem; }
.tw-404 { text-align: center; padding: 5rem var(--tw-pad); }
.tw-404 h1 { font-family: var(--tw-serif); font-size: 4rem; margin: 0 0 1rem; }
.tw-404 p { color: var(--tw-muted); margin: 0 0 2rem; }

/* Skip link */
.tw-skip { position: absolute; left: -9999px; top: 0; background: var(--tw-text); color: var(--tw-bg); padding: 0.75rem 1rem; z-index: 100; }
.tw-skip:focus { left: 0; }

/* ============================================================
   15. Checkout forms, payment methods, receipt upload
   (WooCommerce's own styles are dequeued; styled here)
   ============================================================ */
.woocommerce-checkout .form-row,
.woocommerce-form .form-row {
  margin-bottom: 1rem;
}
.woocommerce-checkout .form-row label,
.woocommerce-form .form-row label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tw-muted);
  margin-bottom: 0.4rem;
}
.woocommerce-checkout .form-row label .required,
.woocommerce-form .form-row label .required {
  color: var(--tw-red);
}
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-form .form-row input,
.woocommerce-form .form-row textarea,
.woocommerce-form .form-row select {
  width: 100%;
  border: 1px solid var(--tw-line-strong);
  background: var(--tw-input-bg);
  color: var(--tw-text);
  padding: 0.8rem 0.9rem;
  font-size: 0.9375rem;
  outline: none;
  font-family: var(--tw-sans);
  border-radius: 0;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: var(--tw-text);
}
.woocommerce-checkout .form-row.woocommerce-invalid input,
.woocommerce-checkout .form-row.woocommerce-invalid textarea {
  border-color: var(--tw-red);
}

/* Payment methods list */
.wc_payment_methods,
.woocommerce-checkout-payment ul.payment_methods {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.wc_payment_method,
.woocommerce-checkout-payment li.wc_payment_method {
  border: 1px solid var(--tw-line-strong);
  background: var(--tw-card);
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.wc_payment_method > label,
.woocommerce-checkout-payment li.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}
.wc_payment_method > label input[type="radio"],
.woocommerce-checkout-payment li.wc_payment_method > label input[type="radio"] {
  accent-color: #141414;
  width: 1.1rem;
  height: 1.1rem;
}
.wc_payment_method .payment_box,
.woocommerce-checkout-payment .payment_box {
  margin-top: 0.9rem;
  font-size: 0.875rem;
  color: var(--tw-text);
  opacity: 0.85;
}
.wc_payment_method .payment_box p,
.woocommerce-checkout-payment .payment_box p {
  margin: 0 0 0.75rem;
}

/* Bank details + receipt upload */
.twelve-bank-details {
  border-left: 2px solid var(--tw-line-strong);
  padding: 0.25rem 0 0.25rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}
.twelve-bank-details--placeholder {
  color: var(--tw-muted);
  font-style: italic;
}
.twelve-receipt-row input[type="file"] {
  width: 100%;
  border: 1px dashed var(--tw-line-strong);
  background: var(--tw-input-bg);
  padding: 0.9rem;
  font-size: 0.875rem;
  color: var(--tw-text);
  cursor: pointer;
}
.twelve-receipt-row .description {
  display: block;
  font-size: 0.75rem;
  color: var(--tw-muted);
  margin-top: 0.35rem;
}

/* Place-order row */
.woocommerce-checkout-payment .place-order,
.woocommerce-checkout .form-row.place-order {
  margin-top: 1.25rem;
}
.woocommerce-checkout-payment .place-order .button,
#place_order {
  display: block;
  width: 100%;
  background: var(--tw-btn-bg);
  color: var(--tw-btn-text);
  font-size: 0.8125rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 1.1rem 2.5rem;
  border: 1px solid var(--tw-btn-bg);
  cursor: pointer;
  font-family: var(--tw-sans);
  border-radius: 0;
}
.woocommerce-checkout-payment .place-order .button:hover,
#place_order:hover {
  opacity: 0.9;
}