/* ZenDrive brand overrides for Storefront + WooCommerce (shop, cart, checkout, My Account).
   The plugin loads app.css on My Account pages; this handles the surrounding Storefront chrome. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --zd-paper:#f6f4f1; --zd-ink:#15110e; --zd-red:#e60012; --zd-red-ink:#c2000d; --zd-line:rgba(20,17,14,.12);
}

body, body.woocommerce, body.woocommerce-page{
  background:var(--zd-paper); color:var(--zd-ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
h1,h2,h3,.page-title,.entry-title{ font-family:"Fraunces",Georgia,serif; font-weight:400; letter-spacing:-.02em; }

/* primary buttons → brand red */
.button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .single_add_to_cart_button{
  background:var(--zd-red) !important; color:#fff !important; border:0 !important;
  border-radius:8px !important; font-weight:600 !important;
}
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover{ filter:brightness(.92); }
a{ color:var(--zd-red-ink); }

/* prices / sale */
.woocommerce .price, .woocommerce-Price-amount{ font-family:"Fraunces",Georgia,serif; }

/* form inputs (checkout/account) — 16px to avoid iOS zoom, brand focus */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-account input, .woocommerce-checkout input, select{
  font-size:16px; border:1px solid var(--zd-line); border-radius:8px; padding:12px 14px;
}
:focus-visible{ outline:2px solid var(--zd-red); outline-offset:2px; }

/* My Account left navigation → tidy rail */
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-MyAccount-navigation ul li{ border:0; }
.woocommerce-MyAccount-navigation ul li a{
  display:block; padding:11px 14px; border-radius:8px; color:#403a34; text-decoration:none; font-weight:500;
  font-size:14.5px;
}
/* Keep "Payment methods" on one line ONLY where the floated rail (Storefront's 17.6%) is wide
   enough (~1010px+). At 769-1009px the rail is ~135-178px, so nowrap there would overflow the
   pill/active background into the gutter — let it wrap (contained) instead. */
@media (min-width:1010px){ .woocommerce-MyAccount-navigation ul li a{ white-space:nowrap; } }
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover{ background:#fff; color:var(--zd-ink); font-weight:600; }
.woocommerce-MyAccount-navigation ul li.is-active a{ box-shadow:0 1px 2px rgba(20,17,14,.05),0 12px 34px -16px rgba(20,17,14,.22); }

/* WooCommerce notices → on-brand. RED is reserved for errors; success + info read neutral
   charcoal so a "saved successfully" confirmation never looks like an alarm. Full border is
   set explicitly (all sides) so no default red/blue/green leaks on any edge. */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews{
  background:#fff !important; color:var(--zd-ink) !important;
  border:1px solid var(--zd-line) !important; border-radius:12px !important;
  /* accent as an INSET shadow so it follows the rounded corners (a border-left protrudes as "ears") */
  box-shadow:inset 3px 0 0 var(--zd-ink) !important;
}
.woocommerce-error{ box-shadow:inset 3px 0 0 var(--zd-red-ink) !important; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-noreviews::before{ color:var(--zd-ink) !important; }
.woocommerce-error::before{ color:var(--zd-red-ink) !important; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-noreviews a{ color:var(--zd-ink); }
.woocommerce-error a{ color:var(--zd-red-ink); }
.woocommerce-message a.button, .woocommerce-info a.button, .woocommerce-error a.button{ color:#fff !important; }
/* WooCommerce auto-focuses the alert for screen readers, so it picks up the global red focus
   ring. Keep the ring (accessibility) but recolour it: charcoal for success/info, red only for
   errors — otherwise a "saved successfully" box gets a red outline and reads as an alarm. */
.woocommerce-message:focus, .woocommerce-message:focus-visible,
.woocommerce-info:focus, .woocommerce-info:focus-visible,
.woocommerce-noreviews:focus, .woocommerce-noreviews:focus-visible{ outline-color:var(--zd-ink) !important; }
.woocommerce-error:focus, .woocommerce-error:focus-visible{ outline-color:var(--zd-red-ink) !important; }

/* Contrast: meet AA on the light footer + breadcrumb (Storefront's greys fail 4.5:1). */
.zd-credit{ color:#595959 !important; }
.zd-credit a{ color:#333333 !important; }
.woocommerce-breadcrumb a{ color:#595959 !important; }

/* Page-header rhythm: Storefront leaves a huge gap under the breadcrumb + page title. Tighten
   site-wide (account/shop/cart/checkout/legal). The landing renders its own header, untouched. */
.storefront-breadcrumb{ padding-top:14px !important; padding-bottom:0 !important; margin-bottom:18px !important; }
.entry-header{ padding-bottom:0 !important; margin-bottom:clamp(18px,2.4vw,28px) !important; }
.entry-header .entry-title, .entry-header .page-title{ margin-top:0 !important; margin-bottom:0 !important; }

/* Mobile My Account: the 8-item nav rail otherwise stacks ABOVE the content, burying the
   membership card ~440px down. Put the content (pass / dashboard) first, nav below. Desktop
   keeps its side-by-side layout. */
@media (max-width:768px){
  .woocommerce-account .woocommerce{ display:flex; flex-direction:column; }
  .woocommerce-account .woocommerce-MyAccount-content{ order:2; float:none; width:100%; }
  /* Account menu as a WRAPPING pill bar ABOVE the content (was a 9-item list dumped at the page
     bottom, then a horizontal scroll strip that cut pills off mid-word with no affordance).
     Every pill is visible at once; the active one is inked. */
  .woocommerce-account .woocommerce-MyAccount-navigation{ order:1; float:none; width:100%; margin:0 0 16px; }
  /* border:0 !important here — Storefront's woocommerce.css loads AFTER this file and would otherwise
     re-add a full-width top hairline on the ul and a bottom hairline under each pill. */
  .woocommerce-account .woocommerce-MyAccount-navigation ul{ display:flex; flex-wrap:wrap; gap:8px; overflow:visible; padding:2px 0; margin:0; border:0 !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li{ flex:0 0 auto; border:0 !important; }
  /* padding !important AND after line 162's desktop rule (which is now min-width-scoped) so the pill
     padding actually applies on mobile. */
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a{ white-space:nowrap; border:1px solid var(--zd-line) !important; border-radius:999px !important; padding:8px 13px !important; background:#fff !important; color:var(--zd-ink) !important; font-size:13px; box-shadow:none !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{ background:var(--zd-ink) !important; color:#fff !important; }

  /* Panel action buttons full-width stacked on a phone — including single-button panels (next-ride,
     no-ride) so two stacked dashboard cards don't show two different button widths. */
  .zd-app .zd-actions .btn{ flex:1 1 100%; }
  .zd-app .panel .btn{ width:100%; }

  /* Trim the page-end gap on phones (the footer itself is trimmed globally below). */
  .site-main{ margin-bottom:22px; }
}

/* Footer: a single credit line does not need Storefront's ~200px deep band (all viewports). */
.site-footer{ padding-top:22px; padding-bottom:24px; }
.site-footer .site-info{ padding-top:0; padding-bottom:0; margin:0; }

/* Panel action row (dashboard cards): flex with a real gap instead of a bare <p> with &nbsp;,
   and no trailing margin so cards end at their own padding instead of a dead white band. */
.zd-app .zd-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.zd-app .panel > :last-child{ margin-bottom:0; }

/* tidy the storefront header a touch */
.storefront-primary-navigation, .site-header{ background:#fff; }

/* ---- Branded Sign in / Create account (WooCommerce native My Account forms) ---- */
.woocommerce #customer_login{ display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; max-width:940px; margin:8px auto 26px; }
.woocommerce #customer_login > .u-column1,
.woocommerce #customer_login > .u-column2{
  flex:1 1 360px; background:#fff; border:1px solid var(--zd-line); border-radius:16px; padding:26px;
  box-shadow:0 1px 2px rgba(20,17,14,.05),0 12px 34px -16px rgba(20,17,14,.22);
}
.woocommerce #customer_login h2{ font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:1.55rem; margin:0 0 14px; letter-spacing:-.02em; }
.woocommerce form.login, .woocommerce form.register{ border:0 !important; padding:0 !important; margin:0 !important; }
.woocommerce form.login p.form-row, .woocommerce form.register p.form-row{ margin:0 0 14px; }
.woocommerce form.login label, .woocommerce form.register label{ font-size:13px; font-weight:600; display:block; margin-bottom:6px; }
.woocommerce form.login .button, .woocommerce form.register .button{ width:100%; padding:14px 18px !important; font-size:16px !important; margin-top:4px; }
.woocommerce form.login .woocommerce-form-login__rememberme{ font-size:13px; color:#403a34; }
.woocommerce form.register .woocommerce-privacy-policy-text, .woocommerce form.login .lost_password{ font-size:13px; }

/* verify-your-email banner (output by ZD_Verify on My Account / login) */
.zd-verify-note{
  background:#fff; border:1px solid var(--zd-line); color:var(--zd-ink); border-radius:12px;
  padding:14px 18px 14px 20px; margin:0 auto 18px; max-width:940px; font-size:14.5px; line-height:1.5;
  box-shadow:inset 4px 0 0 var(--zd-red-ink); font-weight:500;
}
.zd-verify-note b{ font-weight:700; }
.zd-verify-note a{ color:var(--zd-red-ink); font-weight:700; }

/* ---- Branded header wordmark (replaces Storefront's plain text site title) ---- */
.zd-branding{ display:flex; align-items:center; }
.zd-brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; line-height:1; }
.zd-brand__mark{ width:22px; height:22px; fill:var(--zd-red); flex:0 0 auto; }
.zd-brand__name{ font-family:"Inter",system-ui,-apple-system,sans-serif; font-weight:800; font-size:21px; letter-spacing:.01em; color:var(--zd-ink); }
.zd-brand__name span{ color:var(--zd-red); }

/* ---- Drop the generic mobile app-bar (backstop for the PHP remove_action) ---- */
.storefront-handheld-footer-bar{ display:none !important; }

/* ---- Footer credit → quiet, on-brand ---- */
.zd-credit{ font-size:13px; color:rgba(20,17,14,.5); text-align:center; }
.zd-credit a{ color:var(--zd-red-ink); }

/* ---- Account pages: de-duplicate nav + tighten rhythm (2026-06-21) ---- */
/* The Storefront breadcrumb (Home › My account › Orders) repeats the top menu's Home / My
   account on account pages and pushes the rail + content down with empty space. Hide it on
   account pages ONLY (shop / cart / checkout / legal keep their breadcrumb). */
.woocommerce-account .storefront-breadcrumb,
.woocommerce-account .woocommerce-breadcrumb{ display:none !important; }
/* With the breadcrumb gone, give the page title a tidy top gap + a smaller bottom gap so the
   account area no longer floats ~130px below the header. */
.woocommerce-account .entry-header{ margin-top:clamp(6px,1.6vw,16px) !important; margin-bottom:clamp(14px,2vw,22px) !important; }
/* Even, slightly tighter nav-rail rhythm (Storefront's default item padding read loose). Scoped to
   the desktop floated rail — below 769px the wrapping pill bar sets its own tighter padding, and an
   unscoped rule here (loaded later) would override it. */
@media (min-width:769px){
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a{ padding:10px 14px !important; }
}

/* ---- 2026-06-27 polish pass ---- */

/* (1) "Choose your pass" cards: the card + its inner text/button are inside an <a>, so the
   theme's link underline leaks onto the price / transfers line / button. Kill it. */
.lcard, .lcard *, .choose .btn{ text-decoration:none !important; }

/* (2) Account nav icons: the 3 custom endpoints (membership / book-transfer / my-bookings) all
   fell back to the same Font Awesome glyph. Give each a distinct, meaningful icon (FA is already
   loaded; we only swap the ::before glyph, so no double icon). */
.woocommerce-MyAccount-navigation-link--membership a::before{ content:"\f2c2" !important; font-weight:900 !important; } /* id-card */
.woocommerce-MyAccount-navigation-link--book-transfer a::before{ content:"\f1b9" !important; font-weight:900 !important; } /* car */
.woocommerce-MyAccount-navigation-link--my-bookings a::before{ content:"\f274" !important; font-weight:900 !important; } /* calendar-check */

/* (3) Password "show" toggle: WooCommerce renders it as a hard dark charcoal box (rgb 67,69,75)
   with a white eye. Make it a quiet inline icon: transparent box, muted grey eye, red when active. */
.woocommerce .show-password-input{ background:transparent !important; box-shadow:none !important; }
.woocommerce .show-password-input::after{ color:#8a847d !important; }
.woocommerce .show-password-input.display-password::after{ color:var(--zd-red-ink) !important; }

/* ===== High-conversion checkout (classic) ===== */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout h3#order_review_heading{ font-family:"Fraunces",Georgia,serif; font-weight:400; letter-spacing:-.01em; }
.woocommerce-checkout #order_review{
  background:#fff; border:1px solid var(--zd-line); border-radius:16px; padding:22px 22px 26px;
  box-shadow:0 1px 2px rgba(20,17,14,.05),0 20px 48px -24px rgba(20,17,14,.25);
}
@media(min-width:783px){ .woocommerce-checkout #order_review{ position:sticky; top:24px; } }
/* value recap ("What's included") */
.zd-co-incl td{ padding:14px 0 4px !important; border:0 !important; }
.zd-co-incl__h{ font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--zd-red-ink); margin-bottom:8px; }
.zd-co-incl ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.zd-co-incl li{ position:relative; padding-left:22px; font-size:14px; color:var(--zd-ink); line-height:1.4; }
.zd-co-incl li::before{ content:"\2713"; position:absolute; left:0; color:var(--zd-red-ink); font-weight:700; }
/* trust row at the payment step */
.zd-co-trust{ list-style:none; margin:18px 0 14px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:9px 14px; }
.zd-co-trust li{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--zd-ink); line-height:1.35; }
.zd-co-tick{ color:var(--zd-red-ink); font-weight:800; flex:0 0 auto; }
/* one prominent CTA + reassurance */
.woocommerce-checkout #place_order{ width:100%; padding:16px 22px !important; font-size:17px !important; border-radius:10px !important; box-shadow:0 14px 28px -12px rgba(230,0,18,.65) !important; margin-top:6px; }
.zd-co-reassure{ margin:14px 4px 0; font-size:12.5px; line-height:1.55; color:var(--zd-ink); text-align:center; }
.zd-co-reassure a{ color:var(--zd-red-ink); font-weight:600; white-space:nowrap; }
.woocommerce-checkout .form-row label{ font-weight:600; font-size:13.5px; }
.woocommerce-checkout-review-order-table{ border:0 !important; }

/* ---- Checkout order-summary: kill Storefront's heavy cell padding + grey bands so everything
   aligns to the card's inner edge with even rhythm. Plus mobile padding. ---- */
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{ padding:12px 0 !important; background:transparent !important; }
.woocommerce-checkout #order_review table.shop_table thead th{ padding:0 0 10px !important; border-bottom:1px solid var(--zd-line) !important; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--zd-ink); }
.woocommerce-checkout #order_review table.shop_table tfoot th,
.woocommerce-checkout #order_review table.shop_table tfoot td{ border-top:1px solid var(--zd-line) !important; }
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td{ font-size:18px; padding-top:14px !important; }
.woocommerce-checkout #order_review #payment,
.woocommerce-checkout #order_review #payment ul.payment_methods{ background:transparent !important; border-radius:0 !important; }
.woocommerce-checkout #order_review #payment{ border-top:1px solid var(--zd-line); margin-top:16px; padding-top:6px !important; }
.woocommerce-checkout #order_review #payment .payment_box{ background:var(--zd-paper) !important; }
@media (max-width:768px){
  .woocommerce-checkout #order_review{ padding:18px 16px 22px !important; }
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review{ float:none !important; width:100% !important; }
}
@media (max-width:430px){
  .zd-co-trust{ grid-template-columns:1fr; gap:8px; }
  .zd-co-incl li{ font-size:13.5px; }
}

/* ---- Order summary refinement: cleaner single-item presentation ---- */
.woocommerce-checkout #order_review table.shop_table thead{ display:none; } /* drop generic Product|Subtotal header */
.woocommerce-checkout #order_review .cart_item td{ padding:2px 0 14px !important; vertical-align:top; }
.woocommerce-checkout #order_review .cart_item .product-name{ font-size:15px; font-weight:600; color:var(--zd-ink); line-height:1.4; }
.woocommerce-checkout #order_review .cart_item .product-quantity{ display:none; } /* hide "× 1" noise (always 1 in this flow) */
.woocommerce-checkout #order_review .cart_item .product-total .amount,
.woocommerce-checkout #order_review .cart_item .product-subtotal .amount{ font-family:"Fraunces",Georgia,serif; font-size:16px; font-weight:500; }
/* itemize subtotal small + muted; make TOTAL the hero */
.woocommerce-checkout #order_review .cart-subtotal th,
.woocommerce-checkout #order_review .cart-subtotal td{ font-size:13px !important; color:#6e6862 !important; font-weight:400 !important; padding:10px 0 !important; border-top:1px solid var(--zd-line) !important; }
.woocommerce-checkout #order_review .order-total{ }
.woocommerce-checkout #order_review .order-total th{ font-size:12px !important; text-transform:uppercase; letter-spacing:1.2px; font-weight:700; vertical-align:middle; }
.woocommerce-checkout #order_review .order-total td,
.woocommerce-checkout #order_review .order-total td .amount{ font-family:"Fraunces",Georgia,serif !important; font-size:26px !important; font-weight:500 !important; }
.woocommerce-checkout #order_review .order-total th, .woocommerce-checkout #order_review .order-total td{ padding:12px 0 4px !important; }
/* tighten the gap before the trust row */
.zd-co-trust{ margin:14px 0 4px !important; padding-top:16px; border-top:1px solid var(--zd-line); }
/* cleaner payment band */
.woocommerce-checkout #order_review #payment{ background:transparent !important; }
.woocommerce-checkout #order_review #payment > .woocommerce-checkout-payment,
.woocommerce-checkout #order_review #payment .wc_payment_methods{ background:transparent !important; }

/* ---- Checkout fields: make selects (Country native + State select2) match the grey text inputs ---- */
.woocommerce-checkout select, .woocommerce-checkout #billing_country, .woocommerce-checkout #billing_state{ background-color:#f2f2f2 !important; }
.woocommerce-checkout .select2-container{ width:100% !important; }
.woocommerce-checkout .select2-container--default .select2-selection--single{
  background-color:#f2f2f2 !important; border:1px solid var(--zd-line) !important; border-radius:8px !important;
  height:48px !important; padding:12px 14px !important; display:flex; align-items:center;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.3 !important; padding:0 !important; color:var(--zd-ink) !important; font-size:16px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{ height:46px !important; right:10px !important; }

/* ---- Remove breadcrumb on checkout + cart (fewer exits = higher conversion) ---- */
.woocommerce-checkout .storefront-breadcrumb, .woocommerce-checkout .woocommerce-breadcrumb,
.woocommerce-cart .storefront-breadcrumb, .woocommerce-cart .woocommerce-breadcrumb{ display:none !important; }

/* ---- Express checkout buttons: clean centered stack, no clipping. Apple/Amazon/Link colors are
   Stripe/brand-mandated (cannot recolour). NEVER set overflow/border-radius on the iframe — it clips
   Apple Pay's label. Just constrain + center the container so they read as a tidy stack. ---- */
.woocommerce-checkout #wc-stripe-express-checkout-element,
.woocommerce-checkout .wc-stripe-payment-request-wrapper,
.woocommerce-checkout .wc-stripe-express-checkout-element{ max-width:none !important; width:100% !important; margin:6px 0 2px !important; }

/* ---- Card payment box: normalize Storefront's odd 22.652px padding + remove the arrow ---- */
.woocommerce-checkout #payment .payment_box{ padding:16px !important; margin:0 !important; border-radius:12px; }
.woocommerce-checkout #payment .payment_box::before{ display:none !important; }

/* ---- Coupon form moved into the order summary (right column): compact + on-brand ---- */
.woocommerce-checkout #order_review .woocommerce-form-coupon-toggle{ margin:16px 0 0; }
/* the toggle must NOT look like a notice box (no border / accent bar / icon overlap) */
.woocommerce-checkout #order_review .woocommerce-form-coupon-toggle .woocommerce-info{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; font-size:14px; color:var(--zd-ink) !important;
}
.woocommerce-checkout #order_review .woocommerce-form-coupon-toggle .woocommerce-info::before{ content:none !important; display:none !important; }
.woocommerce-checkout #order_review .woocommerce-form-coupon-toggle .showcoupon{ color:var(--zd-red-ink) !important; font-weight:600; }
.woocommerce-checkout #order_review .checkout_coupon.woocommerce-form-coupon{ margin:14px 0 0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
.woocommerce-checkout #order_review .woocommerce-form-coupon .form-row{ margin:0 0 8px !important; padding:0 !important; width:100% !important; }
.woocommerce-checkout #order_review .woocommerce-form-coupon input#coupon_code{ width:100% !important; }
.woocommerce-checkout #order_review .woocommerce-form-coupon button{ width:100% !important; }

/* ---- Kill the big dead gap under the order table (Storefront default ~42px margin-bottom) ---- */
.woocommerce-checkout #order_review .shop_table,
.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table{ margin-bottom:16px !important; }
.woocommerce-checkout #order_review .zd-co-trust{ margin-top:0 !important; }

/* ---- Flatten the payment area: remove the nested grey band + paper box so the Stripe card form
   sits cleanly on the white order card (no box-in-box-in-box). ---- */
.woocommerce-checkout #order_review #payment,
.woocommerce-checkout #order_review #payment ul.payment_methods,
.woocommerce-checkout #order_review #payment ul.payment_methods > li,
.woocommerce-checkout #order_review #payment ul.payment_methods > li:hover{ background:transparent !important; }
.woocommerce-checkout #order_review #payment ul.payment_methods{ border:0 !important; padding:0 !important; margin:0 !important; }
.woocommerce-checkout #order_review #payment ul.payment_methods > li{ padding:0 !important; }
.woocommerce-checkout #order_review #payment .payment_box{ background:transparent !important; border:0 !important; padding:6px 0 0 !important; margin:0 !important; box-shadow:none !important; }
.woocommerce-checkout #order_review #payment .payment_box::before{ display:none !important; }

/* ---- Error notice text must be readable (it was inheriting white from Storefront) ---- */
.woocommerce-error, .woocommerce-error li, .woocommerce-error li strong, .woocommerce-error a{ color:var(--zd-red-ink) !important; }
.woocommerce-message li, .woocommerce-info li, .woocommerce-noreviews li{ color:var(--zd-ink) !important; }

/* ---- Custom coupon field in the order summary (input + AJAX Apply, no nested form) ---- */
.woocommerce-checkout #order_review .zd-coupon{ margin:16px 0 0; }
.zd-coupon__label{ display:block; font-size:13.5px; font-weight:600; color:var(--zd-ink); margin-bottom:8px; }
.zd-coupon__row{ display:flex; gap:10px; }
.zd-coupon__row #zd-coupon-code{ flex:1 1 auto; min-width:0; font-size:16px; border:1px solid var(--zd-line); border-radius:8px; padding:11px 14px; background:#f2f2f2; }
.zd-coupon__row #zd-apply-coupon{ flex:0 0 auto; background:var(--zd-red) !important; color:#fff !important; border:0 !important; border-radius:8px !important; padding:11px 20px !important; font-weight:600; cursor:pointer; }
.zd-coupon__row #zd-apply-coupon:hover{ filter:brightness(.92); }
.zd-coupon__msg{ font-size:13px; margin-top:10px; }
.zd-coupon__msg:empty{ display:none; }
.zd-coupon__msg .woocommerce-message, .zd-coupon__msg .woocommerce-error{ margin:0 !important; }

/* ---- Header: logo left, nav right on ONE row. The theme stacks two centered containers by default
   (a branding .col-full + a separate .storefront-primary-navigation), so flex the OUTER .site-header. ---- */
@media (min-width:769px){
.site-header{ display:flex !important; align-items:center; justify-content:space-between; flex-wrap:wrap; row-gap:6px; column-gap:24px; padding-top:14px !important; padding-bottom:14px !important; }
.site-header .col-full{ display:block; }
.site-header > .col-full{ flex:0 0 auto; width:auto !important; max-width:none !important; margin:0 !important; }
.site-header > .storefront-primary-navigation{ flex:1 1 auto; width:auto !important; max-width:none !important; margin:0 !important; background:transparent !important; padding:0 !important; }
.site-header > .storefront-primary-navigation > .col-full{ width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; display:flex !important; justify-content:flex-end; }
.site-header .site-branding{ width:auto !important; max-width:none !important; margin:0 !important; float:none !important; }
.site-header .main-navigation{ float:none !important; width:auto !important; margin:0 !important; clear:none !important; }
}
.site-header .main-navigation > ul{ display:flex; flex-wrap:wrap; gap:4px 8px; margin:0 !important; justify-content:flex-end; }
.site-header .main-navigation a{ color:#15110e !important; font-weight:500; }
.site-header .main-navigation a:hover{ color:#c2000d !important; }

/* ---- Breadcrumb: clean, small, muted, branded links (no oversized icon) ---- */
.storefront-breadcrumb{ padding:12px 0 0 !important; margin-bottom:14px !important; }
.woocommerce-breadcrumb{ font-size:13px !important; color:#6b6b6b !important; line-height:1.45; }
.woocommerce-breadcrumb a{ color:#595959 !important; text-decoration:none; }
.woocommerce-breadcrumb a:hover{ color:#c2000d !important; text-decoration:underline; }
.woocommerce-breadcrumb .breadcrumb-separator{ color:#c3c4c7; margin:0 6px; }
.woocommerce-breadcrumb::before, .woocommerce-breadcrumb a::before{ content:none !important; display:none !important; }

/* ---- Checkout top: keep the express-payment block tidy under the title ---- */
.woocommerce-checkout .woocommerce-checkout-payment{ padding-top:0 !important; }
.woocommerce-checkout .entry-header .entry-title{ margin-top:4px !important; }

/* ---- Order received / view order: clean contained card, remove Storefront's torn-paper edges + even padding ---- */
.woocommerce-order-overview{ background:#fff !important; border:1px solid var(--zd-line) !important; border-radius:14px !important; padding:2px 24px !important; margin:24px 0 32px !important; box-shadow:0 1px 2px rgba(20,17,14,.04),0 14px 36px -22px rgba(20,17,14,.18) !important; -webkit-mask:none !important; mask:none !important; clip-path:none !important; }
.woocommerce-order-overview::before, .woocommerce-order-overview::after{ display:none !important; content:none !important; }
.woocommerce-order-overview li{ border:0 !important; border-bottom:1px solid var(--zd-line) !important; padding:15px 2px !important; margin:0 !important; float:none !important; width:100% !important; text-transform:none !important; font-size:13px; color:#6b6b6b; }
.woocommerce-order-overview li:last-child{ border-bottom:0 !important; }
.woocommerce-order-overview li strong{ display:block; margin-top:3px; font-size:16px; color:var(--zd-ink); }
.woocommerce-order-details, .woocommerce-customer-details{ margin-top:10px; }
.woocommerce-order-details .woocommerce-table--order-details, .woocommerce-order-details table.shop_table{ border:1px solid var(--zd-line) !important; border-radius:14px !important; overflow:hidden; }
.woocommerce-order-details .woocommerce-table--order-details td, .woocommerce-order-details .woocommerce-table--order-details th{ padding:14px 18px !important; }
.woocommerce-customer-details address{ background:#fff; border:1px solid var(--zd-line); border-radius:14px; padding:16px 18px; font-style:normal; }

/* ---- WC page-title breathing room: "Checkout"/"Order received"/etc sat cramped against the header ---- */
.woocommerce-checkout .entry-header,
.woocommerce-cart .entry-header,
.woocommerce-order-received .entry-header,
.woocommerce-view-order .entry-header{ padding-top: clamp(26px, 3.5vw, 48px) !important; }

/* ---- Header: use the real ZenDrive logo image (replaces the rendered wordmark) ---- */
.zd-brand__img{ height:34px; width:auto; display:block; }
@media(max-width:600px){ .zd-brand__img{ height:28px; } }

/* ---- My Account → Orders table: shop_table_responsive forced grid/block cells onto desktop, so the
        cells didn't line up under the Order/Date/Status/Total/Actions headers. Restore a real aligned
        table on tablet+/desktop; let it keep stacking into cards on phones. ---- */
@media(min-width:600px){
  .woocommerce-account table.woocommerce-orders-table{ display:table !important; width:100% !important; border-collapse:separate; border-spacing:0; border:1px solid var(--zd-line); border-radius:14px; overflow:hidden; }
  .woocommerce-account table.woocommerce-orders-table thead{ display:table-header-group !important; }
  .woocommerce-account table.woocommerce-orders-table tbody{ display:table-row-group !important; }
  .woocommerce-account table.woocommerce-orders-table tr{ display:table-row !important; }
  .woocommerce-account table.woocommerce-orders-table th,
  .woocommerce-account table.woocommerce-orders-table td{ display:table-cell !important; width:auto !important; text-align:left !important; vertical-align:middle; padding:14px 16px !important; border-bottom:1px solid var(--zd-line); }
  .woocommerce-account table.woocommerce-orders-table thead th{ background:#faf9f8; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--zd-ink); }
  .woocommerce-account table.woocommerce-orders-table tbody tr:last-child td{ border-bottom:0; }
  .woocommerce-account table.woocommerce-orders-table td:before{ display:none !important; } /* hide the mobile data-title labels */
  .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{ text-align:right !important; white-space:nowrap; }
}

/* ---- Minimal-checkout polish (virtual membership): no address block ---- */
/* Country is fixed to the only allowed country (US) and sent as a hidden input — hide its empty row. */
#billing_country_field{ display:none !important; }
/* Field helper text (phone / email / ZIP "why") reads as a muted hint, not an error. */
.woocommerce-checkout .form-row .description{
  display:block; margin-top:6px; font-size:12.5px; line-height:1.4; color:#6b6b6b; font-style:normal;
}
/* Locked account email for logged-in members: looks intentionally non-editable. */
.woocommerce-checkout #billing_email[readonly]{ background-color:#ededed !important; color:#5a5a5a !important; cursor:default; }

/* ===== Product page tidy-up (audit C8) =====
   Hide the raw SKU on the single product page (e.g. "zd-pass-parkcity" reads as unfinished).
   The product category line is kept (now a real "Annual Memberships"/"Single Rides" term). */
.single-product .product_meta .sku_wrapper{ display:none !important; }

/* ===== Notice action button (audit C21) =====
   Storefront floats the in-notice button to the right, where it collides with the rounded
   corner. Stack it under the message text instead so it always sits inside the card. */
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button{
  float:none !important; display:inline-block; margin-top:10px;
}

/* audit C17: hide the redundant "My account" page title on the custom account endpoints
   (the section template renders its own heading). Kept in the DOM for screen readers. */
.zd-hide-title .entry-header .entry-title,
.zd-hide-title .page-title{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:-1px !important; padding:0; border:0;
}
.zd-hide-title .entry-header{ margin-bottom:0 !important; padding-bottom:0 !important; min-height:0; }