/* ================================
   SPRING SALE — ARCHIVE PAGE
   Vivid feminine sale version
   ================================ */

/* ── Section background ── */
.offer-banner--spring {
   color: #fff;
   padding: 24px 20px;
   position: relative;
   overflow: hidden;
   background:
      radial-gradient(circle at 50% 42%, rgba(255, 47, 146, .34), transparent 30%),
      radial-gradient(circle at 15% 18%, rgba(255, 102, 180, .22), transparent 32%),
      radial-gradient(circle at 85% 24%, rgba(255, 166, 214, .18), transparent 32%),
      radial-gradient(circle at 50% 90%, rgba(255, 214, 238, .16), transparent 42%),
      linear-gradient(180deg, #fff8fc 0%, #ffeaf5 42%, #ffdced 100%);
}

/* ── Marquee ── */
.marquee--spring {
   background: #ff409d;
   background:
      linear-gradient(90deg, #ff2f92 0%, #ff4da6 35%, #ff63b2 70%, #ff2f92 100%);
   color: #fff;
   border-bottom: 1px solid rgba(255, 255, 255, .18);
   box-shadow: 0 10px 24px rgba(255, 47, 146, .20);
}

.marquee--spring .track--spring {
   font-weight: 900;
   color: #fff;
   text-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

/* ── Card ── */
.offer-card--spring {
   position: relative;
   max-width: 980px;
   margin: 0 auto;
   text-align: center;
   padding: 30px 16px 26px;
   border-radius: 24px;
   background:
      linear-gradient(180deg, #571233 0%, #420b27 48%, #2f071b 100%);
   border: 2px solid rgba(255, 255, 255, .16);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   box-shadow:
      0 30px 90px rgba(47, 7, 27, .46),
      0 14px 34px rgba(255, 47, 146, .18),
      0 0 0 1px rgba(255, 255, 255, .05) inset;
}

.offer-card--spring::after {
   content: "";
   position: absolute;
   inset: 8px;
   border-radius: 18px;
   background:
      radial-gradient(circle at 18% 18%, rgba(255, 103, 183, .20), transparent 36%),
      radial-gradient(circle at 82% 28%, rgba(255, 47, 146, .15), transparent 36%),
      radial-gradient(circle at 50% 100%, rgba(255, 255, 255, .05), transparent 50%),
      linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
   pointer-events: none;
   z-index: 0;
}

/* Vivid pink frame */
.offer-card--spring::before {
   content: "";
   position: absolute;
   inset: -2px;
   border-radius: 26px;
   padding: 2px;
   background: linear-gradient(90deg, #ff2f92, #ff63b2, #ff9fd0, #ff63b2, #ff2f92);
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   opacity: 1;
   pointer-events: none;
   z-index: 2;
   filter: drop-shadow(0 0 18px rgba(255, 47, 146, .24));
}

.offer-card--spring>* {
   position: relative;
   z-index: 1;
}

/* ── Small top badge ── */
.sp-kicker {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 12px;
   padding: 6px 12px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .10);
   border: 1px solid rgba(255, 255, 255, .16);
   color: #ffd4ea;
   font-size: 11px;
   font-weight: 900;
   letter-spacing: .12em;
   text-transform: uppercase;
   box-shadow: 0 8px 18px rgba(255, 47, 146, .14);
}

/* ── Title ── */
.sp-title {
   margin: 0 0 8px;
   font-size: 36px;
   font-weight: 1000;
   line-height: 1.1;
   text-transform: uppercase;
   color: #ffffff;
   letter-spacing: .02em;
   text-shadow:
      0 2px 0 rgba(0, 0, 0, .18),
      0 14px 28px rgba(255, 47, 146, .18);
}

.sp-title__discount {
   font-weight: 1000;
   display: inline-block;
   margin-top: 14px;
   margin-bottom: 10px;
   max-width: max-content;
   margin-left: auto;
   margin-right: auto;
   border: 3px dashed rgba(255, 255, 255, .22);
   background: linear-gradient(135deg, #ff2f92, #ff4da6, #ff78bf);
   color: #fff;
   padding: 10px 20px;
   font-size: 31px;
   border-radius: 14px;
   box-shadow:
      0 16px 28px rgba(255, 47, 146, .28),
      0 0 0 1px rgba(255, 255, 255, .08) inset;
}

/* ── Main proof line ── */
.sp-usp {
   margin: 2px 0 8px;
   font-size: 20px;
   line-height: 1.3;
   font-weight: 900;
   color: #ffffff;
   text-shadow: 0 6px 18px rgba(255, 47, 146, .10);
}

/* ── Social proof badge ── */
.usp-note {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 14px;
   position: relative;
   top: -6px;
   border-radius: 8px;
   padding: 2px 8px;
   background: #ffe115;
   border: 2px solid #a48a00;
   color: black;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .02em;
   box-shadow: 0 10px 22px rgba(255, 47, 146, .14), 0 0 0 1px rgba(255, 255, 255, .03) inset;
}

/* ── Subtitle ── */
.sp-subtitle {
   font-size: 12px;
   font-weight: 600;
   line-height: 1.5;
   font-style: italic;
   color: #e8e8e8;
   margin-top: 15px;
   margin-bottom: 0;
}

/* ── Actions ── */
.sp-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
   margin-bottom: 14px;
   font-size: 14px;
   margin-top: 10px;
}

.sp-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 13px 16px;
   border-radius: 14px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .05em;
   font-size: 12px;
   border: 2px solid rgba(255, 255, 255, .14);
   box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
   text-decoration: none;
   color: #fff;
}

.sp-action--primary {
   background: linear-gradient(90deg, #ff2f92, #ff4da6, #ff78bf);
   border-color: rgba(255, 255, 255, .18);
   color: #fff;
   transform: translateY(-1px);
   box-shadow:
      0 18px 34px rgba(255, 47, 146, .30),
      0 0 0 2px rgba(255, 255, 255, .08) inset;
   animation: spPrimaryPulse 2.4s ease-in-out infinite;
}

@keyframes spPrimaryPulse {

   0%,
   100% {
      filter: brightness(1);
      transform: translateY(-1px) scale(1);
   }

   50% {
      filter: brightness(1.08);
      transform: translateY(-1px) scale(1.02);
   }
}

.sp-action--secondary {
   background: rgba(255, 255, 255, .10);
   border-color: rgba(255, 255, 255, .16);
   color: #ffffff;
   z-index: 10;
}

/* ── Stock urgency ── */
.stock-urgency--spring {
   margin-top: 12px;
   max-width: 540px;
   margin-left: auto;
   margin-right: auto;
}

.stock-urgency--spring .stock-urgency__label {
   display: flex;
   align-items: center;
   gap: 10px;
   justify-content: center;
   font-size: 13px;
   font-weight: 900;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: #ffffff;
   margin-bottom: 8px;
}

.stock-urgency--spring .stock-urgency__dot {
   width: 10px;
   min-width: 10px;
   height: 10px;
   min-height: 10px;
   display: block;
   border-radius: 50%;
   background: #ff2f92;
   box-shadow: 0 0 14px rgba(255, 47, 146, .85);
   transform-origin: center;
   animation: spDotPulse 1.1s ease-in-out infinite;
}

@keyframes spDotPulse {

   0%,
   100% {
      transform: scale(1);
      box-shadow: 0 0 10px rgba(255, 47, 146, .55);
      opacity: .9;
   }

   50% {
      transform: scale(1.4);
      box-shadow: 0 0 22px rgba(255, 47, 146, .95);
      opacity: 1;
   }
}

.stock-urgency--spring .stock-urgency__bar {
   position: relative;
   height: 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .14);
   overflow: hidden;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.stock-urgency--spring .stock-urgency__bar-fill--low {
   height: 10px;
   width: 26%;
   border-radius: 999px;
   background: linear-gradient(90deg, #ff9fd0, #ff63b2, #ff2f92);
   box-shadow: 0 0 20px rgba(255, 47, 146, .36);
   transform-origin: left center;
   will-change: transform, filter;
   animation: spStockSell 12s ease-in-out infinite;
}

@keyframes spStockSell {
   0% {
      transform: scaleX(1);
      filter: brightness(1);
   }

   20% {
      transform: scaleX(.92);
      filter: brightness(1.03);
   }

   40% {
      transform: scaleX(.78);
      filter: brightness(1.08);
   }

   55% {
      transform: scaleX(.70);
      filter: brightness(1.14);
      box-shadow: 0 0 24px rgba(255, 47, 146, .44);
   }

   70% {
      transform: scaleX(.74);
      filter: brightness(1.10);
   }

   100% {
      transform: scaleX(1);
      filter: brightness(1);
   }
}

/* ── Decorative items ── */
.sp-flowers {
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
}

.sp-flower {
   position: absolute;
   font-size: 28px;
   opacity: .14;
   filter: blur(.2px);
}

.sp-flower--1 {
   top: 8%;
   left: 4%;
   transform: rotate(-15deg);
}

.sp-flower--2 {
   top: 20%;
   left: 12%;
   opacity: .10;
   transform: rotate(10deg);
}

.sp-flower--3 {
   bottom: 15%;
   left: 7%;
   opacity: .10;
   transform: rotate(-5deg);
}

.sp-flower--4 {
   top: 10%;
   right: 5%;
   transform: rotate(12deg);
}

.sp-flower--5 {
   top: 25%;
   right: 11%;
   opacity: .10;
   transform: rotate(-8deg);
}

.sp-flower--6 {
   bottom: 12%;
   right: 6%;
   opacity: .10;
   transform: rotate(18deg);
}

/* Card-level decorative items */
.sp-flowers-inner {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
}

.sp-flower-sm {
   position: absolute;
   font-size: 22px;
   opacity: .20;
}

.sp-flower-sm--1 {
   top: 15%;
   left: 3%;
}

.sp-flower-sm--2 {
   bottom: 12%;
   left: 5%;
   opacity: .16;
}

.sp-flower-sm--3 {
   top: 20%;
   right: 4%;
}

.sp-flower-sm--4 {
   bottom: 12%;
   right: 5%;
   opacity: .16;
}

/* ── Mobile ── */
@media (min-width: 769px) {
   .sp-flowers-inner {
      display: none;
   }
}

@media (max-width: 768px) {
   .sp-actions {
      margin-top: 0px;
   }

   .offer-banner--spring {
      padding: 14px 10px;
   }

   .offer-card--spring {
      padding: 22px 12px 20px;
   }

   .sp-title {
      font-size: 27px;
   }

   .sp-title__discount {
      font-size: 23px;
      padding: 8px 14px;
   }

   .sp-usp {
      font-size: 17px;
   }

   .usp-note {
      font-size: 12px;
      padding: 2px 8px;
      position: relative;
      top: 0;
      margin-bottom: 5px;
   }

   .sp-action {
      font-size: 11px;
      padding: 10px 12px;
   }

   .sp-action.sp-action--secondary {
      font-size: 11px;
      padding: 6px 12px;
   }

   .sp-subtitle {
      font-size: 10px;
      margin-bottom: 0px;
      margin-top: 15px;
   }

   .stock-urgency--spring .stock-urgency__label {
      font-size: 12px;
   }

   .sp-flower {
      opacity: .06;
   }

   .sp-flower--2,
   .sp-flower--5 {
      display: none;
   }
}

/* Mobile menu wrapper */
.mobile-offer-wrapper .offer-banner--spring {
   padding: 10px;
}

.mobile-offer-wrapper .sp-title {
   font-size: 22px;
}

.mobile-offer-wrapper .sp-title__discount {
   font-size: 16px;
   margin-bottom: 5px;
   padding: 5px 12px;
}

@media (max-width: 768px) {
   .mobile-offer-wrapper .sp-title {
      font-size: 20px;
   }

   .mobile-offer-wrapper .sp-title__discount {
      font-size: 14px;
      line-height: 1.3;
   }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {

   .sp-action--primary,
   .stock-urgency--spring .stock-urgency__dot,
   .stock-urgency--spring .stock-urgency__bar-fill--low {
      animation: none !important;
   }
}