/* 3D-модель упаковки Aknetrent 20 мг для hero-блока.
   Все размеры внутри коробки — в em, где 1em = 1% ширины лицевой стороны
   (font-size .akb-box выставляет box3d.js по ширине сцены). */

.akb-stage {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(120% 90% at 50% 38%, #ffffff 0%, #eef6f4 45%, #d9e9e5 100%);
}
.akb-stage.is-dragging { cursor: grabbing; }

.akb-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.akb-shadow {
  position: absolute;
  left: 50%;
  top: 76%;
  width: 62%;
  height: 9%;
  margin-left: -31%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 60, 52, .38), rgba(14, 60, 52, 0));
  filter: blur(6px);
  pointer-events: none;
}

.akb-box {
  position: relative;
  width: 100em;
  height: 64em;
  transform-style: preserve-3d;
  will-change: transform;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1d1d1f;
}

.akb-face {
  position: absolute;
  overflow: hidden;
  background: #fbfbfa;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: inset 0 0 0 .15em rgba(0, 0, 0, .05);
}
.akb-front, .akb-back { width: 100em; height: 64em; left: 0; top: 0; }
.akb-front  { transform: translateZ(12em); }
.akb-back   { transform: rotateY(180deg) translateZ(12em); }
.akb-right, .akb-left { width: 24em; height: 64em; left: 38em; top: 0; }
.akb-right  { transform: rotateY(90deg) translateZ(50em); }
.akb-left   { transform: rotateY(-90deg) translateZ(50em); }
.akb-top, .akb-bottom { width: 100em; height: 24em; left: 0; top: 20em; }
.akb-top    { transform: rotateX(90deg) translateZ(32em); }
.akb-bottom { transform: rotateX(-90deg) translateZ(32em); }

/* динамическое затенение граней (opacity из JS) */
.akb-shade {
  position: absolute;
  inset: 0;
  background: #0b2a25;
  opacity: 0;
  pointer-events: none;
}
.akb-gloss {
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, .55) 48%,
    rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* тёмно-бирюзовая панель с диагональными штрихами */
.akb-panel {
  position: absolute;
  background-color: #0f6b5d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cg stroke='white' stroke-width='1.1' stroke-linecap='round' stroke-dasharray='1.1 1.3' opacity='.85'%3E%3Cpath d='M2 9 L11 3'/%3E%3Cpath d='M15 20 L24 14'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 5.6em 4.7em;
}
.akb-front .akb-panel { left: 65.5%; right: 0; top: 11%; bottom: 0; }
.akb-back  .akb-panel { left: 0; right: 65.5%; top: 11%; bottom: 0; }
.akb-right .akb-panel { left: 0; right: 0; top: 11%; bottom: 0; }

/* светло-бирюзовые горизонтальные полосы */
.akb-stripes {
  position: absolute;
  left: 0;
  right: 0;
  top: 59%;
  height: 30%;
  pointer-events: none;
}
.akb-stripes::before,
.akb-stripes::after,
.akb-stripes i {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom,
    rgba(150, 214, 203, 0) 0%,
    rgba(150, 214, 203, .9) 35%,
    rgba(214, 240, 235, .95) 60%,
    rgba(150, 214, 203, 0) 100%);
}
.akb-stripes::before { top: 0;   height: 26%; }
.akb-stripes::after  { top: 36%; height: 30%; }
.akb-stripes i       { top: 78%; height: 16%; opacity: .7; }

/* текст лицевой стороны */
.akb-text {
  position: absolute;
  left: 5.5em;
  top: 9em;
  white-space: nowrap;
  line-height: 1.15;
}
.akb-count { font-size: 3.5em; font-weight: 500; letter-spacing: .01em; }
.akb-title {
  margin-top: .35em;
  display: flex;
  align-items: flex-end;
  transform: scaleX(.76);
  transform-origin: left center;
}
.akb-name { font-size: 9em; font-weight: 800; letter-spacing: -.01em; line-height: .95; }
.akb-reg  { font-size: 2.6em; font-weight: 500; align-self: flex-start; margin: .5em .25em 0 .1em; }
.akb-dose { font-size: 6em; font-weight: 700; line-height: 1; margin-bottom: .02em; }
.akb-form {
  font-size: 4.3em;
  font-weight: 800;
  transform: scaleX(.86);
  transform-origin: left center;
  margin-top: .05em;
}
.akb-inn { font-size: 3.4em; font-weight: 400; margin-top: .3em; }
.akb-inn + .akb-inn { margin-top: .1em; }

/* логотип производителя */
.akb-logo {
  position: absolute;
  left: 36%;
  top: 80%;
  display: flex;
  align-items: center;
  gap: .9em;
}
.akb-logo svg { width: 5em; height: 5em; display: block; }
.akb-logo span {
  font-size: 3.4em;
  font-weight: 700;
  letter-spacing: .04em;
  color: #2b2b2b;
  transform: scaleX(.9);
  transform-origin: left center;
}

/* боковые/верхние надписи */
.akb-side-label {
  position: absolute;
  white-space: nowrap;
  font-weight: 800;
  display: flex;
  align-items: flex-end;
  gap: .25em;
}
.akb-side-label b { font-size: 5.4em; font-weight: 800; letter-spacing: -.045em; }
.akb-side-label small { font-size: 3.4em; font-weight: 700; }
.akb-left .akb-side-label {
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.akb-top .akb-side-label { left: 6em; top: 50%; transform: translateY(-50%); }
.akb-top .akb-sub {
  position: absolute;
  right: 6em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.8em;
  color: #4b5a57;
}

/* оборотная сторона */
.akb-back-text { position: absolute; left: 41em; top: 9em; right: 5em; }
.akb-back-text .akb-side-label { position: static; }
.akb-lines { margin-top: 3em; }
.akb-lines i {
  display: block;
  height: 1.3em;
  margin-bottom: 1.4em;
  border-radius: .6em;
  background: #d9dedd;
}
.akb-barcode {
  position: absolute;
  right: 5em;
  bottom: 5em;
  width: 26em;
  padding: 1.2em 1.4em .6em;
  background: #fff;
  text-align: center;
}
.akb-barcode-bars { height: 9em; }
.akb-barcode-num { font-size: 2em; letter-spacing: .06em; margin-top: .2em; white-space: nowrap; }

.akb-bottom-text {
  position: absolute;
  inset: 4em 6em;
}