/* =========================================================
   REDOVAR BAG
========================================================= */

:root {
  --bag-blue: #0B369A;
  --bag-blue-hover: #092F86;

  --bag-terra: #C34811;

  --bag-text: #171717;
  --bag-muted: #6B6B68;
  --bag-soft: #8B8B86;

  --bag-border: #E3E3DF;

  --bag-surface: #F7F7F5;
  --bag-white: #FFFFFF;

  --bag-radius: 4px;

  --bag-max: 1120px;

  --bag-gutter:
    clamp(
      22px,
      4.6vw,
      64px
    );
}


/* =========================================================
   BASE
========================================================= */

.bag-main {
  overflow: visible;

  background:
    var(--bag-white);
}


.bag-shell {
  width:
    min(
      100%,
      var(--bag-max)
    );

  margin-inline:
    auto;

  padding-inline:
    var(--bag-gutter);
}


.bag-main button,
.bag-main input,
.bag-main select {
  font:
    inherit;
}


.bag-main button {
  -webkit-tap-highlight-color:
    transparent;
}


/* =========================================================
   REVIEW
========================================================= */

.bag-review {
  padding:
    calc(
      var(--header-h) +
      clamp(
        70px,
        7vw,
        108px
      )
    )
    0
    clamp(
      74px,
      7vw,
      108px
    );

  background:
    var(--bag-white);
}


/* =========================================================
   BAG HEADING
========================================================= */

.bag-heading {
  margin-bottom:
    clamp(
      68px,
      7vw,
      98px
    );
}


.bag-heading h1 {
  margin:
    0;

  color:
    var(--bag-text);

   font-size:
    clamp(
      30px,
      3.2vw,
      50px
    );

  line-height:
    .96;

  letter-spacing:
    -.057em;

  font-weight:
    520;
}


.bag-heading p {
  margin:
    22px
    0
    0;

  color:
    var(--bag-muted);

  font-size:
    17px;

  line-height:
    1.5;
}


/* =========================================================
   BAG ITEMS

   No global bottom border.

   Individual rows own their separators so the accessory
   lines can begin at the same left edge as Redovar Care.
========================================================= */

.bag-items {
  border-bottom:
    0;
}


/* =========================================================
   LOADING
========================================================= */

.bag-loading {
  min-height:
    180px;

  display:
    grid;

  place-items:
    center;

  border-top:
    1px
    solid
    var(--bag-border);

  color:
    var(--bag-soft);

  font-size:
    13px;
}

.bag-loading img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  animation: bag-loading-spin 850ms linear infinite;
}

@keyframes bag-loading-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bag-loading img { animation: none; }
}


/* =========================================================
   MAIN ITEM
========================================================= */

.bag-item {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    180px
    minmax(
      0,
      1fr
    )
    84px
    174px;

  column-gap:
    clamp(
      26px,
      3.2vw,
      46px
    );

  row-gap:
    0;

  padding:
    44px
    0;

}


/* =========================================================
   ITEM IMAGE
========================================================= */

.bag-item-media {
  min-width:
    0;

  align-self:
    start;

  display:
    grid;

  place-items:
    center;
}


.bag-item-media img {
  width:
    min(
      100%,
      152px
    );

  height:
    164px;

  display:
    block;

  object-fit:
    contain;

  object-position:
    center;
}


/* =========================================================
   ITEM COPY
========================================================= */

.bag-item-copy {
  min-width:
    0;

  padding-top:
    5px;
}


.bag-item-copy h2 {
  margin:
    0;

  color:
    var(--bag-text);

  font-size:
    22px;

  line-height:
    1.15;

  letter-spacing:
    -.035em;

  font-weight:
    550;
}


.bag-item-subtitle {
  margin:
    11px
    0
    0;

  color:
    var(--bag-muted);

  font-size:
    12px;

  line-height:
    1.55;
}


.bag-item-plan {
  margin:
    17px
    0
    0;

  color:
    var(--bag-text);

  font-size:
    12px;

  line-height:
    1.5;
}


.bag-item-plan strong {
  font-weight:
    600;
}


/* =========================================================
   QUANTITY

   Dropdown and custom field must NEVER coexist.
========================================================= */

.bag-item-quantity {
  align-self:
    start;

  justify-self:
    start;

  padding-top:
    3px;
}


.bag-quantity-control {
  min-width:
    0;
}


/* =========================================================
   QUANTITY DROPDOWN — 1–9
========================================================= */

.bag-quantity-select {
  position:
    relative;

  width:
    62px;

  height:
    38px;

  border-radius:
    var(--bag-radius);
}


.bag-quantity-select select {
  width:
    100%;

  height:
    38px;

  padding:
    0
    26px
    0
    10px;

  border:
    0;

  border-radius:
    var(--bag-radius);

  outline:
    0;

  background:
    transparent;

  color:
    var(--bag-text);

  font-size:
    14px;

  line-height:
    38px;

  font-weight:
    500;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;
}


.bag-quantity-select:hover,
.bag-quantity-select:focus-within {
  background:
    var(--bag-surface);
}


.bag-quantity-select::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  right:
    9px;

  width:
    6px;

  height:
    6px;

  border-right:
    1.5px
    solid
    #696965;

  border-bottom:
    1.5px
    solid
    #696965;

  pointer-events:
    none;

  transform:
    translateY(-70%)
    rotate(45deg);
}


/* =========================================================
   CUSTOM QUANTITY — 10+

   Physically replaces the dropdown.
========================================================= */

.bag-custom-quantity {
  width:
    74px;

  height:
    38px;

  margin:
    0;

  padding:
    0
    8px;

  border:
    1px
    solid
    #D7D7D2;

  border-radius:
    var(--bag-radius);

  outline:
    0;

  background:
    var(--bag-white);

  color:
    var(--bag-text);

  font-size:
    12px;

  font-weight:
    550;

  text-align:
    center;

  font-variant-numeric:
    tabular-nums;
}


.bag-custom-quantity:hover {
  border-color:
    #C7C7C2;
}


.bag-custom-quantity:focus {
  border-color:
    var(--bag-blue);

  box-shadow:
    0
    0
    0
    3px
    rgba(
      11,
      54,
      154,
      .06
    );
}


/* =========================================================
   ITEM PRICE + ACTIONS
========================================================= */

.bag-item-side {
  min-width:
    0;

  align-self:
    start;

  padding-top:
    3px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;
}


.bag-item-price {
  color:
    var(--bag-text);

  font-size:
    20px;

  line-height:
    1;

  letter-spacing:
    -.035em;

  font-weight:
    550;

  text-align:
    right;

  font-variant-numeric:
    tabular-nums; 
}


/* =========================================================
   ITEM ACTION ICONS
========================================================= */

.bag-item-actions {
  margin-top:
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


.bag-icon-button {
  width:
    36px;

  height:
    36px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  outline:
    0;

  background:
    transparent;

  cursor:
    pointer;

  transition:
    background-color
      150ms
      ease,
    transform
      150ms
      ease;
}


.bag-icon-button:hover,
.bag-icon-button:focus-visible {
  background:
    #F6F6F3;
}


.bag-icon-button:active {
  transform:
    scale(.94);
}


.bag-icon-button:focus-visible {
  outline:
    2px
    solid
    rgba(
      11,
      54,
      154,
      .14
    );

  outline-offset:
    2px;
}


/* =========================================================
   REMOVE ICON — RED
========================================================= */

.bag-remove-icon {
  width:
    17px;

  height:
    17px;

  display:
    block;

  object-fit:
    contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(22%)
    sepia(42%)
    saturate(2906%)
    hue-rotate(338deg)
    brightness(87%)
    contrast(98%);
}


/* =========================================================
   SAVE ICON
========================================================= */

.bag-save-button img {
  width:
    18px;

  height:
    18px;

  display:
    block;

  object-fit:
    contain;

  pointer-events:
    none;

  filter: brightness(0) saturate(100%) invert(20%) sepia(89%) saturate(2356%) hue-rotate(218deg) brightness(78%) contrast(104%);
}


.bag-save-button.is-saved {
  background:
    rgba(
      11,
      54,
      154,
      .06
    );
}


/* =========================================================
   REDOVAR CARE
========================================================= */

.bag-care-row {
  grid-column:
    2 / -1;

  margin-top:
    30px;

  padding:
    22px
    0
    0;

  display:
    grid;

  grid-template-columns:
    50px
    minmax(
      0,
      1fr
    )
    auto
    36px;

  gap:
    15px;

  align-items:
    center;

  border-top:
    1px
    solid
    var(--bag-border);
}


.bag-care-logo {
  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border-radius:
    var(--bag-radius);

  background:
    var(--bag-surface);
}


.bag-care-logo img {
  width:
    30px;

  height:
    30px;

  display:
    block;

  object-fit:
    contain;
}


.bag-care-copy strong {
  display:
    block;

  color:
    var(--bag-text);

  font-size:
    13px;

  line-height:
    1.35;

  font-weight:
    600;
}


.bag-care-copy span {
  margin-top:
    4px;

  display:
    block;

  color:
    var(--bag-muted);

  font-size:
    10px;

  line-height:
    1.5;
}


.bag-care-price {
  color:
    var(--bag-text);

  font-size:
    12px;

  line-height:
    1.35;

  font-weight:
    550;

  text-align:
    right;

  white-space:
    nowrap;
}


/* =========================================================
   ACCESSORY ITEM
========================================================= */

.bag-item--accessory {
  border-top:
    0;
}


.bag-item--accessory
.bag-item-media img {
  height:
    145px;

  width:
    min(
      100%,
      138px
    );
}


/* =========================================================
   ACCESSORY SEPARATORS

   Every accessory divider starts at the same x-position
   as the Redovar Care divider.

   It never runs underneath the product artwork.
========================================================= */

.bag-item--accessory::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    calc(
      180px +
      clamp(
        26px,
        3.2vw,
        46px
      )
    );

  right:
    0;

  height:
    1px;

  background:
    var(--bag-border);

  pointer-events:
    none;
}


/* =========================================================
   LAST ACCESSORY BOTTOM LINE
========================================================= */

.bag-item--accessory:last-child::after {
  content:
    "";

  position:
    absolute;

  bottom:
    0;

  left:
    calc(
      180px +
      clamp(
        26px,
        3.2vw,
        46px
      )
    );

  right:
    0;

  height:
    1px;

  background:
    var(--bag-border);

  pointer-events:
    none;
}


/* =========================================================
   BAG ERROR
========================================================= */

.bag-error {
  margin:
    18px
    0
    0;

  color:
    #A53C24;

  font-size:
    11px;

  line-height:
    1.5;
}


.bag-error:empty {
  display:
    none;
}


/* =========================================================
   EMPTY BAG
========================================================= */

.bag-empty {
  min-height:
    320px;

  padding:
    70px
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;


}


.bag-empty h2 {
  margin:
    0;

  color:
    var(--bag-text);

  font-size:
    clamp(
      20px,
      2.6vw,
      32px
    );

  line-height:
    1;

  letter-spacing:
    -.045em;

  font-weight:
    520;
}



.bag-empty a {
  min-height:
    46px;

  margin-top:
    48px;

  padding:
    0
    22px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    var(--bag-radius);

  background:
    var(--bag-blue);

  color:
    #FFFFFF;

  font-size:
    12px;

  font-weight:
    600;

  text-decoration:
    none;
}


.bag-empty a:hover {
  background:
    var(--bag-blue-hover);
}


/* =========================================================
   SERVICES BILLED SEPARATELY
========================================================= */

.bag-services {
  padding:
    clamp(
      74px,
      7vw,
      108px
    )
    0;

  background:
    var(--bag-white);
}


.bag-services-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      210px,
      .72fr
    )
    minmax(
      0,
      1.28fr
    );

  gap:
    clamp(
      56px,
      8vw,
      120px
    );

  align-items:
    start;

  padding-top:
    44px;

  border-top:
    1px
    solid
    var(--bag-border);
}


.bag-services-heading h2 {
  margin:
    0;

  color:
    var(--bag-text);

  font-size:
    clamp(
      25px,
      2.6vw,
      34px
    );

  line-height:
    1.06;

  letter-spacing:
    -.04em;

  font-weight:
    550;
}


/* =========================================================
   SERVICE ITEMS
========================================================= */

.bag-services-content {
  min-width:
    0;

  display:
    grid;
}


.bag-service-item {
  padding:
    0
    0
    30px;

  display:
    grid;

  grid-template-columns:
    60px
    minmax(
      0,
      1fr
    )
    auto;

  gap:
    20px;

  align-items:
    start;
}


.bag-service-item
+
.bag-service-item {
  padding-top:
    30px;

  border-top:
    1px
    solid
    var(--bag-border);
}


.bag-service-image {
  width:
    60px;

  height:
    60px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border-radius:
    10px;

  background:
    var(--bag-surface);
}


.bag-service-image img {
  width:
    38px;

  height:
    38px;

  display:
    block;

  object-fit:
    contain;
}


.bag-service-copy strong {
  display:
    block;

  color:
    var(--bag-text);

  font-size:
    14px;

  line-height:
    1.4;

  font-weight:
    600;
}


.bag-service-copy span {
  margin-top:
    4px;

  display:
    block;

  color:
    var(--bag-muted);

  font-size:
    11px;

  line-height:
    1.5;
}


.bag-service-copy p {
  margin:
    20px
    0
    0;

  max-width:
    600px;

  color:
    var(--bag-muted);

  font-size:
    11px;

  line-height:
    1.65;
}


.bag-service-price {
  color:
    var(--bag-text);

  font-size:
    13px;

  line-height:
    1.4;

  font-weight:
    550;

  white-space:
    nowrap;

  text-align:
    right;
}


/* =========================================================
   CHECKOUT
========================================================= */

.bag-checkout {
  padding:
    clamp(
      20px,
      3vw,
      42px
    )
    0
    clamp(
      104px,
      9vw,
      144px
    );

  background:
    var(--bag-white);
}


.bag-checkout-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      210px,
      .72fr
    )
    minmax(
      0,
      1.28fr
    );

  gap:
    clamp(
      56px,
      8vw,
      120px
    );
}


.bag-checkout-content {
  min-width:
    0;
}


/* =========================================================
   TOTALS
========================================================= */

.bag-totals {
  padding-top:
    40px;

  border-top:
    1px
    solid
    var(--bag-border);
}


.bag-total-line {
  min-height:
    34px;

  display:
    flex;

  align-items:
    baseline;

  justify-content:
    space-between;

  gap:
    30px;
}


.bag-total-line span {
  color:
    var(--bag-text);

  font-size:
    13px;

  line-height:
    1.4;
}


.bag-total-line strong {
  color:
    var(--bag-text);

  font-size:
    13px;

  line-height:
    1.4;

  font-weight:
    500;

  text-align:
    right;
}


.bag-total-line
.bag-total-note {
  color:
    var(--bag-muted);

  font-size:
    11px;

  font-weight:
    450;
}


/* =========================================================
   DUE TODAY
========================================================= */

.bag-total-primary {
  margin-top:
    12px;

  padding:
    24px
    0
    22px;

  display:
    flex;

  align-items:
    baseline;

  justify-content:
    space-between;

  gap:
    30px;

  border-top:
    1px
    solid
    var(--bag-border);
}


.bag-total-primary span {
  color:
    var(--bag-text);

  font-size:
    22px;

  line-height:
    1;

  letter-spacing:
    -.035em;

  font-weight:
    600;
}


.bag-total-primary strong {
  color:
    var(--bag-text);

  font-size:
    27px;

  line-height:
    1;

  letter-spacing:
    -.045em;

  font-weight:
    550;

  font-variant-numeric:
    tabular-nums;

  text-align:
    right;
}


/* =========================================================
   ANNUAL TOTAL
========================================================= */

.bag-total-annual {
  min-height:
    72px;

  padding:
    19px
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  border-top:
    1px
    solid
    var(--bag-border);
}


.bag-total-annual > div {
  display:
    grid;

  gap:
    4px;
}


.bag-total-annual span {
  color:
    var(--bag-text);

  font-size:
    12px;

  font-weight:
    600;
}


.bag-total-annual small {
  color:
    var(--bag-soft);

  font-size:
    10px;

  line-height:
    1.45;
}


.bag-total-annual > strong {
  color:
    var(--bag-text);

  font-size:
    17px;

  line-height:
    1;

  font-weight:
    550;

  font-variant-numeric:
    tabular-nums;

  text-align:
    right;
}


/* =========================================================
   CHECKOUT HEADING
========================================================= */

.bag-checkout-heading {
  margin-top:
    clamp(
      68px,
      7vw,
      96px
    );
}


.bag-checkout-heading h2 {
  margin:
    0;

  color:
    var(--bag-text);

  font-size:
    clamp(
      22px,
      2.6vw,
      34px
    );

  line-height:
    1;

  letter-spacing:
    -.045em;

  font-weight:
    550;
}


/* =========================================================
   CHECKOUT CARD
========================================================= */

.bag-checkout-card {
  margin-top:
    30px;

  padding:
    34px;

  border-radius:
    var(--bag-radius);

  background:
    var(--bag-surface);

  text-align:
    center;
}


.bag-checkout-card-copy {
  text-align:
    center;
}



.bag-checkout-card-copy p {
  margin:
    9px
    0
    0;

  color:
    var(--bag-muted);

  font-size:
    11px;

  line-height:
    1.5;

    text-align: left;
}


/* =========================================================
   CHECK OUT BUTTON
========================================================= */

.bag-checkout-button {
  width:
    min(
      100%,
      280px
    );

  min-height:
    48px;

  margin:
    28px
    auto
    0;

  padding:
    0
    24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    var(--bag-radius);

  outline:
    0;

  background:
    var(--bag-blue);

  color:
    #FFFFFF;

  font-size:
    13px;

  line-height:
    1;

  font-weight:
    600;

  cursor:
    pointer;

  transition:
    background-color
      150ms
      ease,
    transform
      150ms
      ease;
}


.bag-checkout-button:hover:not(:disabled),
.bag-checkout-button:focus-visible:not(:disabled) {
  background:
    var(--bag-blue-hover);
}


.bag-checkout-button:active:not(:disabled) {
  transform:
    translateY(1px);
}


.bag-checkout-button:disabled {
  opacity:
    .5;

  cursor:
    wait;
}


.bag-checkout-button:focus-visible {
  outline:
    3px
    solid
    rgba(
      11,
      54,
      154,
      .14
    );

  outline-offset:
    3px;
}


/* =========================================================
   SECURE CHECKOUT
========================================================= */

.bag-secure-checkout {
  margin-top:
    14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  color:
    var(--bag-muted);

  font-size:
    10px;

  line-height:
    1;
}


.bag-secure-checkout img {
  width:
    13px;

  height:
    13px;

  flex:
    0
    0
    auto;

  display:
    block;

  object-fit:
    contain;

  opacity:
    .68;
}


/* =========================================================
   CHECKOUT ERROR
========================================================= */

.bag-checkout-error {
  margin:
    13px
    0
    0;

  color:
    #A53C24;

  font-size:
    11px;

  line-height:
    1.5;

  text-align:
    center;
}


.bag-checkout-error:empty {
  display:
    none;
}


/* =========================================================
   SHOP THE LATEST
========================================================= */

.bag-store-promo {
  padding:
    0
    0
    clamp(
      104px,
      9vw,
      144px
    );

  background:
    var(--bag-white);
}


.bag-store-promo-card {
  min-height:
    390px;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      .88fr
    )
    minmax(
      0,
      1.12fr
    );

  overflow:
    hidden;

  border-radius:
    var(--bag-radius);

  background:
    var(--bag-surface);

  color:
    inherit;

  text-decoration:
    none;
}


/* =========================================================
   PROMO COPY
========================================================= */

.bag-store-promo-copy {
  padding:
    clamp(
      46px,
      5vw,
      72px
    );

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.bag-store-promo-copy h2 {
  margin:
    0;

  color:
    var(--bag-text);

  font-size:
    clamp(
      34px,
      3.8vw,
      48px
    );

  line-height:
    1;

  letter-spacing:
    -.048em;

  font-weight:
    540;
}


.bag-store-promo-copy p {
  margin:
    18px
    0
    0;

  max-width:
    320px;

  color:
    var(--bag-muted);

  font-size:
    14px;

  line-height:
    1.55;

  text-align:
    center;
}


.bag-store-promo-link {
  margin-top:
    22px;
  padding:
    11px
    16px;
  display:
    inline-flex;
  align-items:
    center;
  justify-content:
    center;

    background:
    var(--bag-soft);
  border-color:
    var(--bag-surface);
  color:
    var(--bag-white);
  border-radius:
    4px;

  font-size:
    13px;
  line-height:
    1;
  font-weight:
    550;
  text-decoration:
    none;
  transition:
    background-color
    160ms
    ease,
    border-color
    160ms
    ease,
    color
    160ms
    ease;
}
.bag-store-promo-card:hover
.bag-store-promo-link,
.bag-store-promo-link:hover,
.bag-store-promo-link:focus-visible {
 
  border-color:
    var(--bag-surface);
   background:
    var(--bag-white);
  color:
    var(--bag-blue);
  outline:
    0;
}




/* =========================================================
   PROMO IMAGE
========================================================= */

.bag-store-promo-media {
  min-height:
    390px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;
}


.bag-store-promo-media img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;
}


/* =========================================================
   QUESTIONS ABOUT BUYING

   IMPORTANT:

   Only ONE divider exists when collapsed:
   the full-width line ABOVE the section.

   There is intentionally NO divider beneath the heading.

   There is intentionally NO large whitespace beneath it.

   The footer begins immediately after the collapsed row.
========================================================= */

.bag-faq {
  position:
    relative;

  padding:
    0;

  border-top:
    1px
    solid
    var(--bag-border);

  background:
    var(--bag-white);
}


/* =========================================================
   FAQ MASTER HEADING
========================================================= */

.bag-faq-heading {
  min-height:
    104px;

  display:
    flex;

  align-items:
    stretch;

  border:
    0;
}


.bag-faq-master-toggle {
  width:
    100%;

  min-height:
    104px;

  padding:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    34px;

  gap:
    30px;

  align-items:
    center;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  text-align:
    left;

  cursor:
    pointer;
}


.bag-faq-master-toggle:hover
.bag-faq-master-icon,
.bag-faq-master-toggle:focus-visible
.bag-faq-master-icon {
  opacity:
    .88;
}


.bag-faq-master-toggle:focus-visible {
  outline:
    2px
    solid
    rgba(
      11,
      54,
      154,
      .13
    );

  outline-offset:
    -2px;
}


.bag-faq-master-toggle h2 {
  margin:
    0;

  color:
    var(--bag-text);

  font-size:
    clamp(
      25px,
      2.7vw,
      34px
    );

  line-height:
    1;

  letter-spacing:
    -.04em;

  font-weight:
    550;
}


/* =========================================================
   FAQ MASTER ICON
========================================================= */

.bag-faq-master-icon {
  width:
    20px;

  height:
    20px;

  justify-self:
    end;

  display:
    block;

  object-fit:
    contain;

  opacity:
    .62;

  transition:
    opacity
      150ms
      ease,
    transform
      200ms
      ease;
}


.bag-faq-master-toggle[aria-expanded="true"]
.bag-faq-master-icon {
  transform:
    rotate(180deg);
}


/* =========================================================
   FAQ CONTENT

   When hidden, it occupies absolutely no space.

   When opened, it grows the page naturally and pushes
   the Redovar footer downward.
========================================================= */

.bag-faq-content[hidden] {
  display:
    none;
}


.bag-faq-content:not([hidden]) {
  display:
    block;

  animation:
    bag-faq-reveal
    220ms
    cubic-bezier(
      .22,
      .72,
      .22,
      1
    );
}


@keyframes bag-faq-reveal {

  from {
    opacity:
      0;

    transform:
      translateY(-4px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   FAQ LIST

   No line directly below "Questions About Buying."

   Dividers exist ONLY between individual questions.
========================================================= */

.bag-faq-list {
  padding-bottom:
    20px;
}


.bag-faq-list details {
  border:
    0;
}


.bag-faq-list details
+
details {
  border-top:
    1px
    solid
    var(--bag-border);
}


/* =========================================================
   FAQ QUESTION
========================================================= */

.bag-faq-list summary {
  min-height:
    70px;

  padding:
    18px
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    28px;

  gap:
    30px;

  align-items:
    center;

  list-style:
    none;

  cursor:
    pointer;
}


.bag-faq-list summary::-webkit-details-marker {
  display:
    none;
}


.bag-faq-list summary > span {
  color:
    var(--bag-text);

  font-size:
    13px;

  line-height:
    1.45;

  font-weight:
    550;
}


/* =========================================================
   FAQ ITEM ICON
========================================================= */

.bag-faq-icon {
  width:
    16px;

  height:
    16px;

  justify-self:
    end;

  display:
    block;

  object-fit:
    contain;

  opacity:
    .62;

  transition:
    transform
      180ms
      ease,
    opacity
      150ms
      ease;
}


.bag-faq-list summary:hover
.bag-faq-icon {
  opacity:
    .86;
}


.bag-faq-list details[open]
.bag-faq-icon {
  transform:
    rotate(180deg);
}


/* =========================================================
   FAQ ANSWER
========================================================= */

.bag-faq-answer {
  padding:
    0
    54px
    26px
    0;
}


.bag-faq-answer p {
  width:
    min(
      100%,
      650px
    );

  margin:
    0;

  color:
    var(--bag-muted);

  font-size:
    11px;

  line-height:
    1.7;
}


/* =========================================================
   RESPONSIVE — 1000
========================================================= */

@media (max-width: 1000px) {

  .bag-item {
    grid-template-columns:
      150px
      minmax(
        0,
        1fr
      )
      72px
      150px;

    column-gap:
      24px;
  }


  .bag-item-media img {
    width:
      min(
        100%,
        130px
      );
  }


  .bag-item--accessory::before,
  .bag-item--accessory:last-child::after {
    left:
      calc(
        150px +
        24px
      );
  }

}


/* =========================================================
   RESPONSIVE — 820
========================================================= */

@media (max-width: 820px) {

  .bag-item {
    grid-template-columns:
      132px
      minmax(
        0,
        1fr
      )
      116px;

    column-gap:
      22px;
  }


  .bag-item-quantity {
    grid-column:
      2;

    grid-row:
      2;

    margin-top:
      18px;

    padding-top:
      0;
  }


  .bag-item-side {
    grid-column:
      3;

    grid-row:
      1 / span 2;
  }


  .bag-care-row {
    grid-column:
      2 / -1;
  }


  .bag-item--accessory::before,
  .bag-item--accessory:last-child::after {
    left:
      calc(
        132px +
        22px
      );
  }


  .bag-services-grid,
  .bag-checkout-grid {
    grid-template-columns:
      minmax(
        180px,
        .62fr
      )
      minmax(
        0,
        1.38fr
      );

    gap:
      46px;
  }

}


/* =========================================================
   RESPONSIVE — 700
========================================================= */

@media (max-width: 700px) {

  .bag-review {
    padding-top:
      calc(
        var(--header-h) +
        46px
      );
  }


  .bag-heading {
    margin-bottom:
      54px;
  }


  .bag-heading p {
    font-size:
      14px;
  }


  /* -------------------------------------------------------
     ITEM
  ------------------------------------------------------- */

  .bag-item {
    grid-template-columns:
      108px
      minmax(
        0,
        1fr
      );

    column-gap:
      20px;

    padding-top:
      32px;
  }


  .bag-item-media {
    grid-column:
      1;

    grid-row:
      1 / span 3;
  }


  .bag-item-media img {
    width:
      100%;

    height:
      122px;
  }


  .bag-item-copy {
    grid-column:
      2;

    grid-row:
      1;
  }


  .bag-item-copy h2 {
    font-size:
      18px;
  }


  .bag-item-quantity {
    grid-column:
      2;

    grid-row:
      2;

    margin-top:
      16px;
  }


  .bag-item-side {
    grid-column:
      2;

    grid-row:
      3;

    margin-top:
      17px;

    padding:
      0;

    flex-direction:
      row;

    align-items:
      center;

    justify-content:
      space-between;
  }


  .bag-item-price {
    font-size:
      17px;

    text-align:
      left;
  }


  .bag-item-actions {
    margin-top:
      0;
  }


  .bag-care-row {
    grid-column:
      1 / -1;

    margin-top:
      28px;

    grid-template-columns:
      44px
      minmax(
        0,
        1fr
      )
      36px;
  }


  .bag-care-price {
    grid-column:
      2;

    text-align:
      left;
  }


  .bag-care-row
  .bag-icon-button {
    grid-column:
      3;

    grid-row:
      1 / span 2;
  }


  /*
     Mobile becomes one compact card-like row, so the
     accessory divider can use the full available width.
  */

  .bag-item--accessory::before,
  .bag-item--accessory:last-child::after {
    left:
      0;
  }


  /* -------------------------------------------------------
     SERVICES
  ------------------------------------------------------- */

  .bag-services-grid,
  .bag-checkout-grid {
    grid-template-columns:
      1fr;

    gap:
      36px;
  }


  .bag-checkout-spacer {
    display:
      none;
  }


  .bag-services-heading h2 br {
    display:
      none;
  }


  /* -------------------------------------------------------
     PROMO
  ------------------------------------------------------- */

  .bag-store-promo-card {
    grid-template-columns:
      1fr;

    min-height:
      0;
  }


  .bag-store-promo-media {
    min-height:
      280px;

    order:
      1;
  }


  .bag-store-promo-copy {
    order:
      2;
  }


  /* -------------------------------------------------------
     FAQ
  ------------------------------------------------------- */

  .bag-faq-heading,
  .bag-faq-master-toggle {
    min-height:
      88px;
  }

}


/* =========================================================
   RESPONSIVE — 520
========================================================= */

@media (max-width: 520px) {

  .bag-heading h1 {
    font-size:
      clamp(
        38px,
        12vw,
        48px
      );
  }


  .bag-item {
    grid-template-columns:
      92px
      minmax(
        0,
        1fr
      );

    column-gap:
      16px;
  }


  .bag-item-copy h2 {
    font-size:
      16px;
  }


  .bag-item-subtitle,
  .bag-item-plan {
    font-size:
      10px;
  }


  .bag-care-row {
    grid-template-columns:
      40px
      minmax(
        0,
        1fr
      )
      32px;

    gap:
      12px;
  }


  .bag-service-item {
    grid-template-columns:
      50px
      minmax(
        0,
        1fr
      );

    gap:
      15px;
  }


  .bag-service-image {
    width:
      50px;

    height:
      50px;
  }


  .bag-service-price {
    grid-column:
      2;

    text-align:
      left;
  }


  .bag-total-primary span {
    font-size:
      19px;
  }


  .bag-total-primary strong {
    font-size:
      23px;
  }


  .bag-checkout-card {
    padding:
      28px
      20px;
  }


  .bag-checkout-button {
    width:
      min(
        100%,
        250px
      );
  }


  .bag-faq-master-toggle {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      26px;

    gap:
      18px;
  }


  .bag-faq-master-toggle h2 {
    font-size:
      26px;
  }


  .bag-faq-answer {
    padding-right:
      22px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .bag-icon-button,
  .bag-checkout-button,
  .bag-faq-icon,
  .bag-faq-master-icon {
    transition:
      none;
  }


  .bag-faq-content:not([hidden]) {
    animation:
      none;
  }

}