/* The packing bench: one illustrated scene, a calm buying surface. */

html[data-product-design=studio] {
  --studio-display: "Bricolage Grotesque",sans-serif;
  --studio-ink: #2c4230;
  --studio-paper: #f5f3e9;
  --studio-lilac: #c8bbe8;
  --studio-lime: #d9eb72;
  --studio-sage: #dfe7d2;
}

html[lang=ar][data-product-design=studio] {
  --studio-display: "Baloo Bhaijaan 2",sans-serif;
}

/* Approved product-page composition. */

[data-product-design=studio] #shop-main.is-product-page {
  max-width: 1320px;
  padding-top: 20px;
  padding-bottom: 64px;
}

.studio-back {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.studio-baseline {
  color: #62715b;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.studio-layout {
  display: grid;
  grid-template-columns: minmax(0,1.16fr) minmax(0,1fr);
  grid-template-areas: "scene title" "scene buy" "varieties buy";
  column-gap: clamp(40px,6vw,86px);
  align-items: start;
}

.studio-title {
  grid-area: title;
  padding-top: 12px;
}

.studio-title h1 {
  font-size: clamp(46px,4.8vw,70px);
  letter-spacing: -.045em;
  line-height: 1.12;
  margin: 0 0 16px;
}

.studio-title p {
  font-size: 17px;
  line-height: 1.7;
  max-width: 34ch;
  color: #58664f;
  margin: 0 0 34px;
}

/* Produce stage and shared photography. */

.studio-scene {
  grid-area: scene;
  margin: 0;
  min-width: 0;
}

.studio-stage {
  position: relative;
  isolation: isolate;
  height: 570px;
  color: var(--studio-ink);
  background: var(--studio-sage);
  border: 2px solid var(--studio-ink);
  border-radius: 44% 46% 8% 12% / 25% 24% 8% 10%;
  box-shadow: 5px 6px 0 var(--studio-ink);
  overflow: hidden;
}

.studio-water-word {
  font-family: var(--studio-display);
  font-size: clamp(43px,5vw,68px);
  font-weight: 800;
  text-align: center;
  position: absolute;
  inset: 25px 0 auto;
  line-height: 1.2;
  transform: rotate(-7deg);
  z-index: 0;
  opacity: .95;
}

html[lang=ar] .studio-water-word {
  font-size: clamp(38px,4.2vw,58px);
}

.studio-harvest-picture {
  position: absolute;
  inset: 68px 0 125px;
  transition: opacity .25s,transform .45s cubic-bezier(.22,1,.36,1);
  z-index: 2;
}

.studio-produce {
  display: block;
  overflow: hidden;
  direction: ltr;
  aspect-ratio: 1;
  isolation: isolate;
}

.studio-produce img {
  width: 300%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

.studio-single {
  width: min(86%,430px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) rotate(5deg);
}

/* A shallow packing tray, seen from above, keeps every head legible. */

.studio-harvest-picture.is-box {
  inset: 112px 0 125px;
}

.studio-packed {
  position: absolute;
  inset: 8% 18% 3%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-content: center;
  gap: 0;
  transform: none;
  z-index: 1;
}

.studio-packed .studio-produce {
  width: 100%;
  margin: 0;
}

.studio-crate {
  position: absolute;
  inset: 0 5%;
  width: 90%;
  height: 100%;
  fill: var(--studio-lime);
  stroke: var(--studio-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 0;
  pointer-events: none;
}

.studio-crate .crate-slot {
  fill: var(--studio-ink);
}

.studio-crate .crate-left {
  fill: var(--studio-paper);
}

.studio-crate .crate-right {
  fill: #c2d160;
}

.studio-crate .crate-front {
  fill: #d0dbb8;
}

/* Waterline, explanation toggle and root reveal. */

.studio-waterline {
  position: absolute;
  inset: auto 0 0;
  height: 135px;
  background: var(--studio-ink);
  color: var(--studio-ink);
  z-index: 1;
}

.studio-waterline svg {
  position: absolute;
  left: 0;
  top: -34px;
  width: 100%;
  height: 50px;
  fill: currentColor;
}

.studio-scene-foot {
  position: absolute;
  inset: auto 24px 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--studio-paper);
  z-index: 4;
}

.studio-scene-caption {
  font-size: 23px;
  font-family: var(--studio-display);
  font-weight: 700;
  transform: rotate(-5deg);
}

.studio-root-caption {
  font-size: 15px;
  line-height: 1.65;
  max-width: 29ch;
}

.studio-nft-tag {
  display: block;
  font-family: "Bricolage Grotesque",sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.3;
  margin-bottom: 4px;
}

.studio-nft-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.studio-reveal {
  font: inherit;
  font-size: 14px;
  color: inherit;
  background: none;
  border: 1px solid #aebb9a;
  border-radius: 99px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  cursor: pointer;
  flex-shrink: 0;
}

.studio-reveal svg {
  width: 21px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.studio-reveal:hover {
  background: #3c513e;
}

.studio-reveal[aria-pressed=true] {
  background: var(--studio-lilac);
  color: var(--studio-ink);
  border-color: var(--studio-lilac);
}

.studio-root-picture {
  position: absolute;
  inset: 22px 0 100px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s,transform .45s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 2;
}

.studio-nft-diagram {
  position: absolute;
  width: min(96%,570px);
  aspect-ratio: 520 / 340;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.studio-root-head {
  position: absolute;
  top: 4%;
  left: 31%;
  width: 38%;
  z-index: 1;
}

.ps-nft-art { width: 100%; height: 100%; color: var(--studio-ink); }
.nft-channel-top,.nft-channel-body { fill: var(--studio-paper); }
.nft-channel-end { fill: #cbd5bd; }
.nft-air-space { fill: #e9eddf; }
.nft-film { fill: var(--studio-lilac); }
.nft-film-surface { stroke: #7e6ba6; }
.nft-plant-opening { fill: var(--studio-ink); }
.nft-plant-plug { fill: #becda5; }

.studio-stage.is-roots .studio-harvest-picture {
  opacity: 0;
  transform: translateY(-20px);
}

.studio-stage.is-roots .studio-root-picture {
  opacity: 1;
  transform: none;
}

.studio-stage.is-roots .studio-water-word {
  opacity: 0;
}

.studio-stage.is-roots .studio-waterline {
  background: transparent;
  color: transparent;
  height: 90px;
}

.studio-stage.is-roots .studio-waterline svg {
  display: none;
}

.studio-stage.is-roots .studio-scene-foot {
  color: var(--studio-ink);
}

.studio-stage.is-roots .studio-reveal {
  border-color: var(--studio-ink);
  background: var(--studio-paper);
}

.studio-stage.is-roots .studio-reveal:hover {
  background: #eaeedc;
}

/* Pack choice and purchasing controls. */

.studio-buy {
  grid-area: buy;
  width: 100%;
  max-width: none;
  padding: 0;
}

.studio-options {
  gap: 14px;
  margin-bottom: 27px;
}

.studio-options legend {
  font-family: var(--studio-display);
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 12px;
}

.studio-choice {
  min-width: 135px;
  border: 1.5px solid var(--studio-ink);
  padding: 17px 22px 15px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  border-radius: 16px 16px 30px 16px;
  background: transparent;
  transition: background .18s,box-shadow .18s;
}

.studio-choice:nth-of-type(2) {
  border-radius: 16px 16px 16px 30px;
}

.studio-choice:has(:checked) {
  background: var(--studio-lilac);
  border-width: 1.5px;
  padding: 17px 22px 15px;
  box-shadow: 3px 4px 0 var(--studio-ink);
}

.studio-pack-drawing {
  width: 76px;
  height: 58px;
  display: block;
  pointer-events: none;
}

.studio-pack-drawing svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.studio-pack-label {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  pointer-events: none;
}

.studio-selection-dot {
  position: absolute;
  inset-inline-end: 13px;
  top: 13px;
  width: 12px;
  height: 12px;
  border: 1.4px solid var(--studio-ink);
  border-radius: 50%;
  pointer-events: none;
}

.studio-choice:has(:checked) .studio-selection-dot {
  background: var(--studio-ink);
  box-shadow: inset 0 0 0 2px var(--studio-lilac);
}

.studio-choice:hover:not(:has(:checked)) {
  background: #eaeedc;
}

.studio-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.studio-price-row .product-price {
  font-size: 34px;
  line-height: 1.4;
  margin: 0;
}

.studio-price-row>span {
  font-size: 14px;
  color: #58664f;
}

.studio-buy .store-purchase {
  grid-template-columns: 136px minmax(0,1fr);
  gap: 0 16px;
}

.studio-buy .harvest-availability {
  margin-bottom: 18px;
}

.studio-buy .product-quantity-label {
  font-size: 14px;
  margin-bottom: 8px;
}

.studio-buy .product-quantity {
  background: #eeefdf;
  border-color: var(--studio-ink);
  min-height: 56px;
  border-radius: 14px;
}

.studio-buy .product-quantity button {
  height: 54px;
}

.studio-buy .add-cart {
  border: 1.5px solid var(--studio-ink);
  background: var(--studio-lime);
  min-height: 56px;
  font-size: 18px;
  padding: 12px 24px;
  box-shadow: 3px 4px 0 var(--studio-ink);
  border-radius: 99px;
  transition: transform .15s,box-shadow .15s;
}

.studio-buy .add-cart:active {
  transform: translate(2px,3px);
  box-shadow: 1px 1px 0 var(--studio-ink);
}

.studio-buy .product-in-cart {
  border: 1.5px solid var(--studio-ink);
  border-radius: 99px;
  justify-content: space-around;
  padding: 4px 16px;
  background: var(--studio-lime);
}

.studio-buy .product-in-cart a {
  font-size: 15px;
}

.studio-buy .product-tax {
  font-size: 13px;
  margin-top: 17px;
  line-height: 1.65;
}

/* Supporting information and cultivar navigation. */

.studio-facts {
  margin-top: 28px;
  border-top: 1px solid #bac4ab;
}

.studio-facts .product-details {
  margin: 0;
  padding: 8px 0;
  border: 0;
}

.studio-facts .product-delivery {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  min-height: 56px;
  margin: 0;
  text-decoration: none;
  font-size: 15px;
}

.studio-facts .product-delivery:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.studio-facts .product-delivery span {
  font-size: 24px;
}

.studio-unit {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.studio-unit>svg {
  width: 64px;
  height: 54px;
}

.studio-unit span {
  font-size: 14px;
  color: #63715a;
}

.studio-unit strong {
  font-size: 18px;
  display: block;
  color: var(--studio-ink);
}

.studio-varieties {
  grid-area: varieties;
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.studio-varieties a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  font-size: 12px;
  color: #62715b;
  min-width: 0;
  max-width: 150px;
}

.studio-varieties .studio-produce {
  width: 66px;
  border: 1px solid #b9c2a9;
  border-radius: 50%;
  background: var(--studio-paper);
}

.studio-varieties a[aria-current=page] {
  color: var(--studio-ink);
}

.studio-varieties a[aria-current=page] .studio-produce {
  outline: 2px solid var(--studio-ink);
  outline-offset: 3px;
}

.studio-varieties a:hover .studio-produce {
  transform: translateY(-3px);
}

/* Keyboard focus and action-driven motion. */

.studio-reveal:focus-visible,.studio-varieties a:focus-visible {
  outline: 3px solid var(--studio-lime);
  outline-offset: 5px;
}

.studio-varieties a:focus-visible {
  outline-color: var(--studio-ink);
}

.studio-stage.is-roots .studio-reveal:focus-visible {
  outline-color: var(--studio-ink);
}

.studio-stage.is-changing .studio-single {
  animation: studio-head-in .38s cubic-bezier(.22,1,.36,1) both;
}

@keyframes studio-head-in {
  from {
    opacity: .65;
    transform: translate(-50%,calc(-50% - 9px)) rotate(1deg);
  }

  to {
    opacity: 1;
    transform: translate(-50%,-50%) rotate(5deg);
  }
}

/* Responsive composition. */

@media(min-width:1600px) {
  .studio-stage {
    height: 625px;
  }
}

@media(max-width:1050px) {
  .studio-layout {
    column-gap: 35px;
  }

  .studio-stage {
    height: 515px;
  }

  .studio-title h1 {
    font-size: 48px;
  }

  .studio-choice {
    padding-inline: 14px;
  }

  .studio-choice:has(:checked) {
    padding-inline: 14px;
  }

  .studio-scene-foot {
    inset-inline: 16px;
    gap: 9px;
  }

  .studio-reveal {
    font-size: 13px;
    padding-inline: 9px;
  }

  .studio-water-word {
    font-size: 52px;
  }

  .studio-buy .store-purchase {
    grid-template-columns: 116px minmax(0,1fr);
    gap: 0 12px;
  }

  .studio-buy .add-cart {
    padding-inline: 16px;
    font-size: 16px;
  }

  .studio-buy .product-quantity button {
    flex-basis: 34px;
  }
}

@media(max-width:760px) {
  [data-product-design=studio] #shop-main.is-product-page {
    padding-top: 14px;
  }

  .studio-back {
    margin-bottom: 16px;
  }

  .studio-layout {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "title" "scene" "buy" "varieties";
    gap: 0;
  }

  .studio-title {
    padding-top: 0;
  }

  .studio-title h1 {
    font-size: 44px;
    line-height: 1.18;
    margin-bottom: 8px;
  }

  .studio-title p {
    font-size: 15px;
    max-width: none;
    margin-bottom: 22px;
  }

  .studio-scene {
    margin: 0 0 29px;
  }

  .studio-stage {
    height: 295px;
    max-width: 490px;
    margin: auto;
    border-radius: 42% 35% 8% 12% / 25% 20% 8% 12%;
    box-shadow: 3px 4px 0 var(--studio-ink);
  }

  .studio-water-word {
    inset: 14px 0 auto;
    font-size: 38px;
    transform: rotate(-6deg);
  }

  html[lang=ar] .studio-water-word {
    font-size: 35px;
  }

  .studio-harvest-picture {
    inset: 25px 0 50px;
  }

  .studio-harvest-picture.is-box {
    inset: 63px 0 64px;
  }

  .studio-single {
    width: min(70%,260px);
    left: 50%;
    top: 48%;
  }

  .studio-packed {
    inset: 8% 20% 3%;
    grid-template-columns: repeat(3,1fr);
  }

  .studio-waterline {
    height: 63px;
  }

  .studio-waterline svg {
    height: 30px;
    top: -19px;
  }

  .studio-scene-foot {
    inset: auto 15px 12px;
    gap: 10px;
  }

  .studio-scene-caption {
    font-size: 18px;
  }

  .studio-reveal {
    min-height: 42px;
    font-size: 13px;
    padding: 6px 10px;
    gap: 6px;
  }

  .studio-reveal svg {
    height: 19px;
    width: 18px;
  }

  .studio-root-picture {
    inset: 0 0 66px;
  }

  .studio-root-caption {
    font-size: 13px;
    max-width: 20ch;
  }

  .studio-nft-tag {
    font-size: 12px;
    margin-bottom: 2px;
  }

  .studio-options {
    margin-bottom: 24px;
    gap: 12px;
  }

  .studio-options legend {
    font-size: 23px;
  }

  .studio-choice,.studio-choice:has(:checked) {
    padding: 14px 14px 12px;
    min-width: 0;
    gap: 4px;
  }

  .studio-pack-drawing {
    height: 47px;
    width: 67px;
  }

  .studio-pack-label {
    font-size: 16px;
  }

  .studio-price-row .product-price {
    font-size: 30px;
  }

  .studio-price-row>span {
    font-size: 14px;
  }

  .studio-buy .store-purchase {
    grid-template-columns: 122px minmax(0,1fr);
    gap: 0 12px;
  }

  .studio-buy .product-in-cart {
    gap: 7px;
    padding-inline: 10px;
  }

  .studio-buy .product-in-cart a {
    font-size: 13px;
  }

  .studio-buy .product-in-cart strong {
    font-size: 12px;
    white-space: nowrap;
  }

  .studio-buy .product-tax {
    font-size: 13px;
  }

  .studio-facts {
    margin-top: 22px;
  }

  .studio-varieties {
    margin-top: 32px;
    padding-top: 25px;
    border-top: 1px solid #bac4ab;
    gap: 18px;
  }

  .studio-varieties a {
    font-size: 13px;
    max-width: 100px;
  }

  .studio-varieties .studio-produce {
    width: 64px;
  }
}

@media(max-width:370px) {
  .studio-title h1 {
    font-size: 39px;
  }

  .studio-stage {
    height: 270px;
  }

  .studio-reveal {
    font-size: 12px;
    gap: 5px;
  }

  .studio-root-caption {
    font-size: 12px;
  }

  .studio-buy .store-purchase {
    grid-template-columns: 110px minmax(0,1fr);
    gap: 0 9px;
  }

  .studio-buy .add-cart {
    font-size: 15px;
    padding-inline: 12px;
  }

  .studio-scene-caption {
    font-size: 17px;
  }
}

/* No decorative motion when the visitor requests reduced motion. */

@media(prefers-reduced-motion:reduce) {
  .studio-stage *,.studio-choice,.studio-buy .add-cart,.studio-varieties .studio-produce {
    animation: none!important;
    transition: none!important;
  }

  .studio-varieties a:hover .studio-produce {
    transform: none;
  }
}

/* Owner-selected Folded tray: preserve the exact reviewed scale and placement. */
/* Box illustration only. The stage, heading, waterline, NFT reveal, page and
   purchase geometry remain governed by the protected existing stylesheets. */
.studio-harvest-picture.is-box .mp-box-art {
 position: absolute;
 inset: -8% 0 auto;
 display: block;
 width: 100%;
 height: 116%;
 overflow: visible;
 pointer-events: none;
}