@font-face {
    font-family: 'DIN';
    src: url('../../XImages/fonts/DIN.eot'); /* IE9 Compat Modes */
    src: url('../../XImages/fonts/DIN.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../XImages/fonts/DIN.woff') format('woff'), /* Modern Browsers */
         url('../../XImages/fonts/DIN.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../../XImages/fonts/DIN.svg#eaff847c97459788ca7a67eb090bd3f0') format('svg'); /* Legacy iOS */
    font-style:   normal;
    font-weight:  400;
  }
  
  @font-face {
      font-family: 'bourton_handbase';
      src: url('../../XImages/fonts/3739EA_0_0.eot?#iefix') format('embedded-opentype'), url('../../XImages/fonts/3739EA_0_0.ttf') format('truetype'), url('../../XImages/fonts/3739EA_0_0.woff') format('woff'), url('../../XImages/fonts/3739EA_0_0.woff2') format('woff2');
  }


/* Global 
Primary Colour: Substitute #00b373, grab with var(--primary)
Secondary Colour: Substitute #ff585d, grab with var(--secondary)
Dark Colour: Substitute #1D3C34, grab with var(--dark)
background Colour: Substitute #fff, grab with var(--light)

*/

:root {
    --primary: #6f9987;
    --secondary: #d14414;
    --tertiary: #f3f1ef;
    --dark: #1c2529;
    --light: #fff;

    /* You can also create and implement new tags as needed */
    --grey: #434343;

    /* Define Fonts */
    --primary-font: 'bourton_handbase', sans-serif;
    --secondary-font: 'DIN', serif;

    /* Bootstrap Overrides
    You can override bootstrap application default colours at root, by using the !important flag
    This will change ALL implementations of the bootstrap colour tags
    You can also override bootstrap colours for individual elements, do this when you don't want the changes to apply globally. */

    --bs-black: var(--dark)!important;
    --bs-link-hover-color-rgb: var(--dark)!important;
    --bs-primary: var(--dark)!important;
    --bs-background-blue: var(--secondary)!important;
    --bs-emphasis-color: var(--primary)!important;
    --bs-heading-color: var(--primary)!important;
    --bs-medium-grey: var(--primary)!important;
    --bs-highlight-rgb: var(--secondary)!important;
    --bs-highlight: var(--secondary)!important;
    --bs-card-title-color: var(--dark)!important;
    --bs-secondary-rgb: var(--dark)!important;
    --bs-link-hover-color: var(--dark)!important;
    --bs-light-blue: var(--light)!important;
  }

  /* Universal Elements */

  @keyframes descend {
    from {
      opacity: 0;
      transform: translateY(-50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .card {
    opacity: 0;
    animation: descend .9s ease-in-out forwards;
  }
  

    a {
        color:var(--secondary);
        background: transparent;
    }

    a:hover {
        color:var(--dark);
        background: transparent;

    }

    body {
        font-family: var(--secondary-font);    
        color: var(--dark);

    }

    h1, h2, h3, h4, h5 {
        font-family: var(--primary-font);
        color: var(--dark);
    }

/* Scrollbar */
/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
    height: 9px;
    width: 9px;
  }
  *::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: var(--tertiary);
  }
  
  *::-webkit-scrollbar-track:hover {
    background-color: var(--tertiary);
  }
  
  *::-webkit-scrollbar-track:active {
    background-color: var(--tertiary);
  }
  
  *::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--primary);
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary);
  }
  
  *::-webkit-scrollbar-thumb:active {
    background-color: var(--primary);
  }

  /* End Universal Elements */


  /* Header */
  .c-delivery__block {
    background-color: var(--tertiary)!important;
  }
  .c-btn__signin .btn, .c-btn__signup .btn {
    white-space: nowrap;
  }

    .logo-container > a > img {
        width: 50%;
        display: block;
    }

    .navbar-main {
        background: var(--primary)!important;
        display: flex;
        justify-content: space-between;
    }

    .navbar-brand {
        display: none;
    }

    .nav-item__language {
        display:none!important;
    }

    
    .header-links {
        display: none;
    }

    .header-container {
        width: 100%;
        display: flex;
        justify-content: space-between
    }
    

    /* Desktop Header */
    @media only screen and (min-width:48.001rem){
 

    }
    /* Mobile Header */
    @media only screen and (max-width:48rem){
        .logo-container {
            width:100%;
        }
        .navbar-toggler-icon{
            filter: invert(1)
        }
        .c-header__main > nav > div {
            margin: auto;
            display: block!important;
        }
        .logo-container > a > img{
            margin: auto;
            width: 40%!important;
        }

        .navbar-cart__wrapper { 
            display: flex;
            justify-content: space-between;
            position: absolute;
            top: 7px;
            width: 100%;
        }
        header.c-header__main nav.navbar{
            padding: 0.25rem 1rem .75rem !important;
        }
 

    }

  /* End Header */

  /* Footer */

    .bottom-footer {
    padding-top:20px;
    }

    footer {
        padding-top: 10px;
        background: var(--primary);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .middle-footer-logo > img {
    width: 50%;
    }

    .middle-footer-logo {
        display: flex;
        justify-content: center;
    }

    /* Desktop Footer */
    @media only screen and (min-width:48.001rem){
 

    }
    /* Mobile Footer */
    @media only screen and (max-width:48rem){
 

    }

    /* End Footer */ 


  /* Main Content */

  #sidebarCart .btn-add-to-cart.c-collapse-arrow .collapse-cart__icon label, .btn-add-to-cart > label {
    color: var(--secondary)!important;
  }

  .c-form__block {
    padding: 15px;
    border-radius: 0px;
    border: 1px solid var(--dark);
    background-color: var(--tertiary);
    margin: 10px auto!important;
  }

  .item-header {
    text-transform: uppercase;
  }

  body.itemDetails #btnCheckoutFixed {
    background: var(--light);
    padding: 1rem 3rem 1rem 2.1rem;
    margin: 15px;
    border: 1px solid var(--dark);
  }

  .c-btn__signin:hover, .c-btn__signup:hover, #btnCheckout:hover, .btn-outline-primary:hover {
    transform: scale(1.03);
}


  .c-product__tabs .nav-tabs .nav-item .nav-link.active::before {
    background-color: var(--secondary);
  }

  .c-quantity-cart__fixed {
    margin: 15px;
    border: 1px solid var(--dark);
  }

  .card-body {
    background: var(--tertiary);
  }

  .c-card__product .card {
    border: 1px solid var(--dark);
    border-radius: 0;
  }

  .c-sidebar__fixed {
    right: 16px;
  }

  .c-card__product .card:hover {
    border: 1px solid var(--dark);
  }
  .btn.btn-primary:hover {
    background-color: var(--secondary)!important;
  }

  .btn-primary {
    --bs-btn-color: var(--light)!important;
    --bs-btn-bg: var(--secondary)!important;
    --bs-btn-border-color: var(--grey)!important;
    --bs-btn-hover-color: var(--light)!important;
    --bs-btn-hover-bg: var(--dark)!important;
    --bs-btn-hover-border-color: none;
    --bs-btn-focus-shadow-rgb: 95, 95, 95;
    --bs-btn-active-color: var(--light)!important;
    --bs-btn-active-bg: var(--dark)!important;
    --bs-btn-active-border-color: var(--dark)!important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(24, 24, 24, 0.125);
    --bs-btn-disabled-color: var(--light)!important;
    --bs-btn-disabled-bg: var(--grey)!important;
    --bs-btn-disabled-border-color: var(--grey)!important;
    border-radius: 100px;
}

#productDetailsBlock {
    border: 1px solid var(--dark);
    padding: 20px;
    background: var(--tertiary);
}

.btn-outline-primary {
    background-color: var(--primary);
    color: var(--light)!important;
    border: 1px solid var(--light);
    border-radius:100px;
}

.btn.btn-outline-primary:hover, .btn.btn-outline-primary:active {
    color: var(--light) !important;
    border: 1px solid var(--light) !important;
    background: var(--primary) !important;
}

.c-profile__group .c-profile__dropdown span {
    color: var(--light)!important;
}


.c-product__tabs .nav-tabs .nav-item .nav-link:hover {
    color: var(--primary)!important;

}



    /* Desktop Main Content */
    @media only screen and (min-width:48.001rem){
        html {
            margin: 15px;
            border: 1px solid var(--dark);
            background: var(--tertiary);
        }
        .c-sidebar__block {
            display: none!important;
        }

    }
    /* Mobile Main Content*/
    @media only screen and (max-width:48rem){

 

    }

  /* End Main Content */


/* Things that should not be local, these really need to be main app style rules */

@media (max-width: 48em){
    .c-sidebar__block {
        height: 0;
      }
}

.credit-card-multi-image {
    max-width: 250px;
}

/* FIX MORE BUTTON ON SAFARI */
/* 1) Normalize that span so WebKit treats it like a block container */
.detailsBox.productSummaryText #productSubFeDetailText {
  display: block;           /* span wraps <p> ? make it block to avoid Safari quirks */
  position: relative;
  z-index: 0;
}

/* 2) Ensure the container leaves room for the absolutely-positioned link */
.detailsBox.productSummaryText {
  position: relative;       /* anchor’s positioning context */
  padding-bottom: 1.75rem;  /* space for “More…”; tweak as needed */
  overflow: hidden;        /* avoid clipping in case a parent sets overflow */
}

/* 3) Surface and pin the link in Safari */
.detailsBox.productSummaryText .c-text__more.productSubFeDetail {
  position: absolute;       /* override utility classes if needed */
  right: 0;                 /* explicit instead of relying on .end-0 */
  bottom: 0;
  z-index: 10;              /* above the paragraph text */
  display: inline-block;
  background: #fff;         /* keep it readable if it overlaps text */
  padding-left: .5rem;
  -webkit-transform: translateZ(0); /* WebKit paint-layer nudge */
  will-change: transform;
}

/* Optional: tidy paragraph spacing so the link doesn't look crowded */
.detailsBox.productSummaryText #productSubFeDetailText > p:last-child {
  margin-bottom: .5rem;
}

/* 4) Last-resort iOS Safari fallback: let the link flow below the text */
@supports (-webkit-touch-callout: none) {
  .detailsBox.productSummaryText .c-text__more.productSubFeDetail {
    position: static;       /* shows reliably on iPhone */
    margin-top: .25rem;
  }
  .detailsBox.productSummaryText { padding-bottom: 0; }
}
/* END FIX MORE BUTTON ON SAFARI */