.packaging-gallery{
  --gallery-ease:cubic-bezier(.22,1,.36,1);
  isolation:isolate;
  perspective:1200px;
}

.packaging-gallery:after{
  content:"";
  position:absolute;
  inset:1.5% 0 0 7%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 28% 42%,rgba(191,147,72,.16),transparent 31%),radial-gradient(circle at 74% 52%,rgba(13,59,49,.1),transparent 36%);
  filter:blur(26px);
}

.packaging-gallery-primary,
.packaging-gallery-item{
  position:absolute;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.8);
  border-radius:2px;
  background:#e9e3d9;
}

.packaging-gallery-primary{
  z-index:2;
  left:0;
  top:2%;
  width:61%;
  height:94%;
  box-shadow:0 34px 68px rgba(44,35,22,.19),0 8px 20px rgba(44,35,22,.08);
  transition:background-color 800ms var(--gallery-ease),box-shadow 800ms var(--gallery-ease);
}

.packaging-gallery-primary:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.18;
  background:radial-gradient(circle at 72% 18%,rgba(225,203,153,.22),transparent 34%),linear-gradient(135deg,rgba(13,59,49,.12),transparent 48%);
  transition:opacity 800ms var(--gallery-ease),background 800ms var(--gallery-ease);
}

.packaging-gallery-primary[data-gallery-active="amber"]:before{opacity:.16;background:radial-gradient(circle at 68% 22%,rgba(214,163,82,.3),transparent 38%),linear-gradient(135deg,rgba(93,55,17,.06),transparent 48%)}
.packaging-gallery-primary[data-gallery-active="soft-pink"]:before{opacity:.13;background:radial-gradient(circle at 70% 18%,rgba(231,186,177,.3),transparent 38%),linear-gradient(135deg,rgba(177,119,112,.06),transparent 48%)}
.packaging-gallery-primary[data-gallery-active="gift-box"]:before{opacity:.14;background:radial-gradient(circle at 72% 18%,rgba(218,190,136,.27),transparent 38%),linear-gradient(135deg,rgba(149,116,68,.05),transparent 48%)}

.packaging-gallery-primary-inner,
.packaging-gallery-frame{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  border-radius:inherit;
  transform:translate3d(var(--gallery-x,0),var(--gallery-y,0),0);
  transition:transform 760ms var(--gallery-ease);
  will-change:transform;
}

.packaging-gallery-layer{
  position:absolute;
  inset:0;
  display:block;
  z-index:0;
  opacity:0;
  overflow:hidden;
  transform:scale(.985);
  filter:blur(1px);
  pointer-events:none;
}

.packaging-gallery-layer.is-active{
  z-index:1;
  opacity:1;
  transform:scale(1);
  filter:blur(0);
}

.packaging-gallery-layer img,
.packaging-gallery-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.9) contrast(1.022) brightness(1.012);
}

.packaging-gallery-layer[data-gallery-layer="deep-green"] img{object-position:center 45%}
.packaging-gallery-layer[data-gallery-layer="soft-pink"] img{object-position:center 52%}
.packaging-gallery-layer[data-gallery-layer="amber"] img{object-position:center 48%}
.packaging-gallery-layer[data-gallery-layer="gift-box"] img{object-position:center 50%}

.packaging-gallery-label{
  position:absolute;
  left:22px;
  bottom:18px;
  z-index:4;
  padding:7px 10px 6px;
  border:1px solid rgba(234,209,159,.48);
  background:rgba(9,44,36,.72);
  color:#fff6df;
  font:700 9px/1 var(--sans,Arial,sans-serif);
  letter-spacing:.17em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}

.packaging-gallery-item{
  appearance:none;
  padding:0;
  cursor:pointer;
  text-align:left;
  transform:none;
  opacity:1;
  box-shadow:0 24px 46px rgba(61,48,28,.14),0 6px 14px rgba(61,48,28,.07);
  transition:border-color 420ms var(--gallery-ease),box-shadow 420ms var(--gallery-ease),opacity 420ms var(--gallery-ease);
}

.packaging-gallery-item:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(184,142,67,.1),inset 0 -35px 52px rgba(10,31,26,.08);
}

.packaging-gallery-item[data-gallery-slot="support-1"]{z-index:4;right:0;top:0;width:41%;height:36%}
.packaging-gallery-item[data-gallery-slot="support-2"]{z-index:5;right:3.5%;top:38%;width:34%;height:27%}
.packaging-gallery-item[data-gallery-slot="support-3"]{z-index:3;right:0;bottom:0;width:42%;height:32.5%}
.packaging-gallery-item[data-gallery-id="soft-pink"] img{object-position:center 52%}
.packaging-gallery-item[data-gallery-id="amber"] img{object-position:center 48%}
.packaging-gallery-item[data-gallery-id="gift-box"] img{object-position:center 50%}

.packaging-gallery-item:focus-visible{
  outline:1px solid #c49647;
  outline-offset:4px;
  border-color:rgba(196,150,71,.76);
}

.packaging-gallery-item.is-active-thumbnail{
  border-color:rgba(196,150,71,.8);
  box-shadow:0 24px 46px rgba(61,48,28,.15),inset 0 -2px 0 #c49647;
}

.packaging-gallery-item.is-category-linked{
  border-color:rgba(196,150,71,.68);
}

.packaging-motion-ready .packaging-gallery-primary,
.packaging-motion-ready .packaging-gallery-item{
  opacity:0;
  transform:translateY(8px);
}

.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-gallery-primary,
.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-gallery-item{
  opacity:1;
  transform:translateY(0);
  transition:opacity 900ms var(--gallery-ease),transform 900ms var(--gallery-ease),border-color 420ms var(--gallery-ease),box-shadow 420ms var(--gallery-ease);
}

.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-gallery-primary{transition-delay:420ms}
.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-gallery-item[data-gallery-slot="support-1"]{transition-delay:540ms}
.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-gallery-item[data-gallery-slot="support-2"]{transition-delay:660ms}
.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-gallery-item[data-gallery-slot="support-3"]{transition-delay:780ms}

@media (hover:hover) and (pointer:fine){
  .packaging-gallery:has(.packaging-gallery-item:hover) .packaging-gallery-item:not(:hover){opacity:.92}
  .packaging-gallery-item:hover{z-index:8;border-color:rgba(206,165,88,.7);box-shadow:0 28px 50px rgba(61,48,28,.17),0 7px 16px rgba(61,48,28,.08)}
  .packaging-gallery-item:hover .packaging-gallery-frame{transform:translate3d(var(--gallery-x,0),calc(var(--gallery-y,0px) - 1.5px),0) scale(1.01)}
}

.packaging-format-index button{
  position:relative;
  appearance:none;
  flex:0 0 auto;
  padding:13px 23px 12px;
  border:0;
  background:transparent;
  color:#607870;
  cursor:pointer;
  font:700 9px/1 var(--sans,Arial,sans-serif);
  letter-spacing:.17em;
  text-transform:uppercase;
  transition:color 320ms var(--gallery-ease);
}

.packaging-format-index button+button:before{content:"";position:absolute;left:0;top:50%;width:2px;height:2px;border-radius:50%;background:#b98c41}
.packaging-format-index button:after{content:"";position:absolute;left:22px;right:22px;bottom:7px;height:1px;background:#ba8d43;transform:scaleX(0);transform-origin:center;transition:transform 360ms var(--gallery-ease)}
.packaging-format-index button:hover,.packaging-format-index button:focus-visible,.packaging-format-index button[aria-pressed="true"]{color:#173f35}
.packaging-format-index button:hover:after,.packaging-format-index button:focus-visible:after,.packaging-format-index button[aria-pressed="true"]:after{transform:scaleX(1)}
.packaging-format-index button:focus-visible{outline:1px solid rgba(184,142,67,.72);outline-offset:-3px}

@media (max-width:1180px) and (min-width:821px){
  .packaging-gallery-primary{width:62.5%}
  .packaging-gallery-item[data-gallery-slot="support-1"]{width:39.5%}
  .packaging-gallery-item[data-gallery-slot="support-2"]{right:2%;width:35%}
  .packaging-gallery-item[data-gallery-slot="support-3"]{width:40.5%}
  .packaging-format-index button{padding-left:14px;padding-right:14px}
  .packaging-format-index button:after{left:13px;right:13px}
}

@media (max-width:820px){
  .packaging-gallery{height:520px;width:100%}
  .packaging-gallery-primary{left:0;top:0;width:100%;height:70%;z-index:2}
  .packaging-gallery-item[data-gallery-slot="support-1"],
  .packaging-gallery-item[data-gallery-slot="support-2"],
  .packaging-gallery-item[data-gallery-slot="support-3"]{top:auto;bottom:0;width:31.5%;height:25%;z-index:3}
  .packaging-gallery-item[data-gallery-slot="support-1"]{left:0;right:auto}
  .packaging-gallery-item[data-gallery-slot="support-2"]{left:34.25%;right:auto}
  .packaging-gallery-item[data-gallery-slot="support-3"]{left:auto;right:0}
  .packaging-gallery-primary-inner,.packaging-gallery-frame{transform:none}
  .packaging-gallery-label{left:14px;bottom:13px;font-size:8px}
  .packaging-format-index{display:flex;justify-content:flex-start;width:100%;max-width:100%;margin-top:-8px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}
  .packaging-format-index::-webkit-scrollbar{display:none}
  .packaging-format-index button{padding:13px 18px 12px}
  .packaging-format-index button:after{left:17px;right:17px}
}

@media (max-width:520px){
  .packaging-gallery{height:430px}
  .packaging-gallery-primary{height:68%}
  .packaging-gallery-item[data-gallery-slot="support-1"],
  .packaging-gallery-item[data-gallery-slot="support-2"],
  .packaging-gallery-item[data-gallery-slot="support-3"]{width:31.2%;height:26%}
  .packaging-gallery-item[data-gallery-slot="support-2"]{left:34.4%}
  .packaging-gallery-layer[data-gallery-layer="deep-green"] img{object-position:center 42%}
}

@media (prefers-reduced-motion:reduce){
  .packaging-gallery-primary,.packaging-gallery-item,.packaging-gallery-primary-inner,.packaging-gallery-frame,.packaging-gallery-layer,.packaging-format-index button:after{transition-duration:120ms!important;transition-delay:0ms!important}
  .packaging-gallery-primary-inner,.packaging-gallery-frame{transform:none!important}
}