/* ==========================================================================
   Jaffari Cycling Club - Membership product page
   Companion CSS for the Divi Theme Builder layout (jcc-divi-product-layout.json)

   Paste into Divi -> Theme Options -> General -> Custom CSS,
   BELOW jcc-styles.css. Then clear Static CSS File Generation.

   Deliberately conservative: it styles what WooCommerce and Divi output and
   does not try to invent layout. An earlier version added a decorative tab
   bar with :has() and pseudo-elements, plus a page-wide overflow rule - that
   broke the page and has been removed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. PAGE BACKGROUND
   The design puts the whole product page on the off-white #f4f5f8, with the
   image panel and the info card floating on top of it. Divi paints its content
   wrappers white, so setting it on <body> alone is not enough - the wrappers
   sit above it. Scoped to .et-l--body so the Theme Builder header and footer
   keep their navy.
   -------------------------------------------------------------------------- */
body.single-product{ background:#f4f5f8 !important; }
body.single-product #page-container,
body.single-product #et-main-area,
body.single-product #main-content,
body.single-product .et-l--body,
body.single-product .et-l--body .et_builder_inner_content,
body.single-product .et-l--body > .et_pb_section,
body.single-product .et-l--body .et_pb_section{
  background-color:#f4f5f8 !important;
}
/* the two panels that should stay white sit on top of it */
body.single-product .et_pb_wc_description.et_pb_wc_description_0_tb_body .et_pb_module_inner{
  background:#fff !important;
}

/* --------------------------------------------------------------------------
   1. GUTTERS
   The Theme Builder rows are set to width:100%, which removes the side gutter
   Divi normally gives a row. Scoped to the BODY area only so the Theme Builder
   header and footer are never touched.
   -------------------------------------------------------------------------- */
body.single-product .et-l--body .et_pb_row{
  width:100% !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:48px !important;
  padding-right:48px !important;
  box-sizing:border-box !important;
}
@media (max-width:980px){
  body.single-product .et-l--body .et_pb_row{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}

/* --------------------------------------------------------------------------
   2. GALLERY + SALE BADGE
   The badge is a child of .et_pb_module_inner and a SIBLING of the gallery -
   not a child of it. The positioning context must therefore be module_inner.
   Getting this wrong is what turned the badge into a full-width orange bar.
   -------------------------------------------------------------------------- */
body.single-product .et_pb_wc_images .et_pb_module_inner{ position:relative; }

body.single-product .woocommerce-product-gallery__wrapper{
  background:#eef1f7;
  border-radius:16px;
  padding:40px;
  overflow:hidden;
}
body.single-product .woocommerce-product-gallery__image{ margin:0; }
body.single-product .woocommerce-product-gallery__image img{
  width:100%; height:auto; display:block;
  border-radius:10px; background:transparent;
}

body.single-product .et_pb_wc_images span.onsale{
  position:absolute;
  top:16px; right:16px; left:auto; bottom:auto;
  width:auto; height:auto;
  display:inline-block;
  background:#d86828; color:#fff;
  font-family:'Source Sans 3',system-ui,sans-serif;
  font-weight:700; font-size:12px; line-height:1.4;
  letter-spacing:1px; text-transform:uppercase;
  padding:6px 14px; border-radius:20px;
  min-height:0; min-width:0; margin:0; z-index:5;
}

@media (max-width:900px){
  body.single-product .woocommerce-product-gallery__wrapper{ padding:24px; border-radius:14px; }
  body.single-product .et_pb_wc_images span.onsale{ top:12px; right:12px; }
}

/* --------------------------------------------------------------------------
   3. TITLE + PRICE
   -------------------------------------------------------------------------- */
body.single-product .et_pb_wc_title h1,
body.single-product .product_title{
  font-family:'Archivo',system-ui,sans-serif !important;
  font-weight:700 !important; font-size:clamp(28px,3.4vw,38px) !important;
  letter-spacing:-.5px; color:#14294b !important; margin:0 0 12px !important;
}
body.single-product .et_pb_wc_price .price,
body.single-product .et_pb_wc_price .price bdi,
body.single-product .et_pb_wc_price .price .amount,
body.single-product .et_pb_wc_price .woocommerce-Price-currencySymbol{
  color:#d86828 !important;
  font-family:'Archivo',system-ui,sans-serif; font-weight:700; font-size:26px;
}
body.single-product .et_pb_wc_price .price del,
body.single-product .et_pb_wc_price .price del .amount,
body.single-product .et_pb_wc_price .price del bdi{
  color:#b0b8c7 !important; opacity:1; font-size:20px; font-weight:400;
}
body.single-product .et_pb_wc_price .price ins{ text-decoration:none; }

/* --------------------------------------------------------------------------
   4. SHORT DESCRIPTION CARD
   -------------------------------------------------------------------------- */
body.single-product .et_pb_wc_description.et_pb_wc_description_0_tb_body .et_pb_module_inner,
body.single-product .woocommerce-product-details__short-description{
  background:#fff; border:1px solid #eaeff9; border-radius:14px;
  padding:20px 24px;
}

/* --------------------------------------------------------------------------
   5. GRAVITY FORMS FIELDS
   (The .variations rules below are inert while this is a simple product.
   Left in place so nothing breaks if it is switched back to variable.)
   -------------------------------------------------------------------------- */
body.single-product table.variations{ width:100%; margin:0 0 22px; border:none; background:none; }
body.single-product table.variations th,
body.single-product table.variations td{
  display:block; width:100%; border:none; padding:0 0 8px; background:none;
}
body.single-product table.variations th.label label{
  font:700 13px/1.4 'Source Sans 3',system-ui,sans-serif;
  letter-spacing:.5px; text-transform:uppercase; color:#5d6779; margin:0;
}
body.single-product .reset_variations{ font-size:13px; color:#8a94a6; }

body.single-product .et_pb_wc_add_to_cart select,
body.single-product .et_pb_wc_add_to_cart input[type=text],
body.single-product .et_pb_wc_add_to_cart input[type=email],
body.single-product .et_pb_wc_add_to_cart input[type=tel],
body.single-product .et_pb_wc_add_to_cart input[type=number],
body.single-product .et_pb_wc_add_to_cart input[type=date],
body.single-product .gform_wrapper input,
body.single-product .gform_wrapper select,
body.single-product .gform_wrapper textarea{
  width:100%; padding:14px 16px;
  border:1px solid #dee7f6; border-radius:8px;
  font:15px/1.35 'Source Sans 3',system-ui,sans-serif; color:#14294b;
  background:#fff; box-sizing:border-box;
}
body.single-product .gform_wrapper input:focus,
body.single-product .gform_wrapper select:focus,
body.single-product .et_pb_wc_add_to_cart select:focus{ outline:2px solid #d86828; outline-offset:1px; }

body.single-product .gform_wrapper .gfield{ margin:0 0 22px !important; }
body.single-product .gform_wrapper .gfield_label,
body.single-product .gform_wrapper legend.gfield_label{
  font-weight:700 !important; font-size:13px !important; letter-spacing:.5px;
  text-transform:uppercase; color:#5d6779 !important; margin:0 0 8px !important;
}
body.single-product .gform_wrapper .gfield_required{ color:#d86828 !important; }
body.single-product .gform_wrapper .ginput_complex{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
body.single-product .gform_wrapper .ginput_complex > span{ width:100% !important; padding:0 !important; margin:0 !important; }
body.single-product .gform_wrapper .ginput_complex label{
  font-size:12px !important; color:#8a94a6 !important; font-weight:400 !important;
  text-transform:none !important; letter-spacing:0 !important;
}
body.single-product .gform_wrapper .gfield_description,
body.single-product .gform_wrapper .instruction{
  color:#8a94a6 !important; font-size:13px !important; margin-top:6px !important; padding:0 !important;
}

/* --------------------------------------------------------------------------
   6. SUBTOTAL / OPTIONS / TOTAL
   Real markup: .product_totals > ul > li.gfield > label + .ginput_container
   -------------------------------------------------------------------------- */
body.single-product .product_totals ul{ list-style:none; margin:0; padding:0; }
body.single-product .product_totals li.gfield{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; padding:6px 0; margin:0 !important; width:100% !important;
}
body.single-product .product_totals li.gfield .gfield_label{
  margin:0 !important; flex:0 0 auto;
  font-weight:700 !important; font-size:13px !important;
  letter-spacing:.5px; text-transform:uppercase; color:#5d6779 !important;
}
body.single-product .product_totals li.gfield .ginput_container{
  margin:0 !important; flex:1 1 auto; text-align:right; min-width:0;
}
body.single-product .product_totals .ginput_total{ color:#5d6779 !important; font-size:15px; }
body.single-product .product_totals li.wcgfpa_total{
  border-top:1px solid #dee7f6; margin-top:8px !important; padding-top:14px !important;
}
body.single-product .product_totals li.wcgfpa_total .gfield_label,
body.single-product .product_totals li.wcgfpa_total .ginput_total{
  color:#14294b !important; font-weight:700 !important; font-size:17px !important;
}

/* --------------------------------------------------------------------------
   7. QUANTITY + ADD TO CART
   The pale button before a Category is chosen is WooCommerce disabling it.
   -------------------------------------------------------------------------- */
body.single-product form.cart .quantity{ float:none; display:inline-block; margin:0 16px 0 0; }
body.single-product form.cart .quantity input.qty{ width:80px; text-align:center; padding:14px 10px; }
/* simple product: quantity + button live directly in form.cart.
   .woocommerce-variation-add-to-cart is kept for safety in case the product
   is ever switched back to variable. */
body.single-product form.cart,
body.single-product .woocommerce-variation-add-to-cart{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:18px;
}
/* the Gravity Forms fields must span the full width above that row */
body.single-product form.cart .gform_wrapper,
body.single-product form.cart .product_totals{ flex:1 1 100%; }
body.single-product .single_add_to_cart_button{
  flex:1 1 200px;
  background:#d86828 !important; color:#fff !important;
  border:none !important; border-radius:8px !important;
  padding:16px 32px !important;
  font-family:'Source Sans 3',system-ui,sans-serif !important;
  font-weight:700 !important; font-size:16px !important;
  text-transform:none !important; letter-spacing:0 !important;
}
body.single-product .single_add_to_cart_button:hover{ background:#b4501a !important; }
body.single-product .single_add_to_cart_button.disabled{ opacity:.45; cursor:not-allowed; }

/* --------------------------------------------------------------------------
   8. SKU / CATEGORY
   -------------------------------------------------------------------------- */
body.single-product .product_meta{
  font-size:13px; color:#8a94a6;
  border-top:1px solid #dee7f6; margin-top:24px; padding-top:16px;
}
body.single-product .product_meta a{ color:#d86828; }

/* --------------------------------------------------------------------------
   9. DESCRIPTION BODY
   -------------------------------------------------------------------------- */
body.single-product .et_pb_wc_description h2{
  font-family:'Archivo',system-ui,sans-serif !important;
  font-weight:700 !important; font-size:24px !important;
  color:#14294b !important; margin:0 0 8px !important; line-height:1.25 !important;
}
body.single-product .et_pb_wc_description h3{
  font-family:'Archivo',system-ui,sans-serif !important;
  font-weight:600 !important; font-size:18px !important;
  color:#14294b !important; margin:28px 0 14px !important;
}
body.single-product .et_pb_wc_description .jcc-earlybird{
  color:#d86828 !important; font-weight:600 !important; font-size:15px !important;
  margin:0 0 24px !important;
}
body.single-product .et_pb_wc_description ol,
body.single-product .et_pb_wc_description ul{
  color:#5d6779; font-size:15px; line-height:1.9; margin:0 0 24px; padding-left:20px;
}
body.single-product .et_pb_wc_description p{ color:#5d6779; font-size:15px; line-height:1.7; }

/* --------------------------------------------------------------------------
   11. NOTICES
   -------------------------------------------------------------------------- */
body.single-product .woocommerce-message,
body.single-product .woocommerce-info{
  border-top-color:#d86828 !important; border-radius:10px; background:#fff; color:#14294b;
}
body.single-product .woocommerce-message .button,
body.single-product .woocommerce-info .button{
  background:#183058 !important; color:#fff !important; border-radius:8px !important;
}

@media (max-width:600px){
  body.single-product form.cart .quantity{ margin:0; }
  body.single-product form.cart .quantity input.qty{ width:64px; }
  body.single-product .gform_wrapper .ginput_complex{ grid-template-columns:1fr; }
}