/*
 * orange-product.css
 * Premium overrides for the shared pages when visited as /orange/*
 * Scoped to html[data-line="orange"] — zero effect on Manu Plast pages.
 *
 * Covers:
 *   - /orange/products   (product-grid category cards)
 *   - /orange/type-detail (ProductDetailManager rendered HTML)
 * ─────────────────────────────────────────────────────────────────────── */

/* ── 0. Shared tokens (mirrors orange.html :root, warm default) ────────── */
html[data-line="orange"] {
  --o-bg:       #FFFFFF;
  --o-bg2:      #F8F9FA;
  --o-panel:    #F3F4F6;
  --o-text:     #0A0A0A;
  --o-muted:    #6B7280;
  --o-amber:    #EA580C;
  --o-molten:   #EA580C;
  --o-ember:    #F97316;
  --o-gold:     #D97706;
  --o-card:     #FFFFFF;
  --o-border:   #E5E7EB;
  --o-border-s: #D1D5DB;
  --o-line:     #F3F4F6;
  --o-shadow:   0 10px 30px rgba(0,0,0,.04);
  --o-sans:     'Inter', system-ui, sans-serif;
}
html[data-line="orange"][data-theme="dark"] {
  --o-bg:       #0A0805;
  --o-bg2:      #121009;
  --o-panel:    #1A1410;
  --o-text:     #F5EFE8;
  --o-muted:    #9A8B7A;
  --o-gold:     #C99A5B;
  --o-card:     #161210;
  --o-border:   rgba(201,154,91,.14);
  --o-border-s: rgba(201,154,91,.45);
  --o-line:     rgba(201,154,91,.16);
  --o-shadow:   0 10px 40px rgba(0,0,0,.40);
}

/* ── 1. Body & font foundation ──────────────────────────────────────────── */
html[data-line="orange"] body {
  font-family: var(--o-sans);
  -webkit-font-smoothing: antialiased;
  background: var(--o-bg);
  color: var(--o-text);
}

/* ── 2. Page wrapper / section padding ─────────────────────────────────── */
html[data-line="orange"] .max-w-6xl,
html[data-line="orange"] .max-w-7xl {
  background: transparent !important;
}

/* ── 3. ── PRODUCT LISTING PAGE (/orange/products) ─────────────────────── */

/* Category grid cards (rendered by fetchProducts) */
html[data-line="orange"] #product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1.6rem !important;
  padding: 0 0 3rem !important;
}

/* Card override — premium bento style */
html[data-line="orange"] #product-grid .group {
  border-radius: 20px !important;
  overflow: hidden;
  border: 1px solid var(--o-border) !important;
  background: var(--o-card) !important;
  box-shadow: var(--o-shadow) !important;
  transition: border-color .3s cubic-bezier(0.2, 0.8, 0.2, 1), transform .3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .3s !important;
  display: flex; flex-direction: column; position: relative;
}
html[data-line="orange"] #product-grid .group:hover {
  border-color: var(--o-amber) !important;
  transform: translateY(-5px) scale(1.01) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.08) !important;
}

/* Make images scale smoothly, object-fit contain */
html[data-line="orange"] #product-grid .group img {
  width: 100% !important;
  height: 250px !important;
  object-fit: contain !important;
  padding: 2rem !important;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  background: transparent !important;
}
html[data-line="orange"] #product-grid .group:hover img {
  transform: scale(1.08) !important;
}

/* Card text area (bottom gradient) */
html[data-line="orange"] #product-grid .group > div:not(.relative) {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.5rem !important; z-index: 2;
  background: linear-gradient(to top, var(--o-card) 0%, rgba(255,255,255,0) 100%) !important;
}
html[data-line="orange"][data-theme="dark"] #product-grid .group > div:not(.relative) {
  background: linear-gradient(to top, var(--o-card) 0%, rgba(22,18,16,0) 100%) !important;
}

/* Titles and labels */
html[data-line="orange"] #product-grid h3 {
  font-family: var(--o-sans) !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  color: var(--o-text) !important;
  letter-spacing: -0.02em; margin-bottom: 0.2rem !important;
}
html[data-line="orange"] #product-grid p {
  color: var(--o-amber) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}

/* Hide Explore Now text, we will let it just be the clean card */
html[data-line="orange"] #product-grid .text-red-500,
html[data-line="orange"] #product-grid .group-hover\:text-red-600 {
  display: none !important;
}

/* ── 4. ── TYPE DETAIL PAGE (/orange/type-detail) ───────────────────────── */

/* Remove the boxy red breadcrumb header bar */
html[data-line="orange"] #type-detail > div > div.bg-red-600 {
  background: transparent !important;
  border-bottom: 1px solid var(--o-border) !important;
  padding: 1.5rem 0 !important; margin-bottom: 2rem !important;
}
html[data-line="orange"] #type-detail > div > div.bg-red-600 a,
html[data-line="orange"] #type-detail > div > div.bg-red-600 span {
  color: var(--o-muted) !important;
  font-size: .8rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
html[data-line="orange"] #type-detail > div > div.bg-red-600 span.font-semibold {
  color: var(--o-text) !important;
  font-weight: 800 !important;
}
html[data-line="orange"] #type-detail > div > div.bg-red-600 a:hover {
  color: var(--o-amber) !important;
}
html[data-line="orange"] #share-button {
  color: var(--o-muted) !important;
  font-size: .85rem !important;
  letter-spacing: .05em; font-weight: 700 !important;
}
html[data-line="orange"] #share-button:hover {
  color: var(--o-amber) !important;
}

/* Outer card wrapper */
html[data-line="orange"] #type-detail > div {
  border-radius: 24px !important;
  box-shadow: none !important;
  background: var(--o-card) !important;
  border: 1px solid var(--o-border) !important;
  overflow: hidden !important;
}

/* ── Product name (h1) ── */
html[data-line="orange"] #type-detail h1 {
  font-family: var(--o-sans) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  color: var(--o-text) !important;
  line-height: 1.1 !important; margin-bottom: 1rem !important;
}

/* ── Section headings ── */
html[data-line="orange"] #type-detail h3 {
  font-family: var(--o-sans) !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: var(--o-text) !important;
  letter-spacing: .01em; margin-bottom: 0.8rem !important;
}
html[data-line="orange"] #type-detail h2 {
  font-family: var(--o-sans) !important;
  font-weight: 800 !important;
  font-size: 2rem !important;
  color: var(--o-text) !important; letter-spacing: -0.02em !important;
}

/* ── Body text ── */
html[data-line="orange"] #type-detail p {
  color: var(--o-muted) !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

/* ── Image gallery area ── */
html[data-line="orange"] #image-gallery-section .aspect-square,
html[data-line="orange"] #image-gallery-section > div > div {
  background: var(--o-bg2) !important;
  border-radius: 20px !important;
  border: 1px solid var(--o-border) !important;
  box-shadow: none !important;
}
html[data-line="orange"] #image-gallery-section #main-image {
  object-fit: contain !important; padding: 2rem !important;
}
html[data-line="orange"] #image-gallery-section .thumbnail {
  object-fit: contain !important; padding: 0.25rem !important;
}

/* Prev / next / fullscreen buttons */
html[data-line="orange"] #fullscreen-image,
html[data-line="orange"] #prev-image,
html[data-line="orange"] #next-image {
  background: var(--o-card) !important;
  border: 1px solid var(--o-border) !important;
  border-radius: 999px !important; color: var(--o-text) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}
html[data-line="orange"] #prev-image:hover,
html[data-line="orange"] #next-image:hover,
html[data-line="orange"] #fullscreen-image:hover {
  background: var(--o-amber) !important;
  color: #fff !important; border-color: var(--o-amber) !important;
}
html[data-line="orange"] .thumbnail {
  border-radius: 12px !important;
  border-color: var(--o-border) !important; background: var(--o-bg2) !important;
}
html[data-line="orange"] .thumbnail.border-blue-500,
html[data-line="orange"] .thumbnail:hover {
  border-color: var(--o-amber) !important;
}

/* ── Color swatches ── */
html[data-line="orange"] .color-swatch {
  border-color: var(--o-border) !important;
  border-radius: 999px !important;
  transition: transform .25s, box-shadow .25s !important;
}
html[data-line="orange"] .color-swatch:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 4px 14px rgba(234,88,12,.20) !important;
}
html[data-line="orange"] .color-swatch.ring-2 {
  outline: 2px solid var(--o-amber) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(234,88,12,.15) !important;
}

/* ── Size chips ── */
html[data-line="orange"] #type-detail span.px-2.py-1.border {
  border-color: var(--o-border) !important;
  background: var(--o-bg2) !important;
  color: var(--o-text) !important;
  border-radius: 999px !important;
  font-size: .85rem !important; font-weight: 600 !important;
  letter-spacing: .02em; transition: all 0.2s !important;
}
html[data-line="orange"] #type-detail span.px-2.py-1.border:hover {
  background: var(--o-amber) !important;
  color: #fff !important;
  border-color: var(--o-amber) !important; transform: translateY(-2px) !important;
}

/* ── Tabs ── */
html[data-line="orange"] #tab-buttons {
  border-bottom-color: var(--o-border) !important;
  gap: 1rem; margin-top: 2rem !important;
}
html[data-line="orange"] .tab-button {
  font-family: var(--o-sans) !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--o-muted) !important;
  border-bottom: 2px solid transparent;
  padding: .8rem 1rem !important;
  transition: color .2s, border-color .2s !important;
}
html[data-line="orange"] .tab-button:hover {
  color: var(--o-amber) !important;
}
html[data-line="orange"] .tab-active {
  border-bottom-color: var(--o-amber) !important;
  color: var(--o-amber) !important; border-bottom-width: 2px !important;
}

/* Feature lists */
html[data-line="orange"] #tab-content ul li {
  color: var(--o-muted) !important;
  font-weight: 500 !important; font-size: .95rem !important; padding-left: 1.5rem !important; position: relative !important;
}
html[data-line="orange"] #tab-content ul {
  list-style: none !important; padding: 0 !important; display: flex; flex-direction: column; gap: .8rem;
}
html[data-line="orange"] #tab-content ul li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--o-amber);
}
html[data-line="orange"] #tab-content .bg-gray-50 {
  background: var(--o-bg2) !important;
  border: 1px solid var(--o-border) !important;
  border-radius: 12px !important;
}
html[data-line="orange"] #type-detail .text-gray-600.leading-relaxed {
  color: var(--o-muted) !important; font-weight: 400 !important; font-size: 1.05rem !important; line-height: 1.7 !important;
}

/* ── Related products ── */
html[data-line="orange"] #type-detail .mt-12.p-8 {
  border-top: 1px solid var(--o-border) !important; background: transparent !important; padding: 4rem 2rem !important;
}
html[data-line="orange"] #type-detail .mt-12.p-8 .bg-white {
  border-radius: 20px !important; border: 1px solid var(--o-border) !important; box-shadow: none !important;
  background: var(--o-card) !important; transition: border-color .3s, transform .3s !important; overflow: hidden !important; display: flex; flex-direction: column; position: relative;
}
html[data-line="orange"] #type-detail .mt-12.p-8 .bg-white:hover {
  border-color: var(--o-amber) !important; transform: translateY(-5px) scale(1.01) !important; box-shadow: 0 20px 48px rgba(0,0,0,0.08) !important;
}
html[data-line="orange"] #type-detail .mt-12.p-8 img {
  object-fit: contain !important; padding: 1.5rem !important; transition: transform 0.5s !important;
}
html[data-line="orange"] #type-detail .mt-12.p-8 .bg-white:hover img {
  transform: scale(1.08) !important;
}
html[data-line="orange"] #type-detail .mt-12.p-8 h3 {
  font-family: var(--o-sans) !important; font-weight: 800 !important; font-size: 1.25rem !important; color: var(--o-text) !important;
}
html[data-line="orange"] #type-detail a.bg-red-600.hover\:bg-red-700 {
  background: var(--o-amber) !important; color: #fff !important; border-radius: 12px !important;
  font-size: .85rem !important; font-weight: 700 !important; padding: .8rem 1.5rem !important; transition: transform .2s, box-shadow .2s !important;
}
html[data-line="orange"] #type-detail a.bg-red-600.hover\:bg-red-700:hover {
  transform: translateY(-2px) !important; box-shadow: 0 10px 20px rgba(234,88,12,0.2) !important;
}

/* ── "Back to Categories" link ── */
html[data-line="orange"] a.inline-flex.border.border-red-600 {
  color: var(--o-text) !important; border-color: var(--o-border-s) !important; border-radius: 12px !important; font-size: .85rem !important; font-weight: 700 !important; transition: all .2s !important;
}
html[data-line="orange"] a.inline-flex.border.border-red-600:hover {
  background: var(--o-bg2) !important; border-color: var(--o-amber) !important; color: var(--o-amber) !important;
}

/* ── Whatsapp button override ── */
html[data-line="orange"] a.bg-green-500 {
  border-radius: 12px !important; font-weight: 700 !important; box-shadow: 0 4px 12px rgba(34,197,94,0.2) !important; transition: transform .2s !important;
}
html[data-line="orange"] a.bg-green-500:hover {
  transform: translateY(-2px) !important;
}

/* ── Share menu dropdown ── */
html[data-line="orange"] #share-menu { background: var(--o-card) !important; border: 1px solid var(--o-border) !important; border-radius: 12px !important; box-shadow: 0 16px 40px rgba(0,0,0,.1) !important; }
html[data-line="orange"] #share-menu a { color: var(--o-text) !important; font-weight: 500 !important; }
html[data-line="orange"] #share-menu a:hover { background: var(--o-bg2) !important; color: var(--o-amber) !important; }

/* ── Performance: remove heavy box-shadows globally on ORANGE pages ── */
html[data-line="orange"] .shadow-2xl { box-shadow: var(--o-shadow) !important; }
html[data-line="orange"] .shadow-lg  { box-shadow: 0 12px 32px rgba(0,0,0,.06) !important; }
html[data-line="orange"] .shadow-md  { box-shadow: 0 4px 16px rgba(0,0,0,.04) !important; }

/* ── 5. ── PRODUCT DETAIL PAGE (Category detail) ────────────────────────── */

/* Remove red background and gradients */
html[data-line="orange"] #product-detail > div.bg-red-50 {
  background: var(--o-bg) !important;
}
html[data-line="orange"] #product-detail .bg-gradient-to-r {
  background: transparent !important;
  color: var(--o-text) !important;
  padding-top: 4rem !important; padding-bottom: 2rem !important;
}
html[data-line="orange"] #product-detail .bg-gradient-to-r h1 {
  font-family: var(--o-sans) !important;
  font-weight: 900 !important;
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  color: var(--o-text) !important;
  letter-spacing: -0.03em !important;
}
html[data-line="orange"] #product-detail .bg-gradient-to-r p {
  color: var(--o-muted) !important;
  font-weight: 500 !important;
}
html[data-line="orange"] #product-detail .bg-gradient-to-r a {
  color: var(--o-muted) !important; font-weight: 700 !important;
}
html[data-line="orange"] #product-detail .bg-gradient-to-r a:hover,
html[data-line="orange"] #product-detail .bg-gradient-to-r span:not(.font-semibold) {
  color: var(--o-amber) !important;
}

/* Category about section */
html[data-line="orange"] #product-detail .bg-white.rounded-xl.shadow-md {
  border-radius: 24px !important;
  box-shadow: none !important;
  background: var(--o-card) !important;
  border: 1px solid var(--o-border) !important;
}
html[data-line="orange"] #product-detail .bg-white.rounded-xl.shadow-md h2 {
  font-family: var(--o-sans) !important;
  font-weight: 800 !important;
  font-size: 2rem !important;
  color: var(--o-text) !important;
  letter-spacing: -0.02em !important;
}
html[data-line="orange"] #product-detail .bg-white.rounded-xl.shadow-md p {
  color: var(--o-muted) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}
html[data-line="orange"] #product-detail .bg-white.rounded-xl.shadow-md img {
  object-fit: contain !important;
  padding: 2rem !important;
  background: var(--o-bg2) !important;
}

/* Category variants grid */
html[data-line="orange"] #product-detail h2.text-3xl.font-bold {
  font-family: var(--o-sans) !important;
  font-weight: 800 !important;
  font-size: 2rem !important;
  color: var(--o-text) !important;
  letter-spacing: -0.02em !important;
}
html[data-line="orange"] #product-types-grid .bg-white.rounded-xl {
  border-radius: 20px !important;
  box-shadow: none !important;
  background: var(--o-card) !important;
  border: 1px solid var(--o-border) !important;
  transition: transform .3s, border-color .3s, box-shadow .3s !important;
}
html[data-line="orange"] #product-types-grid .bg-white.rounded-xl:hover {
  transform: translateY(-5px) scale(1.01) !important;
  border-color: var(--o-amber) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.08) !important;
}
html[data-line="orange"] #product-types-grid img {
  object-fit: contain !important;
  padding: 1.5rem !important;
}
html[data-line="orange"] #product-types-grid h3 {
  font-family: var(--o-sans) !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  color: var(--o-text) !important;
}
html[data-line="orange"] #product-types-grid a.bg-red-600 {
  background: var(--o-amber) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}
html[data-line="orange"] #product-types-grid a.bg-red-600:hover {
  background: var(--o-ember) !important;
}
html[data-line="orange"] #product-types-grid .text-red-600 {
  color: var(--o-amber) !important;
}