/* Gadget Zone UI polish — 2026-10-26. Base theme colours:
   white #FFFFFF, navy #0F172A, amber #F59E0B, cream #FFF1DC.
   Colour-contrast pass 2026-10-26 (user feedback): OFF badge now #EF4444,
   sale price now deep navy #0F172A, struck price #6B7280, CTA text navy on
   amber, search border #E2E8F0 / placeholder #64748B. Pink #E91E63 no
   longer used for prices/badges. Visual polish only; no behaviour, price,
   or copy changes. */

/* --- Product cards: equal heights, aligned names/prices, 44px actions --- */
.gz-card{height:100%}
.gz-card-body{min-height:0}
.gz-card-name{min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gz-card-price{display:flex;justify-content:center;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.gz-card-price .text-price{font-size:1.125rem}
.gz-card-actions{margin-top:auto}
.gz-card-actions > *{min-height:44px;display:flex;align-items:center;justify-content:center}
.gz-card-actions > a.w-10,.gz-card-actions > button.w-10,.gz-card-actions > a.w-11,.gz-card-actions > button.w-11{width:44px;flex:none}

/* --- Header touch targets (mobile) --- */
#langMenu > button{min-height:44px}
#themeToggle{width:44px;height:44px}
header button[onclick="openCart()"]{min-height:44px}
@media (max-width:767px){
  header nav a,header nav span > a{min-height:40px;display:inline-flex;align-items:center}
  #liveSearchM{font-size:16px}
}

/* --- Hero readability + CTA --- */
#heroSlider h1{text-shadow:0 2px 14px rgba(0,0,0,.45)}
#heroSlider a{min-height:44px;display:inline-flex;align-items:center}

/* --- Back-to-top must not collide with the assistant fab (bottom-right) ---
   Desktop base was bottom-right (bottom-5/right-5), directly under the fab
   (desktop bottom 1.5rem, right 1rem). Move it to bottom-left on ALL sizes;
   on mobile keep it raised to 5.5rem so it also clears the bottom nav.
   Assistant fab/panel positions are NOT changed here. */
#toTop{left:1rem;right:auto;bottom:1.5rem}
@media (max-width:767px){
  #toTop{bottom:5.5rem}
}

/* --- Cart drawer: larger close target, roomy footer --- */
#cartDrawer > div:first-child button{min-width:44px;min-height:44px}
#cartDrawerBody{padding-bottom:1rem}

/* --- Forms: readable on mobile, visible focus everywhere --- */
@media (max-width:767px){
  main input,main select,main textarea{font-size:16px}
}
:focus-visible{outline:3px solid #F59E0B;outline-offset:2px}

/* --- Prevent horizontal overflow without breaking sticky header --- */
main{overflow-x:clip}
img{max-width:100%}

/* --- Section breathing room on the storefront (hero/flash bands untouched) --- */
@media (min-width:768px){
  main section.mx-auto{padding-top:3.25rem;padding-bottom:3.25rem}
}

/* --- Colour-contrast pass 2026-10-26 (user feedback) ---
   Loaded AFTER css/app.css, so these single/multi-class rules override the
   compiled Tailwind values for the same classes. No Blade logic changed. */

/* Primary CTA: keep amber #F59E0B background, dark navy text instead of
   white (user's option 2). a/button selectors beat .text-white on the
   same element; plain .bg-cta covers spans/divs (notice bar, cart badge,
   mobile search button — all already navy-text, unchanged in effect). */
a.bg-cta,button.bg-cta{color:#0F172A}
.bg-cta{color:#0F172A}
/* Hover state stays the compiled darker amber (#D97706); navy text keeps
   its contrast there too. */

/* Discount OFF badge: pink #E91E63 -> modern red-orange #EF4444, white text. */
span.bg-off,.bg-off{background-color:#EF4444;color:#fff}

/* Sale/discounted price: pink #E91E63 -> deep navy #0F172A, bold.
   (Bold already comes from font-extrabold on the element.) */
.text-price{color:#0F172A}
/* Dark-mode exception (flagged in report): navy on the dark card
   (slate-900) would be unreadable, so dark mode uses an amber tint of
   the same brand colour instead. Light mode is exactly #0F172A. */
.dark .text-price{color:#FDE68A}

/* Struck-through original price: pale neutral-400 -> #6B7280. */
.gz-card-price .line-through{color:#6B7280}
.dark .gz-card-price .line-through{color:#9CA3AF}

/* Search input: border -> soft grey #E2E8F0, placeholder darkened to
   #64748B with full opacity (was pale/default). IDs beat .border-slate-300. */
#liveSearch,#liveSearchM{border-color:#E2E8F0}
#liveSearch::placeholder,#liveSearchM::placeholder{color:#64748B;opacity:1}

/* Header consistency — PRESERVED, not lightened:
   Track Order + cart button stay dark navy #0F172A with white text
   (their bg-slate-900 classes are untouched by this file).
   Desktop search submit: navy/white -> amber #F59E0B with navy text, so
   the accent matches the CTA (mobile search button already amber/navy).
   Cart count badge: amber with navy text (already so; pinned explicitly). */
header div.relative > button{background-color:#F59E0B;color:#0F172A}
#cartCount{background-color:#F59E0B;color:#0F172A}