/*-- ================================================================================================ --*/
/*-- media screen and (min-width: 0) Used to shorten the code to navigation faster                    --*/
/*-- Font sizes in rems are relative to the font-size of the root element, which is 16px by default   --*/
/*-- reset in in the reset.css file                                                                   --*/
/*-- ================================================================================================ --*/

/*-- ============================================ --*/
/*--                   fonts                      --*/
/*-- ============================================ --*/
@media screen and (min-width: 0) {
  @font-face {
    font-family: "Fraunces";
    src: url(/assets/fonts/Fraunces_72pt-Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
  }

  @font-face {
    font-family: "Montserrat";
    src: url(/assets/fonts/Montserrat-Medium.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
  }

  @font-face {
    font-family: "Montserrat-bold";
    src: url(/assets/fonts/Montserrat-Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
  }
}

/*-- ============================================ --*/
/*--                   variables                  --*/
/*-- ============================================ --*/
:root {
  /* Define colors */
  --primary-clr-dark-cyan: hsl(158, 36%, 37%);
  --secondary-clr-cream: hsl(30, 38%, 92%);

  --neutral-dark-blue: hsl(212, 21%, 14%);
  --neutral-dark-grayish-blue: hsl(228, 12%, 48%);
  --neutral-white: hsl(0, 0%, 100%);

  /* Define base font size */
  --base-font-size: 0.875rem; /* 14px */

  /* Define font families */
  --ff-fraunces: "Fraunces", serif;
  --ff-montserrat: "Montserrat", Arial, sans-serif;
  --ff-montserrat-bold: "Montserrat-bold", Arial, sans-serif;

  /* Define font weights */
  --fw-bold: 700;
  --fw-medium: 500;

  /* Define border radius for elements */
  --border-radius: 0.5rem;
}

/*-- ============================================ --*/
/*--                   content                    --*/
/*-- ============================================ --*/
@media screen and (min-width: 0) {
  body {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 0.875rem; /* Base font size  14px */
    line-height: 1.6;
    background-color: var(--secondary-clr-cream);
    color: var(--neutral-dark-grayish-blue);
    display: grid;
    place-content: center;
    min-height: 100vh;
    margin: 2rem;
  }

  /*-- ============================================ --*/
  /*--                   card                       --*/
  /*-- ============================================ --*/
  .card {
    display: grid;
    background-color: var(--neutral-white);
    border-radius: var(--border-radius);
    max-width: 600px;
    overflow: hidden; /* Ensures the image doesn't overflow */
  }

  /*-- ============================================ --*/
  /*--                   desktop                    --*/
  /*-- ============================================ --*/
  @media screen and (min-width: 600px) {
    .card {
      grid-template-columns: 1fr 1fr;
    }
    .product-image-dt {
      width: 100%;
      height: 100%;
    }
  }

  /*-- ============================================ --*/
  /*--                   product                    --*/
  /*-- ============================================ --*/
  .product-info {
    padding: 1.5em;
    display: grid;
    gap: 1rem;
  }

  .product-category {
    font-size: 0.8215rem;
    text-transform: uppercase;
    letter-spacing: 6px; /* or 0.75em pixels. Pixel is ok to use here */
  }

  .product-title {
    font-family: var(--ff-fraunces);
    font-size: 2rem;
    font-weight: var(--fw-bold);
    color: var(--neutral-dark-blue);
    line-height: 1;
  }
  .product-price {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
  }

  /*-- ============================================ --*/
  /*--                    price                     --*/
  /*-- ============================================ --*/
  .sale-price {
    font-size: 2rem;
    font-weight: var(--fw-bold);
    font-family: var(--ff-fraunces);
    color: var(--primary-clr-dark-cyan);
  }

  .price {
    text-decoration: line-through;
  }

  /*-- ============================================ --> */
  /* <--                   button                   --> */
  /*-- ============================================ -->*/

  .add-to-cart-btn {
    background-color: var(--primary-clr-dark-cyan);
    color: var(--neutral-white);
    font-weight: var(--fw-bold);
    padding: 0.75em 1.5em; /* use ems on padding and margin */
    border-radius: var(--border-radius);
    cursor: pointer;
    border: none;
    display: inline-flex; /* Use inline-flex for better alignment */
    /* align-items: center; 
   justify-content: center;*/
    gap: 0.5rem;
    width: 100%; /* Make button full width */
    justify-content: center; /* Center content horizontally */
  }

  .add-to-cart-btn img {
    width: 15px; /* Adjust size as needed */
    height: auto; /* Maintain aspect ratio */
  }

  .add-to-cart-btn:is(:hover, :focus) {
    background-color: hsl(158, 36%, 20%);
  }
}