/*
Theme Name: Tubular Theme
Theme URI: https://tubular.com.ar
Author: Tubular
Description: High-end modular furniture WooCommerce theme - Swiss-inspired architectural design
Version: 1.4.8
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: tubular-theme
*/

/* ==========================================================================
   0. Design Tokens
   ========================================================================== */

:root {
  /* Colors */
  --primary: #1e314b;
  --primary-container: #354763;
  --secondary: #44474d;
  --secondary-container: #e2e1ec;
  --surface: #fcf9f8;
  --surface-container-low: #f6f3f2;
  --surface-container: #f0edec;
  --on-surface: #1c1b1b;
  --on-surface-variant: #44474d;
  --on-primary: #ffffff;
  --outline: #74777f;
  --outline-variant: #c4c6ce;
  --ghost-border: rgba(196, 198, 206, 0.15);
  --card-bg: #EBECDF;
  --error: #ba1a1a;
  --success: #1b6e2e;

  /* Typography */
  --font-family: 'Public Sans', sans-serif;
  --font-size-xs: 0.6875rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 3rem;
  --font-size-display: clamp(3rem, 8vw, 6rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --nav-height: 5rem;
  --container-max: 1440px;
  --container-wide: 1440px;
  --sidebar-width: 256px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ==========================================================================
   1. Reset & Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--on-surface);
  background-color: var(--surface);
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border-radius: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* ==========================================================================
   2. Utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.ghost-border-bottom {
  border-bottom: 1px solid var(--ghost-border);
}

.surface-container-low {
  background-color: var(--surface-container-low);
}

/* ==========================================================================
   3. Header / Navigation
   ========================================================================== */

.tubular-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: rgba(252, 249, 248, 0.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ghost-border);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.tubular-header.is-scrolled {
  background: rgba(252, 249, 248, 0.97);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tubular-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.tubular-nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.tubular-nav__logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tubular-nav__logo {
  max-height: 2.5rem;
  width: auto;
}

.tubular-nav__wordmark {
  font-size: var(--font-size-lg);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--on-surface);
}

.tubular-nav__menu-desktop {
  display: flex;
  align-items: center;
}

.tubular-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.tubular-nav__list a {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tubular-nav__list a:hover {
  color: var(--primary);
}

.tubular-nav__list .current-menu-item a {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

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

.tubular-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.25rem;
  color: var(--on-surface-variant);
  transition: color var(--transition-fast);
  position: relative;
}

.tubular-nav__icon:hover {
  color: var(--primary);
}

.tubular-nav__cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tubular-nav__cart-count {
  position: absolute;
  top: -2px;
  right: -6px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.5625rem;
  font-weight: 700;
  min-width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tubular-nav__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--on-surface);
}

@media (max-width: 767px) {
  .tubular-nav__hamburger {
    display: flex;
    order: -1;
  }
  .tubular-nav__logo {
    max-height: 2rem !important;
  }
  .tubular-nav__brand {
    flex: 1;
    justify-content: center;
  }
}

.tubular-header-spacer {
  height: 3rem;
}

/* ==========================================================================
   4. Mobile Navigation
   ========================================================================== */

.tubular-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--transition-slow), opacity var(--transition-base), visibility var(--transition-base);
}

.tubular-mobile-nav.is-open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.tubular-mobile-nav__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-6);
  height: var(--nav-height);
  border-bottom: 1px solid var(--ghost-border);
}

.tubular-mobile-nav__title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tubular-mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  color: var(--on-surface);
}

.tubular-mobile-nav__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8) var(--space-6);
}

.tubular-mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tubular-mobile-nav__list li {
  border-bottom: 1px solid var(--ghost-border);
}

.tubular-mobile-nav__list a {
  display: block;
  padding: var(--space-5) 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-surface);
  transition: color var(--transition-fast);
}

.tubular-mobile-nav__list a:hover {
  color: var(--primary);
}

.tubular-mobile-nav__footer {
  padding: var(--space-6);
  border-top: 1px solid var(--ghost-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tubular-mobile-nav__link {
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
}

.tubular-mobile-nav__link:hover {
  color: var(--primary);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.tubular-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 1rem 2.5rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 0;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  line-height: 1;
  white-space: nowrap;
}

.tubular-btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}

.tubular-btn--primary:hover {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  box-shadow: 0 4px 16px rgba(30, 49, 75, 0.2);
}

.tubular-btn--ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--ghost-border);
}

.tubular-btn--ghost:hover {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.tubular-btn--inverted {
  background: var(--surface);
  color: var(--primary);
}

.tubular-btn--inverted:hover {
  background: var(--surface-container-low);
}

.tubular-btn--small {
  padding: 0.625rem 1.5rem;
  font-size: 0.625rem;
}

/* ==========================================================================
   6. Labels
   ========================================================================== */

.tubular-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
  line-height: 1;
}

.tubular-label--filled {
  background: var(--secondary-container);
  padding: var(--space-1) var(--space-3);
  display: inline-block;
}

.tubular-label--small {
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
}

/* ==========================================================================
   7. Hero Section
   ========================================================================== */

.tubular-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--surface-container);
  background-size: cover;
  background-position: center;
}

.tubular-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--surface) 0%,
    rgba(252, 249, 248, 0.6) 30%,
    transparent 70%
  );
  z-index: 1;
}

.tubular-hero__inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.tubular-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.tubular-hero__text {
  padding: var(--space-8) 0;
}

.tubular-hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tubular-hero__media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 70vh;
}

.tubular-hero__media-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--surface-container-low);
}

@media (max-width: 767px) {
  .tubular-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .tubular-hero__media {
    order: -1;
  }
}

.tubular-hero__heading {
  font-size: var(--font-size-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--on-surface);
  margin-bottom: var(--space-6);
  max-width: 14ch;
}

.tubular-hero__subtitle {
  font-size: var(--font-size-md);
  font-weight: 300;
  color: var(--on-surface-variant);
  max-width: 42ch;
  line-height: 1.6;
  margin-bottom: var(--space-8);
}

.tubular-hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ==========================================================================
   8. Collections / Grid
   ========================================================================== */

.tubular-collections {
  background: var(--surface-container-low);
  padding: var(--space-24) 0;
}

.tubular-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--ghost-border);
  max-width: var(--container-wide);
  margin: 0 auto;
}

.tubular-grid__card {
  background: var(--surface);
  padding: var(--space-8);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: background var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.tubular-grid__card:hover {
  background: var(--surface-container-low);
}

.tubular-grid__card--12col {
  grid-column: span 12;
}

.tubular-grid__card--8col {
  grid-column: span 8;
}

.tubular-grid__card--4col {
  grid-column: span 4;
}

.tubular-grid__card--horizontal {
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
}

.tubular-grid__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tubular-grid__card-title {
  font-size: var(--font-size-xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--on-surface);
}

.tubular-grid__card-desc {
  font-size: var(--font-size-base);
  font-weight: 300;
  color: var(--on-surface-variant);
  line-height: 1.6;
  max-width: 45ch;
}

.tubular-grid__card-media {
  overflow: hidden;
  margin-top: var(--space-6);
  flex-shrink: 0;
}

.tubular-grid__card--horizontal .tubular-grid__card-media {
  margin-top: 0;
  width: 50%;
}

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

.tubular-grid__card:hover .tubular-grid__card-media img {
  transform: scale(1.05);
}

.tubular-grid__card-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--outline);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   9. Philosophy Section
   ========================================================================== */

.tubular-philosophy {
  padding: var(--space-24) 0;
}

.tubular-philosophy__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-16);
  align-items: start;
}

.tubular-philosophy__left {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-8));
  padding: var(--space-8) 0;
}

.tubular-philosophy__heading {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--primary);
  margin-top: var(--space-4);
}

.tubular-philosophy__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-8) 0;
}

.tubular-philosophy__block {
  padding-bottom: var(--space-12);
}

.ghost-border-bottom {
  border-bottom: 1px solid rgba(196, 198, 206, 0.15);
}

.tubular-philosophy__block-title,
.tubular-philosophy__block h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-4);
}

.tubular-philosophy__block-text,
.tubular-philosophy__block p {
  font-size: var(--font-size-lg);
  font-weight: 300;
  color: var(--on-surface-variant);
  line-height: 1.7;
}

/* ==========================================================================
   10. CTA Section
   ========================================================================== */

.tubular-cta {
  background: var(--primary);
  padding: var(--space-24) 0;
}

.tubular-cta__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  text-align: center;
}

.tubular-cta__heading {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--on-primary);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-8);
}

.tubular-cta__inner .tubular-label {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-4);
  display: block;
}

.tubular-cta__inner .tubular-btn {
  margin-top: var(--space-4);
}

/* ==========================================================================
   11. Shop / Archive Product
   ========================================================================== */

.tubular-shop {
  min-height: 100vh;
}

.tubular-shop-hero {
  padding: var(--space-20) 0 var(--space-12);
  border-bottom: 1px solid var(--ghost-border);
}

.tubular-shop-hero__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.tubular-shop-hero__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
}

.tubular-shop-hero__left {
  flex: 1;
}

.tubular-shop-hero__right {
  flex-shrink: 0;
  padding-bottom: var(--space-2);
}

.surface-container-low {
  background-color: var(--surface-container-low);
}

.tubular-shop-hero__title {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.9;
  margin-bottom: var(--space-8);
}

.tubular-shop-hero__subtitle {
  font-size: var(--font-size-lg);
  font-weight: 300;
  color: var(--on-surface-variant);
  max-width: 600px;
  line-height: 1.6;
}

.tubular-shop__filter-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid var(--ghost-border);
  background: var(--surface);
  cursor: pointer;
}

.tubular-shop__layout {
  display: flex;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
  min-height: 80vh;
}

.tubular-shop__sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  border-right: 1px solid var(--ghost-border);
  padding: var(--space-8) var(--space-6) var(--space-8) 0;
}

.tubular-shop__sidebar-inner {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-8));
}

.tubular-shop__sidebar-heading {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ghost-border);
}

.tubular-shop__filter-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.25rem;
  color: var(--on-surface-variant);
}

.tubular-shop__main {
  flex: 1;
  padding: var(--space-8) 0 var(--space-8) var(--space-6);
}

@media (max-width: 767px) {
  .tubular-shop__main {
    padding: var(--space-4) 0;
  }
}

.tubular-shop__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ghost-border);
}

.tubular-shop__toolbar-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.tubular-shop__result-count {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tubular-shop__toolbar-sort select,
.woocommerce-ordering select {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--ghost-border);
  background: var(--surface);
  padding: var(--space-2) var(--space-4);
  padding-right: var(--space-8);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
}

/* Product grid inside shop main */
.tubular-shop__main .products,
.tubular-shop__main ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16) var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tubular-shop__main .products > li {
  list-style: none;
}

.tubular-shop__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-12) 0;
}

.tubular-shop__pagination-info {
  font-size: var(--font-size-xs);
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tubular-shop__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-20) var(--space-6);
  text-align: center;
  color: var(--on-surface-variant);
}

.tubular-shop__empty p {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   12. Filter Groups
   ========================================================================== */

.tubular-filter-group {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--ghost-border);
}

.tubular-filter-group:last-child {
  border-bottom: none;
}

.tubular-filter-group__title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface);
  margin-bottom: var(--space-4);
}

.tubular-filter-group__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tubular-filter-group__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
  color: var(--on-surface-variant);
  transition: color var(--transition-fast);
}

.tubular-filter-group__link:hover {
  color: var(--primary);
}

.tubular-filter-group__item--active .tubular-filter-group__link {
  color: var(--primary);
  font-weight: 700;
}

.tubular-filter-group__count {
  font-size: 0.625rem;
  color: var(--outline);
  background: var(--surface-container-low);
  padding: 0.125rem var(--space-2);
  min-width: 1.5rem;
  text-align: center;
}

.tubular-filter-group__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tubular-filter-group__checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ==========================================================================
   13. Product Card
   ========================================================================== */

.tubular-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0;
  transition: background var(--transition-fast);
}

.tubular-card__link:hover {
  background: var(--surface-container-low);
}

.tubular-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--card-bg);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

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

.tubular-card__link:hover .tubular-card__media img {
  transform: scale(1.05);
}

.tubular-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  color: var(--outline);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tubular-card__quick-add {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(30, 49, 75, 0.9);
  padding: var(--space-3);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--transition-base), transform var(--transition-base);
  display: flex;
  justify-content: center;
}

.tubular-card__link:hover .tubular-card__quick-add {
  opacity: 1;
  transform: translateY(0);
}

.tubular-card__add-btn {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
}

.tubular-card__add-btn:hover {
  text-decoration: underline;
}

.tubular-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tubular-card__title-link {
  text-decoration: none;
  color: inherit;
}

.tubular-card__title {
  font-size: var(--font-size-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--on-surface);
}

.tubular-card__pricing {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.tubular-card__price {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--on-surface);
}

.tubular-card__installments {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--on-surface);
}

.tubular-card__cash {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: #15803d;
}
.tubular-card__cash .woocommerce-Price-amount {
  color: #15803d;
}

.tubular-card__sku {
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--outline);
}

.tubular-card__colors {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.tubular-card__color-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--ghost-border);
}

/* ==========================================================================
   14. Single Product
   ========================================================================== */

.tubular-product__layout {
  display: flex;
  min-height: 100vh;
  max-width: var(--container-wide);
  margin: 0 auto;
}

.tubular-product__gallery {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ghost-border);
}

.tubular-product__gallery-main {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--card-bg);
}

.tubular-product__gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tubular-product__gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ghost-border);
}

.tubular-product__gallery-grid-item {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--card-bg);
}

.tubular-product__gallery-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tubular-product__gallery-grid-item--full {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

.tubular-product__gallery-detail {
  padding: var(--space-8);
  background: var(--surface);
}

.tubular-product__info {
  width: 40%;
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  border-left: 1px solid var(--ghost-border);
}

.tubular-product__info-inner {
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.tubular-product__breadcrumb-bar {
  font-size: var(--font-size-xs);
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ghost-border);
}

.tubular-product__breadcrumb-bar a {
  color: var(--outline);
}

.tubular-product__breadcrumb-bar a:hover {
  color: var(--primary);
}

.tubular-product__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
}

.tubular-product__price {
  font-size: var(--font-size-xl);
  font-weight: 300;
  color: var(--on-surface);
}

.tubular-product__price del {
  color: var(--outline);
  font-size: var(--font-size-base);
}

.tubular-product__price ins {
  text-decoration: none;
  color: var(--on-surface);
}

.tubular-product__sku {
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--outline);
}

.tubular-product__short-desc {
  font-size: var(--font-size-base);
  font-weight: 300;
  color: var(--on-surface-variant);
  line-height: 1.7;
}

.tubular-product__config {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.tubular-product__config-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tubular-product__config-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface);
}

.tubular-product__config-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tubular-product__config-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tubular-product__specs {
  background: var(--surface-container-low);
  padding: var(--space-6);
}

.tubular-product__specs-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ghost-border);
}

.tubular-product__specs-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tubular-product__specs-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--ghost-border);
}

.tubular-product__specs-row:last-child {
  border-bottom: none;
}

.tubular-product__specs-row dt {
  color: var(--on-surface-variant);
  font-weight: 400;
}

.tubular-product__specs-row dd {
  color: var(--on-surface);
  font-weight: 600;
  text-align: right;
}

.tubular-product__add-to-cart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tubular-product__add-to-cart .tubular-btn {
  width: 100%;
}

.tubular-product__description {
  border-top: 1px solid var(--ghost-border);
  padding-top: var(--space-6);
}

.tubular-product__description-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-3) 0;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--on-surface);
}

.tubular-product__description-body {
  font-size: var(--font-size-base);
  font-weight: 300;
  color: var(--on-surface-variant);
  line-height: 1.7;
  padding-top: var(--space-4);
}

.tubular-product__description-body p {
  margin-bottom: var(--space-4);
}

/* Product concept / features section */
.tubular-product__concept {
  padding: var(--space-16) var(--space-6);
  border-top: 1px solid var(--ghost-border);
}

.tubular-product__concept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: var(--container-max);
  margin: 0 auto;
}

.tubular-product__concept-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--ghost-border);
}

.tubular-product__concept-icon {
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: var(--space-2);
}

.tubular-product__concept-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tubular-product__concept-text {
  font-size: var(--font-size-sm);
  font-weight: 300;
  color: var(--on-surface-variant);
  line-height: 1.6;
}

/* Related products */
.tubular-product__related {
  padding: var(--space-16) var(--space-6);
  border-top: 1px solid var(--ghost-border);
}

.tubular-product__related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ghost-border);
  max-width: var(--container-wide);
  margin: 0 auto;
}

.tubular-product__related-grid > * {
  background: var(--surface);
}

/* Section headers */
.tubular-section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.tubular-section-header__title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   15. Swatches & Sizes
   ========================================================================== */

.tubular-swatch {
  width: 2rem;
  height: 2rem;
  border: 2px solid transparent;
  padding: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast);
}

.tubular-swatch:hover {
  border-color: var(--outline-variant);
}

.tubular-swatch--active {
  border-color: var(--primary);
}

.tubular-swatch--config {
  width: 2.25rem;
  height: 2.25rem;
}

.tubular-swatch__dot {
  width: 100%;
  height: 100%;
  display: block;
}

.tubular-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--ghost-border);
  background: var(--surface);
  color: var(--on-surface);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  border-radius: 0;
}

.tubular-size-btn:hover {
  border-color: var(--outline-variant);
}

.tubular-size-btn.is-active,
.tubular-size-btn--active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.tubular-size-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.tubular-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.tubular-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  background: var(--surface);
}

.tubular-checkbox input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.tubular-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 1px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tubular-checkbox__label {
  font-size: var(--font-size-sm);
  color: var(--on-surface-variant);
}

.tubular-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  border: 1px solid var(--ghost-border);
  background: var(--surface);
  color: var(--on-surface);
  border-radius: 0;
  transition: border-color var(--transition-fast);
}

.tubular-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* ==========================================================================
   16. Cart
   ========================================================================== */

.tubular-cart {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}

.tubular-cart__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-10);
}

.tubular-cart__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-10);
  align-items: start;
}

.tubular-cart__items {
  display: flex;
  flex-direction: column;
}

.tubular-cart__header {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--on-surface);
}

.tubular-cart__header-col {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface);
}

.tubular-cart__header-col--product {}
.tubular-cart__header-col--price { text-align: center; }
.tubular-cart__header-col--qty { text-align: center; }
.tubular-cart__header-col--subtotal { text-align: right; }

.tubular-cart__row {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--ghost-border);
  align-items: center;
}

.tubular-cart__col--product {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.tubular-cart__col--price { text-align: center; }
.tubular-cart__col--qty { text-align: center; }
.tubular-cart__col--subtotal { text-align: right; font-weight: 600; }

.tubular-cart__product-img {
  width: 80px;
  height: 80px;
  background: var(--card-bg);
  overflow: hidden;
  flex-shrink: 0;
}

.tubular-cart__product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tubular-cart__product-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tubular-cart__product-name {
  font-size: var(--font-size-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tubular-cart__remove {
  font-size: var(--font-size-xs);
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color var(--transition-fast);
}

.tubular-cart__remove:hover {
  color: var(--error);
}

.tubular-cart__backorder {
  font-size: var(--font-size-xs);
  color: var(--outline);
  font-style: italic;
}

.tubular-cart__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-6);
  gap: var(--space-4);
}

.tubular-cart__coupon {
  display: flex;
  gap: var(--space-2);
}

.tubular-cart__coupon input {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ghost-border);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--surface);
  border-radius: 0;
}

.tubular-cart__coupon input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Cart Totals */
.tubular-cart__totals {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-8));
}

.tubular-cart__totals-inner {
  background: var(--surface-container-low);
  padding: var(--space-8);
}

.tubular-cart__totals-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ghost-border);
}

.tubular-cart__totals-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tubular-cart__totals-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--ghost-border);
}

.tubular-cart__totals-row--coupon {
  color: var(--success);
}

.tubular-cart__totals-row--total {
  border-bottom: none;
  padding-top: var(--space-4);
  margin-top: var(--space-2);
  border-top: 2px solid var(--on-surface);
}

.tubular-cart__totals-label {
  font-size: var(--font-size-sm);
  color: var(--on-surface-variant);
}

.tubular-cart__totals-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--on-surface);
}

.tubular-cart__totals-row--total .tubular-cart__totals-label {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--on-surface);
}

.tubular-cart__totals-row--total .tubular-cart__totals-value {
  font-size: var(--font-size-lg);
  font-weight: 900;
}

.tubular-cart__checkout-btn {
  margin-top: var(--space-6);
}

.tubular-cart__checkout-btn .tubular-btn {
  width: 100%;
}

.tubular-cart__secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--outline);
  margin-top: var(--space-4);
  text-align: center;
}

/* ==========================================================================
   17. Footer
   ========================================================================== */

.tubular-footer {
  display: block;
  width: 100%;
  max-width: none;
  background-color: var(--surface-container-low);
  border-top: 1px solid var(--ghost-border);
  padding: var(--space-16) 0 var(--space-8);
}

.tubular-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-10);
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.tubular-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tubular-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tubular-footer__wordmark {
  font-size: var(--font-size-lg);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.tubular-footer__tagline {
  font-size: var(--font-size-sm);
  font-weight: 300;
  color: var(--on-surface-variant);
  line-height: 1.6;
  max-width: 30ch;
}

.tubular-footer__copy {
  font-size: var(--font-size-xs);
  color: var(--outline);
  margin-top: var(--space-8);
}

.tubular-footer__heading {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface);
  margin-bottom: var(--space-2);
}

.tubular-footer__col .menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tubular-footer__col .menu a {
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-variant);
  transition: color var(--transition-fast);
}

.tubular-footer__col .menu a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.tubular-footer__connect {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.tubular-footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tubular-footer__newsletter-field {
  display: flex;
  gap: 0;
}

.tubular-footer__newsletter-field input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ghost-border);
  border-right: none;
  font-size: var(--font-size-xs);
  background: var(--surface);
  border-radius: 0;
}

.tubular-footer__newsletter-field input:focus {
  outline: none;
  border-color: var(--primary);
}

.tubular-footer__newsletter-field button {
  padding: var(--space-3) var(--space-5);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid var(--primary);
  cursor: pointer;
  transition: background var(--transition-fast);
  border-radius: 0;
}

.tubular-footer__newsletter-field button:hover {
  background: var(--primary-container);
}

.tubular-footer__social {
  display: flex;
  gap: var(--space-3);
}

.tubular-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--ghost-border);
  color: var(--on-surface-variant);
  font-size: 1rem;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.tubular-footer__social-link:hover {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

/* ==========================================================================
   18. Page Templates
   ========================================================================== */

.tubular-page {
  min-height: 60vh;
  padding: var(--space-12) var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
}

.tubular-page h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--space-8);
  text-transform: uppercase;
}

.tubular-page p {
  font-weight: 300;
  color: var(--on-surface-variant);
  line-height: 1.7;
  margin-bottom: var(--space-4);
  max-width: 65ch;
}

/* Archive / Blog */
.tubular-archive {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}

.tubular-archive__header {
  margin-bottom: var(--space-10);
}

.tubular-archive__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.tubular-archive__posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ghost-border);
}

.tubular-archive__posts > article {
  background: var(--surface);
  padding: var(--space-6);
}

.tubular-archive__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: var(--space-4);
  background: var(--card-bg);
}

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

.tubular-archive__posts article:hover .tubular-archive__thumb img {
  transform: scale(1.03);
}

.tubular-archive__post-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tubular-archive__post-title {
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tubular-archive__post-title a {
  color: var(--on-surface);
}

.tubular-archive__post-title a:hover {
  color: var(--primary);
}

.tubular-archive__excerpt {
  font-size: var(--font-size-sm);
  font-weight: 300;
  color: var(--on-surface-variant);
  line-height: 1.6;
}

.tubular-archive__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-10) 0;
}

/* Single Post */
.tubular-single {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}

.tubular-single h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--space-6);
  text-transform: uppercase;
}

.tubular-single p {
  font-weight: 300;
  color: var(--on-surface-variant);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}

/* 404 */
.tubular-404 {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tubular-404__inner {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.tubular-404__code {
  font-size: clamp(6rem, 15vw, 12rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--ghost-border);
  line-height: 1;
}

.tubular-404__heading {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.tubular-404__subtitle {
  font-size: var(--font-size-base);
  font-weight: 300;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-8);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

.tubular-404__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}

/* ==========================================================================
   19. WooCommerce Overrides
   ========================================================================== */

/* Forms */
.woocommerce form .form-row {
  margin-bottom: var(--space-4);
}

.woocommerce form .form-row label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface);
  margin-bottom: var(--space-2);
  display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ghost-border);
  background: var(--surface);
  font-size: var(--font-size-base);
  color: var(--on-surface);
  border-radius: 0;
  transition: border-color var(--transition-fast);
}

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

/* Notices */
.woocommerce-notices-wrapper {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
}

.woocommerce-message,
.woocommerce-info {
  padding: var(--space-4) var(--space-6);
  background: var(--surface-container-low);
  border: 1px solid var(--ghost-border);
  border-left: 3px solid var(--primary);
  font-size: var(--font-size-sm);
  color: var(--on-surface);
  margin-bottom: var(--space-4);
  border-radius: 0;
}

.woocommerce-error {
  padding: var(--space-4) var(--space-6);
  background: #fef2f2;
  border: 1px solid rgba(186, 26, 26, 0.15);
  border-left: 3px solid var(--error);
  font-size: var(--font-size-sm);
  color: var(--error);
  margin-bottom: var(--space-4);
  border-radius: 0;
}

.woocommerce-message a,
.woocommerce-info a {
  color: var(--primary);
  font-weight: 600;
}

/* Quantity */
.woocommerce .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ghost-border);
}

.woocommerce .quantity input[type="number"] {
  width: 3rem;
  height: 2.5rem;
  text-align: center;
  border: none;
  background: var(--surface);
  font-size: var(--font-size-sm);
  font-weight: 600;
  -moz-appearance: textfield;
  border-radius: 0;
}

.woocommerce .quantity input[type="number"]::-webkit-inner-spin-button,
.woocommerce .quantity input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
  font-size: var(--font-size-xs);
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-4) 0;
}

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

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

/* Pagination */
.woocommerce-pagination {
  display: flex;
  justify-content: center;
  padding: var(--space-10) 0;
}

.woocommerce-pagination ul {
  display: flex;
  gap: 0;
  border: 1px solid var(--ghost-border);
}

.woocommerce-pagination ul li {
  list-style: none;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--on-surface-variant);
  border-right: 1px solid var(--ghost-border);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.woocommerce-pagination ul li:last-child a,
.woocommerce-pagination ul li:last-child span {
  border-right: none;
}

.woocommerce-pagination ul li a:hover {
  background: var(--surface-container-low);
}

.woocommerce-pagination ul li span.current {
  background: var(--primary);
  color: var(--on-primary);
}

/* Tabs */
.woocommerce-tabs {
  margin-top: var(--space-10);
}

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

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

.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.woocommerce-tabs ul.tabs li a:hover {
  color: var(--primary);
}

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

.woocommerce-tabs .panel {
  padding: var(--space-8) 0;
}

/* Price styling */
.price,
.amount {
  font-weight: 400;
  color: var(--on-surface);
}

.price del {
  opacity: 0.5;
}

.price ins {
  text-decoration: none;
  font-weight: 600;
}

/* WC Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition-fast);
  line-height: 1;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--primary-container);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--primary);
  color: var(--on-primary);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--primary-container);
}

/* ==========================================================================
   20. Responsive
   ========================================================================== */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {

  /* Nav */
  .tubular-nav__menu-desktop {
    display: none;
  }

  .tubular-nav__hamburger {
    display: flex;
  }

  /* Grid cards */
  .tubular-grid__card--8col,
  .tubular-grid__card--4col {
    grid-column: span 6;
  }

  .tubular-grid__card--horizontal {
    flex-direction: column;
  }

  .tubular-grid__card--horizontal .tubular-grid__card-media {
    width: 100%;
  }

  /* Philosophy */
  .tubular-philosophy__inner {
    grid-template-columns: 1fr;
  }

  .tubular-philosophy__left {
    position: relative;
    top: auto;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--ghost-border);
    padding: var(--space-12) var(--space-6);
  }

  .tubular-philosophy__right {
    padding: var(--space-12) var(--space-6);
  }

  /* Shop */
  .tubular-shop__sidebar {
    display: none;
  }

  .tubular-shop__sidebar.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1500;
    width: 100%;
    background: var(--surface);
    overflow-y: auto;
    padding: var(--space-8) var(--space-6);
    border-right: none;
  }

  .tubular-shop__sidebar.is-open .tubular-shop__filter-close {
    display: flex;
  }

  .tubular-shop__filter-toggle {
    display: flex;
  }

  /* Product grid */
  .tubular-shop__main .products,
  .tubular-shop__main ul.products {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Single product */
  .tubular-product__layout {
    flex-direction: column;
  }

  .tubular-product__gallery {
    width: 100%;
  }

  .tubular-product__info {
    width: 100%;
    position: relative;
    top: auto;
    height: auto;
    border-left: none;
    border-top: 1px solid var(--ghost-border);
  }

  /* Related products */
  .tubular-product__related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Concept */
  .tubular-product__concept-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Cart */
  .tubular-cart__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .tubular-cart__totals {
    position: relative;
    top: auto;
  }

  /* Footer */
  .tubular-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  /* Archive */
  .tubular-archive__posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: < 768px */
@media (max-width: 767px) {

  :root {
    --space-6: 1.25rem;
  }

  /* Grid */
  .tubular-grid {
    grid-template-columns: 1fr;
  }

  .tubular-grid__card--12col,
  .tubular-grid__card--8col,
  .tubular-grid__card--4col {
    grid-column: span 1;
  }

  /* Hero */
  .tubular-hero__actions {
    flex-direction: column;
  }

  .tubular-hero__actions .tubular-btn {
    width: 100%;
  }

  /* Product grid */
  .tubular-shop__main .products,
  .tubular-shop__main ul.products {
    grid-template-columns: 1fr;
  }

  /* Single product gallery */
  .tubular-product__gallery-grid {
    grid-template-columns: 1fr;
  }

  .tubular-product__gallery-grid-item--full {
    grid-column: span 1;
    aspect-ratio: auto;
  }

  /* Cart header/rows */
  .tubular-cart__header {
    display: none;
  }

  .tubular-cart__row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .tubular-cart__col--price,
  .tubular-cart__col--qty,
  .tubular-cart__col--subtotal {
    text-align: left;
  }

  .tubular-cart__col--product {
    flex-direction: column;
  }

  /* Footer */
  .tubular-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* 404 */
  .tubular-404__actions {
    flex-direction: column;
  }

  /* Archive */
  .tubular-archive__posts {
    grid-template-columns: 1fr;
  }

  /* Related */
  .tubular-product__related-grid {
    grid-template-columns: 1fr;
  }

  /* CTA */
  .tubular-cta__heading {
    font-size: 2rem;
  }
}

/* ==========================================================================
   21. Print
   ========================================================================== */

@media print {
  .tubular-header,
  .tubular-header-spacer,
  .tubular-mobile-nav,
  .tubular-footer,
  .tubular-nav__hamburger,
  .tubular-nav__actions {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
}

/* ==========================================================================
   22. Animations & Transitions
   ========================================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.tubular-hero__inner {
  animation: slideUp 0.8s ease-out;
}

/* Smooth scroll offset for fixed header */
:target {
  scroll-margin-top: var(--nav-height);
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--primary);
  color: var(--on-primary);
}

/* Screen reader only */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--surface);
  color: var(--primary);
  padding: var(--space-4);
  z-index: 100000;
}

/* ==========================================================================
   Cart Drawer
   ========================================================================== */

/* -- Overlay -- */
.tubular-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  visibility: hidden;
  pointer-events: none;
}

.tubular-cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.tubular-cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tubular-cart-drawer.is-open .tubular-cart-drawer__overlay {
  opacity: 1;
}

/* -- Panel -- */
.tubular-cart-drawer__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100%;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 2001;
}

.tubular-cart-drawer.is-open .tubular-cart-drawer__panel {
  transform: translateX(0);
}

/* -- Header -- */
.tubular-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--ghost-border);
  flex-shrink: 0;
}

.tubular-cart-drawer__title {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface);
}

.tubular-cart-drawer__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: color 0.2s;
}

.tubular-cart-drawer__close:hover {
  color: var(--on-surface);
}

/* -- Scrollable items area -- */
.tubular-cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.tubular-cart-drawer__items {
  padding: 0;
}

/* -- Individual cart item -- */
.tubular-cart-drawer__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--ghost-border);
}

.tubular-cart-drawer__item-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}

.tubular-cart-drawer__item-thumb img,
img.tubular-cart-drawer__item-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 0;
  background: var(--surface-container-low);
}

.tubular-cart-drawer__item-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.tubular-cart-drawer__item-name {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tubular-cart-drawer__item-meta {
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tubular-cart-drawer__item-price {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--on-surface);
}

.tubular-cart-drawer__item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
}

/* -- Quantity control -- */
.tubular-cart-drawer__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--outline-variant);
  border-radius: 0;
}

.tubular-cart-drawer__qty-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--on-surface);
  transition: background 0.15s;
  border-radius: 0;
  padding: 0;
}

.tubular-cart-drawer__qty-btn:hover {
  background: var(--surface-container-low);
}

.tubular-cart-drawer__qty-val {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 500;
  min-width: 28px;
  text-align: center;
  color: var(--on-surface);
}

/* -- Remove button -- */
.tubular-cart-drawer__item-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: color 0.2s;
}

.tubular-cart-drawer__item-remove:hover {
  color: var(--error);
}

.tubular-cart-drawer__item-remove svg {
  width: 20px;
  height: 20px;
}

/* -- Footer (sticky bottom) -- */
.tubular-cart-drawer__footer {
  flex-shrink: 0;
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--ghost-border);
  background: var(--surface);
}

.tubular-cart-drawer__subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: var(--space-4);
}

.tubular-cart-drawer__checkout-btn {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-6);
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s;
}

.tubular-cart-drawer__checkout-btn:hover {
  background: var(--primary-container);
  color: var(--on-primary);
}

.tubular-cart-drawer__shipping-note {
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  color: var(--on-surface-variant);
  text-align: center;
  margin-top: var(--space-3);
  margin-bottom: 0;
}

/* -- Empty state -- */
.tubular-cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  gap: var(--space-4);
}

.tubular-cart-drawer__empty p {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--on-surface-variant);
  margin: 0;
}

.tubular-cart-drawer__continue-btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--primary);
  color: var(--primary);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.2s, color 0.2s;
}

.tubular-cart-drawer__continue-btn:hover {
  background: var(--primary);
  color: var(--on-primary);
}

/* -- Loading spinner -- */
.tubular-cart-drawer__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  color: var(--outline);
}

@keyframes tubular-spin {
  to { transform: rotate(360deg); }
}

.tubular-spin {
  animation: tubular-spin 1s linear infinite;
}

/* -- Cart count badge -- hide when 0 -- */
.tubular-nav__cart-count:empty,
.tubular-nav__cart-count[data-count="0"] {
  display: none;
}

/* -- Mobile cart button in mobile nav -- */
.tubular-mobile-nav__cart-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  color: inherit;
  font-size: inherit;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* -- Mobile responsive -- */
@media (max-width: 480px) {
  .tubular-cart-drawer__panel {
    width: 100%;
  }
}


/* ==========================================================================
   CHECKOUT PAGE — Multi-step (Carrito → Entrega → Pago)
   ========================================================================== */

/* ---- Hide header, footer, cart drawer on checkout ---- */
.tubular-checkout-page .tubular-header,
.tubular-checkout-page .tubular-header-spacer,
.tubular-checkout-page .tubular-footer,
.tubular-checkout-page .tubular-cart-drawer,
.tubular-checkout-page .tubular-page__header,
.tubular-checkout-page .page-title,
.tubular-checkout-page .entry-title,
.tubular-checkout-page .woocommerce-checkout > h1,
.tubular-checkout-page h1.tubular-page__title {
  display: none !important;
}

/* ---- Secure banner + logo ---- */
.tubular-checkout-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  background: #2e7d32;
  color: #fff;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
}

.tubular-checkout-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 1rem;
  background: #fcf9f8;
  border-bottom: 1px solid rgba(196, 198, 206, 0.15);
}

.tubular-checkout-logo img {
  max-height: 2.5rem;
  width: auto;
}

.tubular-checkout-logo__text {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #1e314b;
  text-transform: uppercase;
}

/* ---- Checkout page body ---- */
body.woocommerce-checkout.tubular-checkout-page {
  background: #fcf9f8;
}

body.woocommerce-checkout.tubular-checkout-page #site-content {
  padding-top: 0;
}

body.woocommerce-checkout.tubular-checkout-page .tubular-wc-wrap {
  max-width: none;
  padding: 0;
}

body.woocommerce-checkout.tubular-checkout-page .tubular-wc-wrap > .container {
  max-width: none;
  padding: 0;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 4rem;
}

/* Hide page title */
body.woocommerce-checkout.tubular-checkout-page .entry-header,
body.woocommerce-checkout.tubular-checkout-page .page-title,
body.woocommerce-checkout.tubular-checkout-page .entry-title {
  display: none !important;
}

/* Hide coupon toggle and form */
body.woocommerce-checkout.tubular-checkout-page .woocommerce-form-coupon-toggle {
  display: none !important;
}
body.woocommerce-checkout.tubular-checkout-page .checkout_coupon {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
}

/* ---- 1. Step indicator bar ---- */
.tubular-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto 2rem;
  max-width: 420px;
  padding: 0 1rem;
}

.tubular-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.tubular-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  background: #e8e5e3;
  color: #44474d;
  transition: all 0.3s ease;
}

.tubular-step-label {
  font-family: 'Public Sans', sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #44474d;
  transition: color 0.3s ease;
}

.tubular-step--active .tubular-step-num {
  background: #1e314b;
  color: #fff;
}
.tubular-step--active .tubular-step-label {
  color: #1e314b;
}

.tubular-step--done .tubular-step-num {
  background: #2e7d32;
  color: #fff;
}
.tubular-step--done .tubular-step-label {
  color: #2e7d32;
}

.tubular-step--done .tubular-step-num svg {
  width: 18px;
  height: 18px;
}

.tubular-step-line {
  flex: 1;
  height: 2px;
  background: #e8e5e3;
  min-width: 40px;
  margin: 0 0.5rem;
  margin-bottom: 1.2rem; /* align with circle center */
  transition: background 0.3s ease;
}

.tubular-step-line--done {
  background: #2e7d32;
}

/* ---- 2. Entrega layout (two-column: form + order mirror) ---- */
.tubular-entrega-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0 3rem;
  align-items: start;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.tubular-step-entrega {
  grid-column: 1;
}

.tubular-step-entrega-inner {
  max-width: 480px;
}

.tubular-step-entrega-inner h2 {
  font-family: 'Public Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1c1b1b;
  margin: 0 0 0.5rem;
}

.tubular-step-entrega-inner > p {
  font-family: 'Public Sans', sans-serif;
  font-size: 0.8125rem;
  color: #44474d;
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.tubular-entrega-field {
  margin-bottom: 0.5rem;
}

.tubular-entrega-field label {
  display: block;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #44474d;
  background: #fff;
  border: 1px solid #d4d0cc;
  border-bottom: none;
  padding: 0.5rem 0.875rem 0;
  line-height: 1;
}

.tubular-entrega-field input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #d4d0cc;
  border-top: none;
  border-radius: 0;
  padding: 0.375rem 0.875rem 0.625rem;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.8125rem;
  color: #1c1b1b;
  transition: border-color 0.25s ease;
}

.tubular-entrega-field input:focus {
  border-color: #1e314b;
  outline: none;
  box-shadow: none;
}

.tubular-entrega-field:focus-within label {
  border-color: #1e314b;
}

#tubular-entrega-form button {
  display: block;
  width: 100%;
  background: #1e314b;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 1.125rem 2rem;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 1rem;
}

#tubular-entrega-form button:hover {
  background: #354763;
}

#tubular-entrega-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.tubular-entrega-trust {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: center;
  margin-top: 1rem;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.6875rem;
  color: #44474d;
}

/* ---- 3. Review mirror (order summary in Entrega step) ---- */
.tubular-review-mirror {
  grid-column: 2;
  background: #fff;
  border: 1px solid #d4d0cc;
  padding: 1.5rem;
  text-align: left;
  position: sticky;
  top: 20px;
  align-self: start;
}

.tubular-review-mirror::before {
  content: 'Tu pedido';
  display: block;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #1c1b1b;
  padding-bottom: 0.875rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #d4d0cc;
}

/* Mirror inherits order review table styles */
.tubular-review-mirror .woocommerce-checkout-review-order-table {
  margin: 0 !important;
  border: none !important;
  width: 100%;
}

.tubular-review-mirror .woocommerce-checkout-review-order-table thead th {
  font-size: 0.625rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
  color: #44474d !important;
  padding: 0 0 0.75rem !important;
  border-bottom: 1px solid #d4d0cc !important;
  background: none !important;
}

.tubular-review-mirror .woocommerce-checkout-review-order-table td,
.tubular-review-mirror .woocommerce-checkout-review-order-table th {
  padding: 0.75rem 0 !important;
  background: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  font-size: 0.8125rem;
  vertical-align: middle;
  font-family: 'Public Sans', sans-serif;
}

.tubular-review-mirror .woocommerce-checkout-review-order-table .order-total th,
.tubular-review-mirror .woocommerce-checkout-review-order-table .order-total td {
  border-top: 1px solid #d4d0cc !important;
  border-bottom: none !important;
  padding-top: 1rem !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: #1c1b1b !important;
}

/* ---- 4. Checkout form hidden by default, revealed with .tubular-step-pago ---- */
body.woocommerce-checkout.tubular-checkout-page form.checkout {
  display: none;
}

body.woocommerce-checkout.tubular-checkout-page form.checkout.tubular-step-pago {
  display: grid;
  grid-template-columns: 1fr 380px;
  grid-template-rows: auto;
  gap: 0 3rem;
  align-items: start;
  animation: tubularFadeIn 0.4s ease both;
}

/* ---- 5. Two-column grid for payment step ---- */
body.woocommerce-checkout.tubular-checkout-page #customer_details {
  grid-column: 1;
  grid-row: 1 / -1;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.woocommerce-checkout.tubular-checkout-page .col2-set {
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}

body.woocommerce-checkout.tubular-checkout-page .col2-set .col-1,
body.woocommerce-checkout.tubular-checkout-page .col2-set .col-2 {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide shipping fields section */
body.woocommerce-checkout.tubular-checkout-page .col2-set .col-2,
body.woocommerce-checkout.tubular-checkout-page .woocommerce-shipping-fields,
body.woocommerce-checkout.tubular-checkout-page #ship-to-different-address {
  display: none !important;
}

/* ---- 6. Form fields — label-as-border-top pattern ---- */
/* Section headings */
body.woocommerce-checkout.tubular-checkout-page h3 {
  font-family: 'Public Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #1c1b1b;
  padding-bottom: 0.875rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #d4d0cc;
}

body.woocommerce-checkout.tubular-checkout-page .form-row {
  margin-bottom: 0.875rem !important;
  padding: 0 !important;
  position: relative;
  box-sizing: border-box;
}

body.woocommerce-checkout.tubular-checkout-page .form-row label {
  font-size: 0.625rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  color: #44474d !important;
  margin-bottom: 0 !important;
  padding: 0.5rem 0.875rem 0 !important;
  display: block;
  background: #fff;
  border: 1px solid #d4d0cc;
  border-bottom: none;
  line-height: 1;
  box-sizing: border-box;
  width: 100%;
  font-family: 'Public Sans', sans-serif !important;
}

body.woocommerce-checkout.tubular-checkout-page .form-row label .required {
  color: #ba1a1a;
}

body.woocommerce-checkout.tubular-checkout-page .form-row label .optional {
  font-size: 0.5625rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #bbb;
}

body.woocommerce-checkout.tubular-checkout-page .form-row input.input-text,
body.woocommerce-checkout.tubular-checkout-page .form-row textarea,
body.woocommerce-checkout.tubular-checkout-page .form-row select {
  background: #fff !important;
  border: 1px solid #d4d0cc !important;
  border-top: none !important;
  border-radius: 0 !important;
  padding: 0.375rem 0.875rem 0.625rem !important;
  font-family: 'Public Sans', sans-serif !important;
  font-size: 0.8125rem !important;
  color: #1c1b1b !important;
  transition: border-color 0.25s ease;
  height: auto !important;
  line-height: 1.4 !important;
  width: 100%;
  box-sizing: border-box;
}

body.woocommerce-checkout.tubular-checkout-page .form-row input.input-text:focus,
body.woocommerce-checkout.tubular-checkout-page .form-row select:focus,
body.woocommerce-checkout.tubular-checkout-page .form-row textarea:focus {
  border-color: #1e314b !important;
  outline: none !important;
  box-shadow: none !important;
}

body.woocommerce-checkout.tubular-checkout-page .form-row:focus-within label {
  border-color: #1e314b;
}

/* ---- 7. Select2 styling ---- */
body.woocommerce-checkout.tubular-checkout-page .select2-container .select2-selection--single {
  background: #fff !important;
  border: 1px solid #d4d0cc !important;
  border-top: none !important;
  border-radius: 0 !important;
  padding: 0.25rem 0.875rem 0.5rem !important;
  min-height: 36px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}

body.woocommerce-checkout.tubular-checkout-page .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.4 !important;
  color: #1c1b1b !important;
  font-family: 'Public Sans', sans-serif !important;
  font-size: 0.8125rem !important;
}

body.woocommerce-checkout.tubular-checkout-page .select2-container .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  right: 6px !important;
}

body.woocommerce-checkout.tubular-checkout-page .select2-container--focus .select2-selection--single {
  border-color: #1e314b !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Row widths */
body.woocommerce-checkout.tubular-checkout-page .form-row-first {
  width: calc(50% - 0.375rem) !important;
  float: left !important;
  clear: left !important;
  margin-right: 0.375rem !important;
}

body.woocommerce-checkout.tubular-checkout-page .form-row-last {
  width: calc(50% - 0.375rem) !important;
  float: right !important;
  clear: right !important;
  margin-left: 0.375rem !important;
}

body.woocommerce-checkout.tubular-checkout-page .form-row-wide {
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

/* Clearfix for field wrappers */
body.woocommerce-checkout.tubular-checkout-page .woocommerce-billing-fields__field-wrapper::after,
body.woocommerce-checkout.tubular-checkout-page .woocommerce-shipping-fields__field-wrapper::after,
body.woocommerce-checkout.tubular-checkout-page .woocommerce-additional-fields__field-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

/* Additional fields */
body.woocommerce-checkout.tubular-checkout-page .woocommerce-additional-fields h3 {
  margin-top: 1rem;
  font-size: 0.625rem;
  margin-bottom: 0.75rem;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce-additional-fields textarea {
  min-height: 60px;
  resize: vertical;
}

/* ---- 8. Order review card styling ---- */
body.woocommerce-checkout.tubular-checkout-page #order_review_heading {
  display: none !important;
}

body.woocommerce-checkout.tubular-checkout-page #order_review {
  grid-column: 2;
  grid-row: 1 / -1;
  position: sticky;
  top: 20px;
  align-self: start;
  background: #fff;
  border: 1px solid #d4d0cc;
  padding: 1.5rem;
  text-align: left;
}

/* Force left-align on all checkout text */
body.woocommerce-checkout.tubular-checkout-page,
body.woocommerce-checkout.tubular-checkout-page .woocommerce,
body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table,
body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table td {
  text-align: left !important;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table .product-total,
body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table tfoot td {
  text-align: right !important;
}

body.woocommerce-checkout.tubular-checkout-page #order_review::before {
  content: 'Tu pedido';
  display: block;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #1c1b1b;
  padding-bottom: 0.875rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #d4d0cc;
}

/* Order review table */
body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table {
  margin: 0 0 1rem !important;
  border: none !important;
  width: 100%;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table thead th {
  font-size: 0.625rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
  color: #44474d !important;
  padding: 0 0 0.75rem !important;
  border-bottom: 1px solid #d4d0cc !important;
  background: none !important;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table td,
body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table th {
  padding: 0.75rem 0 !important;
  background: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  font-size: 0.8125rem;
  vertical-align: middle;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table .product-name {
  font-weight: 500;
  color: #1c1b1b;
  line-height: 1.5;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table .product-name .product-quantity {
  color: #44474d;
  font-weight: 400;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table .product-total {
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table tfoot th {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #44474d !important;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table tfoot td {
  text-align: right;
  font-size: 0.8125rem;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table .order-total td {
  border-top: 1px solid #d4d0cc !important;
  border-bottom: none !important;
  padding-top: 1rem !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: #1c1b1b !important;
}

/* ---- 9. Payment methods ---- */
body.woocommerce-checkout.tubular-checkout-page #payment {
  background: transparent !important;
  border-radius: 0 !important;
  margin-top: 1.5rem;
  padding: 0;
}

body.woocommerce-checkout.tubular-checkout-page #payment::before {
  content: 'Medio de pago';
  display: block;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #1c1b1b;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #d4d0cc;
}

body.woocommerce-checkout.tubular-checkout-page #payment ul.payment_methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

body.woocommerce-checkout.tubular-checkout-page #payment ul.payment_methods li.wc_payment_method {
  padding: 0 !important;
  margin-bottom: 0.25rem;
  background: #fff !important;
  border: 1px solid #d4d0cc;
  transition: border-color 0.2s;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

body.woocommerce-checkout.tubular-checkout-page #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
  accent-color: #1e314b;
  margin: 0 0 0 1rem;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

body.woocommerce-checkout.tubular-checkout-page #payment ul.payment_methods li.wc_payment_method > label {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem 0.875rem 0.625rem !important;
  margin: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #1c1b1b !important;
  cursor: pointer;
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Public Sans', sans-serif !important;
}

body.woocommerce-checkout.tubular-checkout-page #payment ul.payment_methods li.wc_payment_method:hover {
  border-color: #1e314b;
}

body.woocommerce-checkout.tubular-checkout-page #payment ul.payment_methods li.wc_payment_method > label img {
  max-height: 22px;
  width: auto;
}

body.woocommerce-checkout.tubular-checkout-page #payment .payment_box {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 1em !important;
  font-size: 0.75rem;
  color: #44474d;
  line-height: 1.6;
  flex-basis: 100%;
}

body.woocommerce-checkout.tubular-checkout-page #payment .payment_box::before {
  display: none !important;
}

body.woocommerce-checkout.tubular-checkout-page #payment .payment_box p {
  margin: 0;
  font-size: 0.75rem;
  color: #44474d;
}

/* ---- 10. Place order button ---- */
body.woocommerce-checkout.tubular-checkout-page #place_order {
  width: 100%;
  background: #1e314b !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1.125rem 2rem !important;
  font-family: 'Public Sans', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  cursor: pointer;
  transition: background 0.3s ease;
  margin: 1rem 0 0;
}

body.woocommerce-checkout.tubular-checkout-page #place_order:hover {
  background: #354763 !important;
}

/* Hide MP wallet button */
body.woocommerce-checkout.tubular-checkout-page .mp-wallet-button-container-wrapper,
body.woocommerce-checkout.tubular-checkout-page .mp-wallet-button-container {
  display: none !important;
}

/* ---- 11. Notices ---- */
body.woocommerce-checkout.tubular-checkout-page .woocommerce-error,
body.woocommerce-checkout.tubular-checkout-page .woocommerce-message,
body.woocommerce-checkout.tubular-checkout-page .woocommerce-info {
  font-family: 'Public Sans', sans-serif;
  font-size: 0.8125rem;
  border-radius: 0;
  padding: 0.875rem 1.25rem !important;
  margin-bottom: 1.5rem;
  list-style: none;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce-error {
  background: #fff;
  border: 1px solid #ba1a1a;
  border-left: 3px solid #ba1a1a;
  color: #1c1b1b;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce-error::before {
  color: #ba1a1a;
}

body.woocommerce-checkout.tubular-checkout-page .woocommerce-NoticeGroup-checkout {
  grid-column: 1 / -1;
}

body.woocommerce-checkout.tubular-checkout-page .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout.tubular-checkout-page .form-row.woocommerce-invalid select {
  border-color: #ba1a1a !important;
}

/* Loading overlay */
body.woocommerce-checkout.tubular-checkout-page .blockUI.blockOverlay {
  background: rgba(252, 249, 248, 0.6) !important;
}

/* Privacy text */
body.woocommerce-checkout.tubular-checkout-page .woocommerce-terms-and-conditions-wrapper {
  font-size: 0.75rem;
  color: #44474d;
}

/* ---- 12. Mobile responsive ---- */
@media (max-width: 900px) {
  .tubular-entrega-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .tubular-review-mirror {
    display: none !important;
  }

  body.woocommerce-checkout.tubular-checkout-page form.checkout.tubular-step-pago {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  body.woocommerce-checkout.tubular-checkout-page #order_review {
    order: -1;
    position: static;
    margin-bottom: 1.5rem;
  }

  body.woocommerce-checkout.tubular-checkout-page #customer_details {
    order: 1;
  }

  body.woocommerce-checkout.tubular-checkout-page .woocommerce-additional-fields {
    order: 2;
  }
}

@media (max-width: 768px) {
  .tubular-steps {
    max-width: 340px;
  }

  .tubular-step-num {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .tubular-step-label {
    font-size: 0.5625rem;
  }

  .tubular-step-line {
    min-width: 30px;
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  body.woocommerce-checkout.tubular-checkout-page .woocommerce {
    padding: 1rem 1rem 3rem;
  }

  body.woocommerce-checkout.tubular-checkout-page .form-row-first,
  body.woocommerce-checkout.tubular-checkout-page .form-row-last {
    width: 100% !important;
    float: none !important;
  }

  body.woocommerce-checkout.tubular-checkout-page #order_review {
    padding: 1.125rem;
  }

  .tubular-review-mirror {
    padding: 1.125rem;
  }

  body.woocommerce-checkout.tubular-checkout-page #payment ul.payment_methods li.wc_payment_method > label {
    padding: 0.75rem !important;
    font-size: 0.75rem !important;
  }

  .tubular-step-entrega-inner h2 {
    font-size: 1.1rem;
  }
}

/* ---- 13. Animations ---- */
@keyframes tubularFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tubular-checkout-reveal {
  animation: tubularFadeIn 0.4s ease both;
}

.tubular-step--leaving {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

/* ==========================================================================
   WhatsApp Floating Button
   ========================================================================== */

.tubular-whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 900;
  width: 56px;
  height: 56px;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tubular-whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.tubular-checkout-page .tubular-whatsapp-float {
  display: none;
}

/* ==========================================================================
   PDP — Brand Label
   ========================================================================== */

.tubular-product__brand {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #44474d;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   PDP — Color Variation Swatches
   ========================================================================== */

.tubular-variation-swatches {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.tubular-variation-swatches__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #44474d;
  margin-bottom: 0.75rem;
  width: 100%;
}

.tubular-variation-swatch {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(196, 198, 206, 0.3);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.tubular-variation-swatch:hover {
  border-color: #1e314b;
}

.tubular-variation-swatch--active {
  outline: 2px solid #1e314b;
  outline-offset: 3px;
}

.tubular-variation-swatch--white {
  border: 1px solid #d4d0cc;
}

/* For transparent swatch, add a checkerboard pattern */
.tubular-variation-swatch--transparent {
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

/* ==========================================================================
   PDP — Hide Quantity Input
   ========================================================================== */

.single-product .quantity {
  display: none !important;
}

/* ==========================================================================
   PDP — Add to Cart Button
   ========================================================================== */

.single_add_to_cart_button,
.single-product .cart button[type="submit"] {
  width: 100%;
  padding: 1.25rem 2rem !important;
  background: #1e314b !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Public Sans', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.single_add_to_cart_button:hover {
  background: #354763 !important;
}

.single_add_to_cart_button.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* ==========================================================================
   Variation Swatches — hide WC defaults, show custom swatches only
   ========================================================================== */

/* Hide the default WC variations table layout */
.single-product .variations {
  border: none !important;
  width: 100%;
}

.single-product .variations tr {
  display: block;
  margin-bottom: 1rem;
}

.single-product .variations th.label {
  display: none !important;
}

.single-product .variations td.value {
  display: block;
  padding: 0 !important;
}

.single-product .variations select {
  display: none !important;
}

/* Our custom swatches are injected by JS, no need to change those styles */

/* Hide reset variations link or style it */
.single-product .reset_variations {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #44474d;
  margin-top: 0.5rem;
  display: inline-block;
}

/* Fix PDP max-width */
.tubular-product__layout {
  max-width: var(--container-wide);
  margin: 0 auto;
}

/* ==========================================================================
   Homepage — Product Lines (2 cards)
   ========================================================================== */

.tubular-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.tubular-lines__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  transition: transform 0.3s ease;
}

.tubular-lines__card:hover {
  color: inherit;
}

.tubular-lines__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--card-bg);
}

.tubular-lines__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tubular-lines__card:hover .tubular-lines__media img {
  transform: scale(1.05);
}

.tubular-lines__placeholder {
  width: 100%;
  height: 100%;
  background: var(--surface-container);
}

.tubular-lines__body {
  padding: var(--space-8) var(--space-6) var(--space-6);
}

.tubular-lines__title {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--on-surface);
  margin: var(--space-3) 0 var(--space-4);
}

.tubular-lines__desc {
  font-size: var(--font-size-base);
  font-weight: 300;
  color: var(--on-surface-variant);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.tubular-lines__cta {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}

.tubular-lines__card:hover .tubular-lines__cta {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 767px) {
  .tubular-lines {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Homepage — Configurator Promo Module
   ========================================================================== */

.tubular-configurator-promo {
  padding: var(--space-24) 0;
  background: var(--surface);
}

.tubular-configurator-promo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.tubular-configurator-promo__text {
  padding-right: var(--space-8);
}

.tubular-configurator-promo__heading {
  font-size: var(--font-size-3xl);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--on-surface);
  margin: var(--space-4) 0 var(--space-6);
}

.tubular-configurator-promo__desc {
  font-size: var(--font-size-base);
  font-weight: 300;
  color: var(--on-surface-variant);
  line-height: 1.7;
  margin-bottom: var(--space-8);
}

.tubular-configurator-promo__visual {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-container-low);
}

.tubular-configurator-promo__visual img,
.tubular-configurator-promo__visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tubular-configurator-promo__gif-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-container);
}

@media (max-width: 767px) {
  .tubular-configurator-promo__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .tubular-configurator-promo__text {
    padding-right: 0;
  }
}

/* ==========================================================================
   Homepage — Newsletter CTA
   ========================================================================== */

.tubular-cta__newsletter {
  max-width: 480px;
  margin: 0 auto;
}

.tubular-cta__newsletter-field {
  display: flex;
  gap: 0;
}

.tubular-cta__newsletter-field input {
  flex: 1;
  padding: 1rem 1.25rem;
  border: none;
  border-radius: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.875rem;
  color: #1c1b1b;
  background: #ffffff;
  outline: none;
}

.tubular-cta__newsletter-field input::placeholder {
  color: #999;
}

.tubular-cta__newsletter-field button {
  padding: 1rem 2rem;
  background: var(--surface);
  color: var(--primary);
  border: none;
  border-radius: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.tubular-cta__newsletter-field button:hover {
  background: var(--surface-container-low);
}

@media (max-width: 480px) {
  .tubular-cta__newsletter-field {
    flex-direction: column;
  }
  .tubular-cta__newsletter-field button {
    width: 100%;
  }
}

/* Shop hero with background image */
.tubular-shop-hero--has-bg {
  position: relative;
  background-color: #1e314b;
}

.tubular-shop-hero--has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.tubular-shop-hero--has-bg .tubular-shop-hero__inner {
  position: relative;
  z-index: 2;
}

.tubular-shop-hero--has-bg .tubular-shop-hero__title,
.tubular-shop-hero--has-bg .tubular-shop-hero__subtitle,
.tubular-shop-hero--has-bg .tubular-label {
  color: #ffffff;
}

.tubular-shop-hero--has-bg .tubular-label--filled {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* ==========================================================================
   Product Accordions
   ========================================================================== */

.tubular-product__accordions {
  margin-top: var(--space-8);
}

.tubular-product__accordion {
  border-top: 1px solid rgba(196, 198, 206, 0.15);
}

.tubular-product__accordion:last-child {
  border-bottom: 1px solid rgba(196, 198, 206, 0.15);
}

.tubular-product__accordion-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  cursor: pointer;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface);
  list-style: none;
}

.tubular-product__accordion-toggle::-webkit-details-marker {
  display: none;
}

.tubular-product__accordion-toggle svg {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: var(--on-surface-variant);
}

.tubular-product__accordion[open] .tubular-product__accordion-toggle svg {
  transform: rotate(180deg);
}

.tubular-product__accordion-body {
  padding: 0 0 var(--space-6);
  font-size: var(--font-size-base);
  font-weight: 300;
  color: var(--on-surface-variant);
  line-height: 1.7;
}

.tubular-product__tab-panel p {
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Shipping & Payment moved to left column
   ========================================================================== */

#tubular-left-extras {
  margin-top: 1.5rem;
}

#tubular-shipping-methods {
  margin-bottom: 1.5rem;
}

#tubular-shipping-methods h3 {
  font-family: 'Public Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #1c1b1b;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #d4d0cc;
}

#tubular-shipping-methods .tubular-shipping-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#tubular-shipping-methods .tubular-shipping-content li {
  padding: 0.75rem 1rem;
  border: 1px solid #d4d0cc;
  background: #fff;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s;
}

#tubular-shipping-methods .tubular-shipping-content li:hover {
  border-color: #1e314b;
}

#tubular-shipping-methods .tubular-shipping-content li input[type="radio"] {
  accent-color: #1e314b;
  margin: 0;
  flex-shrink: 0;
}

#tubular-shipping-methods .tubular-shipping-content li label {
  font-size: 0.8125rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  cursor: pointer;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  flex: 1;
}

/* Hide shipping from order review (it's been moved) */
body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table .shipping,
body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table .woocommerce-shipping-totals,
body.woocommerce-checkout.tubular-checkout-page .woocommerce-checkout-review-order-table .andreani-sucursales-row {
  display: none !important;
}

/* Hide payment in order review (moved to left) */
body.woocommerce-checkout.tubular-checkout-page #order_review #payment {
  display: none !important;
}

body.woocommerce-checkout.tubular-checkout-page #tubular-left-extras #payment {
  display: block !important;
}

/* "Medio de pago" heading via pseudo-element */
body.woocommerce-checkout.tubular-checkout-page #tubular-left-extras #payment::before {
  content: 'Medio de pago';
  display: block;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #1c1b1b;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #d4d0cc;
}

/* Place order wrapper in order review */
#tubular-place-order-wrapper {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #d4d0cc;
}

/* Sucursales section */
#tubular-sucursales-section {
  margin-bottom: 1.5rem;
}

#tubular-sucursales-section select {
  width: 100%;
  background: #fff;
  border: 1px solid #d4d0cc;
  padding: 0.75rem 0.875rem;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.8125rem;
}

/* Mobile adjustments */
@media (max-width: 900px) {
  body.woocommerce-checkout.tubular-checkout-page #tubular-left-extras {
    order: 2;
  }

  body.woocommerce-checkout.tubular-checkout-page #tubular-place-order-wrapper {
    display: none !important;
  }

  body.woocommerce-checkout.tubular-checkout-page #payment .place-order {
    display: block !important;
    padding: 0 !important;
    margin: 1rem 0 0 !important;
  }
}

/* Fix input wrapper overflow */
body.woocommerce-checkout.tubular-checkout-page .form-row .woocommerce-input-wrapper {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

body.woocommerce-checkout.tubular-checkout-page .form-row .select2-container {
  width: 100% !important;
  box-sizing: border-box;
}

/* Product card — discount badge */
.tubular-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: #ba1a1a;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  z-index: 2;
  letter-spacing: 0.02em;
}

/* Product card — price with strikethrough */
.tubular-card__price-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tubular-card__price-old {
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--on-surface-variant);
  text-decoration: line-through;
}

/* Gateway badges */
.tubular-gateway-badge {
  display: inline-block;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  margin-left: 0.5rem;
  vertical-align: middle;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-transform: uppercase;
}

.tubular-badge--green {
  background: #2e7d32;
  color: #ffffff;
}

.tubular-badge--dark {
  background: #1e314b;
  color: #ffffff;
}

/* Product card — hover image swap */
.tubular-card__img--hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.tubular-card__media--has-hover .tubular-card__img--primary {
  transition: opacity 0.35s ease;
}

.tubular-card__link:hover .tubular-card__img--hover {
  opacity: 1;
}

.tubular-card__link:hover .tubular-card__media--has-hover .tubular-card__img--primary {
  opacity: 0;
}

/* Single product — pricing block */
.tubular-product__pricing {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(196, 198, 206, 0.15);
}

.tubular-product__price-main {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}

.tubular-product__price-main .tubular-product__price {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--on-surface);
}

.tubular-product__price-old {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--on-surface-variant);
  text-decoration: line-through;
}

.tubular-product__price-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  background: #ba1a1a;
  color: #fff;
  padding: 0.2rem 0.5rem;
  letter-spacing: 0.02em;
}

.tubular-product__price-installments {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}

.tubular-product__price-cash {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #15803d;
}
.tubular-product__price-cash .woocommerce-Price-amount {
  color: #15803d;
}

/* ==========================================================================
   Product Description – Spec Table
   ========================================================================== */
.tubular-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}
.tubular-spec-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  vertical-align: top;
}
.tubular-spec-table tr:last-child td {
  border-bottom: none;
}
.tubular-spec-table td:first-child {
  width: 140px;
  font-weight: 700;
  color: var(--on-surface);
  white-space: nowrap;
}
.tubular-spec-table td:last-child {
  color: rgba(0,0,0,0.7);
}

/* ==========================================================================
   Thank You / Order Received Page
   ========================================================================== */

/* ---- Hide header/footer on thank you page ---- */
.tubular-order-received .tubular-header,
.tubular-order-received .tubular-header-spacer,
.tubular-order-received .tubular-footer,
.tubular-order-received .tubular-cart-drawer,
.tubular-order-received .tubular-page__header,
.tubular-order-received .page-title,
.tubular-order-received .entry-title,
.tubular-order-received h1.tubular-page__title {
  display: none !important;
}

body.tubular-order-received {
  background: #fcf9f8;
}

body.tubular-order-received #site-content {
  padding-top: 0;
}

body.tubular-order-received .tubular-wc-wrap {
  max-width: none;
  padding: 0;
}

body.tubular-order-received .tubular-wc-wrap > .container {
  max-width: none;
  padding: 0;
}

body.tubular-order-received .entry-header {
  display: none !important;
}

/* ---- Container ---- */
.tubular-thankyou {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 2rem) 3rem;
  font-family: 'Public Sans', sans-serif;
  color: #1c1b1b;
}

/* ---- Header (success) ---- */
.tubular-thankyou__header {
  text-align: center;
  margin-bottom: 2rem;
}

.tubular-thankyou__header h2 {
  font-family: 'Public Sans', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: #1c1b1b;
  margin: 0.75rem 0 0.375rem;
}

.tubular-thankyou__header p {
  font-size: 0.875rem;
  color: #44474d;
  margin: 0;
}

/* ---- Icon circle (animated) ---- */
.tubular-thankyou__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #2e7d32;
  color: #fff;
  animation: tubular-thankyou-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.tubular-thankyou__icon--error {
  background: #ba1a1a;
  animation: tubular-thankyou-shake 0.5s ease both;
}

@keyframes tubular-thankyou-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes tubular-thankyou-shake {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  60% { transform: translateX(-4px) scale(1); }
  70% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
  90% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

/* ---- Failed order ---- */
.tubular-thankyou__failed {
  text-align: center;
  padding: 2rem 0;
}

.tubular-thankyou__failed h2 {
  font-family: 'Public Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1c1b1b;
  margin: 0.75rem 0 0.5rem;
}

.tubular-thankyou__failed p {
  font-size: 0.875rem;
  color: #44474d;
  margin: 0 0 1.5rem;
}

.tubular-thankyou__actions {
  margin-top: 1rem;
}

/* ---- Payment info box ---- */
.tubular-thankyou__payment-info {
  background: rgba(46, 125, 50, 0.06);
  border-left: 3px solid #2e7d32;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 0 4px 4px 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #1c1b1b;
}

.tubular-thankyou__payment-info p {
  margin: 0 0 0.5rem;
}

.tubular-thankyou__payment-info p:last-child {
  margin-bottom: 0;
}

.tubular-thankyou__payment-info h2,
.tubular-thankyou__payment-info h3 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.tubular-thankyou__payment-info table {
  width: 100%;
  font-size: 0.8125rem;
  border-collapse: collapse;
  margin: 0.5rem 0;
}

.tubular-thankyou__payment-info table th,
.tubular-thankyou__payment-info table td {
  padding: 0.25rem 0;
  text-align: left;
  border: none;
}

.tubular-thankyou__payment-info table th {
  font-weight: 600;
  padding-right: 1rem;
}

/* ---- Copy CVU button ---- */
.tubular-thankyou__copy-cvu {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1e314b;
  background: #fff;
  border: 1px solid #1e314b;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tubular-thankyou__copy-cvu:hover {
  background: #1e314b;
  color: #fff;
}

/* ---- Snackbar ---- */
.tubular-snackbar {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #1e314b;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 9999;
  pointer-events: none;
}

.tubular-snack--show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ---- Summary grid ---- */
.tubular-thankyou__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  background: #fff;
  border: 1px solid #d4d0cc;
  border-radius: 4px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.tubular-thankyou__summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tubular-thankyou__label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #44474d;
}

.tubular-thankyou__value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1c1b1b;
}

/* ---- Items list ---- */
.tubular-thankyou__items {
  margin-bottom: 1.5rem;
}

.tubular-thankyou__items h3 {
  font-family: 'Public Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #44474d;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #d4d0cc;
}

.tubular-thankyou__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.tubular-thankyou__item:last-of-type {
  border-bottom: none;
}

.tubular-thankyou__item-img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  background: #f0edec;
}

.tubular-thankyou__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tubular-thankyou__item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.tubular-thankyou__item-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1c1b1b;
  line-height: 1.3;
}

.tubular-thankyou__item-meta {
  font-size: 0.6875rem;
  color: #44474d;
}

.tubular-thankyou__item-price {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1c1b1b;
  white-space: nowrap;
}

/* ---- Totals ---- */
.tubular-thankyou__totals {
  border-top: 1px solid #d4d0cc;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.tubular-thankyou__totals-row {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
  color: #44474d;
}

.tubular-thankyou__totals-total {
  border-top: 1px solid #d4d0cc;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: #1c1b1b;
}

/* ---- Help text ---- */
.tubular-thankyou__help {
  text-align: center;
  margin-bottom: 1.5rem;
}

.tubular-thankyou__help p {
  font-size: 0.8125rem;
  color: #44474d;
  margin: 0;
}

.tubular-thankyou__help a {
  color: #1e314b;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tubular-thankyou__help a:hover {
  color: #354763;
}

/* ---- Buttons ---- */
.tubular-thankyou__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  background: #1e314b;
  color: #fff;
  border: 1px solid #1e314b;
}

.tubular-thankyou__btn:hover {
  background: #354763;
  border-color: #354763;
  color: #fff;
}

.tubular-thankyou__btn--outline {
  background: transparent;
  color: #1e314b;
  border: 1px solid #1e314b;
}

.tubular-thankyou__btn--outline:hover {
  background: #1e314b;
  color: #fff;
}

/* ---- Back button ---- */
.tubular-thankyou__back {
  text-align: center;
  margin-top: 0;
}

/* ---- Mobile responsive ---- */
@media (max-width: 480px) {
  .tubular-thankyou {
    padding: 1.5rem 1rem 2.5rem;
  }

  .tubular-thankyou__icon {
    width: 52px;
    height: 52px;
  }

  .tubular-thankyou__header h2 {
    font-size: 1.125rem;
  }

  .tubular-thankyou__summary {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .tubular-thankyou__item-img {
    width: 48px;
    height: 48px;
  }

  .tubular-thankyou__btn {
    width: 100%;
  }
}

/* ---- WhatsApp float hidden on order received ---- */
.tubular-order-received .tubular-whatsapp-float {
  display: none;
}

/* Promo bar */
.tubular-promo-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  width: 100%;
  background: #1e314b;
  color: #ffffff;
  text-align: center;
  padding: 0.5rem 1rem;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* Push header down when promo bar exists */
body:has(.tubular-promo-bar) .tubular-header {
  top: 2rem;
}

body:has(.tubular-promo-bar) .tubular-header-spacer {
  height: 5rem;
}

.tubular-promo-bar strong {
  font-weight: 700;
}

.tubular-promo-bar a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 0.5rem;
  font-weight: 600;
}

.tubular-promo-bar a:hover {
  color: #b5c7e9;
}

@media (max-width: 767px) {
  .tubular-promo-bar {
    font-size: 0.6875rem;
    padding: 0.4rem 0.75rem;
  }
}

/* Hero promo badge */
.tubular-hero__promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  background: rgba(186, 26, 26, 0.08);
  border: 1px solid rgba(186, 26, 26, 0.2);
  color: #ba1a1a;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  transition: background 0.2s;
}

.tubular-hero__promo-badge:hover {
  background: rgba(186, 26, 26, 0.14);
  color: #ba1a1a;
}

.tubular-hero__promo-dot {
  width: 8px;
  height: 8px;
  background: #ba1a1a;
  border-radius: 50%;
  animation: tubular-pulse 1.5s ease-in-out infinite;
}

@keyframes tubular-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* Product gallery lightbox */
.tubular-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.tubular-lightbox--open {
  opacity: 1;
  pointer-events: all;
}

.tubular-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.tubular-lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: #fff;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.tubular-lightbox__close:hover {
  opacity: 1;
}

/* Swatch label row with selected color name */
.tubular-variation-swatches__label-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.75rem;
}

.tubular-variation-swatches__selected {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--on-surface-variant);
  text-transform: none;
  letter-spacing: 0;
}

/* PDP mobile fixes */
@media (max-width: 767px) {
  .tubular-product__info-inner {
    padding: var(--space-4) 0 !important;
  }
}

/* First swatch margin to prevent clipping */
.tubular-variation-swatch:first-of-type {
  margin-left: 10px;
}

/* PDP Gallery — Mobile thumbnails */
/* Gallery thumbnails — always visible */
.tubular-product__gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tubular-product__gallery-thumbs::-webkit-scrollbar {
  display: none;
}

.tubular-product__gallery-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: none;
  overflow: hidden;
  transition: border-color 0.15s;
}

.tubular-product__gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tubular-product__gallery-thumb--active {
  border-color: var(--primary);
}

@media (max-width: 767px) {
  .tubular-product__gallery-thumb {
    width: 60px;
    height: 60px;
  }

  /* Hide grid and detail on mobile */
  .tubular-product__gallery-grid,
  .tubular-product__gallery-detail {
    display: none !important;
  }
}