/* WooCommerce's shared pieces in the design's look. Loaded on every store page (shop, product, cart, checkout,
   account) after WooCommerce's own stylesheets and before the page files (catalog.css, product.css, cart.css,
   checkout.css, account.css).

   How the selectors are weighted, so a page file can always override:
   - A rule that replaces a WooCommerce default mirrors that default's selector, with ".tg-page" where
     WooCommerce has ".woocommerce", and sets only the properties the default sets. It wins by coming later,
     and anything that already beat WooCommerce's default still beats it.
   - Everything WooCommerce does not set (heights, field borders, type) is added through :where(), at the
     weight of a bare element or a single class, so any page rule wins.
   - An inline style (how the design's own buttons and fields are built) wins over all of it.

   Colours and sizes: navy #003050, amber #FFB81C (buy actions only), text #0E1B26, field border #8796A5,
   card border #DCE2E8, radius 4px (controls) and 6px (cards). Buttons and fields as in the Checkout and
   Contact designs. */

@keyframes tg-spin{to{transform:rotate(360deg)}}

/* ---------- buttons ---------- */
/* Plain .button: navy. .button.alt (add to cart, checkout, place order): amber. The "Add to Quote" buttons
   are the quote plugin's and are styled in plugins.css. */
:where(.tg-page) :where(a,button,input):where(.button):where(:not(.afrfqbt,.afrfqbt_single_page)),
:where(.tg-page #respond input#submit){box-sizing:border-box;min-height:44px;font-family:inherit;text-align:center;-webkit-appearance:none;appearance:none;transition:background-color .14s ease-out,border-color .14s ease-out,color .14s ease-out,box-shadow .14s ease-out}
.tg-page :is(a,button,input).button:where(:not(.afrfqbt,.afrfqbt_single_page)),
.tg-page #respond input#submit{display:inline-block;margin:0;padding:10px 20px;border:2px solid #003050;border-radius:4px;background-color:#003050;color:#FFFFFF;font-size:16px;font-weight:700;line-height:20px;text-decoration:none}
.tg-page :is(a,button,input).button:where(:not(.afrfqbt,.afrfqbt_single_page)):hover,
.tg-page #respond input#submit:hover{background-color:#114575;border-color:#114575;color:#FFFFFF;text-decoration:none}
.tg-page :is(a,button,input).button.alt:where(:not(.afrfqbt,.afrfqbt_single_page)),
.tg-page #respond input#submit.alt{background-color:#FFB81C;border-color:#FFB81C;color:#0E1B26}
.tg-page :is(a,button,input).button.alt:where(:not(.afrfqbt,.afrfqbt_single_page)):hover,
.tg-page #respond input#submit.alt:hover{background-color:#F2AB0D;border-color:#F2AB0D;color:#0E1B26}
/* disabled */
.tg-page :is(a,button,input).button:is(.disabled,:disabled,:disabled[disabled]):where(:not(.afrfqbt,.afrfqbt_single_page)),
.tg-page :is(a,button,input).button:is(.disabled,:disabled,:disabled[disabled]):where(:not(.afrfqbt,.afrfqbt_single_page)):hover{padding:10px 20px;background-color:#003050;color:#FFFFFF;opacity:.5;cursor:not-allowed}
.tg-page :is(a,button,input).button.alt:is(.disabled,:disabled,:disabled[disabled]):where(:not(.afrfqbt,.afrfqbt_single_page)),
.tg-page :is(a,button,input).button.alt:is(.disabled,:disabled,:disabled[disabled]):where(:not(.afrfqbt,.afrfqbt_single_page)):hover{background-color:#FFB81C;color:#0E1B26}
/* working (after a click on an AJAX button) and done */
.tg-page :is(a,button,input).button.loading:where(:not(.afrfqbt,.afrfqbt_single_page)){opacity:.65;padding-right:42px}
.tg-page :is(a,button,input).button.loading:where(:not(.afrfqbt,.afrfqbt_single_page))::after{top:50%;right:14px;margin-top:-8px;font-size:16px;line-height:1}
:where(.tg-page) a.added_to_cart{display:inline-block;padding:10px 0;font-weight:600;color:#0F5C9A}

/* ---------- notices ---------- */
:where(.tg-page) .woocommerce-notices-wrapper:empty{display:none}
:where(.tg-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error){position:relative;margin:0 0 20px;padding:14px 16px 14px 48px;background:#FFFFFF;border:1px solid #DCE2E8;border-left:4px solid #114575;border-radius:6px;color:#0E1B26;font-size:16px;line-height:1.45;list-style:none;word-wrap:break-word}
:where(.tg-page) .woocommerce-message{border-left-color:#17794A}
:where(.tg-page) .woocommerce-error{border-left-color:#A32A2A}
:where(.tg-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error)::before{top:14px;left:16px;font-size:18px;line-height:23px;color:#114575}
:where(.tg-page) .woocommerce-message::before{color:#17794A}
:where(.tg-page) .woocommerce-error::before{color:#A32A2A}
:where(.tg-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error) :where(a:not(.button)){color:#0F5C9A;font-weight:600}
:where(.tg-page) .woocommerce-error li + li{margin-top:6px!important}
/* the notice's action ("View cart", "Undo"): a small outline button at the right */
:where(.tg-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error) :is(a,button).button{float:right;min-height:36px;margin:-6px -4px -6px 16px;padding:6px 14px;background-color:#FFFFFF;border-color:#003050;color:#003050;font-size:15px}
:where(.tg-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error) :is(a,button).button:hover{background-color:#E9EDF1;border-color:#003050;color:#003050}
@media (max-width:699px){
  :where(.tg-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error){padding-right:12px}
  /* no pull upwards here: when the button follows the text it drops under it, and must not touch the last line */
  :where(.tg-page) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error) :is(a,button).button{min-height:44px;margin:4px 0 4px 12px;padding:10px 14px}
}

/* ---------- form rows and fields ---------- */
/* what WooCommerce sets, replaced */
.tg-page form .form-row{margin:0 0 16px;padding:0}
.tg-page form .form-row label{line-height:1.4}
.tg-page form .form-row .required{visibility:visible;color:#A32A2A;font-weight:700;text-decoration:none}
.tg-page form .form-row label.checkbox,
.tg-page form .form-row label.woocommerce-form__label-for-checkbox,
.tg-page .woocommerce-form-login .woocommerce-form-login__rememberme{display:inline-flex}
.tg-page form .form-row .input-checkbox{margin:2px 0 0}
.tg-page form .form-row textarea{height:auto;line-height:1.5}
.tg-page form .form-row.woocommerce-invalid label{color:#0E1B26}
.tg-page form .form-row.woocommerce-invalid :is(input.input-text,select,.select2-container .select2-selection){border-color:#A32A2A}
.tg-page form .form-row.woocommerce-validated :is(input.input-text,select,.select2-container .select2-selection){border-color:#8796A5}
/* WooCommerce removes the outline from its fields; the focus ring comes back */
.tg-page form .form-row :is(input.input-text,textarea,select):focus-visible{outline:2px solid #003050;outline-offset:2px;box-shadow:0 0 0 4px rgba(255,184,28,.6)}
/* what it does not set: the design's field */
:where(.tg-page form .form-row) label{display:block;margin:0 0 6px;font-size:14px;font-weight:600;color:#0E1B26}
:where(.tg-page form .form-row) label:where(.checkbox,.woocommerce-form__label-for-checkbox,.inline){display:inline-flex;align-items:flex-start;gap:10px;min-height:44px;margin:0;padding:10px 0;box-sizing:border-box;font-size:16px;font-weight:400;line-height:1.5;cursor:pointer}
:where(.tg-page) :where(input.input-checkbox,.woocommerce-form__input-checkbox,input.input-radio){flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:#003050}
:where(.tg-page form .form-row) .optional{font-weight:400;color:#566574}
:where(.tg-page) input.input-text:where(:not(.qty)),
:where(.tg-page) textarea.input-text,
:where(.tg-page form .form-row) :where(textarea,select){box-sizing:border-box;width:100%;max-width:100%;height:48px;margin:0;padding:0 14px;border:1px solid #8796A5;border-radius:4px;background-color:#FFFFFF;color:#0E1B26;font:inherit;font-size:16px;font-weight:400}
:where(.tg-page) textarea.input-text,
:where(.tg-page form .form-row) :where(textarea){height:auto;min-height:112px;padding:12px 14px;resize:vertical}
:where(.tg-page form .form-row) :where(select){padding:0 12px}
:where(.tg-page form .form-row) :where(input.input-text,textarea,select):focus{border-color:#003050}
:where(.tg-page form .form-row) ::placeholder{color:#566574;opacity:1}
:where(.tg-page form .form-row) :where(em,.description){font-size:14px;font-style:normal;color:#566574}
:where(.tg-page) .checkout-inline-error-message{margin:6px 0 0;font-size:14px;font-weight:600;color:#A32A2A}
/* show and hide password */
:where(.tg-page form .password-input) input.input-text{padding-right:48px}
:where(.tg-page) .woocommerce-password-strength{margin-top:6px;padding:6px 10px;border-radius:4px;font-size:14px;font-weight:600}
:where(.tg-page) .woocommerce-password-hint{display:block;margin-top:6px;font-size:14px;color:#566574}
@media (max-width:699px){
  :where(.tg-page form .form-row) label:where(:not(.checkbox,.woocommerce-form__label-for-checkbox,.inline)){font-size:15px}
  :where(.tg-page) input.input-text:where(:not(.qty)),
  :where(.tg-page form .form-row) :where(select){height:52px}
}

/* ---------- select2 (country and state fields). The list is added at the end of <body>, outside the page shell ---------- */
.tg-theme .select2-container{font-family:Barlow,'Segoe UI',system-ui,sans-serif;font-size:16px;color:#0E1B26}
.tg-theme .select2-container--default .select2-selection--single{height:48px;border:1px solid #8796A5;border-radius:4px;background-color:#FFFFFF}
.tg-theme .select2-container--default .select2-selection--single .select2-selection__rendered{padding-left:14px;padding-right:36px;line-height:46px;color:#0E1B26}
.tg-theme .select2-container--default .select2-selection--single .select2-selection__placeholder{color:#566574}
.tg-theme .select2-container--default .select2-selection--single .select2-selection__arrow{top:1px;right:8px;height:46px}
.tg-theme .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#36454F transparent transparent transparent}
.tg-theme .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #36454F transparent}
.tg-theme .select2-container--default.select2-container--open .select2-selection--single{border-color:#003050}
.tg-theme .select2-container--default .select2-selection--single:focus-visible{outline:2px solid #003050;outline-offset:2px;box-shadow:0 0 0 4px rgba(255,184,28,.6)}
.tg-theme .select2-dropdown{border:1px solid #003050;border-radius:4px;background-color:#FFFFFF;box-shadow:0 18px 30px rgba(2,26,43,.18)}
.tg-theme .select2-container--default .select2-search--dropdown{padding:8px}
.tg-theme .select2-container--default .select2-search--dropdown .select2-search__field{height:44px;padding:0 12px;border:1px solid #8796A5;border-radius:4px;font:inherit;font-size:16px;color:#0E1B26}
.tg-theme .select2-container--default .select2-results__option{padding:10px 14px;font-size:16px;line-height:1.35}
.tg-theme .select2-container--default .select2-results__option[aria-selected="true"],
.tg-theme .select2-container--default .select2-results__option[data-selected="true"]{background-color:#E9EDF1;color:#0E1B26}
.tg-theme .select2-container--default .select2-results__option--highlighted[aria-selected],
.tg-theme .select2-container--default .select2-results__option--highlighted[data-selected]{background-color:#003050;color:#FFFFFF}
@media (max-width:699px){
  .tg-theme .select2-container--default .select2-selection--single{height:52px}
  .tg-theme .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:50px}
  .tg-theme .select2-container--default .select2-selection--single .select2-selection__arrow{height:50px}
}

/* ---------- star rating (WooCommerce's star font and its two overlaid rows stay exactly as they are) ---------- */
.tg-page .star-rating{color:#C98A00}
.tg-page .star-rating::before{color:#C5CED7}
.tg-page p.stars a{color:#C98A00}

/* ---------- pagination ---------- */
.tg-page nav.woocommerce-pagination{text-align:center}
.tg-page nav.woocommerce-pagination ul{display:flex;margin:0;padding:0;border:0;white-space:normal}
.tg-page nav.woocommerce-pagination ul li{float:none;display:block;margin:0;padding:0;border-right:0;overflow:visible}
.tg-page nav.woocommerce-pagination ul li a,
.tg-page nav.woocommerce-pagination ul li span{display:inline-flex;min-width:44px;margin:0;padding:0 12px;font-size:16px;font-weight:600;line-height:1;text-decoration:none}
.tg-page nav.woocommerce-pagination ul li a:focus,
.tg-page nav.woocommerce-pagination ul li a:hover{background:#FFFFFF;color:#003050}
.tg-page nav.woocommerce-pagination ul li span.current{background:#003050;color:#FFFFFF}
:where(.tg-page nav.woocommerce-pagination){margin:24px 0 0}
:where(.tg-page nav.woocommerce-pagination) ul{flex-wrap:wrap;justify-content:center;gap:8px;list-style:none}
:where(.tg-page nav.woocommerce-pagination ul li) :where(a,span){align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;border:1px solid #8796A5;border-radius:4px;background:#FFFFFF;color:#0E1B26}
:where(.tg-page nav.woocommerce-pagination ul li) a:where(:hover,:focus){border-color:#003050}
:where(.tg-page nav.woocommerce-pagination ul li) span.current{border-color:#003050}
:where(.tg-page nav.woocommerce-pagination ul li) span.dots{min-width:24px;padding:0;border-color:transparent;background:none}

/* ---------- price ---------- */
:where(.tg-page) .price{color:#003050;font-weight:700}
.tg-page div.product p.price,
.tg-page div.product span.price,
.tg-page ul.products li.product .price{color:#003050}
:where(.tg-page) .price del{margin-right:6px;color:#566574;font-weight:400}
.tg-page div.product p.price del,
.tg-page div.product span.price del,
.tg-page ul.products li.product .price del{opacity:1}
:where(.tg-page) .price ins{color:inherit;text-decoration:none}
.tg-page div.product p.price ins,
.tg-page div.product span.price ins,
.tg-page ul.products li.product .price ins{background:none;font-weight:700}
:where(.tg-page) .price :where(.woocommerce-price-suffix,.from){font-size:.8em;font-weight:400;color:#566574}

/* ---------- sale tag ---------- */
.tg-page span.onsale{top:8px;left:8px;min-width:0;min-height:0;margin:0;padding:5px 10px;border-radius:3px;background-color:#003050;color:#FFFFFF;font-size:14px;font-weight:700;line-height:1.1;z-index:2}
.tg-page ul.products li.product .onsale{top:8px;right:8px;left:auto;margin:0}
:where(.tg-page) span.onsale{font-family:'Barlow Condensed',Barlow,sans-serif;letter-spacing:.06em;text-transform:uppercase}

/* ---------- stock ---------- */
:where(.tg-page) .stock{font-weight:600;color:#17794A}
:where(.tg-page) .stock:where(.out-of-stock){color:#A32A2A}
:where(.tg-page) .stock:where(.available-on-backorder){color:#7A5200}
.tg-page div.product .stock{color:#17794A}
.tg-page div.product p.stock{font-size:15px}
.tg-page div.product .stock.out-of-stock{color:#A32A2A}
.tg-page div.product .stock.available-on-backorder{color:#7A5200}

/* ---------- quantity ---------- */
/* (no box-sizing here: a page's own stepper sizes this field itself) */
.tg-page .quantity .qty{width:64px;text-align:center}
:where(.tg-page .quantity) input.qty{height:46px;margin:0;padding:0 4px;border:1px solid #8796A5;border-radius:4px;background-color:#FFFFFF;color:#0E1B26;font:inherit;font-size:16px;font-weight:600}

/* ---------- tables ---------- */
.tg-page table.shop_table{width:100%;margin:0 0 24px;border:1px solid #DCE2E8;border-radius:6px;border-collapse:separate;text-align:left}
.tg-page table.shop_table th{padding:12px 14px;font-weight:700;line-height:1.4}
.tg-page table.shop_table td{padding:12px 14px;border-top:1px solid #E9EDF1;line-height:1.4;vertical-align:middle}
.tg-page table.shop_table tbody th,
.tg-page table.shop_table tfoot td,
.tg-page table.shop_table tfoot th{border-top:1px solid #E9EDF1}
:where(.tg-page) table.shop_table{border-spacing:0;background-color:#FFFFFF;font-size:16px}
:where(.tg-page table.shop_table) thead th{font-family:'Barlow Condensed',Barlow,sans-serif;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#36454F}
:where(.tg-page table.shop_table) a:where(:not(.button)){color:#0F5C9A}

/* ---------- loading overlay (cart totals, checkout review, payment box while they refresh) ---------- */
.tg-page .blockUI.blockOverlay::before{width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid #C5CED7;border-top-color:#003050;border-radius:50%;background:none;box-sizing:border-box;color:transparent;font-size:0;line-height:0;animation:tg-spin .7s linear infinite}

/* ---------- store notice bar (WooCommerce > Customise > Store notice). Printed at the end of <body> ---------- */
.tg-theme p.woocommerce-store-notice,
.tg-theme p.demo_store{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:45;box-sizing:border-box;margin:0;padding:12px 24px;background-color:#021A2B;box-shadow:0 -6px 16px rgba(2,26,43,.12);color:#FFFFFF;font-family:Barlow,'Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.45;text-align:center}
.tg-theme.admin-bar p.demo_store{top:auto}
.tg-theme p.woocommerce-store-notice a,
.tg-theme p.demo_store a{display:inline-block;margin-left:10px;padding:6px 0;color:#FFB81C;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:699px){
  /* above the phone dock (60px), or above a page's own bottom bar (64px) where the dock is off */
  .tg-theme p.woocommerce-store-notice,
  .tg-theme p.demo_store{bottom:calc(60px + env(safe-area-inset-bottom,0px));padding:10px 16px;z-index:39}
  .tg-theme .tg-page[data-nodock] ~ p.woocommerce-store-notice,
  .tg-theme .tg-page[data-nodock] ~ p.demo_store{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}