/*
 * CherDan Chocolates
 * Offerings page
 */


/* ---------------------------------------------------------
   Temporary announcement
   --------------------------------------------------------- */

.cdc-announcement{
  padding: 1.5rem 0 0;
}

.cdc-announcement-card{
  max-width: 1000px;

  margin: 0 auto;

  padding: 1.25rem 1.5rem;

  border:
    1px solid rgba(200, 164, 106, .70);

  border-left:
    5px solid var(--cdc-gold);

  border-radius: 14px;

  background:
    rgba(200, 164, 106, .12);
}

.cdc-announcement-title{
  margin-bottom: .35rem;

  color: var(--cdc-choco);

  font-family: var(--cdc-font);
  font-size: 1.05rem;
  font-weight: 700;
}

.cdc-announcement-text{
  margin-bottom: 0;

  color: var(--cdc-ink);

  line-height: 1.7;
}


/* Mobile */

@media (max-width: 767.98px){

  .cdc-announcement{
    padding-top: 1rem;
  }

  .cdc-announcement-card{
    padding: 1rem 1.1rem;
  }

}


/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.cdc-offerings-hero{
  background: rgba(255, 255, 255, .25);

  border-bottom:
    1px solid rgba(200, 164, 106, .35);
}


/* ---------------------------------------------------------
   Sections
   --------------------------------------------------------- */

.cdc-section--tight{
  padding-top: 2.75rem;
  padding-bottom: 0;
}

.cdc-section-head{
  margin-bottom: 1.25rem;
}

.cdc-divider{
  width: 120px;
  height: 3px;

  border-radius: 999px;

  background: rgba(200, 164, 106, .75);
}


/* ---------------------------------------------------------
   Product cards
   --------------------------------------------------------- */

.cdc-product-card{
  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid rgba(200, 164, 106, .55);

  border-radius: 16px;

  background: rgba(255, 255, 255, .38);
}

.cdc-product-content{
  flex-grow: 1;

  padding: 1.5rem;
}

.cdc-product-heading{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 1rem;
}

.cdc-product-title{
  margin-bottom: .65rem;

  color: var(--cdc-choco);

  font-family: var(--cdc-font);
  font-size: 1.2rem;
  font-weight: 700;

  line-height: 1.35;
}

.cdc-product-subtitle{
  font-size: .85em;
  font-weight: 600;
}

.cdc-product-description{
  margin-bottom: 0;

  color: var(--cdc-ink);

  line-height: 1.7;
}

.cdc-product-badges{
  display: flex;
  flex-wrap: wrap;

  gap: .4rem;

  margin-top: 1rem;
}


/* ---------------------------------------------------------
   Product quantity / price area
   --------------------------------------------------------- */

.cdc-product-options{
  border-top:
    1px solid rgba(200, 164, 106, .40);

  background: rgba(200, 164, 106, .08);
}

.cdc-product-option{
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1.5rem;

  padding: .85rem 1.5rem;
}

.cdc-product-option + .cdc-product-option{
  border-top:
    1px solid rgba(200, 164, 106, .28);
}

.cdc-product-size{
  color: var(--cdc-muted);

  font-size: .95rem;
  font-weight: 600;
}

.cdc-product-price{
  flex-shrink: 0;

  color: var(--cdc-choco);

  font-family: var(--cdc-font);
  font-size: 1.15rem;
  font-weight: 700;

  white-space: nowrap;
}

.cdc-product-price--text{
  font-size: 1rem;
}


/* ---------------------------------------------------------
   Badges
   --------------------------------------------------------- */

.cdc-badge{
  align-self: flex-start;

  background: rgba(200, 164, 106, .95);

  color: #1d120d;
}

.cdc-badge-outline{
  align-self: flex-start;

  border:
    1px solid rgba(200, 164, 106, .85);

  background: transparent;

  color: var(--cdc-choco);
}


/* ---------------------------------------------------------
   Flavor list
   --------------------------------------------------------- */

.cdc-flavor-list{
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: .2rem 1.5rem;

  padding-left: 1.25rem;
}

.cdc-flavor-list li{
  line-height: 1.6;
}


/* ---------------------------------------------------------
   Callout
   --------------------------------------------------------- */

.cdc-callout{
  padding: 1rem 1.25rem;

  border-left:
    4px solid rgba(200, 164, 106, .95);

  border-radius: 12px;

  background: rgba(29, 18, 13, .06);

  line-height: 1.7;
}


/* ---------------------------------------------------------
   Storage / availability
   --------------------------------------------------------- */

.cdc-storage{
  border:
    2px solid rgba(200, 164, 106, .55);

  border-radius: 18px;

  background: rgba(29, 18, 13, .06);
}

.cdc-storage__fine{
  color: var(--cdc-muted);

  font-weight: 600;
}


/* ---------------------------------------------------------
   Back to top
   --------------------------------------------------------- */

.cdc-backtotop{
  color: var(--cdc-choco);

  text-decoration: none;

  border-bottom:
    1px dashed rgba(200, 164, 106, .9);
}

.cdc-backtotop:hover,
.cdc-backtotop:focus{
  color: var(--cdc-ink);

  text-decoration: none;
}


/* ---------------------------------------------------------
   Tablet / mobile
   --------------------------------------------------------- */

@media (max-width: 767.98px){

  .cdc-section--tight{
    padding-top: 2.25rem;
  }

  .cdc-divider{
    width: 90px;
  }

  .cdc-product-content{
    padding: 1.25rem;
  }

  .cdc-product-heading{
    flex-direction: column;

    gap: .35rem;
  }

  .cdc-product-option{
    padding: .8rem 1.25rem;
  }

  .cdc-flavor-list{
    grid-template-columns: 1fr;
  }

}


/* ---------------------------------------------------------
   Small phones
   --------------------------------------------------------- */

@media (max-width: 575.98px){

  .cdc-product-option{
    gap: 1rem;
  }

  .cdc-product-title{
    font-size: 1.1rem;
  }

  .cdc-product-price{
    font-size: 1.05rem;
  }

}