/* Variante visual "3D" — radios moderados (8px) + relieve sutil en elementos interactivos.
   Activa con data-style="3d" en el root. */

[data-style="3d"] {
  background: #fdfaf3 !important;
}

/* === HEADER === */
[data-style="3d"] [data-sui="header"] {
  border-bottom: 1px solid #ead9b8 !important;
  box-shadow: 0 2px 4px rgba(60,40,20,0.05) !important;
}

/* === Branch pill === */
[data-style="3d"] [data-sui="branch-pill"] {
  border-radius: 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 1px 0 rgba(0,0,0,0.06) !important;
}

/* === Icon buttons del header === */
[data-style="3d"] [data-sui="icon-btn"] {
  border-radius: 50% !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -2px 0 rgba(160,130,90,0.18),
    0 2px 3px rgba(60,40,20,0.10) !important;
}
[data-style="3d"] [data-sui="icon-btn"]:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.15) !important;
}

/* === Search input === */
[data-style="3d"] [data-sui="input"] input {
  border-radius: 8px !important;
  box-shadow:
    inset 0 2px 3px rgba(60,40,20,0.10) !important;
}

/* === Chips de categoría === */
[data-style="3d"] [data-sui="chip"] {
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.05),
    0 1px 2px rgba(60,40,20,0.08) !important;
}
[data-style="3d"] [data-sui="chip"][data-active="true"] {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 0 rgba(0,0,0,0.18),
    0 2px 3px rgba(60,40,20,0.20) !important;
}
[data-style="3d"] [data-sui="chip"]:active {
  transform: translateY(1px) !important;
}

/* === AI CTA === */
[data-style="3d"] [data-sui="ai-cta"] {
  border-radius: 12px !important;
  animation: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -2px 0 rgba(160,90,30,0.18),
    0 3px 0 rgba(160,90,30,0.18),
    0 6px 12px rgba(217,119,6,0.25) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
[data-style="3d"] [data-sui="ai-cta"]:active {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(160,90,30,0.10),
    0 1px 0 rgba(160,90,30,0.18),
    0 2px 6px rgba(217,119,6,0.18) !important;
}

/* === Cards de producto === */
[data-style="3d"] [data-sui="card"] {
  border-radius: 10px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -1px 0 rgba(160,130,90,0.10) inset,
    0 2px 4px rgba(60,40,20,0.08),
    0 4px 12px rgba(60,40,20,0.05) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
[data-style="3d"] [data-sui="card"]:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -1px 0 rgba(160,130,90,0.10) inset,
    0 4px 8px rgba(60,40,20,0.10),
    0 8px 18px rgba(60,40,20,0.08) !important;
}

[data-style="3d"] [data-sui="card-sm"] {
  border-radius: 8px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 2px 4px rgba(60,40,20,0.08) !important;
}

/* === Image cells — esquinas suaves arriba === */
[data-style="3d"] [data-sui="image-cell"] {
  border-radius: 10px 10px 0 0 !important;
}

/* === Botones primarios (Agregar, etc.) === */
[data-style="3d"] [data-sui="btn-primary"] {
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 0 rgba(0,0,0,0.18),
    0 2px 0 rgba(0,0,0,0.18),
    0 3px 6px rgba(0,0,0,0.15) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
  border: none !important;
}
[data-style="3d"] [data-sui="btn-primary"]:hover {
  filter: brightness(1.05);
}
[data-style="3d"] [data-sui="btn-primary"]:active {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.25),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    0 0 0 rgba(0,0,0,0) !important;
}

/* === Steppers de cantidad === */
[data-style="3d"] [data-sui="stepper"] {
  border-radius: 8px !important;
  box-shadow:
    inset 0 2px 3px rgba(60,40,20,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.5) !important;
}

/* === Layout toggle (grid/list) === */
[data-style="3d"] [data-sui="layout-toggle"] {
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 3px rgba(60,40,20,0.10) !important;
  padding: 3px !important;
}
[data-style="3d"] [data-sui="layout-toggle"] button {
  border-radius: 6px !important;
}
[data-style="3d"] [data-sui="layout-toggle"] button[data-active="1"] {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(160,130,90,0.10),
    0 1px 2px rgba(60,40,20,0.10) !important;
}

/* === Cart bar inferior === */
[data-style="3d"] [data-sui="cart-bar"] {
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 0 rgba(0,0,0,0.30),
    0 3px 0 rgba(0,0,0,0.25),
    0 8px 24px rgba(0,0,0,0.30) !important;
}
[data-style="3d"] [data-sui="cart-bar"]:active {
  transform: translateY(2px) !important;
}