/* ===================================================================
   MARCO AIR — CUSTOM VISUAL LAYER (LIGHT VERSION, REFINED)
   This targets STANDARD WooCommerce class names so it works regardless
   of theme internals. It restyles what's there — it does not touch
   cart, checkout, or variation logic, which keeps working normally.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ma-sky: #FAFAFA;
  --ma-cloud: #FFFFFF;
  --ma-navy: #16223B;
  --ma-amber: #D97F1F;
  --ma-amber-2: #F0A94A;
  --ma-amber-soft: #FBEBD6;
  --ma-steel: #6B7686;
  --ma-green: #3F7A5C;
  --ma-line: rgba(22,34,59,0.08);
  --ma-shadow: 0 8px 28px rgba(22,34,59,0.07), 0 2px 6px rgba(22,34,59,0.05);
}

/* ---- SITE-WIDE background: fixes the "boxed layout" dark strip that
   shows behind content on wide screens, and any dark default elsewhere.
   Applies everywhere, not just single-product pages. ---- */
html, body,
#boxed, .body, #wrapper, .page-wrapper, .side-push-panel,
#main, .main-container, .container-wrap{
  background: var(--ma-sky) !important;
  background-color: var(--ma-sky) !important;
}
html, body{
  overflow-x: hidden !important;
}
/* Faint flight-chart grid — like graph paper on a navigation map */
body{
  background-image:
    linear-gradient(rgba(22,34,59,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,34,59,0.028) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  background-color: var(--ma-sky) !important;
}

/* ---- Global type & background ---- */
body{
  background: var(--ma-sky) !important;
  color: var(--ma-navy) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body h1,
body h2,
body h3,
body .product_title{
  font-family: 'Fraunces', serif !important;
  font-weight: 600 !important;
  color: var(--ma-navy) !important;
  letter-spacing: -0.01em;
}
body .product_title{
  font-size: 2.1rem !important;
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 22px !important;
}
body .product_title::after{
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 46px; height: 3px;
  background: linear-gradient(90deg, var(--ma-amber), var(--ma-amber-2));
  border-radius: 2px;
}
body a{ color: var(--ma-amber); transition: color 0.15s; }

/* ---- Header ---- */
body #header,
body .header-row{
  background: #EEF1F5 !important;
  border-bottom: 1px solid var(--ma-line) !important;
  box-shadow: 0 1px 0 rgba(22,34,59,0.03);
}
body #logo,
body .logo,
body .header-logo,
body .header-logo-wrap,
body .header-row .logo,
body #header .header-row,
body #header-wrap,
body .navbar-brand,
body .header-main{
  background: #EEF1F5 !important;
  background-color: #EEF1F5 !important;
}
body #main-menu > li > a{
  color: var(--ma-steel) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em;
  position: relative;
}
body #main-menu > li > a:hover{ color: var(--ma-navy) !important; }
body #main-menu > li > a::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background: var(--ma-amber); transform: scaleX(0); transition: transform 0.2s;
}
body #main-menu > li > a:hover::after{ transform: scaleX(1); }

/* ---- Price & rating ---- */
.single-product .summary{ position: relative; }
.single-product .summary::before{
  content: '';
  position: absolute; top: -10px; right: -10px;
  width: 90px; height: 90px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='none' stroke='%2316223B' stroke-width='0.8'/%3E%3Cpath d='M50 6 L54 46 L50 50 L46 46 Z' fill='%23D97F1F'/%3E%3Cpath d='M50 94 L54 54 L50 50 L46 54 Z' fill='%2316223B'/%3E%3Ccircle cx='50' cy='50' r='3' fill='%2316223B'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
  opacity: 0.12; pointer-events: none;
}
.single-product .product .summary .price::before{
  content: 'FLIGHT FARE';
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  font-style: normal;
  letter-spacing: 0.14em;
  color: var(--ma-steel);
  margin-bottom: 4px;
}
.single-product .product .summary .price{
  font-family: 'Fraunces', serif !important;
  font-style: italic;
  font-weight: 500 !important;
  color: var(--ma-amber) !important;
  font-size: 2rem !important;
  letter-spacing: -0.01em;
}
.single-product .woocommerce-product-rating{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ma-amber-soft);
  padding: 5px 12px 5px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
}
.single-product .woocommerce-product-rating .star-rating{ color: var(--ma-amber) !important; }
.single-product .woocommerce-product-rating .woocommerce-review-link{
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.72rem !important;
  color: var(--ma-steel) !important;
  text-decoration: none !important;
}

/* ---- Variation card — boarding pass, with ticket-stub styling ---- */
.single-product .variations_form.cart{
  background: var(--ma-cloud) !important;
  border: 1px solid var(--ma-line) !important;
  border-radius: 6px !important;
  padding: 32px !important;
  box-shadow: var(--ma-shadow);
  position: relative;
  overflow: visible;
}
.single-product .variations_form.cart::before{
  content: '';
  position: absolute; top: -1px; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--ma-amber), var(--ma-amber-2), var(--ma-amber));
  border-radius: 6px 6px 0 0;
}
/* Ticket-stub notches cut into the left and right edges */
.single-product .variations_form.cart::after{
  content: '';
  position: absolute; top: 50%; left: -11px; right: -11px;
  height: 22px; transform: translateY(-50%);
  background:
    radial-gradient(circle 11px at left, var(--ma-sky) 98%, transparent 100%) left / 22px 22px no-repeat,
    radial-gradient(circle 11px at right, var(--ma-sky) 98%, transparent 100%) right / 22px 22px no-repeat;
  pointer-events: none;
}
.single-product table.variations{
  border-collapse: separate !important;
  border-spacing: 0 20px !important;
}
.single-product table.variations label{
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ma-steel) !important;
}
.single-product table.variations select{
  background: var(--ma-sky) !important;
  border: 1.5px solid var(--ma-line) !important;
  color: var(--ma-navy) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.05rem !important;
  border-radius: 6px !important;
  padding: 16px 18px !important;
  min-height: 52px !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.single-product table.variations select:focus{
  border-color: var(--ma-amber) !important;
  box-shadow: 0 0 0 3px var(--ma-amber-soft) !important;
  outline: none !important;
}

/* ---- Add to cart button — gradient CTA with lift + runway cue ---- */
.single-product .single_add_to_cart_button,
.single-product button.button{
  background: linear-gradient(135deg, var(--ma-amber-2), var(--ma-amber)) !important;
  color: var(--ma-cloud) !important;
  border: none !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  border-radius: 4px !important;
  padding: 16px 36px !important;
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  line-height: normal !important;
  box-shadow: 0 4px 14px rgba(217,127,31,0.28);
}
.single-product .single_add_to_cart_button::before{
  content: '✈';
  font-size: 0.95em;
}
.single-product .single_add_to_cart_button:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(217,127,31,0.36);
}
.single-product .single_add_to_cart_button:active{ transform: translateY(0); }
.single-product .single_add_to_cart_button:focus-visible{
  outline: 2px solid var(--ma-navy); outline-offset: 3px;
}

/* ---- Product gallery ---- */
.single-product .woocommerce-product-gallery{
  border: 1px solid var(--ma-line) !important;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ma-cloud) !important;
  box-shadow: var(--ma-shadow);
}
.single-product .woocommerce-product-gallery img{
  transition: transform 0.4s ease;
}
.single-product .woocommerce-product-gallery:hover img{
  transform: scale(1.02);
}
.single-product .flex-control-thumbs img{
  border-radius: 4px !important;
  border: 1px solid var(--ma-line) !important;
  transition: border-color 0.15s;
}
.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs .flex-active-slide img{
  border-color: var(--ma-amber) !important;
}

/* ---- Tabs ---- */
.single-product .woocommerce-tabs ul.tabs{
  border-bottom: 1px solid var(--ma-line) !important;
  margin-bottom: 28px !important;
}
.single-product .woocommerce-tabs ul.tabs li a{
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ma-steel) !important;
  padding: 12px 4px !important;
  margin-right: 28px !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.15s, border-color 0.15s;
}
.single-product .woocommerce-tabs ul.tabs li.active a{
  color: var(--ma-navy) !important;
  border-bottom-color: var(--ma-amber) !important;
}
.single-product .woocommerce-Reviews{ color: var(--ma-navy) !important; }
.single-product .woocommerce-Reviews .star-rating{ color: var(--ma-amber) !important; }

/* ---- Related / upsell product cards ---- */
.single-product .related.products,
.single-product .upsells.products{ background: transparent !important; }
.single-product .related.products h2,
.single-product .upsells.products h2{
  font-family: 'Fraunces', serif !important;
  margin-bottom: 28px !important;
}
.single-product .related.products .product,
.single-product .upsells.products .product{
  background: var(--ma-cloud) !important;
  border: 1px solid var(--ma-line) !important;
  border-radius: 8px !important;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.single-product .related.products .product:hover,
.single-product .upsells.products .product:hover{
  transform: translateY(-3px);
  box-shadow: var(--ma-shadow);
}
.single-product .related.products .price,
.single-product .upsells.products .price{
  color: var(--ma-amber) !important;
  font-family: 'Fraunces', serif !important;
  font-style: italic;
}

/* ---- Footer ---- */
body #footer{
  background: var(--ma-cloud) !important;
  border-top: 1px solid var(--ma-line) !important;
  color: var(--ma-steel) !important;
}
body #footer a:hover{ color: var(--ma-amber) !important; }

/* ---- Google reviews (injected on single product pages) ---- */
.single-product .ma-google-reviews{
  margin-top: 50px;
}
.single-product .ma-google-reviews h2{
  font-family: 'Fraunces', serif !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  margin-bottom: 22px !important;
}
.single-product .ma-google-reviews .ma-gr-badge{
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--ma-steel);
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
}
.single-product .ma-gr-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 900px){ .single-product .ma-gr-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .single-product .ma-gr-grid{ grid-template-columns: 1fr; } }
.single-product .ma-gr-card{
  background: var(--ma-cloud); border: 1px solid var(--ma-line); border-radius: 8px;
  padding: 24px; box-shadow: var(--ma-shadow);
}
.single-product .ma-gr-card .ma-gr-stars{ color: var(--ma-amber); font-size: 0.9rem; margin-bottom: 10px; }
.single-product .ma-gr-card p{
  font-family: 'Fraunces', serif; font-style: italic; color: var(--ma-navy);
  font-size: 0.95rem; line-height: 1.6; margin: 0 0 12px;
}
.single-product .ma-gr-card .ma-gr-src{
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: var(--ma-steel);
}
/* =====================================================================
   NOTE FOR NEXT PASS:
   Porto's exact HTML/class structure can vary by widget/builder settings.
   If something above doesn't visually apply once installed, send a
   screenshot (or "view source" snippet) of that section and we'll add
   a more specific selector here — same file, just append.
   ===================================================================== */