/* =====================================================================
   zoho-bridge.css
   ---------------------------------------------------------------------
   Bridges the flat site's design system to Zoho Commerce's own markup.
   styles.css is the original site stylesheet, kept UNCHANGED so it can
   be re-synced from the git repo. Put every Zoho-specific override in
   THIS file so the two never tangle.
   ===================================================================== */

/* --- Zoho-injected wrappers: neutralise default padding/width -------- */
#zohoCommerceMainDiv,
.zpstore-container,
.zpcommerce-wrapper { max-width: none; margin: 0; padding: 0; }

/* --- Map Zoho product-grid markup onto our .price card look ---------- */
.zpstore-product-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem;
}
.zpstore-product-item .zpstore-product-name { color: var(--navy); font-weight: 700; }
.zpstore-product-item .zpstore-product-price { font-size: 1.5rem; font-weight: 800; color: var(--navy); }

/* --- Zoho's default buttons -> our .btn-primary ---------------------- */
.zpstore-btn,
button.zpstore-addtocart {
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: .8rem 1.6rem;
  font-weight: 600;
  cursor: pointer;
}
.zpstore-btn:hover,
button.zpstore-addtocart:hover { background: var(--blue-600); }

/* --- Checkout is rendered by Zoho and only partially themeable ------- */
.zpstore-checkout-container { font-family: var(--font); color: var(--ink); }
.zpstore-checkout-container h1,
.zpstore-checkout-container h2 { color: var(--navy); }

/* Telephone country code. Zoho draws this as a read-only "+1" input laid over
   a <select> of "Country (+code)" options, but its own stylesheet makes the
   overlay a 10px strip in the browser-default 13px font, so the select's
   16px text shows above and below it ("+1" over "American Samoa").
   Reproduced 2026-09-01 with every theme sheet disabled, so this is Zoho's
   checkout-style.css, not ours. Stretch the overlay to fill the box (leaving
   the chevrons Zoho draws with :before/:after at the right edge), match the
   phone input's size, and white out the select's own text underneath. The
   option colour is restored so the dropdown list still reads. */
.theme-phone-input-group .theme-mobile-code-col input.theme-checkout-country-code-display {
  top: 1px;
  bottom: 1px;
  left: 1px;
  height: auto;
  width: calc(100% - 24px);
  margin: 0;
  font-size: 16px;
  color: inherit;
  background: #fff;
  border-radius: 7px 0 0 7px;
}
.theme-phone-input-group .theme-mobile-code-col select.theme-checkout-mobile-code-select { color: #fff; }
.theme-phone-input-group .theme-mobile-code-col select.theme-checkout-mobile-code-select option { color: #000; }

/* --- Checkout restyle: Zoho's hosted form on the site's design system ---
   Zoho renders the checkout (steps, address form, dispatch, review, order
   summary) from its own checkout-style.css with Source Sans Pro, 2px-radius
   controls and a #4179d5 button. These rules re-skin that markup to match
   flat/ — same font, the .field input treatment, .btn-primary buttons, and
   the cart page's two-card layout. Selectors mirror Zoho's own so they win
   on cascade order alone. Verified against the live Address step
   2026-09-01; the Dispatch and Review steps share the same controls and
   buttons and get the generic rules.

   The summary panel deliberately has NO border: Zoho's stickyCart() writes
   clientWidth back as the panel's width on every scroll tick, and a border
   would shave 2px off each time. The card edge is an outline instead. */
.theme-section.theme-checkout-padding,
.theme-checkout-wrap { font-family: var(--font); color: var(--ink); }
.theme-checkout-breadcrum { display: none; } /* the banner already carries crumbs */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Step indicator */
.theme-checkout-head { margin-block-end: 2rem; }
.theme-checkout-head .theme-checkout-steps li a { font-family: var(--font); font-weight: 600; font-size: .92rem; color: var(--slate); opacity: 1; }
.theme-checkout-head .theme-checkout-steps li a.active { color: var(--navy); }
.theme-checkout-head .theme-checkout-steps .theme-active-bar { border-color: var(--gold); }
.theme-checkout-head .theme-checkout-steps li::after { border-color: var(--line); }

/* Two cards, like the cart page: form on the left, summary on the right */
.theme-checkout-body { gap: 2rem; } /* columns must stretch: stickyCart() parks the summary at the bottom of its column */
.theme-checkout-body .theme-checkout-details {
  border-inline-end: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: .25rem 1.5rem 1.5rem;
}
.theme-checkout-body .theme-form-container { padding-inline-end: 0; }
.theme-checkout-body .theme-checkout-details-title,
.theme-checkout-body h4.theme-checkout-details-title {
  font-family: var(--font); font-size: 1.15rem; font-weight: 700; color: var(--navy);
  line-height: 1.3; margin-block-start: 1.4rem;
}
.theme-checkout-body .theme-form-row .theme-form-col label { font-weight: 600; font-size: .9rem; color: var(--navy); }
.theme-checkout-wrap .mandotry-field { color: #c0392b; }
.theme-checkout-body .theme-error { color: #c0392b; }

/* Controls — the .field treatment from styles.css */
.theme-checkout-wrap .theme-checkout-input {
  font: inherit; color: var(--ink); background: #fcfdfe;
  border: 1px solid var(--line); border-radius: 8px; height: 44px; padding: .6rem .85rem;
}
.theme-checkout-wrap textarea.theme-checkout-input { height: auto; min-height: 96px; }
.theme-checkout-wrap select.theme-checkout-input { padding-block: 0; background-color: #fcfdfe; }
.theme-checkout-wrap .theme-checkout-input:focus { outline: 2px solid var(--blue-50); border-color: var(--blue); }
.theme-checkout-wrap .theme-checkout-select-wrap::before { top: 16px; }
.theme-checkout-wrap .theme-checkout-select-wrap::after { top: 22px; }
/* phone: the code column and the number share one rounded box */
.theme-phone-input-group .theme-mobile-code-col select.theme-checkout-mobile-code-select { border-start-end-radius: 0; border-end-end-radius: 0; }
.theme-phone-input-group input.theme-telephone-number-col { border-start-start-radius: 0; border-end-start-radius: 0; }
.theme-checkout-wrap input[type="checkbox"] { accent-color: var(--blue); width: 16px; height: 16px; vertical-align: -2px; margin-inline-end: .4rem; }

/* Buttons — .btn-primary / .btn-outline */
.theme-checkout-wrap .zpbutton {
  font-family: var(--font); font-weight: 600; border-radius: 8px; border: 2px solid transparent;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.theme-checkout-wrap .zpbutton-type-primary { background: var(--blue); color: #fff; }
.theme-checkout-wrap .zpbutton-type-primary:hover { background: var(--blue-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.theme-checkout-wrap .zpbutton-type-primary.zpbutton-outline { background: transparent; border-color: var(--blue); color: var(--blue); }
.theme-checkout-wrap .zpbutton-type-primary.zpbutton-outline:hover { background: var(--blue); color: #fff; }
.theme-checkout-wrap .zpbutton-size-md { padding: .8rem 1.6rem; font-size: 1rem; }
.theme-checkout-wrap .zpbutton-size-sm { padding: .55rem 1rem; font-size: .9rem; }
.theme-checkout-body .theme-continue-btn { margin-block-start: 1.5rem; }

/* Order summary card (outline, not border — see note above) */
.theme-checkout-body .theme-cart-details { width: 350px; padding: 0 0 30px; } /* Zoho pads 30px top/left; the gap does that now. Bottom stays: stickyCart() parks the panel at bottom:30px when the column ends */
/* stickyCart() leaves an inline bottom:30px behind when it flips the panel
   from absolute back to relative, which lifts the card 30px on the way back
   up the page. Cancel it in that state only. */
.theme-checkout-body .theme-cart-details-inner[style*="position: relative"] { bottom: auto !important; }
.theme-checkout-body .theme-cart-details-inner {
  background: #fff; outline: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 1.8rem;
}
.theme-checkout-body .theme-cart-details-inner .theme-cart-details-summary-wrap { border-top: 0; border-bottom: 0; margin-top: 0; padding-top: 0; } /* Zoho's own dividers; the coupon row and Total carry ours */
.theme-checkout-body .theme-cart-details-inner .theme-cart-details-summary-wrap .theme-cart-details-summary-title {
  font-family: var(--font); font-size: 1.28rem; font-weight: 700; color: var(--navy); margin: 0 0 1.2rem;
}
.theme-checkout-body .theme-cart-details-inner .theme-cart-details-summary-wrap .theme-cart-details-summary-list-item {
  display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; margin: 0; font-size: .95rem; color: var(--ink);
}
.theme-checkout-body .theme-cart-details-inner .theme-cart-details-summary-wrap .theme-cart-details-summary-sub { color: var(--slate); font-size: .88rem; }
.theme-checkout-body .theme-cart-details-inner .theme-cart-details-summary-total-wrap { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: 1rem; }
.theme-checkout-body .theme-cart-details-inner .theme-cart-details-summary-total-wrap .theme-cart-details-summary-total {
  display: flex; justify-content: space-between; margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--navy);
}

/* Coupon row: input + Apply on one line, divider below, error on its own line */
.theme-checkout-body .theme-cart-details-inner .theme-cart-details-coupon-wrap {
  gap: .5rem; margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line);
}
.theme-checkout-body .theme-cart-details-inner .theme-cart-details-coupon-wrap .theme-checkout-input { max-inline-size: none; height: 40px; }
.theme-checkout-body .theme-cart-details-inner .theme-cart-details-coupon-wrap .zpbutton-size-sm { height: 40px; padding: 0 1rem; }
.theme-checkout-body .theme-cart-details-inner .theme-cart-details-coupon-wrap .theme-error { flex: 0 0 100%; margin: 0; }
.theme-checkout-body .theme-cart-details-inner .theme-cart-details-coupon-applied { align-items: center; justify-content: space-between; }
.theme-checkout-body .theme-cart-details-inner .theme-applied-coupon { font-weight: 700; color: var(--navy); margin: 0; }

/* Dispatch / address lists and the review table share the site's table look */
.theme-checkout-body .theme-checkout-list { border: 1px solid var(--line); border-radius: 8px; padding: 1rem; margin-block-end: .75rem; }
.theme-checkout-body .theme-checkout-list.theme-checkout-list-selected { border-color: var(--blue); background: var(--blue-50); }
.theme-checkout-body .theme-checkout-review-order .theme-cart-view-wrap [class*="theme-cart-view-head"] {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--slate);
}
.theme-checkout-body .shipping-method-pickup-tab-container .theme-checkout-details-title.active::after { border-color: var(--gold); }

@media (max-width: 900px) {
  .theme-checkout-body { flex-direction: column; }
  .theme-checkout-body .theme-cart-details { width: 100%; }
}

/* --- Cart badge in the header --------------------------------------- */
.cart-count.has-items { background: var(--gold); color: #fff; }

/* --- Zoho cookie consent bar ----------------------------------------
   Zoho injects .zpcookie-bar client-side once the page.scripts tag is in the
   layout. A custom FACE theme ships none of Zoho component CSS, so the bar
   arrives unstyled - transparent, overlapping the header. Pin it to the
   bottom and give it a solid navy panel. Position is also set natively in
   Settings -> Online Store -> Preferences -> Cookie Bar -> Configure. */
.zpcookie-bar,
.zpcookie-bar.zpcookie-banner-top {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem 1.4rem;
  margin: 0;
  padding: 1rem 1.4rem;
  background: var(--navy);
  color: #fff;
  font-family: var(--font);
  font-size: .92rem;
  line-height: 1.5;
  box-shadow: 0 -2px 18px rgba(13,42,77,.28);
}
.zpcookie-bar a { color: var(--gold-soft); text-decoration: underline; }
.zpcookie-bar .zpcookie-action-buttons {
  border-radius: 8px;
  padding: .55rem 1.3rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.zpcookie-bar #zpconsent-manage { background: var(--gold); color: #fff; border: 0; }
.zpcookie-bar #zpconsent-decline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
}
@media (max-width: 640px) {
  .zpcookie-bar { flex-direction: column; text-align: center; padding: .9rem 1rem; }
}

/* --- Zoho page-builder form in the contact slot ----------------------
   The contact page renders Zoho's ContactUs form through the page.content tag
   inside .zoho-form-slot. Zoho ships no component CSS to a custom FACE
   theme, so this maps its markup onto the flat site's .form / .field look.
   Structure Zoho emits:
     .zpform-container > .zpform-info > h2
                       > form > ul.zpform-outer > li
                           > .zpform-label-container > label
                           > .zpform-field-container > input|select|textarea
                           > input.zpbutton[type=submit]                     */

/* Grid blowout: a wide grid item cannot shrink below its content, which
   collapsed the right-hand column to ~150px. */
.wrap.split > * { min-width: 0; }

/* Strip the chrome off Zoho's nested content wrappers. */
.zoho-form-slot .zpcontent-container,
.zoho-form-slot .zpsection,
.zoho-form-slot .zpcontainer,
.zoho-form-slot .zprow,
.zoho-form-slot .zpelem-col,
.zoho-form-slot .zpelement,
.zoho-form-slot .zpform-container {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The form's own <h2> is the Zoho form name ("ContactUs"); the banner
   already says "Let's Talk". Delete this rule to show it again. */
.zoho-form-slot .zpform-info { display: none !important; }

/* Stack label above field, matching .field. */
.zoho-form-slot .zpform-outer { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.zoho-form-slot .zpform-outer > li {
  display: block !important;
  width: 100% !important;
  margin: 0 0 1.1rem !important;
  padding: 0 !important;
  float: none !important;
}
.zoho-form-slot .zpform-label-container,
.zoho-form-slot .zpform-field-container {
  display: block !important;
  width: auto !important;
  max-width: none !important;   /* Zoho caps the field container at 40% */
  min-width: 0 !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
.zoho-form-slot .zpform-label-container { margin-bottom: .35rem !important; }
.zoho-form-slot .zpform-label-container label {
  display: block !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  color: var(--navy) !important;
  margin: 0 !important;
}

.zoho-form-slot .zpform-field-container input[type="text"],
.zoho-form-slot .zpform-field-container input[type="email"],
.zoho-form-slot .zpform-field-container input[type="tel"],
.zoho-form-slot .zpform-field-container input[type="number"],
.zoho-form-slot .zpform-field-container select,
.zoho-form-slot .zpform-field-container textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  padding: .75rem .85rem !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  font: inherit !important;
  color: var(--ink) !important;
  background: #fcfdfe !important;
  box-shadow: none !important;
}
.zoho-form-slot .zpform-field-container textarea { min-height: 110px; resize: vertical; }
.zoho-form-slot .zpform-field-container input:focus,
.zoho-form-slot .zpform-field-container select:focus,
.zoho-form-slot .zpform-field-container textarea:focus {
  outline: 2px solid var(--blue-50) !important;
  border-color: var(--blue) !important;
}

/* Submit button -> .btn.btn-primary */
.zoho-form-slot input.zpbutton[type="submit"] {
  display: inline-block !important;
  width: auto !important;
  padding: .8rem 1.9rem !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  background: var(--blue) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: .96rem !important;
  cursor: pointer !important;
}
.zoho-form-slot input.zpbutton[type="submit"]:hover { background: var(--blue-600) !important; }

/* First Name / Last Name side by side, as the flat site's
   <div class="grid grid-2"> pair. Zoho emits one <li> per field, so the
   list becomes a 2-col grid and every field except the first two spans
   both columns. NOTE: this is positional - reordering fields in the Zoho
   form builder will re-pair whichever two end up first.
   Collapses at 900px to match .grid-2 / .split in styles.css. */
.zoho-form-slot .zpform-outer {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  align-items: start;
}
.zoho-form-slot .zpform-outer > li { grid-column: 1 / -1; }
.zoho-form-slot .zpform-outer > li:nth-child(1),
.zoho-form-slot .zpform-outer > li:nth-child(2) { grid-column: span 1; }

@media (max-width: 900px) {
  .zoho-form-slot .zpform-outer { grid-template-columns: 1fr; }
  .zoho-form-slot .zpform-outer > li:nth-child(1),
  .zoho-form-slot .zpform-outer > li:nth-child(2) { grid-column: 1 / -1; }
}