/* ==========================================================================
   FVCL - WooCommerce (v1.16.0)

   What this file is for
   ---------------------
   Almost nothing. The shop archive and the product page are drawn in the same
   markup the retired fvcl-product-grid and fvcl-product-detail widgets emitted,
   so fvcl.css already styles the catalogue card, the product layout, the price,
   the quantity stepper, the add button and the prose panel. None of that is
   restated here.

   What is here is only what WooCommerce brings that the design package never
   had: notices, a cart table, a checkout form, an account screen, and the
   handful of places where a control that used to be a <button> is now an <a>
   or an <input>. Plus two guards, both of which are extensions of guards that
   already exist in fvcl.css and are documented there.

   Loaded on commerce pages only - see fvcl_woo_assets() in fvcl-woo.php.
   ========================================================================== */


/* ==========================================================================
   1. BANDS

   The product template's three bands reproduce the Elementor containers the
   retired product pages used: 38/20 white, 30/60 white, 60/60 tinted. The
   inner wrapper is the site measure - 1240px box, 26px gutters, 1188px of
   content - stated with the same tokens every other FVCL band uses so it
   cannot drift from them.
   ========================================================================== */
.fvcl-woo-band{padding:60px 0}
.fvcl-woo-in{max-width:var(--fvcl-max);margin:0 auto;padding:0 var(--fvcl-gutter);width:100%}
.fvcl-woo-band--head{padding:38px 0 20px}
.fvcl-woo-band--desc{padding:30px 0 60px}
.fvcl-woo-band--tint{background:var(--fvcl-blue-soft)}
.fvcl-woo-h{font:600 28px/1.12 Montserrat,sans-serif;letter-spacing:-.01em;color:var(--fvcl-navy);margin:0 0 24px}

.fvcl-woo-band--body{padding:0 0 70px}
.fvcl-woo-title{font:600 38px/1.12 Montserrat,sans-serif;letter-spacing:-.01em;color:var(--fvcl-navy);margin:0 0 4px}

/* The shop archive renders an Elementor page, which brings its own bands. Only
   the notices region above it needs a measure. */
.fvcl-woo-notices{margin-bottom:22px}
.fvcl-woo-shop .fvcl-woo-notices{padding-top:26px}

/* Cart, checkout and account are ordinary pages, so Hello Elementor would print
   its own page title above the wrapper above, and the wrapper draws the title
   itself at the design's size and inside the design's measure.

   That used to be resolved here, with `display:none` on the theme's .entry-title.
   It is not resolved here any more: hiding an <h1> takes it off the screen but
   leaves it in the document, so the page still carried two H1s in its outline
   for anything reading the structure rather than the pixels. The theme's title
   is now suppressed before it is printed, by fvcl_woo_hide_theme_title() in
   includes/fvcl-woo.php, and there is nothing left here to hide. */
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main{max-width:none;width:100%;padding-left:0;padding-right:0}


/* ==========================================================================
   2. THE QUANTITY FIELD

   The design drew the quantity as an <output>, because nothing was ever
   submitted. It is a real form field now, so it is an <input type=number> and
   it keeps the .fvcl-qty-val class it had - everything about how it looks is
   already in fvcl.css. What is needed here is only the browser chrome an input
   brings and an output did not: a border, a background and spin buttons.
   ========================================================================== */
.fvcl-qty-input{border:0;background:transparent;padding:0;margin:0;-moz-appearance:textfield;appearance:textfield}
.fvcl-qty-input::-webkit-outer-spin-button,
.fvcl-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fvcl-qty-input:focus{outline:none}
.fvcl-qty-input:focus-visible{outline:2px solid var(--fvcl-navy);outline-offset:-2px}
.fvcl-product-form{margin:0}


/* ==========================================================================
   3. THE CATALOGUE ADD BUTTON AS AN ANCHOR

   On the catalogue the add control is WooCommerce's own AJAX anchor, so it can
   add without leaving the page and still work with JavaScript off. It wears
   .fvcl-addbtn, which fvcl.css wrote for a <button>: an anchor needs the box
   model a button gets for free.
   ========================================================================== */
a.fvcl-addbtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;line-height:1.2}

/* WooCommerce appends its own "View cart" link after a successful AJAX add.
   The design confirms the add on the button itself and the header badge counts
   it, so the extra link is redundant and breaks the card's foot row. */
.fvcl-pcard-foot .added_to_cart{display:none}

/* WooCommerce's own loading state, in the design's terms rather than its own. */
.fvcl-addbtn.loading{opacity:.72;pointer-events:none}
.fvcl-addbtn.loading::after{content:"";width:12px;height:12px;margin-left:8px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:fvcl-woo-spin .7s linear infinite}
@keyframes fvcl-woo-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .fvcl-addbtn.loading::after{animation-duration:1ms;animation-iteration-count:1}
}


/* ==========================================================================
   4. NOTICES

   WooCommerce's three notice types, in the FVCL palette. Message and info are
   the blue family; error is the only place this design needs a red, so it is
   stated once here and nowhere else.
   ========================================================================== */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;margin:0 0 18px;padding:16px 20px;border-radius:14px;
  font:500 14px/1.6 Montserrat,sans-serif;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px 16px}
.woocommerce-message>li,.woocommerce-info>li,.woocommerce-error>li{list-style:none;margin:0;flex:1 1 auto}
.woocommerce-message{background:var(--fvcl-blue-soft);color:var(--fvcl-navy);border:1px solid rgba(37,81,181,.22)}
.woocommerce-info{background:var(--fvcl-blue-soft-2);color:var(--fvcl-navy);border:1px solid rgba(37,81,181,.16)}
.woocommerce-error{background:#FDF2F4;color:#8A1B33;border:1px solid rgba(138,27,51,.2)}
.woocommerce-error>li{list-style:none}


/* ==========================================================================
   5. WOOCOMMERCE'S OWN BUTTONS

   Cart, checkout and account screens are WooCommerce's own templates, so their
   controls are WooCommerce's markup. They are mapped onto the design's primary
   button rather than restyled individually, so "Place order" and "Add to cart"
   are visibly the same control doing the same kind of thing.
   ========================================================================== */
.fvcl-woo .button,
.fvcl-woo button[type=submit],
.fvcl-woo input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fvcl-blue);color:#fff;border:none;border-radius:var(--fvcl-r-btn);
  padding:13px 24px;font:700 14px Montserrat,sans-serif;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:background .2s ease}
.fvcl-woo .button:focus-visible,
.fvcl-woo button[type=submit]:focus-visible,
.fvcl-woo input[type=submit]:focus-visible{outline:2px solid var(--fvcl-navy);outline-offset:2px}

/* The secondary family: "Update cart", "Return to shop" and anything
   WooCommerce marks as an alternate action. */
.fvcl-woo .button[name=update_cart],
.fvcl-woo .button.wc-backward{background:#fff;color:var(--fvcl-blue);border:1px solid rgba(37,81,181,.4)}
.fvcl-woo .button:disabled,
.fvcl-woo .button[disabled]{opacity:.55;cursor:default}

.fvcl-woo #place_order{width:100%;padding:16px 24px;font-size:15px;box-shadow:var(--fvcl-sh-cta)}


/* ==========================================================================
   6. CART
   ========================================================================== */
.fvcl-woo-cart .shop_table,
.fvcl-woo-checkout .shop_table{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid rgba(15,27,45,.1);border-radius:var(--fvcl-r-card);overflow:hidden}
.fvcl-woo-cart .shop_table th,
.fvcl-woo-checkout .shop_table th{text-align:left;font:700 12px Montserrat,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fvcl-navy);
  padding:16px 18px;background:var(--fvcl-blue-soft-2);border-bottom:1px solid rgba(15,27,45,.08)}
.fvcl-woo-cart .shop_table td,
.fvcl-woo-checkout .shop_table td{padding:18px;border-bottom:1px solid rgba(15,27,45,.07);
  font:400 14px/1.6 Montserrat,sans-serif;color:var(--fvcl-body);vertical-align:middle}
.fvcl-woo-cart .shop_table .product-name a{font-weight:600;color:var(--fvcl-navy)}
.fvcl-woo-cart .shop_table img{width:64px;height:auto;border-radius:10px;display:block}
.fvcl-woo-cart .product-remove a{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:var(--fvcl-blue-soft);
  color:var(--fvcl-navy);font-weight:700;text-decoration:none;line-height:1}
.fvcl-woo-cart .quantity input[type=number]{width:70px;padding:9px 10px;border:1px solid rgba(15,27,45,.16);
  border-radius:var(--fvcl-r-btn);font:600 14px Montserrat,sans-serif;color:var(--fvcl-navy);text-align:center}
.fvcl-woo-cart .actions{padding:18px}
.fvcl-woo-cart .cart-collaterals{margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:30px;align-items:start}
.fvcl-woo-cart .cart_totals{background:var(--fvcl-blue-soft);border-radius:var(--fvcl-r-card);padding:26px 28px}
.fvcl-woo-cart .cart_totals h2{font:600 20px Montserrat,sans-serif;color:var(--fvcl-navy);margin:0 0 16px}
.fvcl-woo-cart .cart_totals table{width:100%;border-collapse:collapse}
.fvcl-woo-cart .cart_totals th,
.fvcl-woo-cart .cart_totals td{padding:10px 0;font:500 14px Montserrat,sans-serif;color:var(--fvcl-body);text-align:left}
.fvcl-woo-cart .cart_totals .order-total th,
.fvcl-woo-cart .cart_totals .order-total td{font-weight:700;color:var(--fvcl-navy);border-top:1px solid rgba(15,27,45,.12)}
.fvcl-woo-cart .wc-proceed-to-checkout{margin-top:18px}
.fvcl-woo-cart .wc-proceed-to-checkout .button{width:100%}
.fvcl-woo-cart .cart-empty{font:500 16px Montserrat,sans-serif;color:var(--fvcl-body);margin-bottom:20px}


/* ==========================================================================
   7. CHECKOUT AND ACCOUNT
   ========================================================================== */
.fvcl-woo-checkout .col2-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.fvcl-woo-checkout h3{font:600 20px Montserrat,sans-serif;color:var(--fvcl-navy);margin:0 0 18px}
.fvcl-woo .form-row{display:flex;flex-direction:column;margin-bottom:16px}
.fvcl-woo .form-row label{font:600 13px Montserrat,sans-serif;color:var(--fvcl-navy);margin-bottom:7px}
.fvcl-woo .form-row .required{color:#8A1B33;text-decoration:none}
.fvcl-woo input[type=text],.fvcl-woo input[type=email],.fvcl-woo input[type=tel],
.fvcl-woo input[type=password],.fvcl-woo input[type=number],.fvcl-woo select,.fvcl-woo textarea{
  width:100%;padding:12px 14px;border:1px solid rgba(15,27,45,.16);border-radius:var(--fvcl-r-btn);
  font:400 14px Montserrat,sans-serif;color:var(--fvcl-navy);background:#fff}
.fvcl-woo textarea{min-height:110px;resize:vertical}
.fvcl-woo input::placeholder,.fvcl-woo textarea::placeholder{color:var(--fvcl-placeholder)}
.fvcl-woo input:focus-visible,.fvcl-woo select:focus-visible,.fvcl-woo textarea:focus-visible{
  outline:2px solid var(--fvcl-blue);outline-offset:1px;border-color:var(--fvcl-blue)}

/* WooCommerce prints its own headings on the order, thank-you and account
   screens ("Order details", "Billing address", "Additional information"). They
   are the theme's headings otherwise, which are neither Montserrat nor navy. */
.fvcl-woo h2{font:600 24px Montserrat,sans-serif;color:var(--fvcl-navy);margin:34px 0 16px}
.fvcl-woo h2:first-child{margin-top:0}
.fvcl-woo h3{font:600 20px Montserrat,sans-serif;color:var(--fvcl-navy);margin:26px 0 14px}
.fvcl-woo address{font:400 14px/1.8 Montserrat,sans-serif;color:var(--fvcl-body);font-style:normal;
  border:1px solid rgba(15,27,45,.1);border-radius:var(--fvcl-r-card);padding:20px 22px}
.fvcl-woo .woocommerce-customer-details{margin-top:8px}
.fvcl-woo .woocommerce-column__title{font:600 18px Montserrat,sans-serif;color:var(--fvcl-navy);margin:0 0 12px}

/* The thank-you screen's order table is the cart table in a different template,
   so it is given the same treatment rather than a second set of rules. */
.fvcl-woo .woocommerce-table--order-details{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid rgba(15,27,45,.1);border-radius:var(--fvcl-r-card);overflow:hidden}
.fvcl-woo .woocommerce-table--order-details th{text-align:left;font:700 12px Montserrat,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fvcl-navy);padding:14px 18px;
  background:var(--fvcl-blue-soft-2);border-bottom:1px solid rgba(15,27,45,.08)}
.fvcl-woo .woocommerce-table--order-details td{padding:14px 18px;border-bottom:1px solid rgba(15,27,45,.07);
  font:400 14px/1.6 Montserrat,sans-serif;color:var(--fvcl-body)}
.fvcl-woo .woocommerce-table--order-details tfoot th{text-transform:none;letter-spacing:0;font-size:14px}

#order_review_heading{font:600 22px Montserrat,sans-serif;color:var(--fvcl-navy);margin:34px 0 18px}
.fvcl-woo-checkout #order_review{background:var(--fvcl-blue-soft);border-radius:var(--fvcl-r-card);padding:26px 28px}
.fvcl-woo-checkout #order_review .shop_table{background:transparent;border:none}
.fvcl-woo-checkout #order_review .shop_table th,
.fvcl-woo-checkout #order_review .shop_table td{background:transparent;padding:11px 0}
.fvcl-woo .wc_payment_methods{list-style:none;margin:0 0 18px;padding:0}
.fvcl-woo .wc_payment_method{margin-bottom:10px}
.fvcl-woo .wc_payment_method label{display:inline;font:700 14px Montserrat,sans-serif;color:var(--fvcl-navy);margin:0 0 0 6px}
.fvcl-woo .payment_box{background:#fff;border-radius:12px;padding:14px 16px;margin-top:10px;
  font:400 13px/1.65 Montserrat,sans-serif;color:var(--fvcl-body)}
.fvcl-woo .woocommerce-terms-and-conditions-wrapper{margin-bottom:16px}

.fvcl-woo-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 26px;padding:0;
  display:flex;flex-wrap:wrap;gap:8px}
.fvcl-woo-account .woocommerce-MyAccount-navigation a{display:inline-flex;align-items:center;height:40px;
  padding:0 16px;border-radius:999px;background:var(--fvcl-blue-soft);
  font:700 13px Montserrat,sans-serif;color:var(--fvcl-navy);text-decoration:none}
.fvcl-woo-account .woocommerce-MyAccount-navigation .is-active a{background:var(--fvcl-blue);color:#fff}

.fvcl-woo .woocommerce-order p,
.fvcl-woo .woocommerce-thankyou-order-received{font:500 16px/1.7 Montserrat,sans-serif;color:var(--fvcl-navy)}
.fvcl-woo .woocommerce-order-overview{list-style:none;margin:22px 0;padding:22px 24px;
  background:var(--fvcl-blue-soft);border-radius:var(--fvcl-r-card);
  display:flex;flex-wrap:wrap;gap:18px 34px}
.fvcl-woo .woocommerce-order-overview li{font:600 12px Montserrat,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fvcl-muted-3)}
.fvcl-woo .woocommerce-order-overview li strong{display:block;margin-top:5px;font:600 16px Montserrat,sans-serif;
  letter-spacing:0;text-transform:none;color:var(--fvcl-navy)}


/* ==========================================================================
   8. THE PRODUCT DESCRIPTION

   The long description is ordinary editor content now, so it is styled by tag
   rather than by class: a client who adds a paragraph, a subheading or a list
   in WooCommerce's editor gets the design's prose treatment without having to
   know a class name. The .fvcl-prose-lead class is honoured where it survives
   an edit, and is not required for the panel to read correctly.
   ========================================================================== */
.fvcl-woo-desc>*:first-child{margin-top:0}
.fvcl-woo-desc>*:last-child{margin-bottom:0}
.fvcl-woo-desc p{font:400 15px/1.8 Montserrat,sans-serif;color:var(--fvcl-body);margin:0 0 14px;overflow-wrap:break-word}
.fvcl-woo-desc p.fvcl-prose-lead{font:500 14.5px/1.6 Montserrat,sans-serif;color:var(--fvcl-blue)}
.fvcl-woo-desc h3,.fvcl-woo-desc h4,.fvcl-woo-desc h5{font:700 15px Montserrat,sans-serif;color:var(--fvcl-navy);margin:22px 0 10px}
.fvcl-woo-desc ul,.fvcl-woo-desc ol{margin:0 0 14px;padding:0 0 0 22px;display:flex;flex-direction:column;gap:9px}
.fvcl-woo-desc li{font:400 15px/1.6 Montserrat,sans-serif;color:var(--fvcl-body)}
.fvcl-woo-desc strong{color:var(--fvcl-navy)}


/* ==========================================================================
   9. FVCL-QA-037 EXTENSION: THE BUTTON RESET GUARD, FOR WOOCOMMERCE

   fvcl.css documents this in full. The short version: Hello Elementor 3.4.9
   paints every <button>, [type=button] and [type=submit] magenta (#CC3366) on
   hover AND on focus, from a reset sheet that loads before ours, and its
   selectors sit at 0,2,0 and 0,1,1. Each affected family has to restate both
   states with the doubled-class idiom at 0,3,0 or better.

   That guard enumerated the families that existed in v1.15.0. WooCommerce adds
   more, and the guard's own closing instruction is that any button family added
   later needs its hover and focus stated here too. These are those families.

   .fvcl-addbtn is already guarded in fvcl.css and is not restated. .fvcl-qty-btn
   is added: it was outside the original enumeration because the stepper set a
   background but never a colour, which left the theme free to paint its glyph
   white on hover.
   ========================================================================== */
.fvcl-qty-btn.fvcl-qty-btn:hover,
.fvcl-qty-btn.fvcl-qty-btn:focus{background-color:var(--fvcl-blue-soft);color:var(--fvcl-navy)}
.fvcl-qty-btn.fvcl-qty-btn[disabled]:hover,
.fvcl-qty-btn.fvcl-qty-btn[disabled]:focus{background-color:var(--fvcl-blue-soft-2);color:var(--fvcl-muted-3)}

/* WooCommerce's own controls: cart, checkout and account. */
.fvcl-woo .button.button:hover,
.fvcl-woo .button.button:focus,
.fvcl-woo button[type=submit].button:hover,
.fvcl-woo button[type=submit].button:focus{background-color:var(--fvcl-blue-dark);color:#fff}
.fvcl-woo button[type=submit]:not(.button):hover,
.fvcl-woo button[type=submit]:not(.button):focus,
.fvcl-woo input[type=submit]:not(.button):hover,
.fvcl-woo input[type=submit]:not(.button):focus{background-color:var(--fvcl-blue-dark);color:#fff}

/* The secondary family keeps its own resting colours on hover rather than
   inheriting the primary's, so the two stay distinguishable. */
.fvcl-woo .button.button[name=update_cart]:hover,
.fvcl-woo .button.button[name=update_cart]:focus,
.fvcl-woo .button.button.wc-backward:hover,
.fvcl-woo .button.button.wc-backward:focus{background-color:var(--fvcl-blue-soft);color:var(--fvcl-blue);border-color:var(--fvcl-blue)}

.fvcl-woo .button.button:disabled:hover,
.fvcl-woo .button.button[disabled]:hover{background-color:var(--fvcl-blue);color:#fff}


/* ==========================================================================
   10. THE KIT ANCHOR GUARD, FOR WOOCOMMERCE

   Same reasoning as the block at the foot of fvcl.css: Elementor's kit states a
   global anchor colour, so every new anchor family has to restate its own at
   0,2,0 or it inherits the kit's link blue. These are the anchors WooCommerce
   and the two new templates introduce.
   ========================================================================== */
a.fvcl-addbtn.fvcl-addbtn{color:#fff}
a.fvcl-addbtn.fvcl-addbtn:hover,
a.fvcl-addbtn.fvcl-addbtn:focus{color:#fff}
.fvcl-woo .button.button{color:#fff}
.fvcl-woo .button.button[name=update_cart],
.fvcl-woo .button.button.wc-backward{color:var(--fvcl-blue)}
.woocommerce-message.woocommerce-message a,
.woocommerce-info.woocommerce-info a{color:var(--fvcl-blue);font-weight:700}
.woocommerce-message.woocommerce-message a:hover,
.woocommerce-info.woocommerce-info a:hover{color:var(--fvcl-blue-dark)}
.woocommerce-error.woocommerce-error a{color:#8A1B33;font-weight:700}
.fvcl-woo .shop_table.shop_table a,
.fvcl-woo-cart .shop_table.shop_table .product-name a{color:var(--fvcl-navy);font-weight:600}
.fvcl-woo .shop_table.shop_table a:hover,
.fvcl-woo-cart .shop_table.shop_table .product-name a:hover{color:var(--fvcl-blue)}
.fvcl-woo address.address a,
.fvcl-woo .woocommerce-customer-details a{color:var(--fvcl-blue)}
.fvcl-woo-cart .product-remove.product-remove a{color:var(--fvcl-navy)}
.fvcl-woo-account .woocommerce-MyAccount-navigation.woocommerce-MyAccount-navigation a{color:var(--fvcl-navy)}
.fvcl-woo-account .woocommerce-MyAccount-navigation.woocommerce-MyAccount-navigation .is-active a{color:#fff}


/* ==========================================================================
   11. RESPONSIVE

   The catalogue card, the product layout and the prose panel already carry
   their own queries in fvcl.css and are not repeated. Only the surfaces this
   file introduced need one.
   ========================================================================== */
@media (max-width:1024px){
  .fvcl-woo-cart .cart-collaterals{grid-template-columns:minmax(0,1fr)}
  .fvcl-woo-checkout .col2-set{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:767px){
  .fvcl-woo-band{padding:40px 0}
  .fvcl-woo-band--head{padding:26px 0 16px}
  .fvcl-woo-band--desc{padding:24px 0 40px}
  .fvcl-woo-h{font-size:22px;margin-bottom:18px}
  .fvcl-woo-title{font-size:27px}
  .fvcl-woo-band--body{padding:0 0 48px}
  .fvcl-woo-in{padding:0 18px}

  /* The cart table becomes a stack: a five-column table cannot be read at
     375px, and a horizontally scrolling checkout is worse than a tall one. */
  .fvcl-woo-cart .shop_table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fvcl-woo-cart .shop_table,
  .fvcl-woo-cart .shop_table tbody,
  .fvcl-woo-cart .shop_table tr,
  .fvcl-woo-cart .shop_table td{display:block;width:100%}
  .fvcl-woo-cart .shop_table tr{border-bottom:1px solid rgba(15,27,45,.09);padding:6px 0}
  .fvcl-woo-cart .shop_table td{border-bottom:none;padding:7px 16px;overflow-wrap:break-word}
  .fvcl-woo-cart .shop_table td::before{content:attr(data-title);display:block;
    font:700 11px Montserrat,sans-serif;letter-spacing:.07em;text-transform:uppercase;
    color:var(--fvcl-muted-3);margin-bottom:5px}
  .fvcl-woo-cart .shop_table td.product-remove::before,
  .fvcl-woo-cart .shop_table td.product-thumbnail::before,
  .fvcl-woo-cart .shop_table td.actions::before{display:none}
  .fvcl-woo-cart .actions .button{width:100%}
  .fvcl-woo-cart .cart_totals,
  .fvcl-woo-checkout #order_review{padding:20px 18px}
  .fvcl-woo .woocommerce-order-overview{padding:18px 18px;gap:14px 22px}
}


/* ==========================================================================
   12. WOOCOMMERCE'S OWN LAYOUT STYLESHEET

   Sections 6 and 7 assumed woocommerce-layout.css was not on the page. It is:
   WooCommerce enqueues it on cart and checkout, and it carries a float-and-
   percentage grid from before CSS Grid existed. Two consequences, both visible
   at 1440 and neither at 375 (its own smallscreen sheet undoes them at <=768):

     .woocommerce .cart-collaterals .cart_totals  float:right; width:48%
     .woocommerce .col2-set .col-1 / .col-2       float:left/right; width:48%

   Those sit at 0,3,0 and 0,3,0, above section 6 and 7's 0,2,0, so the panel was
   sized at 48% of its own track - 182px inside a 380px column - and its table
   and its "Proceed to checkout" button overflowed it. On checkout the same 48%
   halved each billing column while #order_review stayed full width below.

   The fix is to state the layout at the level that actually owns both halves,
   and to answer WooCommerce's percentage widths at matching specificity so no
   !important is needed. Everything here is desktop-only; below 768px
   woocommerce-smallscreen.css and section 11 keep the existing stack.
   ========================================================================== */

/* The two ::before/::after table boxes WooCommerce prints inside
   .cart-collaterals are clearfix for a float layout that no longer runs. In a
   grid container they become real grid items and consume cells, so they are
   switched off before the columns are declared. 0,2,1 against WooCommerce's
   0,2,1, won on source order. */
.fvcl-woo-cart .cart-collaterals::before,
.fvcl-woo-cart .cart-collaterals::after{content:none}

@media (min-width:768px){

  /* --- Cart -------------------------------------------------------------
     The two halves are siblings of .woocommerce, not of .cart-collaterals:
     the table lives in form.woocommerce-cart-form and the panel one level
     deeper. So the column pair belongs here. Notices span both; anything
     WooCommerce adds later spans both by default and cannot land in a
     half-width cell by accident. */
  .fvcl-woo-cart .woocommerce{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
    column-gap:30px;row-gap:24px;align-items:start}
  .fvcl-woo-cart .woocommerce>*{grid-column:1 / -1}
  .fvcl-woo-cart .woocommerce>form.woocommerce-cart-form{grid-column:1;min-width:0}
  .fvcl-woo-cart .woocommerce>.cart-collaterals{grid-column:2;min-width:0}

  /* .cart-collaterals is now a single-column wrapper, so it carries no grid of
     its own and no top margin: the row gap above already spaces it. */
  .fvcl-woo-cart .cart-collaterals{display:block;margin-top:0;width:auto}

  /* Answers woocommerce-layout.css at 0,3,0. The panel fills its track. */
  .fvcl-woo-cart .cart-collaterals .cart_totals{float:none;width:auto}

  /* The panel's own contents, now that it has a real measure. */
  .fvcl-woo-cart .cart_totals table{table-layout:fixed}
  .fvcl-woo-cart .cart_totals th{width:44%}
  .fvcl-woo-cart .cart_totals td{text-align:right}
  .fvcl-woo-cart .cart_totals .woocommerce-Price-amount{white-space:nowrap}

  /* --- Checkout ---------------------------------------------------------
     form.checkout holds three children: billing, the review heading and the
     review panel. Billing takes the left column across both rows; the heading
     and the panel stack in the right one. */
  .fvcl-woo-checkout form.checkout{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
    column-gap:30px;grid-template-rows:auto 1fr;align-items:start}
  .fvcl-woo-checkout form.checkout>*{grid-column:1 / -1}
  .fvcl-woo-checkout form.checkout>#customer_details{grid-column:1;grid-row:1 / span 2;min-width:0}
  .fvcl-woo-checkout form.checkout>#order_review_heading{grid-column:2;grid-row:1;min-width:0}
  .fvcl-woo-checkout form.checkout>#order_review{grid-column:2;grid-row:2;min-width:0}

  /* Billing now owns a single column of the page, so its own two-up field set
     from section 7 is stacked: two 48% columns inside a half-width column is
     the same crush the layout sheet was causing. */
  .fvcl-woo-checkout #customer_details{display:block}
  .fvcl-woo-checkout .col2-set .col-1,
  .fvcl-woo-checkout .col2-set .col-2{float:none;width:100%}
  .fvcl-woo-checkout .col2-set .col-2{margin-top:26px}

  /* The review side reads as one panel, in the same treatment as the cart's
     totals, so the two screens are recognisably the same design. */
  .fvcl-woo-checkout #order_review_heading{
    background:var(--fvcl-blue-soft);border-radius:var(--fvcl-r-card) var(--fvcl-r-card) 0 0;
    padding:24px 26px 0;margin:0}
  .fvcl-woo-checkout #order_review{
    background:var(--fvcl-blue-soft);border-radius:0 0 var(--fvcl-r-card) var(--fvcl-r-card);
    padding:18px 26px 26px}
  /* Section 7 already states this table flush inside the panel at 11px 0 and
     borderless. That still reads correctly in a 420px column, so only the wrap
     behaviour is added: a long product name has to break rather than push the
     table past the panel it sits in. */
  .fvcl-woo-checkout #order_review .shop_table th,
  .fvcl-woo-checkout #order_review .shop_table td{overflow-wrap:break-word}

  @media (min-width:1025px){
    .fvcl-woo-cart .woocommerce{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
    .fvcl-woo-checkout form.checkout{grid-template-columns:minmax(0,1fr) minmax(0,420px)}
  }
}

/* Section 11's two <=1024px rules collapsed the .cart-collaterals and .col2-set
   grids that sections 6 and 7 declared. Both containers are display:block from
   768px up now, so those rules describe nothing and are left in place as the
   record of what section 11 did. Nothing here depends on them.

   The payment box sits inside the review panel now, and WooCommerce dresses it
   in its own grey card with a pointer notch. Restated in the panel's terms so
   the panel does not contain a second, differently coloured card. */
.fvcl-woo-checkout #payment{background:transparent;border-radius:0}
.fvcl-woo-checkout #payment ul.payment_methods{
  background:#fff;border:1px solid rgba(15,27,45,.1);border-radius:var(--fvcl-r-card);
  padding:16px 18px;margin:0 0 18px}
.fvcl-woo-checkout #payment div.payment_box{
  background:var(--fvcl-blue-soft-2);color:var(--fvcl-body);border-radius:var(--fvcl-r-btn);
  font:400 13px/1.6 Montserrat,sans-serif}
.fvcl-woo-checkout #payment div.payment_box::before{border-bottom-color:var(--fvcl-blue-soft-2)}
.fvcl-woo-checkout #payment div.place-order{padding:0;margin:0}


/* ==========================================================================
   13. FVCL-QA-037 EXTENSION, PART TWO: WOOCOMMERCE'S OWN BUTTON SHEET

   Section 5 mapped WooCommerce's controls onto the design's primary button and
   section 9 guarded their hover and focus. Both were stated at 0,2,0 and 0,3,0
   against selectors in woocommerce.css that reach 0,2,1 and 0,4,1:

     .woocommerce:where(body:not(...)) a.button.alt         0,2,1
     .woocommerce:where(body:not(...)) a.button.alt:hover   0,4,1

   :where() contributes nothing, so the element type in `a.button` was enough to
   outrank us. "Proceed to checkout" and "Place order" therefore rendered
   WooCommerce's stock purple #7F54B3 at every width, resting and on hover.

   The wrapper is the answer: .fvcl-woo is an ancestor of .woocommerce on all
   three shortcode pages, so naming both takes every family past WooCommerce
   without an !important. The doubled-class idiom from section 9 is kept on the
   interactive states, which also clears Hello Elementor's magenta reset.
   ========================================================================== */

/* Resting. 0,3,1. */
.fvcl-woo .woocommerce a.button,
.fvcl-woo .woocommerce button.button,
.fvcl-woo .woocommerce input.button,
.fvcl-woo .woocommerce input[type=submit].button{
  background-color:var(--fvcl-blue);color:#fff;border:none;border-radius:var(--fvcl-r-btn);
  padding:13px 24px;font:700 14px Montserrat,sans-serif;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;text-shadow:none;transition:background-color .2s ease}

/* Hover and focus. 0,5,1, above woocommerce.css's 0,4,1 and the theme reset. */
.fvcl-woo .woocommerce a.button.button:hover,
.fvcl-woo .woocommerce a.button.button:focus,
.fvcl-woo .woocommerce button.button.button:hover,
.fvcl-woo .woocommerce button.button.button:focus,
.fvcl-woo .woocommerce input.button.button:hover,
.fvcl-woo .woocommerce input.button.button:focus{
  background-color:var(--fvcl-blue-dark);color:#fff}
.fvcl-woo .woocommerce a.button.button:focus-visible,
.fvcl-woo .woocommerce button.button.button:focus-visible,
.fvcl-woo .woocommerce input.button.button:focus-visible{
  outline:2px solid var(--fvcl-navy);outline-offset:2px}

/* The secondary family, restated after the primary so it keeps its own colours
   in all three states rather than inheriting them. */
.fvcl-woo .woocommerce button.button[name=update_cart],
.fvcl-woo .woocommerce a.button.wc-backward,
.fvcl-woo .woocommerce a.button.button.wc-backward{
  background-color:#fff;color:var(--fvcl-blue);border:1px solid rgba(37,81,181,.4)}
.fvcl-woo .woocommerce button.button.button[name=update_cart]:hover,
.fvcl-woo .woocommerce button.button.button[name=update_cart]:focus,
.fvcl-woo .woocommerce a.button.button.wc-backward:hover,
.fvcl-woo .woocommerce a.button.button.wc-backward:focus{
  background-color:var(--fvcl-blue-soft);color:var(--fvcl-blue);border-color:var(--fvcl-blue)}
.fvcl-woo .woocommerce button.button.button:disabled,
.fvcl-woo .woocommerce button.button.button[disabled],
.fvcl-woo .woocommerce button.button.button[disabled]:hover,
.fvcl-woo .woocommerce button.button.button[disabled]:focus{
  background-color:#fff;color:var(--fvcl-blue);opacity:.55;cursor:default}

/* "Proceed to checkout" fills the totals panel. WooCommerce sets display:block
   and a 3px radius on it by name at 0,3,1, so it is answered by name. */
.fvcl-woo-cart .wc-proceed-to-checkout a.checkout-button{
  display:flex;width:100%;box-sizing:border-box;
  background-color:var(--fvcl-blue);color:#fff;border-radius:var(--fvcl-r-btn);
  padding:15px 20px;font-size:15px;white-space:normal;text-align:center}
.fvcl-woo-cart .wc-proceed-to-checkout a.checkout-button:hover,
.fvcl-woo-cart .wc-proceed-to-checkout a.checkout-button:focus{
  background-color:var(--fvcl-blue-dark);color:#fff}

/* "Place order" carries two IDs in woocommerce.css, so it is answered with two.
   2,2,0 resting and 2,3,0 interactive. */
.fvcl-woo-checkout #payment #place_order{
  background-color:var(--fvcl-blue);color:#fff;border:none;border-radius:var(--fvcl-r-btn);
  width:100%;box-sizing:border-box;padding:16px 24px;
  font:700 15px Montserrat,sans-serif;line-height:1.2;white-space:normal;
  box-shadow:var(--fvcl-sh-cta);text-shadow:none;transition:background-color .2s ease}
.fvcl-woo-checkout #payment #place_order:hover,
.fvcl-woo-checkout #payment #place_order:focus{
  background-color:var(--fvcl-blue-dark);color:#fff}
.fvcl-woo-checkout #payment #place_order:focus-visible{
  outline:2px solid var(--fvcl-navy);outline-offset:2px}
.fvcl-woo-checkout #payment #place_order:disabled,
.fvcl-woo-checkout #payment #place_order[disabled]{
  background-color:var(--fvcl-blue);opacity:.55}


/* ==========================================================================
   14. THE KIT ANCHOR GUARD, PART TWO

   Section 10's entries were written at 0,2,0. The two anchors added above sit
   inside .woocommerce, where the kit's global anchor colour is not the only
   competitor any more, so both are restated at the specificity their
   backgrounds are already stated at.
   ========================================================================== */
.fvcl-woo .woocommerce a.button,
.fvcl-woo .woocommerce a.button.button:hover,
.fvcl-woo .woocommerce a.button.button:focus{color:#fff}
.fvcl-woo .woocommerce a.button.wc-backward,
.fvcl-woo .woocommerce a.button.button.wc-backward:hover,
.fvcl-woo .woocommerce a.button.button.wc-backward:focus{color:var(--fvcl-blue)}
.fvcl-woo-cart .wc-proceed-to-checkout a.checkout-button,
.fvcl-woo-cart .wc-proceed-to-checkout a.checkout-button:hover,
.fvcl-woo-cart .wc-proceed-to-checkout a.checkout-button:focus{color:#fff}