/*Applies to All */
* {
    margin:"0";
    padding:"0";
     }
.bg-white-ebs
{
  background-color:white;
}
.bg-navy-ebs
{
  background-color: #162d4a;
}
.bg-product-ebs
{
  background-color: #0a2240;
}
.bg-euk-pink
{
  background-color:#C50067;
}

.btn-navy-ebs
{
  background-color: #162d4a;
}
.btn-navy-ebs:hover
{
background-color: #1e5496
}
.btn-euk-pink
{
  background-color: #C50067;
  color: white;
}
.btn-euk-pink:hover
{
  background-color:#91024c;
  color: white; 
}
.content-bottom-right {
    position: absolute;
    bottom: 0; /*This is the part that glues it to the bottom*/
    margin-right: 0;
    }
 .montserrat-links {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 12pt;
  font-weight: 700;
  }
a {
   font-size: 12pt;
  color: white;
  text-decoration: none;
}
a:hover {
  color: lightgray;
}

.lilac-bg {
  width: 100%;
  height: 100%;      /* full screen height 100vh */
  background-image: url("../siteImages/lilacbbg.png");          /* or any color/image */
  background-color: #d0d0ed;
margin:0;
}
.product-hdr-bg {
  width: 100%;
  height: 100%;
  background-image: url("../siteImages/producthdr.webp");
  margin: 0;

  background-size: cover;        /* fills the container */
  background-position: center;   /* keeps the middle in view */
  background-repeat: no-repeat;  /* prevents tiling */
}
.cart-hdr-bg {
  width: 100%;
  height: 100%;
  background-image: url("../siteImages/carthdr.webp");
  margin: 0;

  background-size: cover;        /* fills the container */
  background-position: center;   /* keeps the middle in view */
  background-repeat: no-repeat;  /* prevents tiling */
}
/* Welcome to Euk on Homepage */
.hero-text-white {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 30pt;
  font-weight: 800;
  color: white;
  background-color: #C50067;
  line-height: 1.2;
  }
  .big-hero-text-white {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 36pt;
  font-weight: 800;
  color: white;
  background-color: #C50067;

  }
  .big-hero-text-white-no-bg {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 36pt;
  font-weight: 800;
  color: white;
  line-height: 1.2;
  }
  .hero-text-black {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 30pt;
  font-weight: 800;
  color:black;
  line-height: 1.2;
    }
      .big-hero-text-black {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 36pt;
  font-weight: 850;
  color:black;
  padding-top: 225px;
  padding-bottom: 150px;
    }
.hero-text-sml {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 12pt;
  font-weight: 400;
  color:black;
}
.sub-text-white-bold {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 16pt;
  font-weight: 800;
  color: white;
  line-height: 1.3;
  }
  .sub-text-white-bold2 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 12pt;
  font-weight: 600;
  color: white;
  line-height: 1.3;
  }
  .sub-text-black-bold2 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 12pt;
  font-weight: 600;
  color: black;
  line-height: 1.3;
  }
.dark-link {
   font-size: 12pt;
  color:Navy;
  text-decoration: none;
}
.dark-link:hover {
  color:black;
}
  .sub-text-sml {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 11pt;
  font-weight: 400;
  color:white;
  line-height: 1.2;
}
 .cat-text-sml {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 11pt;
  font-weight: 400;
  color:#98999e;
  line-height: 1.2;
}
.skew-btn {
    display: inline-block;
    padding: 12px 40px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    
    /* The Shape: Skew the container */
    transform: skew(-25deg);
    border: 2px solid #C50067;
    background: transparent;
    color: #C50067;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .skew-btn span {
    /* The Fix: Counter-skew the text so it stays upright */
    display: block;
    transform: skew(25deg);
  }

  /* Hover State: Fills the background */
  .skew-btn:hover {
    background-color: #C50067;
    color: white;
  }

.home-img {
  width: 100%;       /* example size */
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;   /* crops anything outside */
  padding-top: 10px;
}

.home-img img {
  width: 80%;
  height: 80%;
  object-fit: cover;  /* crops nicely */
  border-radius: 15px;
}
.mobhome-img {
  width: 100%;       /* example size */
   display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;   /* crops anything outside */
  padding-top: 10px;
}

.mobhome-img img {
  width: 80%;
  object-fit: cover;  /* crops nicely */
  border-radius: 15px;
}


/* padding and positioning of the images and text on the homepage */
.sub td{
  vertical-align: top;
  padding: 6px;
  align-items: center;
}

footer .white-txt /*used in EBS */
{
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 250;
  font-style: normal;
  color: white;
  font-variation-settings:
    "width" 100;
    text-decoration: none;
}
footer .white-txt-sml /*used in EBS */
{
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: none;
  font-size: 10pt;
  font-weight: 300;
  font-style: normal;
  color: white;
  font-variation-settings:
    "width" 100;
    text-decoration: none;
}


footer a /*used in EBS */
{
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: white;
  font-variation-settings:
    "width" 100;
    text-decoration: none;  
}
  .heading-pink {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 30pt;
  font-weight: 800;
  color:#C50067;
  line-height: 1.2;
    }
      .sub-heading-pink {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 24pt;
  font-weight: 800;
  color:#C50067;
      }
.sub-heading-black {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 18pt;
  font-weight: 800;
  color: black;
  line-height: 1.2;
    }

 .product-tile {
  background-image: url('../siteImages/itembg.svg');
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background-image 0.3s ease-in-out;
}

.product-tile:hover {
  background-image: url('../siteImages/itembgPink.webp');
}

.product-tile img {
  max-height: 275px;
  object-fit: contain;
}

.product-name {
  font-weight: 600;
  margin-top: 10px;
}
.big-gap-bottom {
  padding-bottom: 250px;
}
.big-gap-top {
  padding-top: 250px;
}
.sml-gap-top {
  padding-top: 150px;
}
.sml-gap-bottom {
  padding-bottom: 150px;
}

.main-image-wrapper {
  background-image: url('../siteImages/product-background.png');
  background-size: cover;
  background-position: center;
  padding: 20px;
  border-radius: 12px;
}

.product-main-img {
  max-height: 400px;
  object-fit: contain;
}

.thumb-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  cursor: pointer;
  background-image: url('../siteImages/product-background.png');
  background-size: cover;
  background-position: center;
  padding: 5px;
  border-radius: 8px;
  transition: transform 0.2s ease, border 0.2s;
}

.thumb-img:hover {
  transform: scale(1.05);
}

.thumb-img.active {
  border: 2px solid #ff69b4; /* pink highlight */
}

.rounded-navy-box {
  background-color: #162d4a;
  border-radius: 12px;   /* controls how rounded the corners are */
  padding: 20px;         /* space inside the box */
}

.rounded-pink-box {
  background-color:#c50067;
  border-radius: 10px;   /* controls how rounded the corners are */
  padding: 16px;         /* space inside the box */
  color: white;
  font-weight: 600;
}

.collapse-box {
  border-bottom: 2px solid #ffffff; /* always visible bottom line */
  padding: 10px 0;
}

/* Header */
.collapse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: #ffffff; /* adjust if needed */
}

/* Title */
.collapse-title {
  font-weight: 600;
}

/* Plus icon */
.collapse-icon {
  font-size: 20px;
  transition: transform 0.3s ease;
}

/* Content (hidden by default) */
.collapse-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: #ffffff; /* adjust if needed */
}

/* Expanded state */
.collapse-box.active .collapse-content {
 max-height: 700px;  /*enough to fit content */
  margin-top: 10px;
}

/* Rotate + to become X */
.collapse-box.active .collapse-icon {
  transform: rotate(45deg);
}
.cartTable{
  width: 95%;
}
.cartTable thead
{
text-align: center;
background-color: #C50067;
color: white; 
padding: 5px;
}
.cartTable tbody
{
  text-align:left;
  background-color:#0a1f3a;
  border: 3px solid #162d4a;
  padding: 10px;
  color: white;
}
.cartTable tbody td
{
  border: 3px solid #162d4a ;
  padding: 5px;
}
.account-icons {
  justify-content: center;
}

.account-item {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  width: 140px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.account-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.account-icon {
  font-size: 36px;
  color: #0b2a5b; /* navy */
  display: block;
  margin-bottom: 10px;
}

.account-label {
  font-size: 14px;
  color: #0b2a5b;
  font-weight: 500;
}


/*
Euk Pink is #c50067
Euk Navy is #162d4a
*/