/** Shopify CDN: Minification failed

Line 440:1 Expected "}" to go with "{"

**/
/* GadgetDeals – Step 1: Sticky header + shadow */

.header-section,
.header-wrapper,
[class*="header--"],
header[class*="header"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  background-color: #ffffff !important;
  transition: box-shadow 0.25s ease !important;
}

/* GadgetDeals – Step 3: Premium Fonts */

/* Apply DM Sans to everything first */
*,
body,
.rte,
.rte p,
button,
input,
select,
textarea {
  font-family: 'DM Sans', sans-serif !important;
}

/* Apply Syne to all headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
[class*="heading"],
[class*="title"] {
  font-family: 'Syne', sans-serif !important;
  letter-spacing: -0.02em;
}

/* Heading sizes — clear visual hierarchy */
h1, .h1 {
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

h2, .h2 {
  font-size: clamp(1.4rem, 3vw, 2.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

h3, .h3 {
  font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Body text — comfortable reading */
body,
p,
li,
span {
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Product card titles — clean, not cramped */
[class*="card"] [class*="title"],
[class*="card"] [class*="heading"],
[class*="product"] [class*="title"] {
  font-family: 'Syne', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

/* Navigation links — sharp and clean */
[class*="nav"] a,
[class*="menu"] a,
[class*="header"] a {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em !important;
}

/* Price text — bold and prominent */
[class*="price"] {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
}

/* Buttons */
button,
.button,
[class*="btn"],
[class*="button"] {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* ============================================
   GadgetDeals – Step 4: Premium Announcement Bar
   ============================================ */

/* Dark premium background */
.announcement-bar,
[class*="announcement"],
[class*="promo-bar"],
[class*="header-announcement"] {
  background-color: #111111 !important;
  color: #e0e0e0 !important;
  border-bottom: 1px solid #222222 !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* All text inside the bar */
.announcement-bar *,
[class*="announcement"] *,
[class*="promo-bar"] * {
  color: #e0e0e0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
}

/* Links inside the bar */
.announcement-bar a,
[class*="announcement"] a {
  color: #E8A020 !important;
  text-decoration: none !important;
  transition: opacity 0.15s ease !important;
}

.announcement-bar a:hover,
[class*="announcement"] a:hover {
  opacity: 0.8 !important;
  text-decoration: underline !important;
}

/* The scrolling track — makes it animate */
.announcement-bar__track,
[class*="announcement"] [class*="track"],
[class*="announcement"] [class*="inner"],
[class*="announcement"] [class*="slider"],
[class*="announcement"] [class*="list"] {
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  animation: gd-ticker 30s linear infinite !important;
  gap: 0 !important;
}

/* Pause scrolling when hovered */
.announcement-bar:hover [class*="track"],
.announcement-bar:hover [class*="inner"],
.announcement-bar:hover [class*="slider"],
.announcement-bar:hover [class*="list"] {
  animation-play-state: paused !important;
}

/* Each individual message item */
.announcement-bar__item,
[class*="announcement"] [class*="item"],
[class*="announcement"] [class*="slide"] {
  padding: 0 2.5rem !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

/* Dot separator between messages */
.announcement-bar__item::after,
[class*="announcement"] [class*="item"]::after,
[class*="announcement"] [class*="slide"]::after {
  content: '·' !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #444444 !important;
  font-size: 1rem !important;
}

/* The scrolling keyframe animation */
@keyframes gd-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .announcement-bar__track,
  [class*="announcement"] [class*="track"],
  [class*="announcement"] [class*="inner"],
  [class*="announcement"] [class*="slider"],
  [class*="announcement"] [class*="list"] {
    animation: none !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }
}

/* Hide the prev/next arrows the Ultra theme adds to announcement bars */
.announcement-bar [class*="arrow"],
.announcement-bar [class*="btn-prev"],
.announcement-bar [class*="btn-next"],
[class*="announcement"] [class*="arrow"] {
  display: none !important;
}

/* GadgetDeals – Step 5 Fix: Remove coloured box behind hero text */
.slideshow__slide-content-inner {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 2rem 2.5rem !important;
}

/* GadgetDeals – Step 5 Fix: Remove coloured box behind hero text */
.slideshow__slide-content-inner {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 2rem 2.5rem !important;
}

/* GadgetDeals – Step 5 Fix: Remove coloured box behind hero text */
.slideshow__slide-content-inner {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ============================================
   GadgetDeals – Step 6: Premium Product Cards
   ============================================ */

/* Card container — subtle hover lift */
.product-card,
.card,
[class*="product-card"] {
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: box-shadow 0.22s ease, transform 0.22s ease !important;
  background: #ffffff !important;
}

.product-card:hover,
.card:hover,
[class*="product-card"]:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
  transform: translateY(-4px) !important;
}

/* ── Image area — consistent square ratio ── */
.product-card__media,
.card__media,
[class*="product-card"] [class*="media"],
[class*="product-card"] [class*="image"] {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background-color: #f7f7f7 !important;
}

.product-card__media img,
.card__media img,
[class*="product-card"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 0.75rem !important;
  transition: transform 0.35s ease !important;
}

.product-card:hover img,
.card:hover img,
[class*="product-card"]:hover img {
  transform: scale(1.05) !important;
}

/* ── Product title — clamp to 2 lines max ── */
.product-card__title,
.card__title,
.card__heading,
[class*="product-card"] [class*="title"],
[class*="product-card"] [class*="name"],
[class*="product-card"] h2,
[class*="product-card"] h3 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #1a1a1a !important;
  margin: 0.75rem 0 0.35rem !important;

  /* Magic 2-line clamp */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.45em !important;
}

/* ── Price — bold and clear ── */
.product-card__price,
.card__price,
[class*="product-card"] [class*="price"] {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-bottom: 0.25rem !important;
}

/* Compare-at (crossed out original price) */
.product-card__price s,
.product-card__price del,
[class*="product-card"] [class*="compare"],
[class*="product-card"] [class*="was"],
[class*="product-card"] s,
[class*="product-card"] del {
  font-size: 0.8rem !important;

  /* GadgetDeals – Step 6 Fix: Gold sale badge + card refinements */

/* Change red badge to gold */
[class*="badge"],
[class*="label--sale"],
[class*="label--on-sale"],
[class*="discount"],
[class*="percent"] {
  background-color: #E8A020 !important;
  color: #000000 !important;
  border-color: #E8A020 !important;
  border-radius: 3px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
}

/* Ensure card backgrounds are white */
.product-card,
.card,
[class*="product-card"],
[class*="card-product"] {
  background-color: #ffffff !important;
}
/* GadgetDeals – Step 6: Gold badges */
.label,
.label--sale,
[class*="label--"],
[class*="badge"],
[class*="discount-badge"],
[class*="percent-badge"],
span[class*="sale"],
span[class*="discount"] {
  background-color: #E8A020 !important;
  background: #E8A020 !important;
  color: #000000 !important;
  border-color: #E8A020 !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}

/* ============================================
   GadgetDeals – Spec Grid Fix
   ============================================ */

.gd-spec-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem !important;
  margin-top: 0.5rem !important;
  background: transparent !important;
}

.gd-spec-card {
  background: #f8f8f8 !important;
  border: 1px solid #ebebeb !important;
  border-radius: 8px !important;
  padding: 0.85rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  min-height: unset !important;
  height: auto !important;
}

.gd-spec-top {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.gd-spec-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: #E8A020 !important;
}

.gd-spec-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: #E8A020 !important;
}

.gd-spec-label {
  font-size: 0.75rem !important;
  color: #666666 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
}

.gd-spec-value {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Mobile — single column */
@media screen and (max-width: 767px) {
  .gd-spec-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}