@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css);
@charset "UTF-8";
body {
  background-color: #000;
  font-family: "roc-grotesk";
}

img {
  max-width: 100%;
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #FF4E00, #FA6CAF);
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.5px;
  font-size: 2rem;
  font-weight: 500;
  padding: 5px 180px;
  border-radius: 50px;
  font-family: "roc-grotesk-extrawide";
  text-transform: uppercase;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.theme-btn:hover {
  text-decoration: none;
  color: #fff;
}

a:focus, a:focus-visible, a:active,
button:focus,
button:focus-visible,
button:active,
input:focus,
input:focus-visible,
input:active,
select:focus,
select:focus-visible,
select:active,
textarea:focus,
textarea:focus-visible,
textarea:active,
[tabindex]:focus,
[tabindex]:focus-visible,
[tabindex]:active {
  outline: none !important;
  box-shadow: none !important;
}

a:focus img,
a:focus-visible img {
  outline: none !important;
}

/* ============================================================
   Cart page  (matches the "YOUR CART" design mock)
   ============================================================ */
.woocommerce-cart {
  /* ---------- Cart table -> block/grid rows ---------- */
  /* ---------- Responsive ---------- */
}
.woocommerce-cart .site-content,
.woocommerce-cart #content,
.woocommerce-cart .content-area,
.woocommerce-cart .site-main,
.woocommerce-cart article {
  background: #000 !important;
}
.woocommerce-cart .site-main {
  padding-top: 40px;
  padding-bottom: 80px;
}
.woocommerce-cart .entry-title,
.woocommerce-cart .page-header .entry-title {
  font-family: "roc-grotesk-extrawide";
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 40px;
}
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .coupon,
.woocommerce-cart .return-to-shop {
  display: none;
}
.woocommerce-cart .woocommerce-cart-form {
  margin: 0;
}
.woocommerce-cart table.cart,
.woocommerce-cart table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  border-collapse: collapse;
  /* ---------- Totals + action buttons ---------- */
}
.woocommerce-cart table.cart thead,
.woocommerce-cart table.shop_table thead {
  display: none;
}
.woocommerce-cart table.cart tbody,
.woocommerce-cart table.shop_table tbody {
  display: block;
  width: 100%;
}
.woocommerce-cart table.cart tbody > tr,
.woocommerce-cart table.shop_table tbody > tr {
  display: block;
  width: 100%;
}
.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item,
.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 180px minmax(90px, auto);
  align-items: center;
  -moz-column-gap: 30px;
       column-gap: 30px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item:first-child,
.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td,
.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item td {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}
.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td::before,
.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item td::before {
  content: none !important;
}
.woocommerce-cart table.cart .product-thumbnail,
.woocommerce-cart table.shop_table .product-thumbnail {
  width: 90px;
}
.woocommerce-cart table.cart .product-thumbnail a,
.woocommerce-cart table.shop_table .product-thumbnail a {
  display: block;
}
.woocommerce-cart table.cart .product-thumbnail img,
.woocommerce-cart table.shop_table .product-thumbnail img {
  width: 90px;
  height: 90px;
  max-width: none;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 2px;
}
.woocommerce-cart table.cart .product-name,
.woocommerce-cart table.shop_table .product-name {
  color: #fff;
}
.woocommerce-cart table.cart .product-name .parent-product,
.woocommerce-cart table.shop_table .product-name .parent-product {
  display: block;
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  margin-bottom: 4px;
}
.woocommerce-cart table.cart .product-name .product-meta,
.woocommerce-cart table.shop_table .product-name .product-meta {
  font-family: "roc-grotesk";
  font-size: 14px;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.woocommerce-cart table.cart .product-name .price-row,
.woocommerce-cart table.shop_table .product-name .price-row {
  margin-top: 14px;
  font-family: "roc-grotesk";
  font-size: 15px;
  color: #fff;
}
.woocommerce-cart table.cart .product-name .price-row .amount,
.woocommerce-cart table.cart .product-name .price-row .woocommerce-Price-amount,
.woocommerce-cart table.shop_table .product-name .price-row .amount,
.woocommerce-cart table.shop_table .product-name .price-row .woocommerce-Price-amount {
  color: #fff;
}
.woocommerce-cart table.cart .product-quantity .qty-label,
.woocommerce-cart table.shop_table .product-quantity .qty-label {
  display: block;
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}
.woocommerce-cart table.cart .product-quantity .quantity,
.woocommerce-cart table.shop_table .product-quantity .quantity {
  position: relative;
  width: 132px;
  height: 62px;
}
.woocommerce-cart table.cart .product-quantity .quantity .qty,
.woocommerce-cart table.shop_table .product-quantity .quantity .qty {
  width: 100%;
  height: 62px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  color: #fff;
  text-align: left;
  padding: 0 54px 0 20px;
  font-size: 15px;
  font-family: "roc-grotesk";
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}
.woocommerce-cart table.cart .product-quantity .quantity .qty:focus,
.woocommerce-cart table.shop_table .product-quantity .quantity .qty:focus {
  outline: none;
  border-color: #fff;
}
.woocommerce-cart table.cart .product-quantity .quantity .qty::-webkit-outer-spin-button, .woocommerce-cart table.cart .product-quantity .quantity .qty::-webkit-inner-spin-button,
.woocommerce-cart table.shop_table .product-quantity .quantity .qty::-webkit-outer-spin-button,
.woocommerce-cart table.shop_table .product-quantity .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.woocommerce-cart table.cart .product-quantity .quantity .btn-wrap,
.woocommerce-cart table.shop_table .product-quantity .quantity .btn-wrap {
  position: absolute;
  top: 0;
  right: 0;
  height: 62px;
  width: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.woocommerce-cart table.cart .product-quantity .quantity .btn-wrap button,
.woocommerce-cart table.shop_table .product-quantity .quantity .btn-wrap button {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.2s ease;
}
.woocommerce-cart table.cart .product-quantity .quantity .btn-wrap button:hover,
.woocommerce-cart table.shop_table .product-quantity .quantity .btn-wrap button:hover {
  opacity: 0.65;
}
.woocommerce-cart table.cart .product-quantity .quantity .btn-wrap button:focus, .woocommerce-cart table.cart .product-quantity .quantity .btn-wrap button:focus-visible, .woocommerce-cart table.cart .product-quantity .quantity .btn-wrap button:active,
.woocommerce-cart table.shop_table .product-quantity .quantity .btn-wrap button:focus,
.woocommerce-cart table.shop_table .product-quantity .quantity .btn-wrap button:focus-visible,
.woocommerce-cart table.shop_table .product-quantity .quantity .btn-wrap button:active {
  outline: none;
  box-shadow: none;
}
.woocommerce-cart table.cart .product-quantity .quantity .btn-wrap button i,
.woocommerce-cart table.shop_table .product-quantity .quantity .btn-wrap button i {
  display: block;
}
.woocommerce-cart table.cart .product-subtotal,
.woocommerce-cart table.shop_table .product-subtotal {
  text-align: right;
  font-family: "roc-grotesk";
  font-size: 16px;
  color: #fff;
}
.woocommerce-cart table.cart .product-subtotal .amount,
.woocommerce-cart table.cart .product-subtotal .woocommerce-Price-amount,
.woocommerce-cart table.shop_table .product-subtotal .amount,
.woocommerce-cart table.shop_table .product-subtotal .woocommerce-Price-amount {
  color: #fff;
}
.woocommerce-cart table.cart .product-remove,
.woocommerce-cart table.shop_table .product-remove {
  display: none;
}
.woocommerce-cart table.cart tr.cart-actions-row,
.woocommerce-cart table.shop_table tr.cart-actions-row {
  display: block;
  border: 0;
}
.woocommerce-cart table.cart td.actions,
.woocommerce-cart table.shop_table td.actions {
  display: block;
  padding: 34px 0 0;
  border: 0;
  background: transparent;
}
.woocommerce-cart table.cart td.actions .cart-total,
.woocommerce-cart table.shop_table td.actions .cart-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 14px;
  margin-bottom: 26px;
  font-family: "roc-grotesk-extrawide";
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
}
.woocommerce-cart table.cart td.actions .cart-total__label,
.woocommerce-cart table.shop_table td.actions .cart-total__label {
  font-size: clamp(20px, 2.6vw, 30px);
}
.woocommerce-cart table.cart td.actions .cart-total__amount,
.woocommerce-cart table.shop_table td.actions .cart-total__amount {
  font-size: clamp(20px, 2.6vw, 30px);
}
.woocommerce-cart table.cart td.actions .cart-total__amount .amount,
.woocommerce-cart table.cart td.actions .cart-total__amount .woocommerce-Price-amount,
.woocommerce-cart table.shop_table td.actions .cart-total__amount .amount,
.woocommerce-cart table.shop_table td.actions .cart-total__amount .woocommerce-Price-amount {
  color: #fff;
}
.woocommerce-cart table.cart td.actions .cart-action-row,
.woocommerce-cart table.shop_table td.actions .cart-action-row {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 24px;
}
.woocommerce-cart table.cart td.actions .cart-update-btn,
.woocommerce-cart table.cart td.actions .checkout-button,
.woocommerce-cart table.shop_table td.actions .cart-update-btn,
.woocommerce-cart table.shop_table td.actions .checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 20px 40px;
  border-radius: 0 !important;
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
}
.woocommerce-cart table.cart td.actions .cart-update-btn,
.woocommerce-cart table.shop_table td.actions .cart-update-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}
.woocommerce-cart table.cart td.actions .cart-update-btn:hover,
.woocommerce-cart table.shop_table td.actions .cart-update-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.woocommerce-cart table.cart td.actions .cart-checkout,
.woocommerce-cart table.shop_table td.actions .cart-checkout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.woocommerce-cart table.cart td.actions .checkout-button,
.woocommerce-cart table.shop_table td.actions .checkout-button {
  background: linear-gradient(90deg, #FF4E00, #FA6CAF);
  border: none;
  color: #fff;
}
.woocommerce-cart table.cart td.actions .checkout-button:hover,
.woocommerce-cart table.shop_table td.actions .checkout-button:hover {
  opacity: 0.92;
  color: #fff;
}
.woocommerce-cart table.cart td.actions .checkout-button::after,
.woocommerce-cart table.shop_table td.actions .checkout-button::after {
  content: none !important;
}
.woocommerce-cart table.cart td.actions .cart-tax-note,
.woocommerce-cart table.shop_table td.actions .cart-tax-note {
  margin: 10px 0 0;
  font-family: "roc-grotesk";
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-align: right;
}
@media (max-width: 767.98px) {
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item,
  .woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "thumb name" "qty   subtotal";
    row-gap: 18px;
    -moz-column-gap: 18px;
         column-gap: 18px;
  }
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item .product-thumbnail,
  .woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item .product-thumbnail {
    grid-area: thumb;
    width: 72px;
  }
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item .product-thumbnail img,
  .woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item .product-thumbnail img {
    width: 72px;
    height: 72px;
  }
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item .product-name,
  .woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item .product-name {
    grid-area: name;
  }
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item .product-quantity,
  .woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item .product-quantity {
    grid-area: qty;
  }
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item .product-subtotal,
  .woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item .product-subtotal {
    grid-area: subtotal;
    align-self: center;
  }
  .woocommerce-cart table.cart td.actions .cart-action-row,
  .woocommerce-cart table.shop_table td.actions .cart-action-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .woocommerce-cart table.cart td.actions .cart-update-btn,
  .woocommerce-cart table.cart td.actions .checkout-button,
  .woocommerce-cart table.shop_table td.actions .cart-update-btn,
  .woocommerce-cart table.shop_table td.actions .checkout-button {
    min-width: 0;
    width: 100%;
  }
  .woocommerce-cart table.cart td.actions .cart-tax-note,
  .woocommerce-cart table.shop_table td.actions .cart-tax-note {
    text-align: center;
  }
  .woocommerce-cart table.cart td.actions .cart-total,
  .woocommerce-cart table.shop_table td.actions .cart-total {
    justify-content: flex-start;
  }
}
@media (max-width: 420px) {
  .woocommerce-cart table.cart .product-quantity .quantity,
  .woocommerce-cart table.shop_table .product-quantity .quantity {
    width: 108px;
  }
}

/* components */
.site-header {
  width: 100%;
  top: 0;
  left: 0;
  padding: 30px 30px;
  position: fixed;
  z-index: 999;
  border-bottom: 0;
  background: transparent;
}
.site-header .container-xl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header .menu-wrap {
  margin: 0;
  position: relative;
}
.site-header #menu {
  display: inline-flex;
  align-items: center;
  padding: 6px;
  border-radius: 0;
  border: 1px solid #fff;
  background: linear-gradient(90deg, #FF4E00 0%, #FA6CAF 100%);
  overflow: hidden;
  vertical-align: top;
  transition: box-shadow 0.45s ease;
}
.site-header #menu:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.site-header #menu:hover .nav-panel {
  max-width: 1200px;
  opacity: 1;
  transform: translateX(0);
}
.site-header #menu:hover .nav-toggle {
  width: 0;
  margin: 0;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}
.site-header .brand-logo {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  padding: 7px;
  margin: 0;
  border-radius: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.site-header .brand-logo img {
  width: 100%;
  height: auto;
  display: block;
}
.site-header .nav-toggle {
  flex: 0 0 auto;
  width: 56px;
  height: 44px;
  margin: 0 6px 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  transition: width 0.45s ease, margin 0.45s ease, opacity 0.3s ease, transform 0.3s ease;
}
.site-header .nav-toggle span {
  display: block;
  width: 42px;
  height: 5px;
  border-radius: 4px;
  background: #fff;
}
.site-header .nav-panel {
  display: flex;
  align-items: center;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transform: translateX(16px);
  transition: max-width 0.55s ease, opacity 0.45s ease 0.05s, transform 0.55s ease;
}
.site-header .main-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 6px 0 26px;
}
.site-header .main-menu li {
  margin: 0 16px;
}
.site-header .main-menu li a {
  color: #fff;
  font-family: "roc-grotesk-extrawide";
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.site-header .main-menu li a:hover {
  opacity: 0.72;
}
.site-header .social-menu {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 18px 0 10px;
}
.site-header .social-menu .social-link {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
  border: 2px solid #fff;
  border-radius: 50%;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.site-header .social-menu .social-link:hover {
  background-color: rgba(255, 255, 255, 0.18);
}
.site-header .social-menu .social-link i {
  font-size: 20px;
}
.site-header #menu.open .nav-panel {
  max-width: 1200px;
  opacity: 1;
  transform: translateX(0);
}
.site-header #menu.open .nav-toggle {
  width: 0;
  margin: 0;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}
.site-header .cart-wrap {
  width: 50px;
  flex: 0 0 auto;
  position: relative;
}
.site-header .cart-wrap .cart-item-count {
  width: 25px;
  height: 25px;
  display: block;
  font-size: 14px;
  right: -5px;
  bottom: -8px;
  padding: 3px 0;
  text-align: center;
  border-radius: 100px;
  background: #fff;
  position: absolute;
}
.site-header .site-header-cart li {
  float: right;
}
.site-header .site-header-cart li .cart-link {
  width: 35px;
  height: 40px;
  display: block;
  margin: 0px 0 0;
  background: url(../public/images/icon/cart-b.png) no-repeat center;
  background-size: 28px;
}

/* pages */
html:not(.fp-enabled) #myContainer {
  height: 100vh;
  overflow: hidden;
}
html:not(.fp-enabled) #myContainer > .section:not(.hero-section) {
  display: none;
}

.hero-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.hero-section > .slimScrollDiv,
.hero-section .fp-scrollable {
  width: 100% !important;
  height: 100% !important;
}
.hero-section .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-section .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.hero-section .hero-bg picture,
.hero-section .hero-bg img {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-section .hero-bg img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.hero-section .hero-bg .hero-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-section .hero-bg .hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-section .hero-bg .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  will-change: opacity;
}
.hero-section .hero-bg .hero-video.is-active {
  opacity: 1;
}
.hero-section .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 360px 15px 0;
}
.hero-section .hero-content .hero-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-section .hero-content .hero-text-wrap .hero-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  font-family: "roc-grotesk-extrawide";
  letter-spacing: 0px;
  background: linear-gradient(90deg, #FF4E00, #FA6CAF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-section .hero-content .hero-text-wrap .hero-date {
  font-size: 1.4rem;
  letter-spacing: 0px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-family: "roc-grotesk-extrawide";
  margin-bottom: 32px;
}
.hero-section .hero-content .hero-text-wrap .hero-sub {
  margin-top: 15px;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
  text-transform: uppercase;
  font-family: "roc-grotesk-extrawide";
}
.hero-section .hero-content .hero-text-wrap .theme-btn {
  margin-top: 40px;
  margin-bottom: 20px;
}
.hero-section .hero-content .hero-text-wrap .hero-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}
.hero-section .hero-content .hero-text-wrap .hero-links .hero-link {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-family: "roc-grotesk";
  transition: opacity 0.3s ease;
}
.hero-section .hero-content .hero-text-wrap .hero-links .hero-link:hover {
  opacity: 0.7;
}

.about-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-family: "roc-grotesk";
  background: linear-gradient(165deg, #FF4E00 0%, #FA6CAF 100%);
}
.about-section,
.about-section h1, .about-section h2, .about-section h3, .about-section h4, .about-section h5, .about-section h6,
.about-section p, .about-section span, .about-section a, .about-section li {
  color: #000;
}
.about-section .about-container {
  width: 100%;
  margin: 0 auto;
  padding: 180px 15px;
}
.about-section .about-container .about-inner {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 90px;
}
.about-section .about-container .about-inner .about-col-left {
  flex: 1 1 52%;
  min-width: 0;
}
.about-section .about-container .about-inner .about-col-left .about-eyebrow {
  display: block;
  font-family: "roc-grotesk-extrawide";
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.about-section .about-container .about-inner .about-col-left .about-title {
  font-family: "roc-grotesk-extrawide";
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 0.98;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 28px;
}
.about-section .about-container .about-inner .about-col-left .about-subtitle {
  font-family: "roc-grotesk-extrawide";
  font-weight: 400;
  font-size: clamp(12px, 1.5vw, 18px);
  letter-spacing: -1.5px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.about-section .about-container .about-inner .about-col-left .about-text {
  font-family: "roc-grotesk";
  font-size: 16px;
  line-height: 1.5;
  max-width: 620px;
  margin: 0 0 30px;
}
.about-section .about-container .about-inner .about-col-left .about-contact-label {
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.about-section .about-container .about-inner .about-col-left .about-email {
  display: inline-block;
  font-family: "roc-grotesk";
  font-size: 17px;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}
.about-section .about-container .about-inner .about-col-left .about-email:hover {
  opacity: 0.7;
}
.about-section .about-container .about-inner .about-col-right {
  flex: 1 1 43%;
  min-width: 0;
}
.about-section .about-container .about-inner .about-col-right .about-why-title {
  font-family: "roc-grotesk-extrawide";
  font-weight: 600;
  font-size: clamp(16px, 2vw, 18px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 30px;
}
.about-section .about-container .about-inner .about-col-right .about-feature {
  margin-bottom: 24px;
}
.about-section .about-container .about-inner .about-col-right .about-feature:last-child {
  margin-bottom: 0;
}
.about-section .about-container .about-inner .about-col-right .about-feature h4 {
  font-family: "roc-grotesk-extrawide";
  font-weight: 400;
  font-size: clamp(14px, 1.5vw, 16px);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin: 0 0 9px;
}
.about-section .about-container .about-inner .about-col-right .about-feature p {
  font-family: "roc-grotesk";
  font-size: 16px;
  line-height: 1.45;
  max-width: 420px;
  margin: 0;
}

.venues-section {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  background: #000;
  color: #fff;
  padding: 0 !important;
  overflow: hidden;
}
.venues-section > .slimScrollDiv {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.venues-section .fp-scrollable {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}
.venues-section .venues-container {
  width: 100%;
  height: calc(100% - 200px);
  display: flex;
  align-items: center;
}
.venues-section .venues-container .venues-main {
  width: 100%;
  padding: 20px 15px;
}
.venues-section .venues-container .venues-main .venues-inner {
  width: 100%;
}
.venues-section .venues-container .venues-main .venues-inner .venues-title {
  font-family: "roc-grotesk-extrawide";
  font-weight: 800;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 56px;
}
.venues-section .venues-container .venues-main .venues-inner .venues-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 60px;
       column-gap: 60px;
  row-gap: 44px;
}
.venues-section .venues-container .venues-main .venues-inner .venues-grid .venue-item .venue-name {
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 8px;
}
.venues-section .venues-container .venues-main .venues-inner .venues-grid .venue-item .venue-address {
  font-family: "roc-grotesk";
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
  max-width: 420px;
  margin: 0;
}
.venues-section .venues-logos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  background: #fff;
  padding: 50px 0;
}
.venues-section .venues-logos .venues-logos-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.venues-section .venues-logos .venues-logos-row .venue-logo {
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: 100px;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.divisions-section {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, #FF4E00 0%, #E1533A 32%, #C95E6B 66%, #C46B9B 100%);
  color: #0d0d0d;
}
.divisions-section > .slimScrollDiv,
.divisions-section .fp-scrollable {
  width: 100% !important;
  height: 100% !important;
}
.divisions-section .fp-scrollable {
  display: flex !important;
  align-items: center;
  min-height: 100%;
  overflow: hidden !important;
}
.divisions-section .divisions-container {
  width: 100%;
  padding: 16px 15px;
  box-sizing: border-box;
}
.divisions-section .divisions-title {
  font-family: "roc-grotesk-extrawide";
  font-weight: 800;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #0d0d0d;
  margin: 0 0 20px;
}
.divisions-section .divisions-table {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.55);
}
.divisions-section .divisions-table > * + * {
  border-top: 1px solid rgba(0, 0, 0, 0.55);
}
.divisions-section .dt-band {
  font-family: "roc-grotesk-extrawide";
  font-weight: 800;
  font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  color: #0d0d0d;
  padding: 10px 16px;
}
.divisions-section .dt-youth {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.divisions-section .dt-youth .dt-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 16px;
}
.divisions-section .dt-youth .dt-cell:not(:nth-child(4n)) {
  border-right: 1px solid rgba(0, 0, 0, 0.55);
}
.divisions-section .dt-youth .dt-cell:nth-child(-n+8) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
}
.divisions-section .dt-youth .dt-cell--age {
  padding: 22px 16px;
}
.divisions-section .dt-youth .dt-cell--age .dt-age {
  font-family: "roc-grotesk-extrawide";
  font-weight: 800;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #0d0d0d;
  margin-bottom: 8px;
}
.divisions-section .dt-youth .dt-cell--age .dt-age-desc {
  font-family: "roc-grotesk";
  font-size: 15px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.82);
  max-width: 240px;
  margin: 0;
}
.divisions-section .dt-youth .dt-cell--grade {
  font-family: "roc-grotesk";
  font-size: clamp(14px, 1.3vw, 16px);
  color: rgba(0, 0, 0, 0.82);
  min-height: 42px;
}

/* =========================================================
   SAS SLAM Merchandise — product carousel
   ========================================================= */
/* Homepage merchandise section */
.merch-section {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  background: #000;
  scroll-margin-top: 120px;
  padding: 0 !important;
  /*
   * Center the content vertically so the section reads as a full panel when
   * fullPage scrolls to it — matching the About / Divisions sections above.
   * Without this the heading and carousel cling to the top and leave a large
   * empty black gap below. (When the content overflows a short viewport,
   * fullPage builds a .fp-scrollable wrapper which does its own centering
   * below, so this stays safe.)
   */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*
   * fullPage.js generates these wrappers.
   * Make them fill the complete section.
   */
  /*
   * Main Bootstrap container
   */
}
.merch-section > .slimScrollDiv {
  width: 100% !important;
  height: 100% !important;
}
.merch-section .fp-scrollable {
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  overflow: hidden !important;
}
.merch-section > .container,
.merch-section .fp-scrollable > .container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 40px;
}
.merch-section .product-card .product-info .price {
  font-size: clamp(15px, 1.3vw, 20px);
}
.merch-section .page-head {
  margin-bottom: 30px;
}
.merch-section .page-head .title {
  font-size: clamp(22px, 2vw, 30px);
}

/*
 * Standalone merchandise page
 */
.top-margin-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 80px;
  background: radial-gradient(120% 120% at 50% 0%, #232323 0%, #141414 45%, #000 100%);
}

.page-head {
  margin-bottom: 40px;
}
.page-head .title {
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: 1px;
  margin: 0;
}

.product-range {
  position: relative;
}

/* --- Slick carousel --- */
.merch-carousal {
  position: relative;
  padding: 0 62px;
}
.merch-carousal .slick-list {
  margin: 0 -12px;
}
.merch-carousal .slick-track {
  display: flex;
  align-items: stretch;
}
.merch-carousal .slick-slide {
  height: auto;
}
.merch-carousal .slick-slide > div {
  height: 100%;
}

.merch-slide {
  padding: 0 12px;
  height: 100%;
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: #fff;
}
.product-card:hover {
  text-decoration: none;
  color: #fff;
}
.product-card:hover .product-image img {
  transform: scale(1.03);
}
.product-card .product-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: #2a2a2a;
}
.product-card .product-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.product-card .product-info {
  text-align: center;
  padding: 22px 8px 0;
}
.product-card .product-info .product-name {
  font-family: "roc-grotesk";
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  font-size: clamp(15px, 1.3vw, 19px);
  margin: 0 0 8px;
}
.product-card .product-info .price {
  display: block;
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  color: #fff;
  font-size: clamp(20px, 1.7vw, 26px);
}
.product-card .product-info .price .woocommerce-Price-amount {
  white-space: nowrap;
}
.product-card .product-info .price del {
  opacity: 0.5;
  font-weight: 500;
  margin-right: 8px;
}
.product-card .product-info .price ins {
  text-decoration: none;
}

/* --- Arrows --- */
.merch-arrow {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  transition: opacity 0.25s ease;
  opacity: 0.85;
}
.merch-arrow:hover {
  opacity: 1;
  background: #000;
  color: #fff;
}
.merch-arrow.slick-disabled {
  opacity: 0.28;
  cursor: default;
  pointer-events: none;
}
.merch-arrow--prev {
  left: 6px;
}
.merch-arrow--next {
  right: 6px;
}

/* --- Dots --- */
.merch-carousal .slick-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
.merch-carousal .slick-dots li {
  width: 12px;
  height: 12px;
}
.merch-carousal .slick-dots li button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #555;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transition: background 0.25s ease;
}
.merch-carousal .slick-dots li.slick-active button {
  background: #fff;
}

/* --- Men / Women tabs --- */
.merch-nav-wrap {
  margin-top: 48px;
}
.merch-nav-wrap .merch-nav {
  display: flex;
  justify-content: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.merch-nav-wrap .merch-nav li a {
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 18px;
  transition: color 0.25s ease;
}
.merch-nav-wrap .merch-nav li a:hover {
  color: #fff;
}
.merch-nav-wrap .merch-nav li.active a {
  color: #fff;
}

/* =========================================================
   Single product page — matches merch product design
   ========================================================= */
.single-product {
  background: radial-gradient(120% 100% at 50% 0%, #232323 0%, #141414 45%, #000 100%);
}
.single-product #primary.content-area {
  padding-top: 150px;
  padding-bottom: 90px;
}
.single-product div.product {
  margin: 0 auto;
  max-width: 1400px !important;
}
.single-product div.product > .row {
  align-items: flex-start;
}

/* ---------- Gallery (left) — two large images with a next arrow ---------- */
.single-product div.product .woocommerce-product-gallery {
  position: relative;
  float: none !important;
  width: 100% !important;
  margin: 0;
  opacity: 1 !important;
  /* Next / prev arrows */
  /* Hide flexslider / lightbox leftovers */
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
  width: 100%;
  transform: none;
}
.single-product div.product .woocommerce-product-gallery .slick-list {
  margin: 0 -8px;
}
.single-product div.product .woocommerce-product-gallery .slick-track {
  display: flex;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  padding: 0 8px;
  margin: 0 !important;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  -o-object-fit: cover;
  object-fit: cover;
}
.single-product div.product .woocommerce-product-gallery .pg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  opacity: 0.9;
}
.single-product div.product .woocommerce-product-gallery .pg-arrow:hover {
  opacity: 1;
}
.single-product div.product .woocommerce-product-gallery .pg-arrow.slick-disabled {
  opacity: 0;
  pointer-events: none;
}
.single-product div.product .woocommerce-product-gallery .pg-arrow--prev {
  left: -46px;
}
.single-product div.product .woocommerce-product-gallery .pg-arrow--next {
  right: -46px;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs,
.single-product div.product .woocommerce-product-gallery .flex-viewport ~ .flex-control-nav,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  display: none;
}

/* ---------- Custom gallery: two large cards + thumbnail row ---------- */
.single-product .product-gallery {
  width: 100%;
  /* Mobile: show one large image, keep every image reachable via thumbnails */
}
.single-product .product-gallery .product-gallery-main {
  display: flex;
  gap: 16px;
  /* only one image → let it fill the row */
}
.single-product .product-gallery .product-gallery-main .product-main-image,
.single-product .product-gallery .product-gallery-main .product-secondary-image {
  flex: 1 1 50%;
  min-width: 0;
}
.single-product .product-gallery .product-gallery-main .product-main-image:only-child {
  flex-basis: 100%;
}
.single-product .product-gallery .product-gallery-main img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  -o-object-fit: cover;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.single-product .product-gallery .product-gallery-thumbnails {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-bottom: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}
.single-product .product-gallery .product-gallery-thumbnails::-webkit-scrollbar {
  height: 6px;
}
.single-product .product-gallery .product-gallery-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
}
.single-product .product-gallery .product-thumbnail {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.7;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.single-product .product-gallery .product-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.single-product .product-gallery .product-thumbnail:hover {
  opacity: 1;
}
.single-product .product-gallery .product-thumbnail.active {
  border-color: #fff;
  opacity: 1;
}
@media (max-width: 767px) {
  .single-product .product-gallery .product-gallery-main .product-secondary-image {
    display: none;
  }
  .single-product .product-gallery .product-gallery-main .product-main-image {
    flex-basis: 100%;
  }
  .single-product .product-gallery .product-thumbnail {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }
}

/* ---------- Summary (right) ---------- */
/* Storefront floats the summary right at ~48% width — make it fill its column. */
.single-product div.product .entry-summary {
  float: none !important;
  width: 100% !important;
  margin: 0;
}

.single-product .entry-summary {
  color: #fff;
  padding-left: 20px;
}
.single-product .entry-summary .product_title {
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(22px, 1.9vw, 32px);
  line-height: 1.05;
  letter-spacing: 0.5px;
  margin: 0 0 10px;
  color: #fff;
}
.single-product .entry-summary p.price {
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 24px);
  color: #fff;
  margin: 0 0 26px;
}
.single-product .entry-summary p.price .woocommerce-Price-amount {
  color: #fff;
}
.single-product .entry-summary p.price del {
  opacity: 0.5;
  font-weight: 500;
}
.single-product .entry-summary p.price ins {
  text-decoration: none;
}
.single-product .entry-summary .zip-note {
  font-family: "roc-grotesk";
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  margin: -14px 0 22px;
}

/* ---------- Sizes header (Select Sizes / Size Guide) ---------- */
.single-product .sizes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.single-product .sizes-head__title {
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(16px, 1.4vw, 20px);
  color: #fff;
}

.single-product #size-chart-open.size-guide-link {
  font-family: "roc-grotesk";
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.single-product #size-chart-open.size-guide-link:hover {
  color: #fff;
}

/* ---------- Variation buttons ---------- */
.single-product .variations_form .variations {
  width: 100%;
  margin: 0 0 8px;
  border: none;
  /* header row is handled by .sizes-head — hide Woo's per-row labels */
}
.single-product .variations_form .variations tbody,
.single-product .variations_form .variations tr,
.single-product .variations_form .variations td,
.single-product .variations_form .variations th {
  display: block;
  border: none;
  padding: 0;
  background: none;
}
.single-product .variations_form .variations tr {
  margin-bottom: 18px;
}
.single-product .variations_form .variations .label {
  display: none;
}
.single-product .variations_form .variations select {
  display: none;
}
.single-product .variations_form .variations .reset_variations {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
}
.single-product .variations_form .variations .reset_variations:hover {
  color: #fff;
}
.single-product .variations_form .attr-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.single-product .variations_form .attr-btn {
  min-width: 52px;
  height: 52px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  color: #fff;
  font-family: "roc-grotesk";
  font-weight: 500;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.single-product .variations_form .attr-btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.single-product .variations_form .attr-btn.active {
  border-color: #fff;
  background: #fff;
  color: #111;
}

/* ---------- Product data (style code, description, colour) ---------- */
.single-product .product-data-wrap {
  margin: 26px 0 30px;
}
.single-product .product-data-wrap .style-code {
  font-family: "roc-grotesk";
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
  color: #fff;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin: 0 0 16px;
}
.single-product .product-data-wrap .description {
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 18px;
}
.single-product .product-data-wrap .description p {
  margin: 0;
}
.single-product .product-data-wrap .product-data {
  font-family: "roc-grotesk";
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
  color: #fff;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin: 0;
}

/* ---------- Quantity + Add to cart ---------- */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart {
  margin-top: 30px;
  /* Use the site theme button style, at a smaller compact size */
}
.single-product .woocommerce-variation-add-to-cart .quantity,
.single-product form.cart .quantity {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 16px;
}
.single-product .woocommerce-variation-add-to-cart .quantity .qty,
.single-product form.cart .quantity .qty {
  width: 100%;
  height: 58px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-family: "roc-grotesk";
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}
.single-product .woocommerce-variation-add-to-cart .quantity .qty:focus, .single-product .woocommerce-variation-add-to-cart .quantity .qty:focus-visible, .single-product .woocommerce-variation-add-to-cart .quantity .qty:active,
.single-product form.cart .quantity .qty:focus,
.single-product form.cart .quantity .qty:focus-visible,
.single-product form.cart .quantity .qty:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, 0.4);
}
.single-product .woocommerce-variation-add-to-cart .quantity .qty::-webkit-outer-spin-button, .single-product .woocommerce-variation-add-to-cart .quantity .qty::-webkit-inner-spin-button,
.single-product form.cart .quantity .qty::-webkit-outer-spin-button,
.single-product form.cart .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.single-product .woocommerce-variation-add-to-cart .quantity .btn-wrap,
.single-product form.cart .quantity .btn-wrap {
  position: absolute;
  top: 0;
  right: 0;
  height: 58px;
  width: 46px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.single-product .woocommerce-variation-add-to-cart .quantity .btn-wrap button,
.single-product form.cart .quantity .btn-wrap button {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.single-product .woocommerce-variation-add-to-cart .quantity .btn-wrap button:hover,
.single-product form.cart .quantity .btn-wrap button:hover {
  color: #fff;
}
.single-product .woocommerce-variation-add-to-cart .quantity .btn-wrap button:focus, .single-product .woocommerce-variation-add-to-cart .quantity .btn-wrap button:focus-visible, .single-product .woocommerce-variation-add-to-cart .quantity .btn-wrap button:active,
.single-product form.cart .quantity .btn-wrap button:focus,
.single-product form.cart .quantity .btn-wrap button:focus-visible,
.single-product form.cart .quantity .btn-wrap button:active {
  outline: none;
  box-shadow: none;
}
.single-product .woocommerce-variation-add-to-cart .quantity .btn-wrap button.plus,
.single-product form.cart .quantity .btn-wrap button.plus {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.single-product form.cart .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  background: linear-gradient(90deg, #FF4E00, #FA6CAF);
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.5px;
  font-family: "roc-grotesk-extrawide";
  font-weight: 500;
  text-transform: uppercase;
  font-size: 18px;
  padding: 10px 48px;
  border-radius: 0px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover,
.single-product form.cart .single_add_to_cart_button:hover {
  filter: brightness(1.06);
  text-decoration: none;
  color: #fff;
}
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button:active,
.single-product form.cart .single_add_to_cart_button:active {
  transform: translateY(1px);
}
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.disabled, .single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.wc-variation-selection-needed,
.single-product form.cart .single_add_to_cart_button.disabled,
.single-product form.cart .single_add_to_cart_button.wc-variation-selection-needed {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Total ---------- */
.single-product #selected-variation-price {
  display: none;
  margin-top: 22px;
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(18px, 1.6vw, 22px);
  color: #fff;
}
.single-product #selected-variation-price span {
  color: #fff;
}

/* Hide the reset-alert helper spacing */
.single-product .reset_variations_alert {
  margin: 0;
}

/* ---------- Size chart modal ---------- */
.single-product .size-chart-wrap {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.85);
  overflow-y: auto;
  padding: 60px 20px;
}
.single-product .size-chart-wrap .wrap-head {
  position: relative;
  max-width: 900px;
  margin: 0 auto 20px;
  text-align: center;
  color: #fff;
}
.single-product .size-chart-wrap .wrap-head h4 {
  font-family: "roc-grotesk-extrawide";
  text-transform: uppercase;
  margin: 0;
}
.single-product .size-chart-wrap .wrap-head .sub-title {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
.single-product .size-chart-wrap .wrap-head #chart-close {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
.single-product .size-chart-wrap .size-chart,
.single-product .size-chart-wrap .note {
  max-width: 900px;
  margin: 0 auto 24px;
  color: #fff;
}
.single-product .size-chart-wrap .size-chart .table,
.single-product .size-chart-wrap .note .table {
  color: #fff;
}
.single-product .size-chart-wrap .size-chart .table th,
.single-product .size-chart-wrap .size-chart .table td,
.single-product .size-chart-wrap .note .table th,
.single-product .size-chart-wrap .note .table td {
  border-color: rgba(255, 255, 255, 0.2);
  font-size: 13px;
}
.single-product .size-chart-wrap .note {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

/* =========================================================
   Desktop layout (≥992px) — wide product-information panel
   with only a small gap next to the gallery. Mobile/tablet
   keep the stacked Bootstrap columns untouched.
   ========================================================= */
@media (min-width: 992px) {
  .single-product div.product > .row {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(360px, 1fr);
    -moz-column-gap: 30px;
         column-gap: 30px;
    align-items: start;
    /* neutralise Bootstrap's .row negative gutters so the grid aligns */
    margin-left: 0;
    margin-right: 0;
  }
  /* stop Bootstrap col widths/padding from overriding the grid tracks */
  .single-product div.product > .row > [class*=col-] {
    width: auto;
    max-width: none;
    flex: none;
    padding-left: 0;
    padding-right: 0;
  }
  /* the info panel now owns the full track width — no extra inset needed */
  .single-product .entry-summary {
    padding-left: 0;
  }
  /* title/price should read on their natural line, not wrap in a narrow col */
  .single-product .entry-summary .product_title {
    white-space: nowrap;
  }
  .single-product .entry-summary p.price {
    white-space: nowrap;
  }
  /* keep the gallery arrows inside the gallery track so the 30px gap stays clean */
  .single-product div.product .woocommerce-product-gallery .pg-arrow--prev {
    left: 6px;
  }
  .single-product div.product .woocommerce-product-gallery .pg-arrow--next {
    right: 6px;
  }
}
/* =========================================================
   Checkout — dark two-column layout (design match)
   ========================================================= */
.woocommerce-checkout {
  background: #000;
  /* Storefront prints a page "Checkout" title — hide it, the design has none */
  /* neutralise Bootstrap's nested-row gutters so nothing overflows
     (only the inner rows inside the columns — not the outer form/review cols) */
}
.woocommerce-checkout #primary.content-area {
  padding-top: 130px;
  padding-bottom: 90px;
}
.woocommerce-checkout .entry-header,
.woocommerce-checkout .page-title,
.woocommerce-checkout #order_review_heading + .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  display: none;
}
.woocommerce-checkout .col-full,
.woocommerce-checkout .site-main {
  max-width: 1280px;
  margin: 0 auto;
}
.woocommerce-checkout .form-col .row,
.woocommerce-checkout .review-col .row {
  margin-left: 0;
  margin-right: 0;
}
.woocommerce-checkout .form-col .row div[class*=col-],
.woocommerce-checkout .review-col .row div[class*=col-] {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 991px) {
  .woocommerce-checkout .site-main {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}

/* ---------- Two columns (explicit widths — don't depend on Bootstrap CDN) ---------- */
.woocommerce-checkout .checkout > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0;
}
.woocommerce-checkout .form-col {
  flex: 0 0 62%;
  max-width: 62%;
  padding: 0 40px 0 0;
}
.woocommerce-checkout .review-col {
  flex: 0 0 38%;
  max-width: 38%;
  padding: 0;
}
@media (max-width: 991px) {
  .woocommerce-checkout .form-col,
  .woocommerce-checkout .review-col {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
  }
}

/* ---------- Section headings ---------- */
.woocommerce-checkout {
  /* space between major blocks */
}
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  font-size: 20px;
  margin: 0 0 20px;
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .pickup-location-field-col,
.woocommerce-checkout #customer_details .col-md-12 > h3:first-child {
  margin-top: 34px;
}
.woocommerce-checkout .woocommerce-billing-fields {
  margin-top: 0;
}

/* DELIVERY sub-heading between the contact and delivery field groups */
.woocommerce-checkout .delivery-heading {
  margin-top: 30px;
}

.woocommerce-checkout .contact-fields {
  margin-bottom: 4px;
}

/* ---------- Form fields ---------- */
.woocommerce-checkout {
  /* hide the field labels — the design uses placeholders only */
  /* native select arrow + text colour */
  /* select2 (country) parity */
  /* checkbox rows (newsletter, billing toggle) */
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.woocommerce-checkout .form-row {
  margin: 0 0 0;
  padding: 0;
  float: none !important;
  width: 100%;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  width: calc(50% - 8px);
}
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout #order_comments_field {
  width: 100%;
}
.woocommerce-checkout .form-row > label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.woocommerce-checkout .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection {
  width: 100%;
  height: 54px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  color: #fff;
  font-family: "roc-grotesk";
  font-size: 15px;
  padding: 0 16px;
  transition: border-color 0.2s ease;
}
.woocommerce-checkout input.input-text::-moz-placeholder, .woocommerce-checkout textarea::-moz-placeholder, .woocommerce-checkout select::-moz-placeholder, .woocommerce-checkout .select2-container .select2-selection::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
}
.woocommerce-checkout input.input-text::placeholder,
.woocommerce-checkout textarea::placeholder,
.woocommerce-checkout select::placeholder,
.woocommerce-checkout .select2-container .select2-selection::placeholder {
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout .select2-container .select2-selection:focus {
  outline: none;
  border-color: #fff;
  box-shadow: none;
}
.woocommerce-checkout textarea {
  height: 110px;
  padding: 14px 16px;
  resize: vertical;
}
.woocommerce-checkout select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.woocommerce-checkout select option {
  color: #111;
}
.woocommerce-checkout .select2-container .select2-selection--single {
  height: 54px;
  display: flex;
  align-items: center;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  color: #fff;
  line-height: normal;
  padding: 0;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  height: 52px;
}
.woocommerce-checkout .form-row label.checkbox,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-family: "roc-grotesk";
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
  cursor: pointer;
}
.woocommerce-checkout .form-row label.checkbox .optional,
.woocommerce-checkout .woocommerce-form__label-for-checkbox .optional {
  color: rgba(255, 255, 255, 0.4);
}
.woocommerce-checkout input.input-checkbox,
.woocommerce-checkout input[type=checkbox],
.woocommerce-checkout input[type=radio] {
  width: 18px;
  height: 18px;
  accent-color: #FF4E00;
  margin: 0;
  flex: 0 0 auto;
}
.woocommerce-checkout .required {
  display: none;
}

/* ---------- Shipping method options ---------- */
.woocommerce-checkout #shipping_method,
.woocommerce-checkout .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.woocommerce-checkout #shipping_method li,
.woocommerce-checkout .woocommerce-shipping-methods li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #fff;
}
.woocommerce-checkout #shipping_method li label,
.woocommerce-checkout .woocommerce-shipping-methods li label {
  font-family: "roc-grotesk";
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
  margin: 0;
  cursor: pointer;
}
.woocommerce-checkout #shipping_method li .amount,
.woocommerce-checkout .woocommerce-shipping-methods li .amount {
  margin-left: auto;
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
}

/* ---------- Order summary (right column) ---------- */
/* Storefront floats #order_review + heading right at ~48% — make them full width */
.woocommerce-checkout .review-col #order_review_heading,
.woocommerce-checkout .review-col #order_review,
.woocommerce-checkout .review-col .woocommerce-checkout-review-order {
  float: none !important;
  width: 100% !important;
  clear: none !important;
}

.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: none;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  display: block;
  width: 100%;
  border: none !important;
  background: transparent !important;
  margin: 0;
  /* totals */
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead {
  display: none;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot {
  display: block;
  width: 100%;
  background: transparent !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 0 20px;
  background: transparent !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td {
  display: block;
  border: none !important;
  padding: 0;
  vertical-align: top;
  background: transparent !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail {
  flex: 0 0 64px;
  width: 64px;
  /* suppress any stray warning markup */
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail br,
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail b {
  display: none;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail img {
  width: 64px;
  height: 64px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
  flex: 1 1 auto;
  color: #fff;
  font-family: "roc-grotesk";
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name .parent-product {
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  margin: 0 0 4px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name .item-name {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 4px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name .item-name .product-quantity {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name .variation {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name .variation dt,
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name .variation dd {
  display: inline;
  margin: 0;
  font-weight: 400;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name .variation dd {
  margin-right: 8px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  color: #fff;
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  white-space: nowrap;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot {
  /* spacer row */
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  display: block;
  border: none;
  background: transparent !important;
  padding: 14px 0;
  color: #fff;
  font-family: "roc-grotesk";
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
  font-weight: 600;
  text-align: left;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  text-align: right;
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .cart-subtotal,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .shipping-cost,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:first-child {
  display: none;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
  font-size: 16px;
}

/* ---------- Payment + Pay Now ---------- */
.woocommerce-checkout {
  /* kill WooCommerce/Storefront default light backgrounds on the payment box */
}
.woocommerce-checkout #payment,
.woocommerce-checkout #payment.woocommerce-checkout-payment {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.woocommerce-checkout .wc_payment_methods {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  background: transparent !important;
}
.woocommerce-checkout .wc_payment_methods li {
  color: #fff;
  background: transparent !important;
}
.woocommerce-checkout .place-order {
  margin: 24px 0 0;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.woocommerce-checkout .place-order #place_order {
  display: block;
  width: 100%;
  border: none;
  border-radius: 0 !important;
  padding: 18px 20px;
  background: linear-gradient(90deg, #FF4E00, #FA6CAF);
  color: #fff;
  font-family: "roc-grotesk-extrawide";
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 20px;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.woocommerce-checkout .place-order #place_order:hover {
  filter: brightness(1.06);
}

/* ---------- Payment badges ---------- */
.woocommerce-checkout .payimg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 24px;
}
.woocommerce-checkout .payimg .pay-visa {
  font-family: "roc-grotesk-extrawide";
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  color: #1a1f71;
  background: #fff;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 1px;
}
.woocommerce-checkout .payimg .pay-mc {
  display: inline-flex;
}
.woocommerce-checkout .payimg .pay-mc span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
}
.woocommerce-checkout .payimg .pay-mc span:first-child {
  background: #eb001b;
}
.woocommerce-checkout .payimg .pay-mc span:last-child {
  background: #f79e1b;
  margin-left: -8px;
  mix-blend-mode: screen;
}
.woocommerce-checkout .payimg .pay-a2a {
  font-family: "roc-grotesk";
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}
.woocommerce-checkout .payimg .pay-a2a span {
  color: #FF4E00;
}

/* ---------- Notices ---------- */
.woocommerce-checkout {
  /* the "no payment methods" placeholder — transparent on the dark canvas */
}
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error {
  border-radius: 0;
  font-family: "roc-grotesk";
  font-size: 14px;
}
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .wc_payment_methods .woocommerce-info {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: none !important;
  /* Storefront/Woo add a coloured left/top bar + icon — drop them */
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .wc_payment_methods .woocommerce-info::before {
  color: rgba(255, 255, 255, 0.5);
}
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .wc_payment_methods .woocommerce-info a {
  color: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .woocommerce-checkout .checkout > .row {
    gap: 30px;
  }
  .woocommerce-checkout .form-col,
  .woocommerce-checkout .review-col {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .woocommerce-checkout #billing_first_name_field::before {
    width: 100%;
  }
}
/* responsive */
@media (max-width: 1499.98px) {
  #section1 .absolute-layer .section-large-title h2 {
    font-size: 6.5vw;
    font-weight: 300;
  }
  .venues-section .venues-container .venues-main {
    padding: 30px 24px;
  }
  .venues-section .venues-container .venues-main .venues-inner .venues-title {
    margin-bottom: 44px;
  }
  .venues-section .venues-container .venues-main .venues-inner .venues-grid {
    -moz-column-gap: 48px;
         column-gap: 48px;
    row-gap: 40px;
  }
  .venues-section .venues-logos {
    padding: 40px 0;
  }
  .venues-section .venues-logos .venues-logos-row .venue-logo {
    height: 80px;
  }
}
@media (max-width: 1299.98px) {
  .hero-section .hero-content {
    padding: 320px 20px 0;
  }
  /* ---------------------------------------------------------------------
     Header navigation → vertical dropdown.
     The horizontal pill needs ~1260px to expand (logo + 5 links + socials);
     below that it no longer fits, so from here down the expanded panel drops
     below the pill as a full, tappable vertical menu. Applies to both the
     hover (desktop-narrow) and .open (touch) states.
     --------------------------------------------------------------------- */
  .site-header #menu {
    overflow: visible;
    position: relative;
  }
  .site-header .nav-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: auto;
    width: min(78vw, 300px);
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(90deg, #FF4E00 0%, #FA6CAF 100%);
    border: 1px solid #fff;
    padding: 6px 4px 10px;
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  }
  .site-header #menu:hover .nav-panel,
  .site-header #menu.open .nav-panel {
    max-width: 88vw;
    opacity: 1;
    transform: translateY(0);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .site-header .main-menu {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 6px 12px;
  }
  .site-header .main-menu li {
    margin: 0;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  }
  .site-header .main-menu li:last-child {
    border-bottom: 0;
  }
  .site-header .main-menu li a {
    display: block;
    width: 100%;
    padding: 13px 4px;
    font-size: 16px;
  }
  .site-header .social-menu {
    justify-content: flex-start;
    gap: 22px;
    padding: 14px 14px 4px;
    margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
  }
  .venues-section .venues-container .venues-main {
    padding: 30px 20px;
  }
  .venues-section .venues-container .venues-main .venues-inner .venues-title {
    font-size: clamp(40px, 6vw, 64px);
    margin-bottom: 40px;
  }
  .venues-section .venues-container .venues-main .venues-inner .venues-grid {
    -moz-column-gap: 40px;
         column-gap: 40px;
    row-gap: 36px;
  }
  .venues-section .venues-logos {
    padding: 34px 0;
  }
  .venues-section .venues-logos .venues-logos-row {
    gap: 24px;
  }
  .venues-section .venues-logos .venues-logos-row .venue-logo {
    height: 70px;
  }
}
@media (max-width: 991px) {
  /* Below fullPage's responsive breakpoint the page scrolls normally — guard
     against any stray horizontal overflow so nothing scrolls sideways. */
  body {
    overflow-x: hidden;
  }
  /* fullPage's responsive fallback (<900px, .fp-responsive on #myContainer)
     leaves an inline `height` on each section equal to the viewport. Tall
     panels — the About copy especially — then overflow that fixed height and
     get hidden behind the next section. Force every section to grow with its
     content so nothing is clipped and the page just scrolls. The inline height
     needs !important to beat fullPage's own inline style. */
  .fp-responsive .hero-section,
  .fp-responsive .about-section,
  .fp-responsive .venues-section,
  .fp-responsive .divisions-section,
  .fp-responsive .merch-section {
    height: auto !important;
    min-height: 100vh;
  }
  /* Tighter header inset on tablets/phones. */
  .site-header {
    padding: 20px 20px;
  }
  .hero-section .hero-content {
    padding: 300px 15px 0;
  }
  .hero-section .hero-content .hero-text-wrap .hero-title {
    font-size: clamp(2rem, 6vw, 3rem);
  }
  .hero-section .hero-bg::after {
    background: rgba(0, 0, 0, 0.25);
  }
  .about-section {
    min-height: 100vh;
    height: auto;
  }
  .about-section > .slimScrollDiv,
  .about-section .fp-scrollable {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .about-section .slimScrollBar,
  .about-section .slimScrollRail {
    display: none !important;
  }
  .about-section .about-container {
    padding: 120px 24px 60px;
  }
  .about-section .about-container .about-inner {
    flex-direction: column;
    gap: 46px;
  }
  .about-section .about-container .about-inner .about-col-left,
  .about-section .about-container .about-inner .about-col-right {
    flex: 1 1 100%;
  }
  .venues-section {
    min-height: 100vh;
    height: auto;
  }
  .venues-section .venues-container .venues-main {
    padding: 120px 24px 40px;
  }
  .venues-section .venues-container .venues-main .venues-inner .venues-title {
    margin-bottom: 36px;
  }
  .venues-section .venues-container .venues-main .venues-inner .venues-grid {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }
  .venues-section .venues-logos {
    padding: 20px 24px;
  }
  .venues-section .venues-logos .venues-logos-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }
  .venues-section .venues-logos .venues-logos-row .venue-logo {
    height: 48px;
  }
  .divisions-section {
    min-height: 100vh;
    height: auto;
  }
  .divisions-section .fp-scrollable {
    align-items: flex-start;
  }
  .divisions-section .divisions-container {
    padding: 120px 24px 40px;
  }
  .divisions-section .divisions-title {
    margin-bottom: 28px;
  }
  .divisions-section .dt-youth .dt-cell {
    padding: 14px 10px;
  }
  .divisions-section .dt-youth .dt-cell--age {
    padding: 16px 10px;
  }
  .divisions-section .dt-youth .dt-cell--age .dt-age-desc {
    font-size: 13px;
  }
  /* Homepage merchandise panel — allow natural height on tablet/phone. */
  .merch-section {
    min-height: 100vh;
    height: auto;
  }
  /* Standalone merch page — trim the large desktop padding. */
  .top-margin-container {
    padding-top: 120px;
    padding-bottom: 60px;
  }
  /* Single product — stacked (Bootstrap col) layout: give the summary room. */
  .single-product #primary.content-area {
    padding-top: 120px;
    padding-bottom: 60px;
  }
  .single-product .entry-summary {
    padding-left: 0;
    margin-top: 30px;
  }
}
@media (max-width: 767.98px) {
  .site-header {
    padding: 18px 16px;
  }
  .hero-section .hero-logos {
    right: auto;
  }
  .hero-section .hero-content {
    padding: 240px 15px 0;
  }
  .hero-section .hero-content .hero-text-wrap .hero-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
  }
  .hero-section .hero-content .hero-text-wrap .hero-date {
    font-size: 1.1rem;
    margin-bottom: 22px;
  }
  .hero-section .hero-content .hero-text-wrap .theme-btn {
    margin-top: 30px;
  }
  .hero-section .hero-content .hero-text-wrap .hero-links {
    margin-top: 30px;
  }
  .about-section .about-container {
    padding: 110px 20px 56px;
  }
  .about-section .about-container .about-inner {
    gap: 40px;
  }
  .venues-section .venues-container .venues-main {
    padding: 100px 20px 36px;
  }
  .venues-section .venues-container .venues-main .venues-inner .venues-title {
    font-size: clamp(34px, 9vw, 48px);
    margin-bottom: 28px;
  }
  .venues-section .venues-container .venues-main .venues-inner .venues-grid {
    row-gap: 26px;
  }
  .venues-section .venues-container .venues-main .venues-inner .venue-item .venue-address {
    max-width: 100%;
  }
  .venues-section .venues-logos {
    padding: 24px 20px;
  }
  .venues-section .venues-logos .venues-logos-row {
    gap: 20px;
  }
  .venues-section .venues-logos .venues-logos-row .venue-logo {
    height: 40px;
  }
  .divisions-section .divisions-container {
    padding: 100px 20px 36px;
  }
  .divisions-section .divisions-title {
    font-size: clamp(34px, 9vw, 48px);
    margin-bottom: 24px;
  }
  /* Merch carousel — drop the side arrows on phones; dots + swipe navigate. */
  .merch-carousal {
    padding: 0;
  }
  .merch-arrow {
    display: none !important;
  }
  .merch-section .container,
  .merch-section .fp-scrollable > .container {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .merch-section .page-head {
    margin-bottom: 22px;
  }
  .merch-nav-wrap {
    margin-top: 34px;
  }
  .merch-nav-wrap .merch-nav {
    gap: 26px;
  }
  .merch-nav-wrap .merch-nav li a {
    font-size: 16px;
  }
  /* Standalone uniform page — stack image over copy. */
  .top-margin-container .prod-info {
    margin-top: 30px;
  }
  .top-margin-container .prod-info h1 {
    font-size: clamp(24px, 6vw, 34px);
  }
}
@media (max-width: 575.98px) {
  .site-header {
    padding: 16px 14px;
  }
  .site-header .brand-logo {
    width: 50px;
    height: 50px;
  }
  .hero-section .hero-content {
    padding: 210px 14px 0;
  }
  .hero-section .hero-content .hero-text-wrap .hero-date {
    font-size: 0.9rem;
    margin-bottom: 15px;
  }
  .hero-section .hero-content .hero-text-wrap .hero-title {
    font-size: 1.6rem;
  }
  .hero-section .hero-content .hero-text-wrap .hero-sub {
    font-size: 12px;
  }
  .theme-btn {
    font-size: 1.6rem;
    padding: 6px 44px;
    max-width: 100%;
  }
  .about-section .about-container {
    padding: 60px 20px;
  }
  .about-section .about-container .about-inner .about-col-left .about-eyebrow {
    font-size: 15px;
  }
  .about-section .about-container .about-inner .about-col-left .about-title {
    font-size: clamp(20px, 3.4vw, 50px);
    margin: 0 0 14px;
  }
  .about-section .about-container .about-inner .about-col-left .about-subtitle {
    font-weight: 700;
    font-size: clamp(12px, 1.5vw, 18px);
    margin: 0 0 8px;
  }
  .about-section .about-container .about-inner .about-col-left .about-text {
    font-size: 14px;
    line-height: 1.2;
  }
  .about-section .about-container .about-inner .about-col-left .about-contact-label {
    font-family: "roc-grotesk-extrawide";
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -1.5px;
    text-transform: uppercase;
    margin: 0 0 0px;
  }
  .about-section .about-container .about-inner .about-col-right .about-why-title {
    font-size: clamp(15px, 2vw, 18px);
    margin: 0 0 8px;
  }
  .about-section .about-container .about-inner .about-col-right .about-feature h4 {
    font-size: clamp(12px, 1.5vw, 16px);
    margin: 0 0 2px;
    letter-spacing: -0.5px;
  }
  .about-section .about-container .about-inner .about-col-right .about-feature p {
    font-size: 13px;
    line-height: 1.2;
  }
  .about-section .about-container .about-inner .about-col-right .about-feature h4 {
    font-family: "roc-grotesk-extrawide";
    font-weight: 600;
    font-size: clamp(13px, 1.5vw, 16px);
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin: 0 0 2px;
  }
  .venues-section {
    position: relative;
    min-height: 0 !important;
    height: auto !important;
    background: #000;
    color: #fff;
    padding: 0 !important;
    overflow: visible;
  }
  .venues-section .venues-container {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 20px 32px;
  }
  .venues-section .venues-container .venues-main {
    width: 100%;
    margin: 0;
  }
  .venues-section .venues-logos {
    position: static;
    width: 100%;
    padding: 22px 16px;
  }
  .venues-section .venues-logos .venues-logos-row {
    gap: 16px;
  }
  .venues-section .venues-logos .venues-logos-row .venue-logo {
    height: 36px;
  }
  .divisions-section .divisions-container {
    padding: 92px 16px 32px;
  }
  .divisions-section .divisions-table {
    width: 100%;
  }
  .divisions-section .divisions-title {
    font-size: clamp(30px, 10vw, 40px);
  }
  .divisions-section .dt-youth .dt-cell {
    padding: 8px 4px;
  }
  .divisions-section .dt-youth .dt-cell--grade {
    font-size: 11px;
    line-height: 1.15;
    min-height: 0;
  }
  /* ---------------- Merch product card ---------------- */
  .product-card .product-info {
    padding-top: 16px;
  }
  .product-card .product-info .product-name {
    font-size: 15px;
  }
  .merch-carousal .slick-dots {
    margin-top: 26px;
  }
  /* ---------------- Single product ---------------- */
  .single-product .entry-summary .product_title {
    font-size: clamp(20px, 6vw, 26px);
  }
  .single-product .variations_form .attr-btn {
    min-width: 46px;
    height: 46px;
    font-size: 14px;
  }
  .single-product .single_add_to_cart_button {
    font-size: 16px;
    padding: 12px 24px;
  }
  /* ---------------- Cart ---------------- */
  .woocommerce-cart .site-main {
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
  }
  /* ---------------- Checkout ---------------- */
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    width: 100%;
  }
  .woocommerce-checkout .place-order #place_order {
    font-size: 17px;
    padding: 16px 18px;
  }
}
@media (max-width: 420px) {
  /* home / hero */
  .hero-section .hero-content {
    padding: 190px 12px 0;
  }
  .hero-section .hero-content .hero-text-wrap .hero-title {
    font-size: 1.55rem;
  }
  .hero-section .hero-content .hero-text-wrap .hero-sub {
    font-size: 12px;
  }
  .theme-btn {
    font-size: 1.4rem;
    padding: 6px 30px;
  }
  #section4 .merch-nav-wrap .merch-nav li a {
    width: 100%;
  }
  .venues-section .venues-container .venues-main {
    padding: 80px 14px 28px;
  }
  .venues-section .venues-container .venues-main .venues-inner .venues-title {
    font-size: 30px;
    margin-bottom: 20px;
  }
  .venues-section .venues-container .venues-main .venues-inner .venue-item .venue-address {
    font-size: 13px;
  }
  .venues-section .venues-logos {
    padding: 20px 14px;
  }
  .venues-section .venues-logos .venues-logos-row {
    gap: 14px 20px;
  }
  .venues-section .venues-logos .venues-logos-row .venue-logo {
    height: 30px;
  }
  .divisions-section .divisions-title {
    font-size: 30px;
  }
  .divisions-section .divisions-container {
    padding: 80px 14px 28px;
  }
  /* product - single */
  .single-product .single_add_to_cart_button {
    margin-top: 15px;
  }
  /* merch page */
  .merch-nav-wrap .merch-nav {
    width: calc(95% - 30px);
    display: block;
    margin: 0 auto;
  }
  .merch-nav-wrap .merch-nav li {
    display: block;
  }
  .merch-nav-wrap .merch-nav li a {
    width: 100%;
  }
}