@import "tailwindcss";
@import "tw-animate-css";
@import "../vendor/shadcn-tailwind-4.13.0.css";

@utility scrollbar-thin {
  scrollbar-width: thin;
}

@utility scrollbar-none {
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

@utility scrollbar-gutter-stable {
  scrollbar-gutter: stable;
}

:root {
  --background: #ffffff;
  --foreground: #171717;
  --card: #ffffff;
  --card-foreground: #171717;
  --popover: #ffffff;
  --popover-foreground: #171717;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --destructive: #e7000b;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;
  --chart-1: #f54900;
  --chart-2: #009689;
  --chart-3: #104e64;
  --chart-4: #ffb900;
  --chart-5: #fe9a00;
  --radius: 0.625rem;
  --sidebar: #fafafa;
  --sidebar-foreground: #171717;
  --sidebar-primary: #171717;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #171717;
  --sidebar-border: #e5e5e5;
  --sidebar-ring: #a1a1a1;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --chart-1: var(--chart-1);
  --chart-2: var(--chart-2);
  --chart-3: var(--chart-3);
  --chart-4: var(--chart-4);
  --chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --font-sans: Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
    --card: #171717;
    --card-foreground: #ededed;
    --popover: #171717;
    --popover-foreground: #ededed;
    --primary: #ededed;
    --primary-foreground: #171717;
    --secondary: #262626;
    --secondary-foreground: #ededed;
    --muted: #262626;
    --muted-foreground: #a1a1a1;
    --accent: #262626;
    --accent-foreground: #ededed;
    --destructive: #ff6467;
    --border: #ffffff1a;
    --input: #ffffff26;
    --ring: #737373;
    --chart-1: #8e51ff;
    --chart-2: #00bc7d;
    --chart-3: #fe9a00;
    --chart-4: #ad46ff;
    --chart-5: #ff2056;
    --sidebar: #171717;
    --sidebar-foreground: #ededed;
    --sidebar-primary: #8e51ff;
    --sidebar-primary-foreground: #ededed;
    --sidebar-accent: #262626;
    --sidebar-accent-foreground: #ededed;
    --sidebar-border: #ffffff1a;
    --sidebar-ring: #737373;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* ==========================================================================
   NA FE STORE - DYNAMIC RESPONSIVE DESIGN SYSTEM (MOBILE, TABLET, DESKTOP)
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #f3eee8;
  color: #17130f;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
}

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

button, a, input, select, textarea {
  touch-action: manipulation;
}

.store-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.store-announcement {
  height: 32px;
  display: grid;
  place-items: center;
  background: #15110e;
  color: #e8d7c6;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Smart Sticky Header */
.store-header {
  height: 76px;
  padding: 0 clamp(16px, 4vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(243, 238, 232, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(205, 187, 170, 0.8);
  position: sticky;
  top: 0;
  z-index: 50;
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

body.header-hidden .store-header {
  transform: translateY(-100%);
}

body.header-visible .store-header {
  transform: translateY(0);
  height: 60px;
  background: rgba(243, 238, 232, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

body.header-visible .store-header .store-brand img {
  width: 70px;
  height: 50px;
}

.store-brand img {
  width: 86px;
  height: 64px;
  object-fit: contain;
  filter: sepia(0.2);
  transition: width 0.3s ease, height 0.3s ease;
}

.store-header nav {
  display: flex;
  gap: 28px;
  align-items: center;
}

.store-header nav a {
  color: #31261f;
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 0;
  position: relative;
  white-space: nowrap;
}

.store-header nav a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1px;
  background: #8f6044;
  transition: 0.3s;
}

.store-header nav a:hover:after,
.store-header nav a.active:after {
  right: 0;
}

.header-whatsapp {
  border: 1px solid currentColor;
  border-radius: 99px;
  padding: 7px 14px !important;
}

.store-main {
  min-height: 70vh;
  flex: 1;
}

.shop-hero {
  min-height: 440px;
  padding: clamp(50px, 9vw, 110px) clamp(18px, 5vw, 110px) clamp(30px, 5vw, 60px);
  color: white;
  background: linear-gradient(90deg, rgba(13,9,7,.92), rgba(13,9,7,.5) 45%, rgba(13,9,7,.1)), url('/home/assets/campanha-bordo-branded.webp') center 37%/cover;
}

.shop-hero.offers-hero {
  background-image: linear-gradient(90deg, rgba(13,9,7,.92), rgba(13,9,7,.48) 48%, rgba(13,9,7,.14)), url('/home/assets/hero-slide-urbano.webp');
}

.store-kicker {
  font-size: 0.7rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: #aa7a5e;
  margin: 0 0 14px !important;
}

.shop-hero .store-kicker {
  color: #e3b99c;
}

.shop-hero h1 {
  max-width: 900px;
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 6.2rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.shop-hero h1 span,
.shop-hero h1 em {
  display: block;
}

.shop-hero h1 em {
  font-weight: 400;
  color: #d7b59f;
}

.shop-hero > p:last-child {
  max-width: 570px;
  font-size: clamp(0.92rem, 2vw, 1.05rem);
  line-height: 1.65;
  margin: 22px 0 0;
  color: #eadfd6;
}

/* Smart Sticky Dynamic Filter Bar */
.shop-tools {
  padding: 10px clamp(16px, 4vw, 80px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(205, 187, 170, 0.7);
  position: sticky;
  top: 0;
  background: rgba(243, 238, 232, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 40;
  transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.25s ease, box-shadow 0.25s ease;
}

body.header-visible .shop-tools {
  top: 60px;
}

.shop-tools.is-scrolled {
  padding: 8px clamp(16px, 4vw, 80px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.search-field {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 170px;
  max-width: 250px;
  flex: 0 1 230px;
}

.search-field span {
  display: none;
}

.search-field:before {
  content: "🔍";
  position: absolute;
  left: 11px;
  font-size: 0.75rem;
  opacity: 0.5;
  pointer-events: none;
}

.search-field input {
  width: 100%;
  border: 1px solid #cfc4bc;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.85);
  padding: 7px 14px 7px 32px;
  font-size: 0.82rem;
  color: #211a16;
  outline: none;
  min-height: 36px;
  transition: all 0.2s ease;
}

.search-field input:focus {
  border-color: #8f6044;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(143, 96, 68, 0.15);
}

.category-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
}

.category-list::-webkit-scrollbar {
  display: none;
}

.category-list button {
  border: 1px solid #cfc3b8;
  border-radius: 99px;
  padding: 6px 14px;
  background: transparent;
  color: #3b2e25;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 34px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.category-list button.active,
.category-list button:hover {
  background: #241c17;
  color: #fff;
  border-color: #241c17;
}

.filter-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border: 1px solid #bda999;
  border-radius: 99px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.7);
  color: #30251e;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 34px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.filter-toggle:hover,
.filter-toggle.active {
  background: #241c17;
  color: #fff;
  border-color: #241c17;
}

.cart-trigger {
  margin-left: auto;
  border: 1px solid #8f6044;
  border-radius: 99px;
  padding: 6px 14px;
  background: #8f6044;
  color: white;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  transition: 0.2s ease;
}

.cart-trigger:hover {
  background: #764b32;
  border-color: #764b32;
}

.cart-trigger span {
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: #6f4631;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 700;
}

.advanced-filters {
  width: 100%;
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(160px, 1.25fr) auto;
  gap: 10px;
  align-items: end;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.3s ease, margin 0.3s ease;
  padding-top: 0;
  margin-top: 0;
}

.shop-tools.filters-open .advanced-filters,
.shop-tools.filters-visible .advanced-filters {
  max-height: 300px;
  opacity: 1;
  pointer-events: auto;
  padding-top: 12px;
  margin-top: 6px;
  border-top: 1px solid rgba(143, 114, 95, 0.2);
}

.advanced-filters label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #75665c;
  display: grid;
  gap: 5px;
}

.advanced-filters select,
.advanced-filters input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cfc4bc;
  background: white;
  padding: 0 10px;
  color: #241b17;
  border-radius: 6px;
  font-size: 0.82rem;
}

.advanced-filters input[type=range] {
  padding: 0;
  min-height: 18px;
  accent-color: #6f4631;
  background: transparent;
}

.clear-filters {
  border: 1px solid #bda999;
  border-radius: 99px;
  padding: 8px 16px;
  background: transparent;
  color: #30251e;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease;
}

.clear-filters:hover {
  background: #241c17;
  color: #fff;
  border-color: #241c17;
}

.results-count {
  width: 100%;
  flex-basis: 100%;
  margin: 0;
  color: #8c7b70;
  font-size: 0.72rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #cdbbaa;
  border-bottom: 1px solid #cdbbaa;
}

.product-card {
  background: #f3eee8;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.product-image-wrap {
  display: block;
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  background: #d9cec4;
}

.product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s ease;
}

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

.offer-tag,
.stock-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  border-radius: 99px;
  padding: 6px 11px;
  background: #6f2430;
  color: white;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  z-index: 2;
}

.stock-tag {
  left: auto;
  right: 14px;
  background: #16110e;
}

.product-info {
  padding: 22px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-info > p:first-child {
  margin: 0 0 8px;
  color: #806a5b;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-info h2 {
  margin: 0 0 10px;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
}

.product-info h2 a {
  color: inherit;
  text-decoration: none;
}

.product-info h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.price-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 14px;
}

.price-line del {
  color: #8a7a70;
  font-size: 0.9rem;
}

.price-line strong {
  font-size: 1.05rem;
  color: #1c1612;
}

.product-description {
  color: #67574c;
  line-height: 1.5;
  font-size: 0.88rem;
  margin: 0 0 16px;
  flex: 1;
}

.product-info > button {
  width: 100%;
  border: 1px solid #2c221c;
  background: #2c221c;
  color: white;
  padding: 12px;
  cursor: pointer;
  margin-top: auto;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 4px;
  min-height: 42px;
  transition: 0.2s ease;
}

.product-info > button:hover {
  background: #45362c;
}

.product-info > button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.empty-products {
  grid-column: 1/-1;
  background: #f3eee8;
  text-align: center;
  padding: 80px 20px;
}

.store-footer {
  min-height: 180px;
  background: #17120f;
  color: #d4c5b9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 45px clamp(18px, 5vw, 90px);
  flex-wrap: wrap;
  gap: 20px;
}

.store-footer img {
  width: 100px;
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

.store-footer p {
  font-family: Georgia, serif;
  font-size: 1.15rem;
  margin: 0;
}

.store-footer span {
  font-size: 0.75rem;
}

/* Product Detail Page */
.product-detail-page {
  background: #f7f4f0;
  min-height: 100vh;
}

.product-breadcrumb {
  padding: 20px clamp(16px, 4vw, 64px);
  display: flex;
  gap: 10px;
  align-items: center;
  color: #78685e;
  font-size: 0.76rem;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.product-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.product-breadcrumb strong {
  font-weight: 600;
  color: #30241e;
}

.product-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(370px, 0.75fr);
  border-top: 1px solid #d8cec6;
  border-bottom: 1px solid #d8cec6;
}

.detail-gallery {
  min-width: 0;
  background: #ded8d2;
  padding: 1px;
}

.detail-stage {
  height: min(74vh, 780px);
  min-height: 560px;
  position: relative;
  background: #ded8d2;
  overflow: hidden;
}

.detail-image-button {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  position: relative;
}

.detail-image-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.detail-image-button > span {
  position: absolute;
  right: 20px;
  top: 20px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 99px;
  padding: 8px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.gallery-arrows {
  position: absolute;
  right: 20px;
  bottom: 20px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 99px;
  padding: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
  box-shadow: 0 7px 24px rgba(0, 0, 0, 0.1);
}

.gallery-arrows button {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.gallery-arrows button:hover {
  background: #eee9e4;
}

.gallery-arrows span {
  font-size: 0.72rem;
  color: #6f625a;
  font-weight: 600;
  padding: 0 4px;
}

.detail-thumbnails {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  background: #cfc5bd;
  margin-top: 2px;
}

.detail-thumbnails button {
  height: 105px;
  border: 0;
  padding: 0;
  background: #e8e3de;
  cursor: pointer;
  opacity: 0.65;
  overflow: hidden;
  transition: 0.2s;
}

.detail-thumbnails button.active {
  opacity: 1;
  outline: 3px solid #6f4631;
  outline-offset: -3px;
}

.detail-thumbnails img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-purchase-panel {
  padding: 48px clamp(20px, 4vw, 56px);
  background: #fff;
  position: sticky;
  top: 0;
  align-self: start;
}

.product-purchase-panel h1 {
  font: 400 clamp(2.2rem, 4vw, 4.2rem)/1.02 Georgia, serif;
  letter-spacing: -0.04em;
  margin: 0 0 18px;
  color: #1a1410;
}

.detail-price {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.detail-price strong {
  font-size: 1.25rem;
  color: #1c1511;
}

.detail-price del {
  color: #8a7a70;
  font-size: 1rem;
}

.detail-price span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #6f2430;
  color: white;
  padding: 5px 10px;
  border-radius: 99px;
  font-weight: 700;
}

.detail-description {
  color: #6a5a50;
  line-height: 1.65;
  font-size: 0.92rem;
  margin: 0 0 26px;
}

.variant-fieldset {
  border: 0;
  border-top: 1px solid #ddd3cc;
  margin: 0;
  padding: 22px 0;
}

.variant-fieldset legend {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0;
}

.variant-fieldset legend strong {
  margin-left: 6px;
  color: #1f1712;
}

.color-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.color-options button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #b8aaa0;
  background: #fff;
  padding: 3px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  transition: transform 0.15s;
}

.color-options button:hover {
  transform: scale(1.06);
}

.color-options button.active {
  outline: 2px solid #211a16;
  outline-offset: 2px;
}

.color-options button.out-of-stock {
  opacity: 0.38;
  cursor: not-allowed;
  position: relative;
  border-color: #e5ded8;
}

.color-options button.out-of-stock::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  height: 2px;
  background: #ef4444;
  transform: rotate(-45deg);
  border-radius: 1px;
}

.color-options i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.size-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.size-options button {
  min-height: 46px;
  border: 1px solid #cfc4bc;
  background: white;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
  border-radius: 4px;
  transition: 0.15s;
}

.size-options button:hover {
  border-color: #211a16;
}

.size-options button.active {
  background: #211a16;
  color: white;
  border-color: #211a16;
}

.size-options button.out-of-stock {
  opacity: 0.38;
  cursor: not-allowed !important;
  background: #f8f6f4;
  color: #9c8e85;
  border-color: #e5ded8;
  text-decoration: line-through;
  position: relative;
}

.size-options button.out-of-stock:hover {
  border-color: #e5ded8;
  transform: none;
}

.size-options button.out-of-stock::after {
  content: "Esgotado";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.54rem;
  font-weight: 700;
  color: #dc2626;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.variant-fieldset small {
  display: block;
  color: #7d6d63;
  line-height: 1.5;
  margin-top: 8px;
  font-size: 0.76rem;
}

.size-guide-trigger {
  border: 0;
  background: transparent;
  color: #6f4631;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 10px 0 0;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}

.availability-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #d4cac3;
  border-radius: 6px;
  margin: 12px 0 20px;
  overflow: hidden;
}

.availability-card > div {
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #fbf8f5;
}

.availability-card > div + div {
  border-left: 1px solid #d4cac3;
}

.availability-card strong {
  font-size: 0.76rem;
  color: #28201a;
}

.availability-card span {
  font-size: 0.7rem;
  color: #587042;
  line-height: 1.35;
  font-weight: 600;
}

.product-actions-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
  margin-top: 16px;
}

.detail-add-button {
  width: 100%;
  border: 0;
  background: #17120f;
  color: white;
  min-height: 54px;
  border-radius: 99px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  transition: 0.2s;
}

.detail-add-button:hover:not(:disabled) {
  background: #362a22;
}

.detail-add-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.detail-cart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #211a16;
  background: #fff;
  color: #211a16;
  border-radius: 99px;
  padding: 0 22px;
  min-height: 54px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}

.detail-cart-button:hover {
  background: #211a16;
  color: #fff;
}

.personal-shopper-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0;
  border: 1px solid #6f4631;
  border-radius: 99px;
  padding: 14px 20px;
  color: #4f3225;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 48px;
}

.personal-shopper-button span {
  font-size: 0.7rem;
  color: #847166;
  font-weight: 500;
}

.shipping-box {
  border-top: 1px solid #ddd3cc;
  margin-top: 20px;
  padding-top: 20px;
}

.shipping-box label {
  font-weight: 700;
  font-size: 0.8rem;
  color: #2c221a;
  display: block;
}

.shipping-box > div {
  display: flex;
  margin: 10px 0 8px;
  gap: 6px;
}

.shipping-box input {
  flex: 1;
  min-width: 0;
  border: 1px solid #cfc4bc;
  padding: 0 12px;
  min-height: 44px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.shipping-box button {
  border: 0;
  background: #2a211c;
  color: white;
  padding: 0 18px;
  min-height: 44px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
}

.shipping-box small {
  color: #806f64;
  line-height: 1.45;
  font-size: 0.74rem;
}

/* Selection Notice Box & Action Buttons */
.selection-notice-box {
  margin-top: 20px;
  padding: 18px 20px;
  background: #fbf9f6;
  border: 1px solid #dcd1c7;
  border-left: 4px solid #6f4631;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(38, 29, 24, 0.06);
  animation: fadeInNotice 0.25s ease-out;
}

@keyframes fadeInNotice {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.selection-notice-text {
  font-size: 0.9rem;
  color: #241b17;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 14px;
}

.selection-notice-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}

.detail-goto-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #241b17;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 0.84rem;
  padding: 12px 22px;
  border-radius: 99px;
  border: 1px solid #241b17;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(36, 27, 23, 0.15);
  cursor: pointer;
  flex: 1 1 140px;
  text-align: center;
  box-sizing: border-box;
}

.detail-goto-cart-btn:hover {
  background: #3f3027;
  border-color: #3f3027;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(36, 27, 23, 0.22);
}

.detail-service-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffffff;
  color: #52392b !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.84rem;
  padding: 12px 20px;
  border-radius: 99px;
  border: 1.5px solid #cfc1b4;
  transition: all 0.2s ease;
  cursor: pointer;
  flex: 1 1 180px;
  text-align: center;
  box-sizing: border-box;
}

.detail-service-link:hover {
  background: #f4ede6;
  border-color: #6f4631;
  color: #241b17 !important;
  transform: translateY(-1px);
}

.gallery-look-section {
  background: linear-gradient(180deg, #201a16 0%, #151210 100%);
  color: #f7eee8;
  padding: 32px 24px;
  margin-top: 24px;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.gallery-look-section .look-intro-compact {
  margin-bottom: 22px;
}

.gallery-look-section .look-intro-compact .store-kicker {
  color: #dfc28d;
  margin: 0 0 6px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em !important;
  font-weight: 700;
  text-transform: uppercase;
}

.gallery-look-section .look-intro-compact h2 {
  font: 400 clamp(1.45rem, 2.4vw, 1.95rem)/1.2 Georgia, serif;
  margin: 0 0 6px;
  color: #ffffff;
}

.gallery-look-section .look-intro-compact p {
  color: #cdbdb2;
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
}

/* Grid dinâmico por quantidade de peças (1, 2, 3 ou 4) */
.gallery-look-section .look-products {
  display: grid;
  gap: 16px;
  width: 100%;
}

/* 1 Peça: Cartão em destaque amplo (Spotlight) */
.gallery-look-section .look-products[data-count="1"],
.gallery-look-section .look-products.look-count-1 {
  grid-template-columns: 1fr;
}
.gallery-look-section .look-products[data-count="1"] .look-card,
.gallery-look-section .look-products.look-count-1 .look-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: stretch;
}
.gallery-look-section .look-products[data-count="1"] .look-card-media,
.gallery-look-section .look-products.look-count-1 .look-card-media {
  height: 100%;
  min-height: 290px;
}

/* 2 Peças: 2 colunas equilibradas com fotos verticais imponentes */
.gallery-look-section .look-products[data-count="2"],
.gallery-look-section .look-products.look-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gallery-look-section .look-products[data-count="2"] .look-card-media,
.gallery-look-section .look-products.look-count-2 .look-card-media {
  height: 260px;
}

/* 3 Peças: 3 colunas harmoniosas no desktop */
.gallery-look-section .look-products[data-count="3"],
.gallery-look-section .look-products.look-count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gallery-look-section .look-products[data-count="3"] .look-card-media,
.gallery-look-section .look-products.look-count-3 .look-card-media {
  height: 220px;
}

/* 4 Peças: 4 colunas sofisticadas no desktop */
.gallery-look-section .look-products[data-count="4"],
.gallery-look-section .look-products.look-count-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gallery-look-section .look-products[data-count="4"] .look-card-media,
.gallery-look-section .look-products.look-count-4 .look-card-media {
  height: 195px;
}

/* Fallback se sem data-count explícito */
.gallery-look-section .look-products:not([data-count]) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Estrutura visual dos Cartões de Peças */
.gallery-look-section .look-card,
.gallery-look-section .look-products article {
  background: #ffffff;
  color: #241b17;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #e7ded5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.gallery-look-section .look-card:hover,
.gallery-look-section .look-products article:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  border-color: #dfc28d;
}

.gallery-look-section .look-card.look-unselected,
.gallery-look-section .look-products article.look-unselected {
  opacity: 0.6;
  background: #fbf9f6;
  border-color: #e2dad1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.gallery-look-section .look-card.look-unselected:hover,
.gallery-look-section .look-products article.look-unselected:hover {
  opacity: 0.9;
}

/* Header de Mídia / Imagem */
.gallery-look-section .look-card-media,
.gallery-look-section .look-products article > a {
  position: relative;
  width: 100%;
  background: #1e1b19;
  overflow: hidden;
  display: block;
}

.gallery-look-section .look-card-media img,
.gallery-look-section .look-products img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s ease;
}

.gallery-look-section .look-card:hover .look-card-media img,
.gallery-look-section .look-products article:hover img {
  transform: scale(1.05);
}

/* Badge de Seleção / Checkbox Flutuante */
.gallery-look-section .look-check-badge,
.gallery-look-section .look-products article > label {
  position: absolute;
  z-index: 5;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #241b17;
  display: flex;
  gap: 7px;
  align-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, transform 0.2s;
}

.gallery-look-section .look-check-badge:hover,
.gallery-look-section .look-products article > label:hover {
  background: #ffffff;
  transform: scale(1.02);
}

.gallery-look-section .look-check-badge input[type="checkbox"],
.gallery-look-section .look-products article > label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #936e38;
  cursor: pointer;
  margin: 0;
}

/* Corpo do Cartão */
.gallery-look-section .look-card-body,
.gallery-look-section .look-products article > div {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 10px;
  background: #ffffff;
}

.gallery-look-section .look-card.look-unselected .look-card-body,
.gallery-look-section .look-products article.look-unselected > div {
  background: #fbf9f6;
}

.gallery-look-section .look-card-category,
.gallery-look-section .look-products p {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #936e38;
  margin: 0 0 2px;
}

.gallery-look-section .look-card-title,
.gallery-look-section .look-products h3 {
  font: 700 1.02rem/1.3 Georgia, serif;
  color: #241b17;
  margin: 0 0 4px;
}

.gallery-look-section .look-card-title a,
.gallery-look-section .look-products h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.gallery-look-section .look-card-title a:hover,
.gallery-look-section .look-products h3 a:hover {
  color: #936e38;
}

.gallery-look-section .look-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.gallery-look-section .look-card-price-row del {
  color: #8c7b72;
  font-size: 0.82rem;
}

.gallery-look-section .look-card-price,
.gallery-look-section .look-products strong {
  font-size: 1.08rem;
  font-weight: 800;
  color: #15803d;
}

/* Seletores de Cor e Tamanho */
.gallery-look-section .look-card-selects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 4px;
}

.gallery-look-section .look-select,
.gallery-look-section .look-products select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #dcd4cc;
  background: #f8f6f3;
  padding: 0 10px;
  font-size: 0.82rem;
  color: #241b17;
  font-weight: 500;
  border-radius: 7px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.gallery-look-section .look-select:focus,
.gallery-look-section .look-products select:focus {
  border-color: #936e38;
  background: #ffffff;
}

/* Alertas de Estoque */
.gallery-look-section .look-stock-notice {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  text-align: center;
  margin-top: 2px;
}
.gallery-look-section .look-stock-notice.low {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #ffedd5;
}
.gallery-look-section .look-stock-notice.out {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fee2e2;
}

/* Barra de Resumo e Ação (Footer) */
.gallery-look-section .look-summary {
  grid-column: 1/-1;
  margin-top: 14px;
  padding: 18px 24px;
  background: #ffffff;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.gallery-look-section .look-summary-info {
  display: flex;
  flex-direction: column;
}

.gallery-look-section .look-summary-count,
.gallery-look-section .look-summary span {
  font-size: 0.85rem;
  color: #6b5c53;
  font-weight: 600;
}

.gallery-look-section .look-summary-total,
.gallery-look-section .look-summary strong {
  font: 700 1.45rem/1.2 Georgia, serif;
  color: #1b1512;
}

.gallery-look-section .add-look-btn,
.gallery-look-section .look-summary button {
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 99px;
  padding: 13px 26px;
  background: linear-gradient(135deg, #241b17 0%, #4a3c33 100%);
  color: #fcf8f5;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 44px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.gallery-look-section .add-look-btn:hover:not(:disabled),
.gallery-look-section .look-summary button:hover:not(:disabled) {
  background: linear-gradient(135deg, #936e38 0%, #b89150 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(147, 110, 56, 0.4);
}

.gallery-look-section .add-look-btn:disabled,
.gallery-look-section .look-summary button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #5a4e47;
  box-shadow: none;
  transform: none;
}

/* Look Completo Badges & Info */
.gallery-look-section .look-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212, 175, 55, 0.12);
  color: #8a6820;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  width: fit-content;
  margin-bottom: 4px;
}

.gallery-look-section .look-summary-breakdown {
  font-size: 0.82rem;
  color: #5c4e46;
  line-height: 1.35;
  font-weight: 500;
}

/* Purchase Panel Look Bundle Sync */
.detail-add-button.is-look-bundle {
  background: linear-gradient(135deg, #1b1410 0%, #35271e 100%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.2);
}

.detail-add-button.is-look-bundle:hover:not(:disabled) {
  background: linear-gradient(135deg, #2b1e16 0%, #4a362a 100%);
  border-color: rgba(212, 175, 55, 0.85);
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.32);
}

.btn-add-only-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #8c786a;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 6px 10px;
  margin-top: 4px;
  width: 100%;
  text-align: center;
  transition: all 0.2s ease;
}

.btn-add-only-main:hover {
  color: #17120f;
  text-decoration-color: #17120f;
}

@keyframes pulseHighlightAnim {
  0% { outline: 2px solid transparent; transform: scale(1); }
  50% { outline: 3px solid #d4af37; transform: scale(1.02); }
  100% { outline: 2px solid transparent; transform: scale(1); }
}

.pulse-highlight {
  animation: pulseHighlightAnim 0.75s ease 2;
  border-radius: 8px;
}

.product-story {
  padding: 60px clamp(20px, 5vw, 80px) 70px;
  background: #f7f4f0;
}

.product-story .store-kicker {
  margin: 0 0 12px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.16em !important;
  color: #857367 !important;
}

.product-story h2 {
  font: 400 clamp(1.65rem, 2.4vw, 2.35rem)/1.28 Georgia, serif;
  letter-spacing: -0.02em;
  max-width: 780px;
  margin: 0 0 32px;
  color: #1e1713;
}

.product-specs {
  max-width: 780px;
}

.product-specs details {
  border-top: 1px solid #d4c9bf;
  padding: 18px 0;
}

.product-specs details:last-child {
  border-bottom: 1px solid #d4c9bf;
}

.product-specs summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.92rem;
  list-style-position: outside;
  margin-left: 18px;
  color: #211a16;
  padding: 4px 0;
}

.product-specs ul,
.product-specs p {
  color: #6b5a50;
  line-height: 1.75;
  font-size: 0.88rem;
  margin: 16px 0 0 18px;
}

.image-zoom {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 10, 0.94);
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
}

.image-zoom > button {
  position: absolute;
  right: 24px;
  top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.4);
  color: white;
  padding: 10px 18px;
  border-radius: 99px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
}

.image-zoom img {
  max-width: 94vw;
  max-height: 92vh;
  object-fit: contain;
  cursor: zoom-out;
}

/* Cart Page */
.cart-page {
  min-height: 70vh;
  background: #f7f4f0;
  padding: 60px clamp(18px, 5vw, 90px);
}

.cart-page > header {
  max-width: 750px;
  margin-bottom: 40px;
}

.continue-shopping {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4a3427;
  background: #ffffff;
  border: 1.5px solid #d8cdc3;
  padding: 10px 20px;
  border-radius: 99px;
  text-decoration: none;
  margin-bottom: 24px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.continue-shopping:hover {
  background: #241b17;
  color: #ffffff;
  border-color: #241b17;
  transform: translateX(-3px);
  box-shadow: 0 4px 12px rgba(36, 27, 23, 0.12);
}

.cart-page h1 {
  font: 400 clamp(3rem, 6vw, 6.5rem)/0.92 Georgia, serif;
  margin: 6px 0 18px;
}

.cart-page > header > p:last-child {
  color: #75645b;
  line-height: 1.6;
  font-size: 0.95rem;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(310px, 0.6fr);
  gap: 24px;
}

.cart-list {
  display: grid;
  gap: 12px;
}

.cart-list-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
}

.cart-continue-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  background: #ffffff;
  border: 1.5px solid #d8cdc3;
  border-radius: 99px;
  color: #241b17;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cart-continue-btn:hover {
  background: #241b17;
  color: #ffffff;
  border-color: #241b17;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(36, 27, 23, 0.15);
}

.cart-list article {
  display: grid;
  grid-template-columns: 160px 1fr;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ded5cc;
}

.cart-list img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.cart-list article > div {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.cart-list h2 {
  font: 400 1.55rem Georgia, serif;
  margin: 4px 0 8px;
}

.cart-list p {
  font-size: 0.72rem;
  color: #806f65;
  margin: 0;
}

.cart-list label {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  font-size: 0.78rem;
  font-weight: 600;
}

.cart-list select {
  padding: 6px 10px;
  border: 1px solid #cfc4bc;
  border-radius: 4px;
}

.cart-list button {
  border: 0;
  background: transparent;
  text-decoration: underline;
  margin-top: 14px;
  padding: 0;
  cursor: pointer;
  color: #8e4334;
  font-size: 0.78rem;
  align-self: flex-start;
}

.cart-summary {
  background: #261d18;
  color: #f6eee8;
  padding: 28px 24px;
  height: max-content;
  position: sticky;
  top: 110px;
  border-radius: 8px;
  box-sizing: border-box;
}

.cart-summary h2 {
  font: 400 1.85rem Georgia, serif;
  margin: 0 0 18px;
  color: #f6eee8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-summary .cart-summary-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid #594940;
  padding: 12px 0 !important;
  font-size: 0.92rem;
  color: #f6eee8;
  box-sizing: border-box !important;
}

.cart-summary .cart-tool-card {
  display: flex !important;
  flex-direction: column !important;
  border-top: 1px solid #594940;
  padding: 14px 0 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.cart-summary .cart-tool-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 8px !important;
}

.cart-summary .cart-tool-label {
  font-size: 0.78rem !important;
  color: #d5c8be !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

.cart-summary .cart-tool-badge {
  font-size: 0.72rem !important;
  color: #dfc28d !important;
  background: rgba(223, 194, 141, 0.12) !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  border: 1px solid rgba(223, 194, 141, 0.25) !important;
  font-weight: 600 !important;
}

.cart-summary .cart-input-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.cart-summary .cart-input-group input {
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  background: #352922 !important;
  border: 1px solid #594940 !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 0.86rem !important;
  outline: none !important;
}

.cart-summary .cart-input-group input:focus {
  border-color: #dfc28d !important;
}

.cart-summary .cart-input-group button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 80px !important;
  box-sizing: border-box !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  background: #594940 !important;
  color: #f6eee8 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  opacity: 1 !important;
  transition: background 0.2s ease !important;
  white-space: nowrap !important;
}

.cart-summary .cart-input-group button:hover {
  background: #6e5c52 !important;
  color: #ffffff !important;
}

.cart-summary .shipping-options-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 12px !important;
  box-sizing: border-box !important;
}

.cart-summary .shipping-method-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #30251e !important;
  border: 1px solid #473930 !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.cart-summary .shipping-method-row.active,
.cart-summary .shipping-method-row:has(input:checked) {
  background: rgba(223, 194, 141, 0.14) !important;
  border-color: #dfc28d !important;
}

.cart-summary .shipping-method-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
}

.cart-summary .shipping-method-left input[type="radio"] {
  accent-color: #dfc28d !important;
  cursor: pointer !important;
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

.cart-summary .shipping-method-name {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #f6eee8 !important;
  line-height: 1.2 !important;
}

.cart-summary .shipping-method-deadline {
  font-size: 0.72rem !important;
  color: #bbaea4 !important;
  margin-top: 2px !important;
}

.cart-summary .shipping-method-price {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  text-align: right !important;
  color: #dfc28d !important;
  white-space: nowrap !important;
}

.cart-summary .shipping-method-price.free {
  color: #4ade80 !important;
  font-weight: 800 !important;
}

.free-shipping-card {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(135deg, #2b211a 0%, #1c1511 100%) !important;
  border: 1px solid rgba(223, 194, 141, 0.35) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18) !important;
}

.free-shipping-card.free {
  border-color: rgba(74, 222, 128, 0.4) !important;
}

.cart-summary #open-checkout-modal-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border: 0;
  border-radius: 99px;
  padding: 16px;
  margin-top: 14px;
  background: linear-gradient(135deg, #dfc28d 0%, #c8a66a 50%, #b89355 100%);
  color: #241b17;
  font-weight: 800;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(200, 166, 106, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
  opacity: 1 !important;
}

.cart-summary #open-checkout-modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200, 166, 106, 0.35);
}

.cart-summary a.personal-shopper-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid #594940;
  border-radius: 99px;
  padding: 13px;
  margin-top: 10px;
  background: transparent;
  color: #f4e7dc;
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: none;
  transition: background 0.2s;
}

.cart-summary a.personal-shopper-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.cart-summary a.continue-shopping-summary {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  color: #d5c8be;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 12px;
  margin-top: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cart-summary a.continue-shopping-summary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  transform: translateY(-1px);
}

.cart-empty {
  background: white;
  padding: 60px 20px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #ded5cc;
}

.cart-empty a {
  color: #6f4631;
  font-weight: 700;
}

/* Payment Methods & PIX Display Styles */
.payment-method-selector {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.payment-method-card {
  border: 1.5px solid #d8cdc3;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #faf8f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.payment-method-card:hover {
  border-color: #a8894d;
  background: #fff;
}

.payment-method-card.active {
  border-color: #b89355;
  background: #fffdf9;
  box-shadow: 0 0 0 2px rgba(184, 147, 85, 0.2);
}

.payment-method-card input[type="radio"] {
  accent-color: #b89355;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.pix-badge {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid rgba(34, 197, 94, 0.25);
  letter-spacing: 0.04em;
}

.pix-display-screen {
  text-align: center;
  padding: 10px 0;
  animation: fadeInNotice 0.3s ease;
}

.pix-qr-wrap {
  background: #ffffff;
  border: 2px dashed #d8cdc3;
  border-radius: 12px;
  padding: 16px;
  display: inline-block;
  margin: 16px auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.pix-qr-wrap img {
  width: 220px;
  height: 220px;
  display: block;
}

.pix-copy-box {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}

.pix-copy-input {
  flex: 1;
  padding: 11px 14px;
  background: #f7f4f0;
  border: 1px solid #d8cdc3;
  border-radius: 8px;
  font-family: monospace;
  font-size: 0.82rem;
  color: #241b17;
  outline: none;
}

.pix-copy-btn {
  padding: 11px 18px;
  background: #241b17;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.pix-copy-btn:hover {
  background: #44332a;
}

.pix-steps {
  text-align: left;
  background: #faf8f5;
  border: 1px solid #ede4dc;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 0.82rem;
  color: #594940;
  line-height: 1.6;
}

.pix-steps ol {
  margin: 6px 0 0 16px;
  padding: 0;
}

.pix-steps li {
  margin-bottom: 4px;
}

.cart-recommendations {
  margin-top: 80px;
  border-top: 1px solid #d4c8bf;
  padding-top: 48px;
}

.cart-recommendations > div:first-child {
  max-width: 720px;
}

.cart-recommendations h2 {
  font: 400 clamp(2rem, 4.5vw, 4.5rem)/1.05 Georgia, serif;
  margin: 6px 0 16px;
}

.cart-recommendations > div:first-child > p:last-child {
  color: #76655b;
  line-height: 1.6;
}

.recommendation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.recommendation-grid article {
  background: #fff;
  padding-bottom: 18px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ded5cc;
  display: flex;
  flex-direction: column;
}

.recommendation-grid a {
  color: inherit;
  text-decoration: none;
}

.recommendation-grid img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.recommendation-grid span,
.recommendation-grid h3,
.recommendation-grid strong {
  display: block;
  margin-left: 14px;
  margin-right: 14px;
}

.recommendation-grid span {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #806f64;
  margin-top: 12px;
}

.recommendation-grid h3 {
  font: 400 1.15rem Georgia, serif;
  margin-top: 6px;
  margin-bottom: 8px;
}

.recommendation-grid button {
  margin: 12px 14px 0;
  width: calc(100% - 28px);
  border: 1px solid #4a3428;
  background: transparent;
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.76rem;
  margin-top: auto;
}

.recommendation-grid button:hover {
  background: #2b211c;
  color: white;
}

.account-page {
  min-height: calc(100vh - 118px);
  padding: 60px 18px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 10% 10%, #ead7ca, transparent 35%), #f5f0eb;
}

.account-card {
  width: min(580px, 100%);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d6c8be;
  padding: clamp(26px, 5vw, 55px);
  box-shadow: 0 25px 80px rgba(77, 50, 35, 0.08);
  border-radius: 12px;
}

.account-card h1 {
  font: 400 clamp(2.4rem, 6vw, 4.8rem)/0.95 Georgia, serif;
  margin: 8px 0 20px;
}

.account-card > p {
  color: #746258;
  line-height: 1.65;
  font-size: 0.94rem;
}

.login-options {
  display: grid;
  gap: 10px;
  margin: 28px 0;
}

.login-options button {
  min-height: 54px;
  border: 1px solid #cbbdb3;
  background: #eee9e5;
  color: #453a32;
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  text-align: left;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 0.88rem;
  cursor: pointer;
}

.login-options button small {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #88796f;
}

.account-divider {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #8b7c72;
  font-size: 0.7rem;
  margin: 24px 0;
}

.account-divider:before,
.account-divider:after {
  content: "";
  height: 1px;
  background: #d8ccc4;
  flex: 1;
}

.guest-entry {
  display: block;
  background: #261d18;
  color: white;
  text-decoration: none;
  text-align: center;
  border-radius: 99px;
  padding: 15px;
  font-weight: 700;
  font-size: 0.86rem;
}

.account-secondary {
  display: block;
  text-align: center;
  color: #6f4631;
  margin-top: 16px;
  font-size: 0.82rem;
  font-weight: 600;
}

.privacy-note {
  display: block;
  color: #8a786d;
  line-height: 1.5;
  margin-top: 20px;
  font-size: 0.76rem;
  text-align: center;
}

/* ==========================================================================
   BREAKPOINTS: TABLET & MOBILE
   ========================================================================== */

@media (max-width: 1024px) {
  .store-header {
    padding: 0 20px;
  }
  .store-header nav {
    gap: 18px;
  }
  .product-detail-layout {
    grid-template-columns: 1fr;
  }
  .product-purchase-panel {
    position: relative;
    min-height: auto;
    padding: 36px 20px;
  }
  .detail-stage {
    height: 65vh;
    min-height: 440px;
  }
  .detail-thumbnails {
    overflow-x: auto;
    display: flex;
    gap: 6px;
    padding: 8px;
  }
  .detail-thumbnails button {
    width: 75px;
    height: 95px;
    flex-shrink: 0;
  }
  .cart-layout {
    grid-template-columns: 1fr;
  }
  .cart-summary {
    position: static;
  }
  .recommendation-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .store-header {
    height: auto;
    min-height: 74px;
    padding: 6px 12px 6px;
    flex-wrap: wrap;
    gap: 0;
    position: sticky;
    top: 0;
  }
  body.header-visible .store-header {
    min-height: 74px;
    height: auto;
  }
  body.header-visible .shop-tools {
    top: 74px;
  }
  .store-brand img {
    width: 56px;
    height: 38px;
  }
  .store-header nav {
    order: 2;
    width: 100%;
    gap: 6px;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 2px;
    margin-top: 2px;
  }
  .store-header nav a {
    font-size: 0.65rem;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 99px;
    flex-shrink: 0;
  }
  .store-header nav a.active {
    background: #28201b;
    color: #fff;
  }
  .store-header nav a:after {
    display: none;
  }
  .header-whatsapp {
    border-radius: 99px;
    padding: 5px 10px !important;
    background: #25d366 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700;
  }
  
  .shop-hero {
    min-height: 320px;
    padding: 38px 14px 28px;
  }
  .shop-hero h1 {
    font-size: clamp(2.1rem, 7.5vw, 3.4rem);
  }
  .shop-hero > p:last-child {
    font-size: 0.9rem;
    margin-top: 14px;
  }
  
  .shop-tools {
    top: 0;
    padding: 8px 12px;
    gap: 8px;
  }
  .search-field {
    flex: 1 1 130px;
    min-width: 120px;
    max-width: none;
    order: 1;
  }
  .search-field input {
    min-height: 32px;
    font-size: 0.78rem;
    padding: 5px 10px 5px 26px;
  }
  .filter-toggle {
    order: 2;
    padding: 5px 10px;
    font-size: 0.74rem;
    min-height: 32px;
  }
  .cart-trigger {
    order: 2;
    padding: 5px 10px;
    font-size: 0.74rem;
    min-height: 32px;
    margin-left: 0;
  }
  .category-list {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    padding: 2px 0 0;
    gap: 5px;
  }
  .category-list button {
    padding: 5px 12px;
    font-size: 0.74rem;
    min-height: 30px;
  }
  .advanced-filters {
    order: 4;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .shop-tools.filters-open .advanced-filters,
  .shop-tools.filters-visible .advanced-filters {
    max-height: 480px;
  }
  .advanced-filters .price-filter,
  .clear-filters {
    grid-column: 1 / -1;
  }
  .results-count {
    order: 5;
    font-size: 0.68rem;
  }
  
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    background: #e5ddd6;
  }
  .product-card {
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
  }
  .product-image-wrap {
    aspect-ratio: 4/5;
    height: auto;
  }
  .product-info {
    padding: 10px 10px 14px;
  }
  .product-info > p:first-child {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .product-info h2 {
    font-size: 0.95rem;
    line-height: 1.25;
    margin-bottom: 6px;
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .price-line {
    margin-bottom: 6px;
    font-size: 0.92rem;
    gap: 6px;
  }
  .price-line strong {
    font-size: 0.95rem;
  }
  .product-description {
    display: none;
  }
  .product-info > button {
    padding: 9px 6px;
    font-size: 0.75rem;
    min-height: 38px;
    border-radius: 4px;
  }
  .offer-tag,
  .stock-tag {
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    font-size: 0.6rem;
  }
  .stock-tag {
    right: 8px;
    left: auto;
  }

  .detail-stage {
    height: 55vh;
    min-height: 340px;
  }
  .detail-image-button > span {
    right: 12px;
    top: 12px;
    padding: 6px 10px;
    font-size: 0.68rem;
  }
  .gallery-arrows {
    right: 10px;
    bottom: 10px;
    padding: 3px;
  }
  .gallery-arrows button {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .detail-thumbnails {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .detail-thumbnails button {
    width: 60px;
    height: 78px;
    flex-shrink: 0;
    border-radius: 4px;
  }
  .product-purchase-panel {
    padding: 24px 14px 34px;
  }
  .product-purchase-panel h1 {
    font-size: clamp(1.75rem, 6.5vw, 2.5rem);
    margin-bottom: 12px;
  }
  .product-actions-group {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .size-options {
    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
    gap: 6px;
  }
  .size-options button {
    min-height: 44px;
  }
  .availability-card {
    grid-template-columns: 1fr;
  }
  .availability-card > div + div {
    border-left: 0;
    border-top: 1px solid #d4cac3;
  }
  
  .gallery-look-section {
    padding: 22px 14px;
    margin-top: 20px;
  }
  .gallery-look-section .look-products[data-count="1"] .look-card,
  .gallery-look-section .look-products.look-count-1 .look-card {
    grid-template-columns: 1fr;
  }
  .gallery-look-section .look-products[data-count="1"] .look-card-media,
  .gallery-look-section .look-products.look-count-1 .look-card-media {
    min-height: 240px;
    height: 250px;
  }
  .gallery-look-section .look-products[data-count="2"],
  .gallery-look-section .look-products[data-count="3"],
  .gallery-look-section .look-products[data-count="4"],
  .gallery-look-section .look-products.look-count-2,
  .gallery-look-section .look-products.look-count-3,
  .gallery-look-section .look-products.look-count-4 {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .gallery-look-section .look-card-media,
  .gallery-look-section .look-products article > a {
    height: 250px !important;
  }
  .gallery-look-section .look-card-body,
  .gallery-look-section .look-products article > div {
    padding: 14px;
  }
  .gallery-look-section .look-card-title,
  .gallery-look-section .look-products h3 {
    font-size: 1.05rem;
  }
  .gallery-look-section .look-summary {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 12px;
    padding: 16px 14px;
  }
  .gallery-look-section .add-look-btn,
  .gallery-look-section .look-summary button {
    width: 100%;
    min-height: 46px;
    padding: 13px 18px;
  }

  .cart-page {
    padding: 26px 14px 60px;
  }
  .cart-list article {
    grid-template-columns: 85px 1fr;
    gap: 12px;
    padding: 12px;
  }
  .cart-list img {
    height: 110px;
    border-radius: 4px;
  }
  .cart-list article > div {
    padding: 0;
  }
  .cart-list h2 {
    font-size: 1.15rem;
    margin: 0 0 4px;
  }
  .cart-summary {
    padding: 20px 14px;
  }
  .recommendation-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .recommendation-grid img {
    height: 175px;
  }
  .recommendation-grid h3 {
    font-size: 0.98rem;
    margin: 4px 10px 6px;
  }
  .recommendation-grid span,
  .recommendation-grid strong {
    margin-left: 10px;
    margin-right: 10px;
  }
  .recommendation-grid button {
    margin: 8px 10px 0;
    width: calc(100% - 20px);
    padding: 8px;
  }
  
  .store-footer {
    flex-direction: column;
    text-align: center;
    padding: 34px 14px;
    gap: 14px;
  }
}

@media (max-width: 360px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .product-image-wrap {
    aspect-ratio: 3/4;
  }
  .product-description {
    display: block;
    font-size: 0.82rem;
    margin-bottom: 12px;
  }
}


/* ==========================================================================
   SMART DYNAMIC HEADER & ULTRA-SLIM FILTER BAR (DESKTOP & MOBILE)
   ========================================================================== */

/* Header */
.store-header {
  height: 72px;
  padding: 0 clamp(16px, 4vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(243, 238, 232, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(205, 187, 170, 0.7);
  position: sticky;
  top: 0;
  z-index: 50;
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

body.header-hidden .store-header {
  transform: translateY(-100%);
}

body.header-visible .store-header {
  transform: translateY(0);
  height: 52px;
  background: rgba(243, 238, 232, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body.header-visible .store-header .store-brand img {
  width: 68px;
  height: 48px;
}

/* Smart Ultra-Slim Filter Bar */
.shop-tools {
  height: 48px;
  padding: 6px clamp(14px, 3.5vw, 60px);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(205, 187, 170, 0.6);
  position: sticky;
  top: 0;
  background: rgba(243, 238, 232, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 40;
  box-sizing: border-box;
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), top 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, box-shadow 0.25s ease;
}

/* Scroll Down -> Complete screen immersion for product grid */
body.header-hidden .shop-tools {
  transform: translateY(-150%);
  opacity: 0;
  pointer-events: none;
}

/* Scroll Up -> Gentle slim bar appears */
body.header-visible .shop-tools {
  transform: translateY(0);
  top: 52px;
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.search-field {
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 0 170px;
  min-width: 130px;
  max-width: 220px;
}

.search-field span {
  display: none;
}

.search-field:before {
  content: "🔍";
  position: absolute;
  left: 10px;
  font-size: 0.72rem;
  opacity: 0.55;
  pointer-events: none;
}

.search-field input {
  width: 100%;
  border: 1px solid #cfc4bc;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 12px 5px 28px;
  font-size: 0.78rem;
  color: #211a16;
  outline: none;
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.search-field input:focus {
  border-color: #8f6044;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(143, 96, 68, 0.15);
}

.category-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
}

.category-list::-webkit-scrollbar {
  display: none;
}

.category-list button {
  border: 1px solid #cfc3b8;
  border-radius: 99px;
  padding: 4px 12px;
  background: transparent;
  color: #3b2e25;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  height: 32px;
  min-height: 32px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.category-list button.active,
.category-list button:hover {
  background: #241c17;
  color: #fff;
  border-color: #241c17;
}

.filter-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border: 1px solid #bda999;
  border-radius: 99px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.8);
  color: #30251e;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  height: 32px;
  min-height: 32px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.filter-toggle:hover,
.filter-toggle.active,
.filter-toggle.has-active {
  background: #241c17;
  color: #f4e7dc;
  border-color: #241c17;
}

.cart-trigger {
  border: 1px solid #8f6044;
  border-radius: 99px;
  padding: 4px 12px;
  background: #8f6044;
  color: white;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  height: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  transition: 0.2s ease;
}

.cart-trigger:hover {
  background: #764b32;
  border-color: #764b32;
}

.cart-trigger span {
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: #6f4631;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  font-size: 0.68rem;
  font-weight: 700;
}

.results-count {
  font-size: 0.72rem;
  color: #8a786d;
  white-space: nowrap;
  margin: 0 4px;
}

/* Inline advanced filters are hidden because we use the Filter Drawer */
.advanced-filters {
  display: none !important;
}

/* ==========================================================================
   RESPONSIVE MOBILE STYLING (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .store-header {
    height: 48px;
    padding: 0 12px;
  }
  body.header-visible .store-header {
    height: 44px;
  }
  .store-brand img {
    width: 64px;
    height: 40px;
  }
  body.header-visible .store-brand img {
    width: 58px;
    height: 36px;
  }
  .shop-tools {
    height: 42px;
    padding: 3px 8px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  body.header-visible .shop-tools {
    top: 44px;
  }
  .search-field {
    flex: 0 0 105px;
    min-width: 85px;
  }
  .search-field input {
    height: 28px;
    min-height: 28px;
    padding: 2px 6px 2px 22px;
    font-size: 0.72rem;
  }
  .search-field:before {
    left: 7px;
    font-size: 0.65rem;
  }
  .category-list button {
    height: 28px;
    min-height: 28px;
    padding: 2px 10px;
    font-size: 0.72rem;
  }
  .filter-toggle {
    height: 28px;
    min-height: 28px;
    padding: 2px 9px;
    font-size: 0.72rem;
  }
  .cart-trigger {
    height: 28px;
    min-height: 28px;
    padding: 2px 9px;
    font-size: 0.72rem;
  }
  .results-count {
    display: none;
  }
}

/* ==========================================================================
   CHECKOUT & PAYMENT METHODS (PIX, CARTÃO, BOLETO)
   ========================================================================== */
.payment-selector-wrap {
  margin-bottom: 22px;
}

.payment-method-selector {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 10px;
}

.payment-method-card {
  border: 2px solid #e5ded7;
  background: #ffffff;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.payment-method-card:hover {
  border-color: #c8a66a;
  background: #fffdfa;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(200, 166, 106, 0.15);
}

.payment-method-card.active {
  border-color: #a88448;
  background: #fdfaf6;
  box-shadow: 0 0 0 1px #a88448, 0 8px 18px rgba(168, 132, 72, 0.18);
}

.payment-method-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.payment-method-card-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: #241b17;
  display: flex;
  align-items: center;
  gap: 6px;
}

.payment-method-card-badge {
  background: #dcfce7;
  color: #15803d;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid #86efac;
}

.payment-method-card-price {
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #241b17;
  margin: 2px 0 4px;
}

.payment-method-card-price.discounted {
  color: #15803d;
}

.payment-method-card-desc {
  font-size: 0.74rem;
  color: #75645b;
  line-height: 1.35;
  margin: 0;
}

/* PIX Screen Inside Modal */
.pix-display-screen {
  text-align: center;
  animation: fadeInPix 0.3s ease-out;
}

@keyframes fadeInPix {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.pix-qr-wrap {
  background: #ffffff;
  border: 1px solid #ded5cc;
  border-radius: 12px;
  padding: 18px;
  display: inline-block;
  margin: 16px auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.pix-qr-wrap img {
  width: 210px;
  height: 210px;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
}

.pix-copy-box {
  background: #faf8f5;
  border: 1px solid #ded5cc;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 16px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pix-copy-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 0.8rem;
  color: #594940;
  font-family: monospace;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pix-copy-btn {
  background: #241b17;
  color: #f4e7dc;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pix-copy-btn:hover {
  background: #3f312a;
}

.pix-copy-btn.copied {
  background: #15803d;
  color: #ffffff;
}

.pix-steps {
  text-align: left;
  background: #fdfaf6;
  border: 1px solid #ede4dc;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 16px 0;
}

.pix-steps ol {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 0.8rem;
  color: #594940;
  line-height: 1.6;
}

.pix-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 10px 0;
}

.pix-pulse-dot {
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
  animation: pulseDot 1.4s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.6; }
}

.pix-approved-box {
  background: linear-gradient(135deg, #14532d 0%, #166534 100%);
  border: 1px solid #22c55e;
  color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(34,197,94,0.2);
}