/*
Theme Name: Coastal Backwoods Hat Co
Theme URI: https://www.coastalbackwoodshatco.com/
Author: JSM (Custom Build)
Author URI: https://jsmcorp.com/
Description: Custom WooCommerce theme for Coastal Backwoods Hat Company.
Version: 1.0.0
License: GPLv2 or later
Text Domain: cbhc
Tags: custom-colors, custom-logo, e-commerce, woocommerce
*/



table#sort_customizable_table {width: 100% !important;}
table#sort_customizable_table {border: solid 0.1rem #ccc !important;}
table#sort_customizable_table tr {border-top: solid 0.1rem #ccc !important;}
table#sort_customizable_table th {background-color: #ccc !important;}

section.related.products {
    clear: both;
}

a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained {
    background-color: #d11620;
    color: #fff !important;
    text-decoration: none;
}
a.wc-block-components-product-name {
    font-size: 1.2rem;
    color: #000;
}
main.container {
    padding: 50px;
}
main.container h1 {
    text-align: center;
}
.wc-tab li {
    list-style-position: inside;
}

div.logo img {max-height: 120px; width:auto;}

h1.page-title {margin-top: 30px;}

a.btn.btn-lg.btn-primary {background-color: #073deb;}
form.woocommerce-product-search button {padding: 2px 15px;background-color: #073ced;}
ol.steps {list-style: decimal; margin-left: 20px;}
ol.steps li::marker { content: "Step " counter(list-item) ". "; }

a.btn.btn-primary.position-relative {
    background-color: #073deb !important;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb {
    font-size: .92em;
    color: #767676;
    text-align: center;
    margin-top: 15px;
}
.cbhc-archive-title {text-align: center;}

/* Global WooCommerce button color */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button {
  background-color: #d11620 !important;
  color: #fff !important;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease;
}

/* Hover / focus states */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button:hover {
  background-color: #a90f18 !important; /* slightly darker shade */
  color: #fff !important;
}

/* Disabled buttons */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled] {
  background-color: #e07378 !important;
  opacity: 0.7;
  cursor: not-allowed;
}

.product {text-align: center !important;}
.product a {color: #333;}


/* woo animation start */
 
/* Put in Appearance > Customize > Additional CSS */
.woocommerce ul.products li.product {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
/* Smooth image fade/zoom */
.woocommerce ul.products li.product a img {
  transition: transform .25s ease, opacity .25s ease;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.04);
  opacity: .96;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product a img { transition: none; }
}

.jsm-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.5s ease-out, transform 2.5s ease-out;
}

.jsm-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* woo animation end */







/* ===========================
   PRODUCT PAGE TWO-COLUMN LAYOUT
   =========================== */
.cbhc-product-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* Make single product content full width when no sidebar is present */
.single-product #primary {
  width: 100%;
  max-width: 100%;
}

/* If your theme had previous two-column rules, neutralize them here */
.single-product #primary,
.single-product #sidebar {
  float: none !important;
  display: block !important;
}

.single-product #sidebar { display: none !important; }

/* Stack columns on small screens */
@media (max-width: 992px) {
  .cbhc-product-layout {
    flex-direction: column;
  }
  #sidebar {
    flex-basis: auto;
    width: 100%;
  }
}






/* Animated underline for primary nav */
.cbhc-animated-nav .menu-item > a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: .5rem .75rem;
}

.cbhc-animated-nav .menu-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.25rem;
  height: 2px;
  background: linear-gradient(90deg, #0E2A47, #8C1D18); /* navy → deep red */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
}

.cbhc-animated-nav .menu-item > a:hover::after,
.cbhc-animated-nav .menu-item > a:focus::after {
  transform: scaleX(1);
}

.cbhc-animated-nav .menu-item.current-menu-item > a::after,
.cbhc-animated-nav .menu-item.current-menu-ancestor > a::after,
.cbhc-animated-nav .menu-item.current_page_item > a::after {
  transform: scaleX(1);
}




/* Full-height hero behavior */
#cbhcHero .carousel-item {
  max-height: 80vh;        /* Adjust hero height */
  overflow: hidden;
}
#cbhcHero .carousel-item img {
  width: 100%;
  height: 80vh;
  object-fit: cover;        /* Keep image fill without distortion */
}

/* Subtle dark overlay for text readability */
.cbhc-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  z-index: 1;
}
#cbhcHero .carousel-caption {
  z-index: 2;
}

/* Optional text shadow for captions */
.text-shadow { text-shadow: 0 1px 2px rgba(0,0,0,.35); }




/* Footer Layout */
.site-footer {
  background: #111;       /* adjust to your palette */
  color: #fff;
  padding: 0;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-copy { font-size: .95rem; opacity: .9; }

/* Footer Menu */
.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; 
  gap: 16px;
}
.footer-menu li { margin: 0; }

/* CTA button tweaks (if using Bootstrap, this inherits) */
.footer-cta .btn { border-color: rgba(255,255,255,.6); color: #fff; }
.footer-cta .btn:hover { border-color: #fff; }


#jsm-footer-5{background-color: #000; color: #fff;}
#jsm-footer-5 a {color: #fff !important;}



/* Reduce height on small screens */
@media (max-width: 768px){
  #cbhcHero .carousel-item,
  #cbhcHero .carousel-item img { height: 60vh; }
	
	.col-2, .col-4 {text-align:center !important; width: 100% !important;}	
}



/* ************* */
form.cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem; /* spacing between fields */
}

form.cart .quantity {
  display: flex;
  justify-content: center;
}

form.cart .single_add_to_cart_button {
  margin-top: 0.5rem;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    color: #958e09;
    font-size: 2rem;
}






table.variations {
    display: none !important;
}
.jsm-swatch-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
  justify-content: center;
}

.jsm-swatch {
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  width: 90px;
  text-align: center;
  transition: all .15s ease;
}

.jsm-swatch img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.jsm-swatch .jsm-swatch-title {
  font-size: .75rem;
  padding: 4px;
  background: #f9f9f9;
}

.jsm-swatch.is-selected {
  outline: 2px solid #000;
  outline-offset: 1px;
}

.woocommerce div.product div.images img {
    display: block;
    width: auto;
    height: auto;
    box-shadow: none;
    max-height: 550px;
	
  float: none;
  display: inline-block;
  vertical-align: middle;	
}


/* ************* */







/* wrapper */
.center-products { --cols: 4; --gap: 24px; max-width:1200px; margin:0 auto; }

/* reset theme list spacing that can break the layout */
.center-products .products {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  padding-left: 0 !important;
  margin: 0 auto !important;
  list-style: none;
  box-sizing: border-box;
}

/* each product card = 1 of the columns (calc excludes total gaps) */
.center-products.center-columns-4 .products li.product {
  float: none !important;
  box-sizing: border-box;
  display: block !important;
  /* 3 gaps for 4 columns => total gap = 3 * 24px = 72px */
  width: calc((100% - 72px) / 4) !important;
  max-width: calc((100% - 72px) / 4) !important;
  margin: 0;
}

/* small screens */
@media (max-width: 900px) {
  .center-products.center-columns-4 .products li.product {
    width: calc((100% - 24px) / 2) !important;  /* 2 columns */
    max-width: calc((100% - 24px) / 2) !important;
  }
}
@media (max-width: 600px) {
  .center-products.center-columns-4 .products li.product {
    width: 100% !important;
    max-width: 100% !important;
  }
}


div.woocommerce-product-details__short-description ul li {
    text-align: left;
}