/*
 Theme Name:   Heavy for the Tropics
 Theme URI:    https://heavyforthetropics.com
 Author:       Richie Peers
 Author URI:   https://heavyforthetropics.com/
 Description:  A child-style theme with interactive video background & logo.
 Version:      1.0.0
 License:      GPL-2.0+
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  heavy-for-the-tropics
*/
section#size-guide {
    display: none;
}
@font-face {
	 font-family: 'Palm';
    src: url('./assets/fonts/kilogram-gvbo-webfont.woff2') format('woff2'),
         url('./assets/fonts/kilogram-gvbo-webfont.woff') format('woff'),
         url('./assets/fonts/kilogram-gvbo-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
p.stock.out-of-stock {
    display: none !important;
}
.hftt-get-on-bandcamp {
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    background: #000;
    /*padding: 10px 19px;*/
}
.hftt-get-on-bandcamp a {
    color: #FFF;
    text-decoration: none;
    padding: 14px 19px;
    display: block;
}
.hftt-get-on-bandcamp a:hover {
    background: #c85186;
}
/* only on the front‐page */
body.home {
  overflow: hidden;
  height: 100%;
  width: 100%;
  margin: 0;
}
body.home a.custom-logo-link {
    display: none;
}
/* everywhere else restores normal scrolling */
body:not(.home) {
  overflow: auto;
  height: auto;
  width: auto;
  margin: initial;
	    font-family: "Quicksand", sans-serif;
}
body:not(.home) #site-footer img, body:not(.home) #site-footer .footer-copyright {
    transition: 0.3s ease;
    filter: brightness(1) saturate(1);
    color: #000;
    margin-bottom: -30px;
    margin-top: 50px;
}
body:not(.home) footer#site-footer {
  position: relative;
}
#body:not(.home) #site-footer img,
body:not(.home) #site-footer .footer-copyright {
 transition: 0.3s ease;
    filter: brightness(1) saturate(1);
    color: #000;
    margin-bottom: 40px;
    font-family: 'Palm';
    letter-spacing: 1px;
}

body:not(.home) #site-footer {
  position: relative;
	    bottom: 0px;
}
body:not(.home) #site-footer img {
    filter: brightness(0) saturate(100%);
}
body:not(.home) button#site-menu-toggle .line {
    background: #000;
}
.site-branding {
    padding: 20px;
}
a.custom-logo-link img {
    width: 60px !important;
    position: fixed;
    z-index: 50;
    left: 40px;
}
h2.wp-block-heading.press {
    margin-top: 80px;
    border-top: 4px solid #000;
    padding-top: 40px;
    font-size: 17px;
}
h2.wp-block-heading.bandcamp-title {
	   margin-top: 80px;
    border-top: 4px solid #000;
    padding-top: 40px;
    font-size: 17px;
}
footer#site-footer {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    text-align: center;
    color: #FFF;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
	    z-index: 99;
}
.footer-social {
    margin-bottom: 20px;
}
.footer-social img {
    width: 39px;
}
body {
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin: 0;
}
video#bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
}
div#logo-container {
    width: 300px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 298px;
}
g {
    fill: white;
}
main#main-content {
    margin: 65px 40px;
}
/*bio*/
body.wp-singular.page-template-default.page {
    max-width: 1000px;
    margin: 0 auto;
}
iframe {
    width: 100%;
    /* height: auto; */
}
body.wp-singular.page-template-default.page.page-id-207 h2 {
    margin-top: 30px;
}
div#player {
    max-width: 100% !important;
}
figure.wp-block-image.size-full.bio-pic {
    margin-bottom: 23px;
}
body.wp-singular.page-template-default.page p {
    margin-bottom: 20px;
}
h2.wp-block-heading {
    font-family: 'Palm', serif;
    margin-bottom: 20px;
    letter-spacing: 2px;
    font-size: 40px;
    font-weight: normal;
}
figure.wp-block-image.size-full.bio-pic {
    margin-bottom: 12px;
}
/*bio-end*/
/* —————————————————
   Hamburger icon 
   (based on CSS-Tricks example)
   ————————————————— */
.menu-toggle {
     position: fixed;
        top: 40px;
    right: 40px;
    right: 40px;
    z-index: 1002;
    background: none;
    border: none;
    cursor: pointer;
}
.hamburger {
  display: inline-block;
  width: 2rem;
  height: 1.5rem;
  position: relative;
}
.line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.2rem;
  background: #fff; /* change to your logo color */
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
}
.line-1 { top: 0; }
.line-2 { top: 50%; transform: translateY(-50%); }
.line-3 { bottom: 0; }

/* — transform to “X” when open — */

.menu-toggle.open .line {
 background: #000;
}
.menu-toggle.open .line-1 {
  top: 50%; transform: translateY(-50%) rotate(45deg);
}
.menu-toggle.open .line-2 {
  opacity: 0;
}
.menu-toggle.open .line-3 {
  bottom: 50%; transform: translateY(50%) rotate(-45deg);
}
body:not(.home).menu-open footer#site-footer {
    position: fixed;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
	    z-index: 99;
}
/* ————————  
   Overlay menu  
   ———————— */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgb(255 255 255 / 95%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
  text-transform: uppercase;
  font-weight: bold;
}
.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.overlay-menu {
  list-style: none;
  text-align: center;
	  
}
.overlay-menu ul {
  list-style: none;
}
.overlay-menu li {
    margin: 1rem 0;
    font-family: 'Palm', serif;
    font-weight: normal;
	    letter-spacing: 2px;
}
.overlay-menu a {
    color: #000000;
    font-size: 2rem;
    text-decoration: none;
    transition: color 0.2s;
	font-size: 46px;
}
.overlay-menu a:hover {
  color: #f0f;
}
h2.woocommerce-loop-product__title {
    letter-spacing: 2px;
}
/* footer icons/text default (white) */
#site-footer img,
#site-footer .footer-copyright {
  transition: 0.3s ease;
  filter: brightness(1) saturate(1);
  color: #fff; /* for text */
	font-family: 'Palm';
    font-weight: normal;
    letter-spacing: 1px;
}
h1.product_title.entry-title {
    letter-spacing: 3px;
}
/* when menu is open, make them black */
body.menu-open #site-footer img {
  filter: brightness(0) saturate(100%);
}
body.menu-open #site-footer .footer-copyright {
  color: #000;
}
p.credits.has-small-font-size {
    font-size: 10px !important;
    text-align: right;
}
/* ———————————————
   1. Mini-nav above the title
   ——————————————— */
.hftt-product-nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0 1rem;
  text-transform: uppercase;
  font-size: .875rem;
}
.hftt-product-nav a {
  color: #000;
  text-decoration: none;
  position: relative;
  padding-bottom: .25rem;
  opacity: .6;
  transition: opacity .2s;
}
.hftt-product-nav a:hover,
.hftt-product-nav a.active {
  opacity: 1;
  font-weight: bold;
}
.hftt-product-nav a.active:after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: #000;
}

/* smooth scroll-offset so your headings aren’t swallowed by fixed headers: */
#overview,
#size-guide,
#shipping {
  scroll-margin-top: 120px;
}

/* ———————————————
   2. Quantity buttons
   ——————————————— */
.hftt-qty-buttons {
  display: flex;
  gap: .5rem;
  margin: 1rem 0;
}
.hftt-qty-btn {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  opacity: .5;
  transition: opacity .2s;
}
.hftt-qty-btn.active,
.hftt-qty-btn:hover {
  opacity: 1;
  font-weight: bold;
}

/* ———————————————
   3. Section headings (optional)
   ——————————————— */
#overview  h1, /* if you wrap your title in an #overview element */
#size-guide h2,
#shipping   h2 {
  text-transform: uppercase;
  font-size: .95rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}
#overview h2.hftt-section__title {
    text-transform: uppercase;
    font-size: .95rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}
.hftt-custom-sections section {
    margin-top: 28px;
}
.hftt-custom-sections section:first-child {
    margin-top: 0px!important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    z-index: 24!important;
}
/* Hide any unhooked size <select> just in case */
.hftt-size-options + select {
  display: none !important;
}
/* single-product */
h1.product_title.entry-title {
    font-family: 'Palm', serif;
}
.woocommerce .woocommerce-breadcrumb {
    margin: 0 0 1em;
    padding: 0;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
    color: #000;
}
.woocommerce .woocommerce-breadcrumb a {
    margin: 0 0 1em;
    padding: 0;
    text-transform: uppercase;
    font-weight: normal;
	color: #000;
	text-decoration: none;
}
.product_meta {
    color: #000;
    font-size: 10px;
    font-weight: bold;
}
.summary.entry-summary .woocommerce-product-details__short-description {
     display: none; 
}
/* container must be position:relative */
.hftt-image-swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
/* both images fill */
.hftt-image-swap img {
  display: block;
  width: 100%;
  height: auto;
}
h2.woocommerce-loop-product__title {
    font-family: 'Palm';
    color: #272727;
}
li.product.type-product .button {
    color: #FFF;
    text-transform: uppercase;
    border-radius: 0 !important;
    width: 100%;
    text-align: center;
    background: #000;
}
/* secondary sits exactly on top, but hidden */
.hftt-image-swap .secondary-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
/* on hover, fade primary out, secondary in */
.hftt-image-swap:hover .primary-image {
  opacity: 0;
}
.hftt-image-swap:hover .secondary-image {
  opacity: 1;
}
.hftt-image-swap {
  position: relative;
  overflow: hidden;
}
.hftt-image-swap img.hftt-swap-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
}
.hftt-image-swap img.hftt-swap-image.visible {
  position: relative;
  opacity: 1;
}
 @media only screen and (max-width: 768px) {
  .woocommerce #content div.product div.images,
  .woocommerce #content div.product div.summary,
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary,
  .woocommerce-page #content div.product div.images,
  .woocommerce-page #content div.product div.summary,
  .woocommerce-page div.product div.images,
  .woocommerce-page div.product div.summary {
    float: none;
    width: 100%;
    margin-top: 20px;
  }
main#main-content {
    margin: 40px;
	margin-top:60px;
}
  .woocommerce ul.products[class*=columns-] li.product,
  .woocommerce-page ul.products[class*=columns-] li.product {
    width: 100%;
    float: left;
    clear: both;
    margin: 0 0 2.992em;
  }

  .woocommerce div.product .product_title {
        clear: none;
        margin-top: 20px !important;
        font-size: 32px;
    }
}
.hftt-image-nav {
    text-align: left;
    margin-top: 1rem;
    float: right;
    clear: none;
    position: absolute;
    z-index: 40;
    margin-top: -50px;
}
.hftt-image-nav-btn {
background: none;
    border: 0px solid #ffffff;
    padding: 1em .8em;
    /* margin: 0 .2em; */
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
}
.hftt-image-nav-btn.active {
  background: #000;
  color: #fff;
}
/* on large screens, sit gallery and the secondary image side by side */
@media (min-width: 769px) {
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce-page div.product .woocommerce-product-gallery {
    width: 50%;
    float: left;
  }

  .hftt-secondary-image {
    width: 100%;
    float: left;
  }
  .hftt-secondary-image img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* on mobile stack them */
@media (max-width: 768px) {
  .woocommerce div.product .woocommerce-product-gallery,
  .hftt-secondary-image {
    width: 100%;
    float: none;
    margin-bottom: 1.5em;
  }
}
/* gap fix */

.single-product form.variations_form {
    display: flex
;
    gap: 0rem!important; 
    margin: 2rem 0;
}/*gap fix */