/* Prevent accidental page-wide horizontal scrolling */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box;
}

/* Product thumbnails swipe/scroll only inside product image area */
.js-qv-mask.mask.scroll {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch;
}

.js-qv-product-images {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  padding-bottom: 8px;
  margin: 0;
}

.js-qv-product-images .thumb-container {
  flex: 0 0 auto !important;
}

.scroll-box-arrows.scroll {
  display: none !important;
}

/* General cleanup */
#subcategories,
#js-product-list-header {
  display: none !important;
}

#wrapper {
  background: #ffffff;
  padding-top: 0 !important;
}

#header {
  box-shadow: none !important;
}

#content-wrapper,
#main,
.page-home {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page-home .breadcrumb {
  display: none !important;
}

.page-home #custom-text {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Mobile product grid */
@media (max-width: 767px) {
  #js-product-list .products,
  .featured-products .products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }

  #js-product-list .products > *,
  .featured-products .products > * {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
  }

  #js-product-list .products .product-miniature,
  #js-product-list .products .js-product,
  #js-product-list .products article,
  .featured-products .product-miniature,
  .featured-products article {
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-miniature .thumbnail-container {
    height: auto !important;
    min-height: 0 !important;
  }

  .product-miniature .product-title {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
}

/* Desktop featured products: 5 per row */
@media (min-width: 1200px) {
  .featured-products .products .product {
    width: 20% !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}

/* Homepage top hero */
.armyohana-hero {
  background: linear-gradient(135deg, #4b5320, #6b7a2b);
  padding: 24px 20px;
  text-align: center;
  border-radius: 12px;
  margin: 20px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.page-home .armyohana-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.armyohana-text {
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.armyohana-text span {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-top: 10px;
  text-transform: none;
}

.armyohana-btn {
  display: inline-block;
  background: #ffb300;
  color: #222;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 50px;
  text-transform: uppercase;
  transition: all .2s ease;
}

.armyohana-btn:hover {
  background: #ffc533;
  transform: translateY(-2px);
  color: #222;
}

@media (max-width: 767px) {
  .armyohana-text {
    font-size: 24px;
  }

  .armyohana-text span {
    font-size: 14px;
  }

  .armyohana-btn {
    width: 100%;
    max-width: 300px;
  }
}

/* Homepage slider full width only on homepage */
.page-home #carousel {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  overflow: hidden !important;
}

.page-home #carousel .carousel-inner,
.page-home #carousel .carousel-item,
.page-home #carousel img {
  width: 100% !important;
}

.page-home #carousel,
.page-home #carousel .carousel-inner,
.page-home #carousel .carousel-item,
.page-home #carousel .carousel-item figure,
.page-home #carousel .carousel-item picture,
.page-home #carousel .carousel-item img {
  height: 450px !important;
  max-height: none !important;
}

.page-home #carousel .carousel-item img {
  object-fit: cover !important;
}

/* Mobile slider fix */
@media (max-width: 767px) {
  .page-home #carousel,
  .page-home #carousel .carousel-inner,
  .page-home #carousel .carousel-item,
  .page-home #carousel .carousel-item figure,
  .page-home #carousel .carousel-item picture {
    height: auto !important;
    min-height: 0 !important;
  }

  .page-home #carousel .carousel-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* Homepage split hero */
.page-home .ao-split-hero {
  display: flex !important;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  background: #f3f3f3;
  padding: 36px;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.ao-hero-image {
  width: 50% !important;
  min-height: 620px !important;
  background: url('/img/cms/army-ohana-hero.jpg') center center/contain no-repeat !important;
  background-color: #f3efe8 !important;
}

.ao-hero-textbox {
  width: 50% !important;
  min-height: 620px !important;
  background: #fff;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 60px 70px !important;
  box-sizing: border-box !important;
}

.ao-hero-textbox h1 {
  font-size: 42px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  margin: 0 0 32px !important;
  color: #111 !important;
}

.ao-hero-textbox p {
  font-size: 15px !important;
  line-height: 1.35 !important;
  margin: 0 0 24px !important;
  color: #333 !important;
  max-width: 560px;
}

.ao-hero-textbox strong {
  font-size: 23px !important;
  font-weight: 900 !important;
  color: #333 !important;
}

.ao-hero-btn {
  display: inline-block !important;
  margin-top: 18px !important;
  background: #4b5320 !important;
  color: #fff !important;
  padding: 16px 38px !important;
  border-radius: 10px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.ao-hero-btn:hover {
  background: #3f471a !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .page-home .ao-split-hero {
    flex-direction: column !important;
    padding: 16px !important;
  }

  .ao-hero-image,
  .ao-hero-textbox {
    width: 100% !important;
  }

  .ao-hero-image {
    min-height: 380px !important;
  }

  .ao-hero-textbox {
    min-height: auto !important;
    padding: 42px 24px !important;
  }

  .ao-hero-textbox h1 {
    font-size: 28px !important;
  }

  .ao-hero-textbox p {
    font-size: 15px !important;
  }

  .ao-hero-textbox strong {
    font-size: 20px !important;
  }
}

/* Homepage content container */
.ao-home {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 20px 14px !important;
  box-sizing: border-box !important;
}

.ao-title,
{
  text-align: center;
  font-weight: 800;
  line-height: 1;
  margin: 25px 0;
  background: linear-gradient(90deg, #556b2f, #6b8e23, #c5a028, #6b8e23);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ao-title {
  font-size: 25px;
}

/* Color section */
.ao-color-grid {
  display: flex !important;
  justify-content: center !important;
  gap: 24px !important;
  margin-bottom: 40px !important;
}

.ao-color-card {
  width: 140px !important;
  flex: 0 0 140px !important;
  text-decoration: none !important;
}

.ao-photo-box {
  width: 140px !important;
  height: 140px !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  display: block !important;
}

.ao-label {
  text-align: center !important;
  margin-top: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #222 !important;
}

/* Member links */
.ao-member-title {
  margin-top: 48px !important;
}

.ao-member-scroll {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 4px 14px 16px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

.ao-member-photo {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}

.ao-member-label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 10px 4px 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #222 !important;
  box-sizing: border-box !important;
}

.ao-member-links {
  text-align: center;
  font-size: 18px;
  line-height: 2;
  margin: 10px 0 30px;
}

.ao-member-links a {
  color: #4b5320;
  text-decoration: none;
  font-weight: 600;
}

.ao-member-links a:hover {
  color: #d4a445;
}

/* Desktop dropdown narrow and one column */
#_desktop_top_menu .sub-menu {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  left: auto !important;
  padding: 12px 0 !important;
}

#_desktop_top_menu .sub-menu .top-menu {
  display: block !important;
}

#_desktop_top_menu .sub-menu li {
  display: block !important;
  width: 100% !important;
}

#_desktop_top_menu .sub-menu a {
  display: block !important;
  padding: 10px 18px !important;
  white-space: nowrap !important;
}

@media (max-width: 767px) {
  .product-accessories .products {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
  }

  .product-accessories .products > .product,
  .product-accessories .products > .js-product {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
  }

  .product-accessories .product-miniature,
  .product-accessories article {
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-accessories .thumbnail-container {
    width: 100% !important;
    height: auto !important;
  }

  .product-accessories .product-thumbnail img {
    width: 100% !important;
    height: auto !important;
  }

  .product-accessories .product-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
}
#footer{
    padding:0;
}
.footer-container{
    padding:0;
}

@media (min-width: 768px) {
  #left-column .collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }

  #left-column .navbar-toggler,
  #left-column .collapse-icons {
    display: none !important;
  }
}

#product-modal .modal-body .mask {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  max-height: 80vh !important;
  height: 80vh !important;
}

#product-modal .modal-body .product-images {
  transform: none !important;
  height: auto !important;
}
#product-modal .arrows {
  display: none !important;
}
.product-customization .card {
  background: #3D4420;
  border: 3px solid #C3B091;
  border-radius: 10px;
  padding: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.product-customization .card-title {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.product-customization .card-title:before {
  content: "PERSONALIZE YOUR SHIRT";
}

.product-customization .card-title {
  font-size: 0;
}

.product-customization .card-title:before {
  font-size: 24px;
}

.product-customization form:before {
  content: "Select your designs and click SAVE CUSTOMIZATION before adding to cart.";
  display: block;
  background: #C3B091;
  color: #1A1A1A;
  font-weight: 800;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 18px;
}

.product-customization-item label {
  color: #fff;
  font-weight: 700;
  margin-bottom: 6px;
}

.product-customization .product-message {
  background: #fff;
  border: 2px solid #C3B091;
  border-radius: 6px;
}

.product-customization button[name="submitCustomizedData"] {
  width: 100%;
  background: #C3B091;
  color: #1A1A1A;
  border: none;
  font-weight: 800;
  text-transform: uppercase;
  padding: 14px;
  border-radius: 6px;
}

.product-customization button[name="submitCustomizedData"]:hover {
  background: #d4c29f;
}
.customization-message {
    color: #ffffff !important;
}
.product-quantities{
    display:none;
}
.product-reference{
    display:none;
}
.mobile-home-banner {
    display: none;
}

@media (max-width: 767px) {

    .homeslider-container {
        display: none !important;
    }

    .mobile-home-banner {
        display: block;
    }

    .mobile-home-banner img {
        display: block;
        width: 100%;
        height: auto;
    }
}
.fabric-spec-grid {
  display: grid;
  gap: 14px;
  margin-top: 15px;
}

.fabric-spec-card {
  border: 1px solid #e5e5e5;
  background: #fafafa;
  padding: 16px;
  border-radius: 6px;
}

.fabric-spec-card h4 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
}

.fabric-spec-card p {
  margin: 6px 0;
  line-height: 1.35;
}

.highlighted-informations {
    display: none !important;
}

.product-miniature .thumbnail-container:hover .product-description::after,
.product-miniature .thumbnail-container:focus .product-description::after {
    display: none !important;
}
h1.h1 {
    text-transform: none !important;
}
.family-bundle-hero {
  max-width: 1180px;
  margin: 24px auto 38px;
  padding: 62px 24px;
  background:
    radial-gradient(circle at 15% 15%, rgba(230, 232, 103, .65), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(163, 235, 218, .75), transparent 30%),
    radial-gradient(circle at 8% 90%, rgba(181, 223, 121, .55), transparent 26%),
    linear-gradient(135deg, #fbfff4 0%, #eef9df 45%, #e5f9ef 100%);
  border-radius: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(0,0,0,.12);
}

.family-bundle-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}

.family-bundle-icon {
  color: #5b6b35;
  font-size: 34px;
  margin-bottom: 12px;
}

.family-bundle-label {
  color: #5b6b35;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.family-bundle-hero h1 {
  margin: 0 0 16px;
  color: #111;
  font-size: 64px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: none;
}

.family-bundle-hero p {
  margin: 0 auto 30px;
  color: #333;
  font-size: 22px;
  line-height: 1.42;
  max-width: 620px;
}

.family-bundle-button {
  display: inline-block;
  background: #40551f;
  color: #fff;
  border-radius: 999px;
  padding: 16px 34px;
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(64,85,31,.28);
}

.family-bundle-button:hover {
  background: #2f351f;
  color: #fff;
  text-decoration: none;
}

.deco {
  position: absolute;
  z-index: 1;
  color: #5b8a32;
  font-weight: 900;
  opacity: .9;
}

.deco-1 {
  left: 9%;
  top: 34%;
  font-size: 34px;
}

.deco-2 {
  right: 12%;
  top: 48%;
  font-size: 34px;
}

.deco-3 {
  left: 8%;
  bottom: 22%;
  font-size: 52px;
  transform: rotate(-25deg);
  color: #9bc44a;
}

.deco-4 {
  right: 22%;
  bottom: 16%;
  font-size: 30px;
}

.deco-5 {
  right: 10%;
  top: 20%;
  font-size: 52px;
  transform: rotate(25deg);
  color: #74c66b;
}

@media (max-width: 767px) {
  .family-bundle-hero {
    margin: 18px 12px 32px;
    padding: 46px 18px;
    border-radius: 24px;
  }

  .family-bundle-hero h1 {
    font-size: 46px;
  }

  .family-bundle-hero p {
    font-size: 18px;
  }

  .family-bundle-button {
    font-size: 15px;
    padding: 14px 24px;
  }
}
@media (max-width: 767px) {
    .block-categories {
        display: none !important;
    }
}

.control-label {
    margin-bottom:0.75rem;
    font-weight:700;
}
@media (max-width: 767px) {

  .featured-products .products.row{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    overflow-y:hidden;
    margin-left:0;
    margin-right:0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .featured-products .products.row::-webkit-scrollbar{
    display:none;
  }

  .featured-products .products.row > .product{
    flex:0 0 60% !important;
    width:60% !important;
    max-width:60% !important;
    padding-left:8px;
    padding-right:8px;
  }
  .product-miniature{
    background:#fff;
    border-radius:16px;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
    transition:.25s;
}

.product-miniature:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,.08);
}
}

.all-product-link {
    display: none !important;
}
.army-banner{
    
    text-align:center;
    
    font-family:Arial,Helvetica,sans-serif;
}

/* Divider */

.banner-divider{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin:0;
}

.banner-divider span:not(.star){
    width:45px;
    height:2px;
    background:#111;
}

.star{
    font-size:16px;
    line-height:1;
}

/* Title */

.banner-title{
    margin:6px 0;
    line-height:1;
}

.banner-title .light{
    font-size:22px;
    font-weight:300;
    letter-spacing:3px;
}

.banner-title .heavy{
    font-size:42px;
    font-weight:800;
    margin:0 4px;
}

/* Bottom */

.banner-options{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:700;
    margin:0;
    flex-wrap:wrap;
}

.or{
    color:#666;
}

/* Tablet */

@media (max-width:992px){

    .banner-title .light{
        font-size:18px;
    }

    .banner-title .heavy{
        font-size:34px;
    }

    .banner-options{
        font-size:14px;
    }

}

/* Mobile */

@media (max-width:767px){

    .army-banner{
        
    }

    .banner-divider span:not(.star){
        width:30px;
    }

    .star{
        font-size:14px;
    }

    .banner-title{
        margin:4px 0;
        line-height:1;
    }

    .banner-title .light{
        display:inline;
        font-size:16px;
        letter-spacing:1px;
    }

    .banner-title .heavy{
        display:inline;
        font-size:35px;
        margin:0 2px;
    }

    .banner-options{
        margin-top:4px;
        gap:6px;
        font-size:10px;
        flex-wrap:nowrap;
        white-space:nowrap;
    }
}
.home-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 0;
    margin: 20px 20px;
}

.home-scroll::-webkit-scrollbar {
    height: 8px;
}

.home-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 20px;
}

.home-card {
    flex: 0 0 240px;
    display: block;
    text-decoration: none;
    border-radius: 10px;
    overflow: hidden;
}

.home-card img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 768px) {
    .home-card {
        flex: 0 0 180px;
    }
}
.page-home .army-banner{
    width:100vw;
    max-width:100vw;
    position:relative;
    left:50%;
    margin-left:-50vw;
    margin-right:0;
    background:#f8f4ed;
    padding:20px 15px;
    box-sizing:border-box;
}
.page-home .home-scroll{
    width:100vw;
    max-width:100vw;
    position:relative;
    left:50%;
    margin-left:-50vw;
    margin-right:0;
    padding:0 20px 20px;
    box-sizing:border-box;
}
.upload-banner {
    width: 100%;
    background: #384a3a;      /* Army olive */
    margin: 0;
    padding: 24px 20px;
}

.upload-banner-inner {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.upload-title {
    display: block;
    color: #f5f1e8;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .5px;
}

.upload-link {
    display: inline-block;
    margin-top: 8px;
    color: #d9c79a;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

.upload-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .upload-banner {
        padding: 18px 15px;
    }

    .upload-title {
        font-size: 1.5rem;
    }

    .upload-link {
        font-size: 1.1rem;
    }
}
.upload-banner {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #3d4d3d;
    padding: 30px 20px;
    text-align: center;
}
.section-heading {
    text-align: center;
    margin: 35px 0 20px;
    padding: 0 20px;
}

.section-heading h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #556b2f, #6b8e23, #c5a028);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.section-heading p {
    margin: 8px 0 0;
    font-size: 1rem;
    color: #777;
}

@media (max-width: 768px) {
    .section-heading h2 {
        font-size: 10px;
        letter-spacing: 1px;
        margin: 0;
    }

    .section-heading p {
        display:none;
        font-size: 1rem;
        margin: 8px 0 0;
    }
}

/* Make color swatches bigger */
.product-variants .input-color,
.product-variants .color,
.product-variants .color_texture,
.product-variants .input-color + span,
.product-variants .input-color + label {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    display: inline-block !important;
}

/* Make the hidden input cover the swatch */
.product-variants .input-color {
    opacity: 0;
    position: absolute;
    width: 30px !important;
    height: 30px !important;
}