/* =========================================================
   components.css
   역할: 재사용 가능한 UI 컴포넌트 스타일
   ========================================================= */

/* =========================================================
   HERO SECTION - Swiper Slider
   ========================================================= */
.hero {
   width: 100%;
   height: 100svh;
}

.swiper {
   width: 100%;
   height: 100%;
}

.swiper-slide {
   position: relative;
}

.swiper-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.copy {
   position: absolute;
   inset: 0;
   display: grid;
   place-content: center;
   text-align: center;
   color: white;
   background: rgba(0, 0, 0, 0.25);
}

.copy h1 {
   font-size: clamp(30px, 3vw, 50px);
   font-weight: 700;
   line-height: 1.15;
   letter-spacing: -0.02em;
   text-shadow: 0px 14px 10px #0b0e12;
}

.copy p {
   margin-top: 8px;
   font-size: 20px;
   font-weight: 500;
   line-height: 1.4;
   opacity: 0.9;
   text-shadow: 0px 14px 10px #0b0e12;
}

.copy span {
   display: block;
   margin-top: 14px;
   font-size: 16px;
   line-height: 1.6;
   opacity: 0.85;
   text-shadow: 0px 14px 10px #0b0e12;
}

@media (max-width: 640px) {
   .hero {
      height: 50svh;
   }
}

/* =========================================================
      SECTION 02 - Featured Picks Cards
      ========================================================= */
.featured__picks {
   position: relative;
   width: 100%;
   min-height: 100svh;
   background: url('../assets/img/section__2/section_bg.png') center / cover
      no-repeat;
   overflow: hidden;
}

.featured__picks::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 0, 0.12)
   );
   pointer-events: none;
}

.featured__picks > .container {
   position: relative;
   z-index: 1;
}

.featured__list {
   display: grid;
   place-items: center;
   padding-block: clamp(24px, 6vh, 72px);
   width: 100%;
}

.featured__list ul {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   gap: clamp(12px, 2vw, 24px);
   perspective: 1200px;
}

.featured__list li {
   padding: 0;
}

.featured__list li.featured__card {
   width: clamp(190px, 16vw, 320px);
   aspect-ratio: 3 / 4;
   position: relative;
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto;
   border-radius: var(--radius-sm);
   background: color-mix(in oklab, var(--bg-0), #ffffff 10%);
   overflow: visible;
   transform-origin: 50% 85%;
   will-change: transform;
   transition:
      transform 360ms var(--ease-out),
      box-shadow 360ms var(--ease-out),
      outline-color 200ms var(--ease-out);
   box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.featured__list li.featured__card::after {
   content: '';
   position: absolute;
   left: 12%;
   right: 12%;
   bottom: -14px;
   height: 22px;
   background: radial-gradient(
      closest-side,
      rgba(0, 0, 0, 0.28),
      rgba(0, 0, 0, 0)
   );
   filter: blur(3px);
   opacity: 0.75;
   pointer-events: none;
}

.featured__media {
   overflow: hidden;
   border-radius: var(--radius-sm);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   display: grid;
   place-items: center;
}

.featured__media > img {
   width: 100%;
   height: auto;
   max-height: 100%;
   object-fit: contain;
   padding: clamp(12px, 1.2vw, 18px);
   filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.25));
}

.featured__desc {
   background: color-mix(in oklab, var(--bg-0), #ffffff 15%);
   border-top: 1px solid var(--line-200);
   padding: 12px 14px 14px;
   display: grid;
   gap: 6px;
   text-align: left;
}

.featured__desc strong {
   font-size: var(--fs-16);
   font-weight: var(--fw-semibold);
   color: var(--text-900);
   letter-spacing: var(--ls-tight);
}

.featured__desc p {
   font-size: var(--fs-14);
   color: var(--text-600);
   line-height: 1.4;
}

.featured_bg {
   position: absolute;
   top: -18px;
   left: -18px;
   width: 64px;
   height: 64px;
   z-index: 10;
   pointer-events: none;
}

.featured_bg img {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   object-fit: cover;
   background: transparent;
   filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.22));
}

/* Card Tilt Effects */
.featured__list li.featured__card:nth-child(1) {
   transform: rotateZ(-5deg) rotateX(1.2deg);
}
.featured__list li.featured__card:nth-child(2) {
   transform: rotateZ(6deg) rotateX(1.2deg);
}
.featured__list li.featured__card:nth-child(3) {
   transform: rotateZ(-6deg) rotateX(1.2deg);
}
.featured__list li.featured__card:nth-child(4) {
   transform: rotateZ(8deg) rotateX(1.2deg);
}
.featured__list li.featured__card:nth-child(5) {
   transform: rotateZ(-4deg) rotateX(1.2deg);
}

.featured__list li.featured__card:hover {
   transform: translateY(-22px) rotateZ(0deg) rotateX(0deg) scale(1.03);
   outline-color: var(--brand-600);
   box-shadow: 0 34px 58px rgba(0, 0, 0, 0.32);
   z-index: 20;
}

.featured__list li.featured__card:hover::after {
   opacity: 0.9;
   filter: blur(4px);
}

/* Santa Animation */
.featured__animation {
   display: flex;
   justify-content: center;
   align-items: center;
   pointer-events: none;
   overflow: hidden;
}

.featured__img img {
   width: auto;
   height: 350px;
   display: block;
   object-fit: cover;
   transform-origin: center center;
   animation: santaBreath 4.2s ease-in-out infinite;
}

.featured__img {
   will-change: transform;
   animation: santaWave 7.5s ease-in-out infinite;
}

@keyframes santaWave {
   0% {
      transform: translate(0, 0) rotate(0deg);
   }
   20% {
      transform: translate(10px, -6px) rotate(-0.8deg);
   }
   40% {
      transform: translate(0px, -12px) rotate(0.6deg);
   }
   60% {
      transform: translate(-10px, -6px) rotate(-0.6deg);
   }
   80% {
      transform: translate(0px, 4px) rotate(0.8deg);
   }
   100% {
      transform: translate(0, 0) rotate(0deg);
   }
}

@keyframes santaBreath {
   0%,
   100% {
      transform: scale(1);
   }
   50% {
      transform: scale(1.02);
   }
}

/* Responsive */
@media (max-width: 1024px) {
   .featured__list ul {
      flex-wrap: wrap;
      align-items: center;
      row-gap: 18px;
   }
   .featured__list li.featured__card {
      width: min(320px, 44vw);
   }
}

@media (max-width: 640px) {
   .featured__list li.featured__card {
      width: min(360px, 90vw);
      transform: none !important;
   }
   .featured__list li.featured__card:hover {
      transform: none !important;
   }
   .featured_bg {
      top: -14px;
      left: -14px;
      width: 56px;
      height: 56px;
   }
   .featured__img img {
      width: 500px;
   }
}

/* =========================================================
      SECTION OVERLAY - Common Title/Subtitle
      ========================================================= */
.menu__overlay {
   display: grid;
   gap: 10px;
   margin-bottom: clamp(18px, 3vh, 28px);
   place-items: center;
   padding: 2rem 0;
}

.menu__title,
.featured_title {
   font-size: clamp(22px, 2.2vw, 32px);
   letter-spacing: var(--ls-tight);
   color: #1e3932;
}

.menu__sub {
   font-size: clamp(14px, 1.2vw, 18px);
   color: #6b7f7a;
   line-height: 1.5;
   max-width: 60ch;
   text-align: center;
}

/* =========================================================
      SECTION 03 - Menu Preview with Filter
      ========================================================= */
.menu__preview {
   padding: 0 4rem;
}

.menu__filter input {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

.menu__filter__tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 18px;
   justify-content: center;
}

.menu__filter__tabs label {
   padding: 8px 14px;
   border-radius: 999px;
   font-size: 14px;
   cursor: pointer;
   background: #f3f6f5;
   color: #1e3932;
   transition:
      background 200ms ease,
      color 200ms ease,
      transform 200ms ease;
}

.menu__filter__tabs label:hover {
   background: #e5ecea;
   transform: translateY(-1px);
}

/* Active Tab States */
#filter-all:checked ~ .menu__filter__tabs label[for='filter-all'],
#filter-coffee:checked ~ .menu__filter__tabs label[for='filter-coffee'],
#filter-ade:checked ~ .menu__filter__tabs label[for='filter-ade'],
#filter-dessert:checked ~ .menu__filter__tabs label[for='filter-dessert'],
#filter-salad:checked ~ .menu__filter__tabs label[for='filter-salad'],
#filter-sandwich:checked ~ .menu__filter__tabs label[for='filter-sandwich'],
#filter-fruit:checked ~ .menu__filter__tabs label[for='filter-fruit'],
#filter-yogurt:checked ~ .menu__filter__tabs label[for='filter-yogurt'] {
   background: #1e3932;
   color: #ffffff;
}

.menu__grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: clamp(12px, 1.6vw, 18px);
}

.menu__card__inner {
   position: relative;
   display: grid;
   grid-template-rows: 400px auto;
   height: 100%;
   border-radius: var(--radius-sm);
   overflow: hidden;
   background: color-mix(in oklab, var(--bg-0), #ffffff 10%);
   border: 1px solid var(--line-200);
   box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
   transition:
      transform 280ms var(--ease-out),
      box-shadow 280ms var(--ease-out),
      border-color 280ms var(--ease-out);
}

.menu__card__inner:hover {
   transform: translateY(-10px);
   border-color: color-mix(in oklab, #1e3932, #ffffff 55%);
   box-shadow: 0 22px 40px rgba(0, 0, 0, 0.18);
}

.menu__thumb {
   width: 100%;
   height: 100%;
   object-fit: cover;
   padding: 14px;
   background: radial-gradient(
      closest-side,
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0)
   );
   filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.18));
}

.menu__meta {
   display: grid;
   gap: 6px;
   padding: 12px 14px 14px;
   background: color-mix(in oklab, var(--bg-0), #ffffff 18%);
}

.menu__name {
   font-size: 16px;
   font-weight: var(--fw-semibold);
   color: var(--text-900);
}

.menu__desc {
   font-size: 14px;
   color: var(--text-600);
   line-height: 1.45;
}

.menu__badge {
   position: absolute;
   top: 12px;
   left: 12px;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 28px;
   padding: 0 10px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.02em;
   color: #ffffff;
   background: #1e3932;
   box-shadow: 0 10px 16px rgba(0, 0, 0, 0.16);
}

.menu__card[data-badge='hot'] .menu__badge {
   background: #1e3932;
}
.menu__card[data-badge='new'] .menu__badge {
   background: #b3412e;
}
.menu__card:not([data-badge]) .menu__badge {
   display: none;
}

.menu__card {
   animation: menuFadeIn 220ms ease-out both;
}

@keyframes menuFadeIn {
   from {
      opacity: 0;
      transform: translateY(6px) scale(0.985);
   }
   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

/* Category Filtering */
.menu__grid .menu__card {
   display: block;
}

.menu__filter:has(#filter-coffee:checked)
   .menu__card:not([data-category='coffee']) {
   display: none;
}
.menu__filter:has(#filter-ade:checked) .menu__card:not([data-category='ade']) {
   display: none;
}
.menu__filter:has(#filter-dessert:checked)
   .menu__card:not([data-category='dessert']) {
   display: none;
}
.menu__filter:has(#filter-salad:checked)
   .menu__card:not([data-category='salad']) {
   display: none;
}
.menu__filter:has(#filter-sandwich:checked)
   .menu__card:not([data-category='sandwich']) {
   display: none;
}
.menu__filter:has(#filter-fruit:checked)
   .menu__card:not([data-category='fruit']) {
   display: none;
}
.menu__filter:has(#filter-yogurt:checked)
   .menu__card:not([data-category='yogurt']) {
   display: none;
}

.menu__filter:has(#filter-all:checked) .menu__grid {
   min-height: 900px;
}

.menu__filter:has(#filter-all:checked):not(:has(#menu-more:checked))
   .menu__card:nth-child(n + 9) {
   visibility: hidden;
   pointer-events: none;
   height: 0;
   margin: 0;
   padding: 0;
   overflow: hidden;
}

.menu__actions {
   display: none;
}
.menu__filter:has(#filter-all:checked) .menu__actions {
   display: block;
}

.menu__actions {
   width: fit-content;
   margin: 5px auto 0;
   position: sticky;
   bottom: 12px;
   z-index: 2;
   padding: 2rem 0;
}

.menu__more {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 44px;
   padding: 0 18px;
   border-radius: 999px;
   cursor: pointer;
   user-select: none;
   background: #1e3932;
   color: #fff;
   font-weight: 800;
   box-shadow: 0 14px 26px rgba(0, 0, 0, 0.16);
}

.menu__more__close {
   display: none;
}
#menu-more:checked
   ~ .menu__filter__tabs
   ~ .menu__grid
   ~ .menu__actions
   .menu__more__open {
   display: none;
}
#menu-more:checked
   ~ .menu__filter__tabs
   ~ .menu__grid
   ~ .menu__actions
   .menu__more__close {
   display: inline;
}

@media (max-width: 1024px) {
   .menu__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .menu__filter:has(#filter-all:checked) .menu__grid {
      min-height: 1200px;
   }
}

@media (max-width: 640px) {
   .menu__grid {
      grid-template-columns: 1fr;
   }
   .menu__filter:has(#filter-all:checked) .menu__grid {
      min-height: 1400px;
   }
}
/* =========================================================
   components.css - Part 2
   Sections: Rewards, Bridge, Brand Story, Store Experience
   ========================================================= */

/* =========================================================
   SECTION 04 - Rewards Teaser
   ========================================================= */
.rewards__teaser {
   position: relative;
   min-height: 100svh;
   overflow: hidden;
   background: url(../assets/img/section__4/bg_2.png) center / cover no-repeat;
   z-index: 1;
   display: grid;
   align-items: center;
   padding-block: clamp(32px, 6vh, 72px);
}

.rewards__teaser::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.44),
      rgba(0, 0, 0, 0.32)
   );
   z-index: 0;
   pointer-events: none;
}

.rewards__inner {
   position: relative;
   z-index: 1;
   display: grid;
   gap: clamp(18px, 3vh, 28px);
}

.rewards__header {
   display: grid;
   gap: 10px;
   place-items: center;
   text-align: center;
}

.rewards__title {
   font-size: clamp(22px, 2.2vw, 32px);
   letter-spacing: var(--ls-tight);
   color: #ffffff;
}

.rewards__sub {
   font-size: clamp(14px, 1.2vw, 18px);
   color: rgba(255, 255, 255, 0.82);
   line-height: 1.5;
   max-width: 56ch;
}

.rewards__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: clamp(12px, 2vw, 24px);
   align-items: stretch;
}

.rewards__item {
   border-radius: var(--radius-sm);
   padding: clamp(18px, 2vw, 22px);
   min-height: 360px;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.22);
   box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   display: grid;
   grid-template-rows: auto 1fr auto;
   gap: 10px;
   transition:
      transform 280ms var(--ease-out),
      box-shadow 280ms var(--ease-out),
      border-color 280ms var(--ease-out);
}

.rewards__item:hover {
   transform: translateY(-8px);
   border-color: rgba(255, 255, 255, 0.38);
   box-shadow: 0 26px 52px rgba(0, 0, 0, 0.3);
}

.rewards__item__title {
   font-size: 18px;
   font-weight: var(--fw-bold);
   color: #ffffff;
   letter-spacing: var(--ls-tight);
}

.rewards__item__desc {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.82);
   line-height: 1.55;
   max-width: 48ch;
}

.rewards__cta {
   justify-self: start;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 44px;
   padding: 0 16px;
   border-radius: 999px;
   font-weight: 800;
   font-size: 14px;
   color: #0b0e12;
   background: rgba(255, 255, 255, 0.92);
   box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
   transition:
      transform 200ms var(--ease-out),
      background 200ms var(--ease-out);
}

.rewards__cta:hover {
   transform: translateY(-1px);
   background: #ffffff;
}

.rewards__item--membership {
   outline: 1px solid rgba(143, 199, 255, 0.35);
}
.rewards__item--rewards {
   outline: 1px solid rgba(217, 243, 229, 0.32);
}

.rewards__hint {
   position: relative;
}

.rewards__item--membership,
.rewards__item--rewards {
   padding-bottom: 180px;
}

.rewards__item--membership .rewards__hint__panel {
   background: rgba(255, 255, 255, 0.92);
   color: #0b0e12;
}
.rewards__item--membership .rewards__hint__title,
.rewards__item--membership .rewards__hint__list strong {
   color: #0b0e12;
}
.rewards__item--membership .rewards__hint__list span {
   color: #2a2f38;
}
.rewards__item--membership .rewards__hint__footnote {
   color: #4b5563;
}

.rewards__hint__panel {
   position: absolute;
   left: 14px;
   right: 14px;
   bottom: 14px;
   padding: 14px 14px 12px;
   border-radius: calc(var(--radius-sm) - 2px);
   background: rgba(11, 14, 18, 0.72);
   border: 1px solid rgba(255, 255, 255, 0.18);
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   opacity: 0;
   transform: translateY(10px);
   filter: blur(2px);
   pointer-events: none;
   transition:
      opacity 220ms var(--ease-out),
      transform 220ms var(--ease-out),
      filter 220ms var(--ease-out);
}

.rewards__hint:hover .rewards__hint__panel,
.rewards__hint:focus-within .rewards__hint__panel {
   opacity: 1;
   transform: translateY(0);
   filter: blur(0);
   pointer-events: auto;
}

.rewards__hint__title {
   margin: 0 0 10px;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.02em;
   color: rgba(255, 255, 255, 0.92);
}

.rewards__hint__list {
   list-style: none;
   display: grid;
   gap: 8px;
}

.rewards__hint__list li {
   display: grid;
   grid-template-columns: 84px 1fr;
   gap: 10px;
   align-items: start;
}

.rewards__hint__list strong {
   font-size: 12px;
   font-weight: 900;
   color: #ffffff;
   letter-spacing: var(--ls-tight);
}

.rewards__hint__list span {
   font-size: 12px;
   line-height: 1.45;
   color: rgba(255, 255, 255, 0.8);
}

.rewards__hint__footnote {
   margin-top: 10px;
   font-size: 11px;
   color: rgba(255, 255, 255, 0.68);
}

.rewards__progress {
   margin-top: 6px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   align-items: center;
}

.rewards__step {
   position: relative;
   display: grid;
   grid-template-rows: 10px auto;
   gap: 8px;
   text-align: center;
   opacity: 0.88;
}

.rewards__step::after {
   content: '';
   position: absolute;
   top: 4px;
   left: 50%;
   right: -50%;
   height: 2px;
   background: rgba(255, 255, 255, 0.22);
}

.rewards__step:last-child::after {
   display: none;
}

.rewards__dot {
   width: 10px;
   height: 10px;
   border-radius: 999px;
   margin-inline: auto;
   background: rgba(255, 255, 255, 0.28);
   border: 1px solid rgba(255, 255, 255, 0.38);
   box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
}

.rewards__label {
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.01em;
   color: rgba(255, 255, 255, 0.72);
}

.rewards__step.is-done .rewards__dot {
   background: rgba(255, 255, 255, 0.88);
   border-color: rgba(255, 255, 255, 0.92);
}
.rewards__step.is-done::after {
   background: rgba(255, 255, 255, 0.58);
}
.rewards__step.is-done .rewards__label {
   color: rgba(255, 255, 255, 0.88);
}

.rewards__step.is-active .rewards__dot {
   background: rgba(143, 199, 255, 0.95);
   border-color: rgba(255, 255, 255, 0.92);
   transform: scale(1.08);
}
.rewards__step.is-active .rewards__label {
   color: rgba(255, 255, 255, 0.96);
}

.rewards__item--rewards:hover .rewards__step::after,
.rewards__item--rewards:focus-within .rewards__step::after {
   background: rgba(255, 255, 255, 0.36);
}
.rewards__item--rewards:hover .rewards__label,
.rewards__item--rewards:focus-within .rewards__label {
   color: rgba(255, 255, 255, 0.84);
}

@media (min-width: 1025px) {
   .rewards__teaser {
      background-attachment: fixed;
   }
}

@media (max-width: 1024px) {
   .rewards__grid {
      grid-template-columns: 1fr;
   }
   .rewards__item {
      min-height: 320px;
   }
}

@media (max-width: 640px) {
   .rewards__teaser {
      padding-block: 28px;
   }
   .rewards__title {
      padding: 16px;
   }
   .rewards__cta {
      width: 100%;
      justify-self: stretch;
   }
   .rewards__item--membership,
   .rewards__item--rewards {
      padding-bottom: 22px;
   }
   .rewards__hint__panel {
      position: static;
      margin-top: 12px;
      opacity: 1;
      transform: none;
      filter: none;
      pointer-events: auto;
   }
}

/* =========================================================
      SECTION 05 - Seasonal Bridge
      ========================================================= */
.seasonal__bridge {
   position: relative;
   width: 100%;
   min-height: 80svh;
   display: grid;
   place-items: center;
   overflow: hidden;
   isolation: isolate;
}

.seasonal__bg {
   position: absolute;
   inset: 0;
   background:
      radial-gradient(
         circle at 30% 20%,
         rgba(255, 255, 255, 0.18),
         transparent 40%
      ),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.75)),
      url('../assets/img/section__7/Starbucks-Reserve-Winter-Wonderland_HERO-1440x700-1.webp')
         center / cover no-repeat;
   z-index: -1;
}

.seasonal__content {
   display: grid;
   gap: 14px;
   text-align: center;
   padding-block: clamp(48px, 10vh, 120px);
}

.seasonal__eyebrow {
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.18em;
   color: rgba(255, 255, 255, 0.7);
   text-transform: uppercase;
}

.seasonal__title {
   margin: 0;
   font-size: clamp(28px, 3.2vw, 42px);
   font-weight: 700;
   letter-spacing: -0.02em;
   line-height: 1.25;
   color: #ffffff;
}

.seasonal__desc {
   margin-top: 6px;
   font-size: clamp(14px, 1.2vw, 18px);
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.78);
}

@media (min-width: 1025px) {
   .seasonal__bg {
      background-attachment: fixed;
   }
}

@media (max-width: 640px) {
   .seasonal__bridge {
      min-height: 70svh;
   }
   .seasonal__title {
      font-size: 26px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .seasonal__bg {
      background-attachment: scroll;
   }
}

/* =========================================================
      SECTION 06 - Brand Story (Tabs + Zigzag)
      ========================================================= */
.brand__story {
   min-height: clamp(1400px, 160vh, 2800px);
   padding-block: clamp(36px, 6vh, 72px);
}

.brand__inner {
   display: grid;
   gap: clamp(18px, 3vh, 28px);
}

.brand__head {
   text-align: center;
   display: grid;
   gap: 10px;
}

.brand__title {
   margin: 0;
   font-size: clamp(22px, 2.2vw, 32px);
   letter-spacing: var(--ls-tight);
   color: var(--text-900);
}

.brand__sub {
   margin: 0 auto;
   max-width: 60ch;
   font-size: clamp(14px, 1.15vw, 18px);
   color: var(--text-600);
   line-height: 1.5;
}

.brand__tabs {
   position: relative;
   display: grid;
   gap: 14px;
}

.brand__tabs > input[type='radio'] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

.brand__tabbar {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
   align-items: center;
}

.brand__tabbar label {
   cursor: pointer;
   user-select: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 42px;
   padding: 0 16px;
   border-radius: 999px;
   font-size: 14px;
   font-weight: 900;
   letter-spacing: 0.01em;
   background: color-mix(in oklab, var(--bg-50), #ffffff 30%);
   border: 1px solid var(--line-200);
   color: var(--text-700);
   transition:
      transform 180ms var(--ease-out),
      background 180ms var(--ease-out),
      border-color 180ms var(--ease-out);
}

.brand__tabbar label:hover {
   transform: translateY(-1px);
   border-color: var(--line-300);
}

#tab-coffee:checked ~ .brand__tabbar label[for='tab-coffee'],
#tab-sourcing:checked ~ .brand__tabbar label[for='tab-sourcing'],
#tab-sustain:checked ~ .brand__tabbar label[for='tab-sustain'],
#tab-community:checked ~ .brand__tabbar label[for='tab-community'] {
   background: color-mix(in oklab, var(--brand-700), #000 8%);
   border-color: color-mix(in oklab, var(--brand-700), #fff 45%);
   color: #fff;
}

.brand__panels {
   position: relative;
   min-height: auto;
}

.brand__panel {
   position: absolute;
   inset: 0;
   display: block;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: translateY(8px);
   transition:
      opacity 220ms var(--ease-out),
      transform 220ms var(--ease-out),
      visibility 0ms linear 220ms;
}

#tab-coffee:checked ~ .brand__panels #panel-coffee,
#tab-sourcing:checked ~ .brand__panels #panel-sourcing,
#tab-sustain:checked ~ .brand__panels #panel-sustain,
#tab-community:checked ~ .brand__panels #panel-community {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translateY(0);
   transition:
      opacity 220ms var(--ease-out),
      transform 220ms var(--ease-out),
      visibility 0ms;
   position: relative;
}

/* Zigzag Layout */
.zigzag {
   display: grid;
   gap: clamp(18px, 3vh, 28px);
}

.zigzag__line {
   margin: 0;
   padding: 12px 14px;
   height: 300px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   font-weight: 900;
   letter-spacing: 0.01em;
   color: #ffffff;
   background: color-mix(in oklab, var(--bg-50), #ffffff 35%);
   border: 1px solid var(--line-200);
}

.zigzag__row {
   display: grid;
   grid-template-columns: 60% 40%;
   gap: clamp(14px, 2vw, 22px);
   align-items: center;
   padding: clamp(12px, 1.4vw, 18px);
   border-radius: var(--radius-sm);
   background: color-mix(in oklab, var(--bg-50), #ffffff 45%);
   border: 1px solid var(--line-200);
}

.zigzag__row--reverse {
   grid-template-columns: 40% 60%;
}

.zigzag__row--reverse .zigzag__media {
   order: 2;
}
.zigzag__row--reverse .zigzag__content {
   order: 1;
}

.zigzag__media {
   contain: paint;
}

.zigzag__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: translateZ(0);
   transition: transform 320ms var(--ease-out);
}

.zigzag__row:hover .zigzag__media img {
   transform: scale(1.03);
}

.zigzag__content {
   display: grid;
   gap: 10px;
   padding: clamp(8px, 1vw, 12px);
}

.zigzag__eyebrow {
   margin: 0;
   font-size: 12px;
   font-weight: 900;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: color-mix(in oklab, var(--brand-700), #000 10%);
}

.zigzag__title {
   margin: 0;
   font-size: clamp(18px, 1.6vw, 24px);
   letter-spacing: var(--ls-tight);
   color: var(--text-900);
   line-height: 1.25;
}

.zigzag__desc {
   margin: 0;
   font-size: 14px;
   color: var(--text-600);
   line-height: 1.65;
   max-width: 52ch;
}

.mini__cards {
   list-style: none;
   margin: 6px 0 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
}

.mini__card {
   border-radius: 14px;
   padding: 12px 12px 10px;
   background: color-mix(in oklab, var(--bg-0), #ffffff 20%);
   border: 1px solid color-mix(in oklab, var(--line-200), #ffffff 15%);
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
   display: grid;
   gap: 6px;
}

.mini__card strong {
   font-size: 12px;
   font-weight: 900;
   color: var(--text-900);
   letter-spacing: 0.01em;
}

.mini__card span {
   font-size: 12px;
   color: var(--text-600);
   line-height: 1.45;
}

.brand__link {
   margin-top: 6px;
   justify-self: start;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 44px;
   padding: 0 16px;
   border-radius: 999px;
   font-size: 14px;
   font-weight: 900;
   color: #fff;
   background: color-mix(in oklab, var(--brand-700), #000 10%);
   box-shadow: 0 14px 26px rgba(0, 0, 0, 0.12);
   transition:
      transform 180ms var(--ease-out),
      box-shadow 180ms var(--ease-out),
      background 180ms var(--ease-out);
}

.brand__link:hover {
   transform: translateY(-1px);
   background: color-mix(in oklab, var(--brand-600), #000 6%);
   box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16);
}

.coffee__bg {
   background: url(../assets/img/section__6/coffee__bg.png) center / cover
      no-repeat;
}
.sourcing__bg {
   background: url(../assets/img/section__6/sourcing__bg.png) center / cover
      no-repeat;
}
.sustain__bg {
   background: url(../assets/img/section__6/sustain__bg.png) center / cover
      no-repeat;
}
.community__bg {
   background: url(../assets/img/section__6/community__bg.png) center / cover
      no-repeat;
}

@media (max-width: 1024px) {
   .zigzag__row,
   .zigzag__row--reverse {
      grid-template-columns: 1fr;
   }
   .zigzag__row--reverse .zigzag__media,
   .zigzag__row--reverse .zigzag__content {
      order: initial;
   }
   .mini__cards {
      grid-template-columns: 1fr;
   }
   .brand__link {
      width: 100%;
      justify-self: stretch;
   }
}

@media (prefers-reduced-motion: reduce) {
   .brand__panel {
      animation: none !important;
   }
   .zigzag__media img {
      transition: none !important;
   }
   .zigzag__row:hover .zigzag__media img {
      transform: none !important;
   }
}
/* =========================================================
   components.css - Part 3
   Section 07: Store Experience
   ========================================================= */

/* =========================================================
   SECTION 07 - Store Experience
   ========================================================= */
.store__experience {
   position: relative;
   width: 100%;
   min-height: 100svh;
   overflow: hidden;
   background: #000;
}

.store__media {
   position: absolute;
   inset: 0;
   background: url('../assets/img/section__5/test.png') center / cover no-repeat;
   transform: translateZ(0);
}

.store__media::before {
   content: '';
   position: absolute;
   inset: -10%;
   background: inherit;
   transform: translateY(0);
   will-change: transform;
}

.store__media::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to left,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.25) 40%,
      rgba(0, 0, 0, 0.1) 75%,
      rgba(0, 0, 0, 0.06) 100%
   );
   pointer-events: none;
}

.store__panel {
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
   width: min(40vw, 560px);
   min-width: 360px;
   z-index: 2;
   display: grid;
   align-items: center;
   background: rgba(11, 14, 18, 0.56);
   border-left: 1px solid rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
}

.store__panel__inner {
   padding: clamp(18px, 3.2vw, 40px);
   display: grid;
   gap: 18px;
}

.store__title {
   margin: 0 0 10px;
   font-size: clamp(22px, 2.1vw, 34px);
   font-weight: var(--fw-bold);
   letter-spacing: var(--ls-tight);
   line-height: 1.25;
   color: rgba(255, 255, 255, 0.96);
}

.store__desc {
   margin: 0;
   font-size: 14px;
   line-height: 1.65;
   color: rgba(255, 255, 255, 0.78);
}

.store__desc--sub {
   margin-top: 6px;
   color: rgba(255, 255, 255, 0.86);
}

.store__finder {
   display: grid;
   gap: 12px;
   margin-top: 6px;
}

.store__label {
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.02em;
   color: rgba(255, 255, 255, 0.7);
}

.store__select {
   height: 44px;
   border-radius: 12px;
   padding: 0 12px;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.92);
   outline: none;
   transition:
      border-color 200ms var(--ease-out),
      background 200ms var(--ease-out);
}

.store__select:focus-visible {
   border-color: rgba(143, 199, 255, 0.75);
   background: rgba(255, 255, 255, 0.14);
}

.store__results {
   margin-top: 8px;
   padding: 14px;
   border-radius: var(--radius-sm);
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.14);
}

.store__results__title {
   margin: 0 0 10px;
   font-size: 12px;
   font-weight: 900;
   letter-spacing: 0.02em;
   color: rgba(255, 255, 255, 0.86);
}

.store__list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 8px;
}

.store__list li {
   display: grid;
   gap: 2px;
   padding: 10px 10px;
   border-radius: 12px;
   background: rgba(0, 0, 0, 0.18);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.store__store-name {
   font-size: 13px;
   font-weight: 900;
   color: rgba(255, 255, 255, 0.92);
}

.store__store-meta {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.72);
}

.store__cta {
   margin-top: 6px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 46px;
   border-radius: 999px;
   padding: 0 18px;
   background: rgba(255, 255, 255, 0.92);
   color: #0b0e12;
   font-size: 14px;
   font-weight: 900;
   box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
   transition:
      transform 200ms var(--ease-out),
      background 200ms var(--ease-out);
}

.store__cta:hover {
   transform: translateY(-1px);
   background: #ffffff;
}

/* Parallax Animation (Modern browsers) */
@supports (animation-timeline: scroll()) {
   @keyframes storeParallax {
      from {
         transform: translateY(-2%);
      }
      to {
         transform: translateY(2%);
      }
   }

   .store__media::before {
      animation: storeParallax linear both;
      animation-timeline: scroll(root);
      animation-range: entry 0% exit 100%;
   }
}

/* Fallback for browsers without scroll timeline */
@supports not (animation-timeline: scroll()) {
   @media (min-width: 1025px) {
      .store__media {
         background-attachment: fixed;
         background-position: center;
      }
      .store__media::before {
         display: none;
      }
   }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
   .store__media::before {
      animation: none !important;
      transform: none !important;
   }
   .store__media {
      background-attachment: scroll !important;
   }
}

/* Responsive: Mobile */
@media (max-width: 1024px) {
   .store__experience {
      display: grid;
      grid-template-rows: 68svh auto;
   }

   .store__media {
      position: relative;
      inset: auto;
      height: 68svh;
      background-attachment: scroll;
   }

   .store__media::before {
      animation: none;
      transform: none;
   }

   .store__panel {
      position: relative;
      width: 100%;
      min-width: 0;
      height: auto;
      border-left: none;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
   }

   .store__cta {
      width: 100%;
   }
}