:root:not([data-theme="dark"]),
[data-theme="light"] {
  --pico-color: #033521;
  --pico-primary: #a0805c;
  --pico-primary-hover: #8d6d49;
  --pico-primary-hover-background: #8d6d49;
  --pico-primary-background: #a0805c;
  --pico-h1-color: #033521;
  --pico-h2-color: #033521;
  --pico-h3-color: #033521;
  --pico-h4-color: #033521;
  --pico-h5-color: #033521;
  --pico-h6-color: #033521;
  --pico-primary-underline: rgba(160, 128, 92, 0.5);
  --pico-text-selection-color: rgba(160, 128, 92, 0.25);
  --pico-primary-focus: rgba(160, 128, 92, 0.5);
  --pico-typography-spacing-vertical: 0.5rem;
    --pico-spacing: 0.5rem;
}

.grid {
  display: grid;
  gap: 1rem;
}

.grid.two-column {
  grid-template-columns: repeat(3, 1fr);
}

.section-divider {
  padding: 0.5rem 0;
}

.product-card {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(1, 1fr);
  grid-template-areas:
    "header"
    "image"
    "details";
}

.product-card .image,
.product-card header,
.product-card .details p:last-child {
  margin-top: 0;
  margin-bottom: 0;
}

.product-card .image {
  grid-area: image;
  border-radius: var(--pico-border-radius);
}

.product-card .title {
  grid-area: title;
}

.product-card .details {
  grid-area: details;
}

.product-card header {
  grid-area: header;
  max-height: 45px;
}

.product-card header label {
  margin-bottom: 0;
}

.header {
  background-color: lightgray;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}

.header+main {
  padding-top: 164px;
}

header nav {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "logo gst"
    "logo phone"
    "logo email"
    "inquiry inquiry";
}

header nav .logo {
  grid-area: logo;
}

header nav .gst {
  grid-area: gst;
  margin-left: auto;
}

header nav .email {
  grid-area: email;
  margin-left: auto;
}

header nav .phone {
  grid-area: phone;
  margin-left: auto;
}

header nav .inquiry {
  grid-area: inquiry;
  justify-content: center;
}

footer nav {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "logo logo logo"
    "gst . ."
    "phone . ."
    "email . ."
    "address address address"
    "address1 address1 address1"
    "inquiry inquiry  inquiry";
}

footer nav .logo {
  grid-area: logo;
}

footer nav .gst {
  grid-area: gst;
}

footer nav .email {
  grid-area: email;
}

footer nav .phone {
  grid-area: phone;
}
footer nav .address {
  grid-area: address;
}
footer nav .address1 {
  grid-area: address1;
}

footer nav .inquiry {
  grid-area: inquiry;
  justify-content: center;
}

.icon-text-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.icon-text-group .icon {
  flex: none;
  width: 16px;
}

.inquiry-button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.325rem;
}

.category {
  max-width: auto;
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.category button {
  width: auto;
  padding: 0.2rem 0.4rem;
    text-transform: uppercase;
}

@media (min-width: 576px) {
  .header+main {
    padding-top: 113px;
  }

  header nav {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "logo phone gst"
      "logo email inquiry";
  }

  header nav .email,
  header nav .phone,
  header nav .gst {
    margin: 0 auto;
  }

  footer nav {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "logo ."
      "gst inquiry"
      "phone email"
      "address address"
      "address1 address1";
  }

  .grid.two-column {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {}

@media (min-width: 1024px) {
  .header+main {
    padding-top: 119px;
  }

  header nav {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "logo . phone gst"
      "logo . email inquiry";
  }

  footer nav {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "logo . inquiry"
      "gst phone email"
      "address address address"
      "address1 address1 address1";
  }

  footer nav .email,
  footer nav .phone {
    margin: 0 auto;
  }

  .grid.two-column {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1280px) {
  .header+main {
    padding-top: 125px;
  }
}

@media (min-width: 1536px) {}

.inquiry_input,
.btn_close {
  --pico-form-element-spacing-vertical: 0.5rem;
}

dialog article {
  width: calc(97vw - var(--pico-spacing));
}
/* Container for the sticky div */
.sticky-container {
  padding-bottom: 10px;
}

/* Initial styles for the sticky div */
.sticky-div {
  background-color: white;
  padding-bottom: 10px;
  margin: auto;
  display: block;
  left: 0;
  right: 0;
}

body {}