/**
 * SUMMER SALE 2026 Campaign Styles
 * Port from /pub/media/mockup/summer-sale-mockup.html
 * Palette: sky-blue → sand → coral, sun warm
 */

:root {
  --sky:#0ea5e9; --sky-d:#0284c7; --sky-l:#38bdf8; --sky-xl:#e0f2fe;
  --sand:#faf3e3; --sand-m:#f5e6c8; --sand-d:#e8d5a8;
  --coral:#ff6b5d; --coral-d:#f0594b;
  --deep:#155e75;
  --btn-dark:#2c3038; --btn-dark-h:#1f242b;
  --price-red:#dc2626; --stock-green:#15803d;
}

/* ==========================================================================
   PAGE BACKGROUND + CHROME CLEANUP
   ========================================================================== */
body.page-layout-summer-sale { overflow-x: hidden !important; }

html body.page-layout-summer-sale {
  background: linear-gradient(180deg,
    #ffe4c4 0%,
    #faf3e3 300px,
    #faf3e3 1500px,
    #fafaf9 4000px
  ) !important;
  min-height: 100vh;
}

html body.page-layout-summer-sale .page-wrapper,
html body.page-layout-summer-sale main,
html body.page-layout-summer-sale .page-main,
html body.page-layout-summer-sale .columns,
html body.page-layout-summer-sale .column.main,
html body.page-layout-summer-sale .category-view,
html body.page-layout-summer-sale .products.wrapper,
html body.page-layout-summer-sale .toolbar-products,
html body.page-layout-summer-sale .category-products,
html body.page-layout-summer-sale .products-grid,
html body.page-layout-summer-sale .main,
html body.page-layout-summer-sale #maincontent {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body.page-layout-summer-sale .page-wrapper { max-width: 100% !important; }

/* Hide standard chrome + Itile filters/sidebar */
body.page-layout-summer-sale .sidebar-main,
body.page-layout-summer-sale .sidebar.sidebar-main,
body.page-layout-summer-sale .sidebar-additional,
body.page-layout-summer-sale aside.sidebar,
body.page-layout-summer-sale .breadcrumbs,
body.page-layout-summer-sale .page-title-wrapper:not(.product),
body.page-layout-summer-sale .category-description,
body.page-layout-summer-sale .category-image,
body.page-layout-summer-sale .block.filter,
body.page-layout-summer-sale .filter,
body.page-layout-summer-sale .filter-options,
body.page-layout-summer-sale .filter-current,
body.page-layout-summer-sale .filter-actions,
body.page-layout-summer-sale .filter-title,
body.page-layout-summer-sale .block-subtitle.filter-subtitle,
body.page-layout-summer-sale #layered-filter-block,
body.page-layout-summer-sale .catalog-topnav,
body.page-layout-summer-sale [x-data*="initLayeredNavigation"],
body.page-layout-summer-sale div[data-role="layered-navigation"],
body.page-layout-summer-sale .toolbar-products .field.limiter,
body.page-layout-summer-sale .itiles-sidebar,
body.page-layout-summer-sale .itiles-sidebar-master-header,
body.page-layout-summer-sale [class*="itiles-filter"],
body.page-layout-summer-sale [class*="itiles-sidebar"] {
  display: none !important;
}

/* Single-column layout, override page-with-filter grid */
body.page-layout-summer-sale .columns,
body.page-layout-summer-sale.page-with-filter .columns {
  display: block !important;
  grid-template-columns: none !important;
}
body.page-layout-summer-sale .column.main {
  width: 100% !important;
  max-width: 100% !important;
}

/* ==========================================================================
   HERO — Pure CSS, fără imagine externă
   ========================================================================== */
.sm-hero {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(180deg,
    #0c4a6e 0%, var(--sky-d) 28%, var(--sky-l) 55%, #fdba74 88%, #ffe4c4 100%);
  padding: 46px 16px 56px;
}
@media (min-width:1024px) { .sm-hero { padding: 64px 16px 56px; } }

/* Soare animat, top-right */
.sm-hero-sun {
  position: absolute; top: -60px; right: -60px;
  width: 300px; height: 300px; z-index: 1; pointer-events: none;
}
.sm-hero-sun::before {
  content: ""; position: absolute; inset: 80px; border-radius: 50%;
  background: radial-gradient(circle, #fef9c3 0%, #fde047 45%, #facc15 80%, #f59e0b 100%);
  box-shadow: 0 0 60px rgba(253,224,71,.85), 0 0 130px rgba(253,224,71,.5), 0 0 200px rgba(245,158,11,.3);
}
.sm-hero-sun::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(253,224,71,.55) 4deg, transparent 8deg,
    transparent 28deg, rgba(253,224,71,.55) 32deg, transparent 36deg,
    transparent 58deg, rgba(253,224,71,.55) 62deg, transparent 66deg,
    transparent 88deg, rgba(253,224,71,.55) 92deg, transparent 96deg,
    transparent 118deg, rgba(253,224,71,.55) 122deg, transparent 126deg,
    transparent 148deg, rgba(253,224,71,.55) 152deg, transparent 156deg,
    transparent 178deg, rgba(253,224,71,.55) 182deg, transparent 186deg,
    transparent 208deg, rgba(253,224,71,.55) 212deg, transparent 216deg,
    transparent 238deg, rgba(253,224,71,.55) 242deg, transparent 246deg,
    transparent 268deg, rgba(253,224,71,.55) 272deg, transparent 276deg,
    transparent 298deg, rgba(253,224,71,.55) 302deg, transparent 306deg,
    transparent 328deg, rgba(253,224,71,.55) 332deg, transparent 336deg);
  animation: sm-spin 50s linear infinite;
}
@keyframes sm-spin { to { transform: rotate(360deg); } }

/* Nori plutitori */
.sm-cloud {
  position: absolute; background: #fff; border-radius: 999px;
  opacity: .85; filter: blur(.4px); z-index: 2; pointer-events: none;
}
.sm-cloud::before, .sm-cloud::after {
  content: ""; position: absolute; background: #fff; border-radius: 50%;
}
.sm-cloud.c1 { width: 160px; height: 40px; top: 70px; left: 7%; animation: sm-drift 26s ease-in-out infinite; }
.sm-cloud.c1::before { width: 60px; height: 60px; top: -22px; left: 24px; }
.sm-cloud.c1::after { width: 46px; height: 46px; top: -14px; left: 80px; }
.sm-cloud.c2 { width: 120px; height: 32px; top: 140px; left: 24%; opacity: .7; animation: sm-drift 34s ease-in-out infinite reverse; }
.sm-cloud.c2::before { width: 48px; height: 48px; top: -18px; left: 18px; }
.sm-cloud.c3 { width: 90px; height: 26px; top: 90px; right: 30%; opacity: .65; animation: sm-drift 30s ease-in-out infinite; }
.sm-cloud.c3::before { width: 36px; height: 36px; top: -14px; left: 18px; }
@keyframes sm-drift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(55px); } }

/* Palmier silhouette stânga */
.sm-palm {
  position: absolute; bottom: 80px; left: -12px;
  width: 135px; height: 200px; z-index: 3; pointer-events: none;
  opacity: .72; filter: drop-shadow(0 4px 8px rgba(8,47,73,.25));
}

/* Valuri jos full-width responsive */
.sm-waves {
  position: absolute; bottom: 0; left: 0; right: 0;
  width: 100%; height: 48px; z-index: 3; display: block; pointer-events: none;
}

/* Container conținut hero */
.sm-hero-in {
  position: relative; z-index: 6;
  max-width: 820px; margin: 0 auto;
}

/* Titlu */
.sm-hero-title {
  color: #fff; font-weight: 900; letter-spacing: -.02em; line-height: 1;
  margin-bottom: 18px; text-shadow: 0 6px 28px rgba(8,47,73,.5), 0 2px 4px rgba(0,0,0,.15);
}

/* Eyebrow — alb solid + multi-layer glow */
.sm-hero-eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  font-size: clamp(18px, 2.8vw, 28px); font-weight: 900;
  text-transform: uppercase; letter-spacing: .24em; margin-bottom: 26px;
}
.sm-hero-eyebrow .line {
  display: inline-block; height: 3px; width: 60px; border-radius: 3px;
  flex-shrink: 0; box-shadow: 0 0 14px rgba(253,224,71,.85), 0 0 28px rgba(253,224,71,.4);
}
.sm-hero-eyebrow .line.l { background: linear-gradient(90deg, transparent 0%, #fef3c7 40%, #fde047 100%); }
.sm-hero-eyebrow .line.r { background: linear-gradient(90deg, #fde047 0%, #fef3c7 60%, transparent 100%); }
.sm-hero-eyebrow .label {
  display: inline-block; padding-left: .24em; color: #ffffff;
  text-shadow:
    0 0 16px rgba(253,224,71,.95),
    0 0 36px rgba(253,224,71,.55),
    0 0 60px rgba(245,158,11,.35),
    0 3px 0 rgba(220,38,38,.35),
    0 6px 24px rgba(8,47,73,.75);
}

.sm-hero-big {
  display: block;
  font-size: clamp(42px, 7.5vw, 84px);
  line-height: .95;
}
.sm-hero-big em {
  font-style: italic; color: #fef9c3;
  text-shadow: 0 4px 14px rgba(220,38,38,.5);
}
.sm-hero-big .pct {
  display: inline-block; background: var(--coral); color: #fff; font-weight: 900;
  padding: 2px 18px; border-radius: 14px; transform: rotate(-2deg);
  box-shadow: 0 10px 28px rgba(255,107,93,.5), inset 0 -3px 0 rgba(0,0,0,.18);
  border: 3px solid #fff; margin: 0 2px;
}

.sm-hero-sub {
  font-size: clamp(14px, 2vw, 18px); color: #fff; opacity: .97; font-weight: 500;
  margin: 0 auto 30px; max-width: 680px;
  text-shadow: 0 2px 10px rgba(8,47,73,.5);
}

/* CTA-uri */
.sm-hero-cta {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 8px;
}
.sm-hero-cta a {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px;
  padding: 15px 30px; border-radius: 999px; transition: .22s; cursor: pointer;
}
.sm-hero-cta .primary {
  background: linear-gradient(135deg, var(--coral), var(--coral-d));
  color: #fff; font-size: 16px; padding: 17px 36px;
  box-shadow: 0 12px 30px rgba(255,107,93,.5), inset 0 -3px 0 rgba(0,0,0,.15);
}
.sm-hero-cta .primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 38px rgba(255,107,93,.6), inset 0 -3px 0 rgba(0,0,0,.15);
}
.sm-hero-cta .secondary {
  background: #fff; color: var(--deep);
  box-shadow: 0 8px 22px rgba(8,47,73,.22);
}
.sm-hero-cta .secondary:hover {
  background: var(--sand); transform: translateY(-2px);
}
.sm-hero-cta svg { width: 18px; height: 18px; }

/* Hero compact pentru subcategory pages */
.sm-hero.sm-hero-compact { padding: 32px 16px 44px; }
.sm-hero-title-compact { margin-bottom: 8px; }
.sm-hero-big-compact { font-size: clamp(28px, 5vw, 48px); line-height: 1.05; }
.sm-hero-back-link { display: block; text-decoration: none; color: inherit; }

/* ==========================================================================
   SEARCH BAR — centered with max-width
   ========================================================================== */
.summer-sale-search {
  max-width: 660px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* ==========================================================================
   CATEGORY NAV PILLS — centered
   ========================================================================== */
.summer-sale-category-nav {
  background: transparent;
  border-bottom: none;
  padding-left: 0;
  padding-right: 0;
}
.summer-sale-cat-scroll {
  justify-content: center;
}
@media (max-width: 640px) {
  .summer-sale-cat-scroll {
    justify-content: flex-start;
  }
}
.summer-sale-cat-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 84px; min-width: 80px; padding: .6rem .7rem; border-radius: .75rem;
  font-weight: 600; border: 2px solid var(--sky-l); background: #fff;
  color: var(--deep); cursor: pointer; transition: .2s; text-decoration: none;
}
.summer-sale-cat-btn:hover {
  background: var(--sky-xl); border-color: var(--sky);
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(14,165,233,.25);
}
.summer-sale-cat-btn.active {
  background: var(--sky); border-color: var(--sky-d); color: #fff;
}
.summer-sale-cat-icon { font-size: 2.1rem; line-height: 1; }
.summer-sale-cat-label { font-size: .58rem; line-height: 1.15; text-align: center; word-break: break-word; }

/* ==========================================================================
   SECTIONED CONTENT pe parent
   ========================================================================== */
.sm-main { background: transparent; padding: 24px 0 48px; }
.sm-section { margin-bottom: 36px; scroll-margin-top: 100px; }
.sm-secbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-radius: 14px; color: #fff;
  background: linear-gradient(95deg, var(--sky-d), var(--sky) 62%, var(--deep) 130%);
  box-shadow: 0 8px 22px -8px rgba(8,47,73,.32);
}
.sm-secbar .ico {
  font-size: 24px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2); border-radius: 11px; flex-shrink: 0;
}
.sm-secbar .grow { flex: 1; min-width: 0; }
.sm-secbar h2 {
  font-size: clamp(17px, 2.4vw, 23px); font-weight: 800; letter-spacing: -.01em;
  margin: 0; color: #fff;
}
.sm-secbar .cnt {
  font-size: 12.5px; font-weight: 500; opacity: .92; margin-top: 1px;
}
.sm-secbar .all {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: var(--coral-d); font-weight: 700; font-size: 14px;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap; transition: .18s;
  text-decoration: none;
}
.sm-secbar .all:hover {
  background: var(--coral); color: #fff; transform: translateX(3px);
}
.sm-secbar .all svg { width: 16px; height: 16px; }

/* Grid de produse — responsive optimizat per breakpoint */
.sm-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px;
  margin-top: 18px;
  list-style: none;
  padding: 0;
}
/* Large desktop ≥1440px: 5 coloane pentru spațiu eficient */
@media (min-width: 1440px) {
  .sm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 18px; }
}
/* Desktop standard 1024-1439px: 4 coloane */
@media (min-width: 1024px) and (max-width: 1439px) {
  .sm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px; }
}
/* Tablet 768-1023px: 3 coloane */
@media (min-width: 768px) and (max-width: 1023px) {
  .sm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px; }
}
/* Mobile mare 480-767px: 2 coloane */
@media (min-width: 480px) and (max-width: 767px) {
  .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
}
/* Mobile mic <480px: tot 2 coloane dar gap mai mic */
@media (max-width: 479px) {
  .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
}

/* ==========================================================================
   PRODUCT CARDS — light tweaks for Summer Sale theme
   (real cards come from item.phtml, which already styles them)
   ========================================================================== */
body.page-layout-summer-sale .product-item,
body.page-layout-summer-sale li.product-item,
body.page-layout-summer-sale .product-item-info {
  background: #fff !important;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
}
body.page-layout-summer-sale .summer-sale-subsubcat-btn:hover {
  background: var(--sky-xl); border-color: var(--sky); color: var(--deep);
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS
   ========================================================================== */
@media (max-width: 680px) {
  .sm-hero { padding: 32px 14px 40px; }
  .sm-hero-sun { width: 180px; height: 180px; top: -34px; right: -46px; }
  .sm-hero-sun::before { inset: 52px; box-shadow: 0 0 40px rgba(253,224,71,.75), 0 0 90px rgba(253,224,71,.4); }
  .sm-hero-sun::after { animation-duration: 90s; }
  .sm-palm { width: 88px; height: 130px; bottom: 70px; left: -22px; opacity: .5; }
  .sm-cloud.c2, .sm-cloud.c3 { display: none; }
  .sm-cloud.c1 { width: 110px; height: 28px; top: 46px; left: 5%; }
  .sm-cloud.c1::before { width: 40px; height: 40px; top: -14px; left: 14px; }
  .sm-cloud.c1::after { width: 30px; height: 30px; top: -9px; left: 55px; }
  .sm-waves { height: 34px; }
  .sm-hero-eyebrow { font-size: 17px; letter-spacing: .22em; margin-bottom: 22px; gap: 14px; }
  .sm-hero-eyebrow .line { width: 46px; height: 2.5px; }
  .sm-hero-eyebrow .label {
    text-shadow: 0 0 14px rgba(253,224,71,.95), 0 0 28px rgba(253,224,71,.55),
                 0 3px 0 rgba(220,38,38,.32), 0 4px 16px rgba(8,47,73,.7);
  }
  .sm-hero-title { margin-bottom: 14px; }
  .sm-hero-big { font-size: clamp(32px, 8.8vw, 46px); line-height: 1.02; }
  .sm-hero-big .pct { padding: 1px 14px; border-radius: 11px; border-width: 2px; margin: 0 1px; }
  .sm-hero-sub { font-size: 13.5px; margin-bottom: 22px; line-height: 1.45; padding: 0 6px; }
  /* CTA side-by-side pe mobil — distribuie egal lățimea + permite wrap */
  .sm-hero-cta { gap: 8px; margin-bottom: 8px; flex-direction: row; align-items: stretch; padding: 0 6px; flex-wrap: nowrap; }
  .sm-hero-cta a { justify-content: center; align-items: center; flex: 1 1 0; min-width: 0; padding: 12px 6px; font-size: 13px; min-height: 50px; box-sizing: border-box; gap: 5px; letter-spacing: 0; font-weight: 700; text-align: center; line-height: 1.15; word-break: keep-all; overflow-wrap: anywhere; }
  .sm-hero-cta .primary { padding: 13px 8px; font-size: 13.5px; font-weight: 800; letter-spacing: 0; }
  .sm-hero-cta svg { width: 16px; height: 16px; stroke-width: 2.5; flex-shrink: 0; }
  /* Secbar pe mobil: 1 rând — emoji + titlu + buton, fără count subtitle */
  .sm-secbar { padding: 10px 12px; gap: 8px; flex-wrap: nowrap; }
  .sm-secbar .ico { width: 34px; height: 34px; font-size: 18px; border-radius: 8px; }
  .sm-secbar .grow { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .sm-secbar h2 { font-size: 14.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
  .sm-secbar .cnt { display: none; }
  .sm-secbar .all { flex-shrink: 0; padding: 7px 12px; font-size: 12.5px; gap: 4px; white-space: nowrap; }
  .sm-secbar .all svg { width: 13px; height: 13px; }
}

@media (max-width: 380px) {
  .sm-hero { padding: 26px 12px 32px; }
  .sm-hero-sun { width: 150px; height: 150px; top: -22px; right: -38px; }
  .sm-hero-sun::before { inset: 42px; }
  .sm-palm { display: none; }
  .sm-cloud.c1 { top: 34px; }
  .sm-hero-eyebrow { font-size: 15.5px; letter-spacing: .2em; gap: 10px; margin-bottom: 20px; }
  .sm-hero-eyebrow .line { width: 38px; height: 2.5px; }
  .sm-hero-big { font-size: 30px; line-height: 1.04; }
  .sm-hero-sub { font-size: 12.8px; padding: 0 2px; margin-bottom: 20px; }
  .sm-hero-cta { gap: 6px; padding: 0 4px; }
  .sm-hero-cta a { padding: 11px 4px; font-size: 11.5px; gap: 4px; min-height: 46px; line-height: 1.15; }
  .sm-hero-cta .primary { padding: 12px 6px; font-size: 12px; }
  .sm-hero-cta svg { width: 14px; height: 14px; }

  /* Secbar ultra-compact pe tiny phones */
  .sm-secbar { padding: 8px 10px; gap: 6px; }
  .sm-secbar .ico { width: 30px; height: 30px; font-size: 16px; }
  .sm-secbar h2 { font-size: 13px; }
  .sm-secbar .all { padding: 6px 9px; font-size: 11.5px; }
}

@media (max-height: 520px) and (max-width: 900px) {
  .sm-hero { padding: 20px 16px 28px; }
  .sm-hero-sun { width: 160px; height: 160px; top: -30px; right: -40px; }
  .sm-cloud { display: none; }
  .sm-palm { display: none; }
  .sm-hero-title { margin-bottom: 10px; }
  .sm-hero-big { font-size: clamp(28px, 5.6vw, 42px); }
  .sm-hero-sub { margin-bottom: 16px; font-size: 13px; }
  .sm-hero-cta { flex-direction: row; margin-bottom: 8px; }
  .sm-hero-cta a { width: auto; }
  .sm-waves { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-hero-sun::after, .sm-cloud, .sm-hero-cta .primary {
    animation: none !important; transition: none;
  }
  .sm-hero-cta .primary:hover { transform: none; }
}

/* ==========================================================================
   PRODUCT CARD CONSISTENCY — same height, square image, center positioning
   (port from spring-sale.css)
   ========================================================================== */

/* grid items stretch to equal height */
body.page-layout-summer-sale .sm-grid {
  align-items: stretch !important;
}
body.page-layout-summer-sale .sm-grid > li {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
body.page-layout-summer-sale .sm-grid > li > form,
body.page-layout-summer-sale .sm-grid > li > .product-item,
body.page-layout-summer-sale .sm-grid .product-item,
body.page-layout-summer-sale .sm-grid .product-item-info {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* product-info grows + distributes children */
body.page-layout-summer-sale .product-item .product-info {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Name fixed height (already inline 3.5rem) - ensure consistent */
body.page-layout-summer-sale .product-item .product-info > div:first-child {
  flex-shrink: 0 !important;
}

/* Delivery+stock row: consistent min-height pe toate cardurile */
body.page-layout-summer-sale .delivery-stock-row {
  min-height: 1.6rem !important;
  flex-shrink: 0 !important;
}

/* Price wrap împinge la bază pricewrap-ul în product-info */
body.page-layout-summer-sale .product-item .pricewrap,
body.page-layout-summer-sale .product-item .price-box,
body.page-layout-summer-sale .product-item [class*="price-wrapper"]:not(.swatch-price-wrapper) {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* card styling identical to standard category cards */
body.page-layout-summer-sale .product-item,
body.page-layout-summer-sale .product-item-info {
  background: #fff !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 12px rgba(14, 165, 233, .08), 0 1px 4px rgba(0,0,0,.04) !important;
  transition: transform .3s ease, box-shadow .3s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}
body.page-layout-summer-sale .product-item:hover,
body.page-layout-summer-sale .product-item-info:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(14, 165, 233, .15), 0 2px 8px rgba(0,0,0,.06) !important;
}

/* IMAGE WRAPPER — force 1:1 square, center image */
html body.page-layout-summer-sale .product-item a.product-item-photo,
html body.page-layout-summer-sale .product-item .product-item-photo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0.5rem !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* main image: contain within square */
html body.page-layout-summer-sale .product-item a.product-item-photo img,
html body.page-layout-summer-sale .product-item .product-item-photo img {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: auto !important;
}

/* hover image: positioned absolutely to overlay first */
html body.page-layout-summer-sale .product-item .product-item-photo img.hover-image,
html body.page-layout-summer-sale .product-item .product-item-photo img:nth-child(2) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0.5rem !important;
}

/* product-info expands to fill remaining space */
body.page-layout-summer-sale .product-item .product-info {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* push add-to-cart button to bottom of form (after product-info) */
body.page-layout-summer-sale .product-item .tocart,
body.page-layout-summer-sale .product-item .btn-orange,
body.page-layout-summer-sale .product-item button[type="submit"]:not(.atc-btn-mobile) {
  margin-top: auto !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
}

/* ==========================================================================
   PRODUCT CARD RESPONSIVE OPTIMIZATIONS
   ========================================================================== */

/* Mobile general ≤767px — carduri mai compacte */
@media (max-width: 767px) {
  body.page-layout-summer-sale .product-item,
  body.page-layout-summer-sale .product-item-info {
    padding: 8px !important;
    border-radius: 0.625rem !important;
  }
  /* Nume produs mai mic */
  body.page-layout-summer-sale .product-item-link,
  body.page-layout-summer-sale .product-item .product-item-name a {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }
  body.page-layout-summer-sale .product-item .mt-1[style*="height:3.5rem"] {
    height: 2.4rem !important;
  }
  /* Discount flag mai mic */
  body.page-layout-summer-sale .product-discount-flag {
    font-size: 0.7rem !important;
    padding: 2px 6px !important;
    top: 8px !important;
    left: 8px !important;
  }
  /* Wishlist button mai mic */
  body.page-layout-summer-sale .product-item button[data-addto="wishlist"] {
    width: 28px !important;
    height: 28px !important;
    top: 8px !important;
    right: 8px !important;
  }
  body.page-layout-summer-sale .product-item button[data-addto="wishlist"] svg {
    width: 14px !important;
    height: 14px !important;
  }
  /* Delivery/stock row mai mic */
  body.page-layout-summer-sale .delivery-stock-row {
    font-size: 0.7rem !important;
    gap: 4px !important;
  }
  body.page-layout-summer-sale .delivery-stock-row svg {
    width: 12px !important;
    height: 12px !important;
  }
  body.page-layout-summer-sale .delivery-stock-row .ds-sep {
    height: 10px !important;
  }
  /* Prețuri */
  body.page-layout-summer-sale .product-item .price-wrapper .price,
  body.page-layout-summer-sale .product-item .normal-price .price-final_price,
  body.page-layout-summer-sale .product-item [class*="price-container"] .price {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
  }
  body.page-layout-summer-sale .product-item .old-price,
  body.page-layout-summer-sale .product-item .spring-sale-old-price-custom {
    font-size: 0.72rem !important;
  }
  /* Add-to-cart button */
  body.page-layout-summer-sale .product-item .tocart,
  body.page-layout-summer-sale .product-item button[type="submit"] {
    font-size: 0.72rem !important;
    padding: 8px 6px !important;
    height: 38px !important;
    min-height: 38px !important;
    gap: 4px !important;
    border-radius: 6px !important;
  }
  body.page-layout-summer-sale .product-item .tocart svg,
  body.page-layout-summer-sale .product-item button[type="submit"] svg {
    width: 14px !important;
    height: 14px !important;
  }
  /* Stars mai mici */
  body.page-layout-summer-sale .product-item .text-amber-400 {
    width: 11px !important;
    height: 11px !important;
  }
  /* Image padding redus */
  html body.page-layout-summer-sale .product-item .product-item-photo {
    padding: 0.25rem !important;
  }
}

/* Mobile mic ≤479px — și mai compact */
@media (max-width: 479px) {
  body.page-layout-summer-sale .product-item,
  body.page-layout-summer-sale .product-item-info {
    padding: 6px !important;
  }
  body.page-layout-summer-sale .product-item-link,
  body.page-layout-summer-sale .product-item .product-item-name a {
    font-size: 0.72rem !important;
  }
  body.page-layout-summer-sale .product-item .mt-1[style*="height:3.5rem"] {
    height: 2.1rem !important;
  }
  body.page-layout-summer-sale .product-discount-flag {
    font-size: 0.625rem !important;
    padding: 2px 5px !important;
  }
  body.page-layout-summer-sale .product-item button[data-addto="wishlist"] {
    width: 26px !important;
    height: 26px !important;
  }
  body.page-layout-summer-sale .delivery-stock-row {
    font-size: 0.65rem !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  body.page-layout-summer-sale .product-item .price-wrapper .price,
  body.page-layout-summer-sale .product-item .normal-price .price-final_price,
  body.page-layout-summer-sale .product-item [class*="price-container"] .price {
    font-size: 0.85rem !important;
  }
  body.page-layout-summer-sale .product-item .tocart,
  body.page-layout-summer-sale .product-item button[type="submit"] {
    font-size: 0.68rem !important;
    padding: 7px 4px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}

/* sm-main padding pe mobil ca să nu mănânce spațiu */
@media (max-width: 767px) {
  .sm-main { padding: 16px 0 32px; }
  .sm-main .container { padding-left: 8px !important; padding-right: 8px !important; }
  .sm-section { margin-bottom: 24px; }
}
@media (max-width: 479px) {
  .sm-main .container { padding-left: 6px !important; padding-right: 6px !important; }
  .sm-section { margin-bottom: 20px; }
}

/* Section header links — clickable title + icon */
.sm-secbar .ico-link {
  display: inline-flex;
  text-decoration: none;
  flex-shrink: 0;
}
.sm-secbar .sm-section-title-link {
  color: inherit;
  text-decoration: none;
  transition: opacity .15s ease;
}
.sm-secbar .sm-section-title-link:hover {
  opacity: .85;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ==========================================================================
   "Înapoi la Summer Sale" button — subcategory pages
   ========================================================================== */
.sm-back-to-parent-row {
  display: flex;
  justify-content: center;
  padding: 14px 16px 8px;
  background: transparent;
}
.sm-back-to-parent-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--coral), var(--coral-d));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(255,107,93,.35), 0 1px 3px rgba(0,0,0,.1), inset 0 -2px 0 rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.sm-back-to-parent-btn:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.06);
  box-shadow: 0 10px 24px rgba(255,107,93,.5), 0 2px 6px rgba(0,0,0,.1), inset 0 -2px 0 rgba(0,0,0,.12);
}
.sm-back-to-parent-btn:active {
  transform: translateY(0);
}
.sm-back-to-parent-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.sm-back-to-parent-btn:hover svg {
  transform: translateX(-3px);
}

@media (max-width: 680px) {
  .sm-back-to-parent-row { padding: 10px 14px 6px; }
  .sm-back-to-parent-btn {
    font-size: 13px;
    padding: 9px 18px;
    gap: 6px;
  }
  .sm-back-to-parent-btn svg { width: 16px; height: 16px; }
}

@media (max-width: 380px) {
  .sm-back-to-parent-btn {
    font-size: 12px;
    padding: 8px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-back-to-parent-btn,
  .sm-back-to-parent-btn svg { transition: none; }
  .sm-back-to-parent-btn:hover { transform: none; }
  .sm-back-to-parent-btn:hover svg { transform: none; }
}