.product {
  margin-inline: var(--grid-margin);
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-areas:
    "h h"
    "i i"
    "g g"
    "c c";
  gap: 0 var(--grid-gap);
}
@media (min-width: 48em) {
  .product {
    grid-template-areas:
      "h h h h h h h h"
      "i i i i c c c c"
      "g g g g g g g g";
  }
}
@media (min-width: 80em) {
  .product {
    grid-template-rows: var(--margin-top) max-content;
    grid-template-areas:
      ". . . h h h h h h . . ."
      "i i i g g g g g g c c c";
  }
}
@media (min-width: 160em) {
  .product {
    grid-template-areas:
      ". . . . . . h h h h h h h h h h h h . . . . . ."
      ". . i i i i g g g g g g g g g g g g c c c c . .";
  }
}

.product-header {
  grid-area: h;
  position: sticky;
  top: 0;
}

.product-header-inner {
  display: grid;
  grid-template-columns: 1fr max-content;
  margin-block: 20px 75px;
  border-top: var(--border);
  padding-block-start: 5px;
  padding-inline: 3px;
}

.product-info {
  grid-area: i;
  margin-block-end: 75px;
  border-top: var(--border);
  padding-block-start: 5px;
  padding-inline: 3px;
}

.product-gallery {
  grid-area: g;
  margin-inline: calc(1px - var(--grid-margin));
  margin-block-end: 30px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
}
.product-gallery img {
  width: 100%;
  border-radius: 3px;
}

.product-checkout {
  grid-area: c;
  display: block;
}
@media (min-width: 48em) {
  .product-checkout {
    margin-block-end: 75px;
  }
}

.product-notes {
  margin-inline: 3px;
}

.select-container {
  position: relative;
  display: flex;
  align-items: center;
  border-top: var(--border);
}
.select-container::after {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 8px;
  height: 6px;
  background: url('data:image/svg+xml,<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.488 0.0359999H7.136L4.352 5.532H3.584L0.8 0.0359999H1.472L3.968 4.992L6.488 0.0359999Z" fill="%23b3aea8"/></svg>');
}
.select-container:has(select:hover)::after {
  background: url('data:image/svg+xml,<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.488 0.0359999H7.136L4.352 5.532H3.584L0.8 0.0359999H1.472L3.968 4.992L6.488 0.0359999Z" fill="%2331302e"/></svg>');
}
.select-container select {
  flex: 1;
  width: 100%;
  appearance: none;
  padding: 5px 3px;
  cursor: pointer;
}

.radios-container-title {
  border-top: var(--border);
  padding: 5px 3px;
}

.radio-container label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--grey-02);
  transition: color 500ms ease-out;
  cursor: pointer;
  padding: 0 3px 0 9px;
  margin-bottom: 5px;
}
.radio-container:has(input:checked) label,
.radio-container:hover label {
  color: var(--dark-01);
}