/* ============================================================
   OWLIO THEME — COMPONENT STYLES
   Supplements style.css (variables/reset) + Tailwind CDN
   ============================================================ */

/* ── HEADER ──────────────────────────────────────────────────── */
#owlio-header.scrolled {
  background: rgba(31, 31, 31, 0.97);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* Custom logo size */
#owlio-header .custom-logo { height: 40px; width: auto; }

/* ── MATERIAL SYMBOLS VARIATION ──────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── PRODUCT CARDS ───────────────────────────────────────────── */
.owl-eye-focus:hover img {
  filter: brightness(1.1) contrast(1.1);
  transform: scale(1.05);
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.owlio-card-img-wrap {
  overflow: hidden;
  background: var(--owlio-surface);
}

.owlio-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.owlio-card-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--owlio-surface), var(--owlio-surface-high));
}

/* ── PRODUCT GRID (WooCommerce) ──────────────────────────────── */
.owlio-products-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 4rem 2rem;
}
@media (min-width: 768px) {
  .owlio-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .owlio-products-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── WOOCOMMERCE OVERRIDES ───────────────────────────────────── */

/* Prices */
.woocommerce span.woocommerce-Price-amount,
.woocommerce ins .woocommerce-Price-amount {
  color: var(--owlio-accent);
  font-family: var(--owlio-font-body);
  font-size: 0.875rem;
  font-weight: 700;
}
.woocommerce del .woocommerce-Price-amount {
  color: var(--owlio-text-muted);
  font-size: 0.75rem;
}

/* Sale badge */
.woocommerce span.onsale {
  background: var(--owlio-accent);
  color: #1F1F1F;
  font-family: var(--owlio-font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--owlio-radius);
  top: 1rem;
  left: 1rem;
  padding: 0.35rem 0.75rem;
  min-height: auto;
  min-width: auto;
  line-height: 1;
}

/* Add to cart button */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input[type="submit"],
.woocommerce #respond input#submit {
  background: var(--owlio-accent);
  color: #1F1F1F;
  font-family: var(--owlio-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--owlio-radius);
  padding: 1.1rem 2rem;
  border: none;
  transition: all 0.3s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input[type="submit"]:hover {
  background: var(--owlio-accent-dark);
  color: #1F1F1F;
  filter: brightness(1.1);
}

/* Forms */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--owlio-border);
  border-radius: 0;
  color: #fff;
  font-family: var(--owlio-font-body);
  font-size: 14px;
  padding: 1rem 0;
  transition: border-color 0.3s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-bottom-color: var(--owlio-accent);
  outline: none;
  box-shadow: none;
}
.woocommerce form .form-row label {
  color: var(--owlio-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--owlio-font-body);
}

/* ── CART COUNT BADGE ────────────────────────────────────────── */
.owlio-cart-count.hidden { display: none; }

/* ── EDITORIAL CARD SHADOW ───────────────────────────────────── */
.editorial-shadow { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); }

/* ── PRODUCT GALLERY ─────────────────────────────────────────── */
.owlio-gallery-thumb {
  width: 80px;
  height: 96px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}
.owlio-gallery-thumb:hover { opacity: 0.8; }
.owlio-gallery-thumb.active { ring: 1px solid var(--owlio-accent); }

/* ── CHECKOUT STEPS ──────────────────────────────────────────── */
.owlio-checkout-step.active { color: var(--owlio-accent); border-color: var(--owlio-accent); }
.owlio-checkout-step { color: var(--owlio-text-muted); }

/* ── COLLAPSIBLE DETAILS (Product) ──────────────────────────── */
details summary::-webkit-details-marker { display: none; }
details[open] .owlio-chevron { transform: rotate(180deg); }
.owlio-chevron { transition: transform 0.3s ease; }

/* ── FILTER SIDEBAR ──────────────────────────────────────────── */
.owlio-filter-section { border-bottom: 1px solid var(--owlio-border-light); padding-bottom: 2rem; margin-bottom: 2rem; }
.owlio-filter-section:last-child { border-bottom: none; }

/* ── PAGINATION ──────────────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
  margin: 3rem 0;
}
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a {
  background: transparent;
  border: none;
  color: var(--owlio-text-muted);
  font-family: var(--owlio-font-body);
  font-size: 12px;
  font-weight: 700;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--owlio-radius);
  transition: all 0.2s ease;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--owlio-accent);
  color: #1F1F1F;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--owlio-surface);
  color: #fff;
}

/* ── NOTICE / ALERTS ─────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--owlio-surface);
  border-top-color: var(--owlio-accent);
  color: #fff;
  font-family: var(--owlio-font-body);
  font-size: 13px;
}
.woocommerce-error { border-top-color: var(--owlio-error); }

/* ── QUANTITY FIELD ──────────────────────────────────────────── */
.woocommerce .quantity .qty {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--owlio-border);
  color: #fff;
  font-family: var(--owlio-font-body);
  text-align: center;
  width: 3rem;
  padding: 0.5rem 0;
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar            { width: 4px; height: 4px; }
::-webkit-scrollbar-track      { background: var(--owlio-surface-low); }
::-webkit-scrollbar-thumb      { background: var(--owlio-border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover{ background: var(--owlio-accent); }

/* ── NO-SCROLLBAR UTIL ───────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── TEXT VERTICAL ───────────────────────────────────────────── */
.text-vertical { writing-mode: vertical-rl; text-orientation: mixed; }

/* ── MYACCOUNT ───────────────────────────────────────────────── */
.woocommerce-MyAccount-navigation {
  background: var(--owlio-surface);
  padding: 2rem;
  border-radius: var(--owlio-radius);
}
.woocommerce-MyAccount-navigation ul li a {
  color: var(--owlio-text-muted);
  font-family: var(--owlio-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--owlio-border-light);
  transition: color 0.2s ease;
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--owlio-accent);
}
.woocommerce-MyAccount-navigation ul li:last-child a { border-bottom: none; }

/* ── LOADING ANIMATION ───────────────────────────────────────── */
@keyframes owlio-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.owlio-fade-in { animation: owlio-fade-in 0.5s ease forwards; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .owlio-products-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
}