/* ============================================================
   Takali Brewing — WooCommerce brand skin (Phase 2 / WP1)
   Loaded ONLY on shop / cart / checkout / account pages, so it
   never affects the Phase-1 front page. Brands WooCommerce's
   default output to the Takali palette + fonts; deliberately
   light — overrides only what needs it. Refined on staging.
   ============================================================ */

:root{
  --tk-orange:#F97828; --tk-teal:#2DA88A; --tk-yellow:#F5D100;
  --tk-ink:#1A1A1A; --tk-cream:#FFF6E6;
}

/* ---- page frame + headings ---- */
.tk-wc{color:var(--tk-ink);font-family:'Work Sans',sans-serif;}
.tk-wc .woocommerce-products-header__title,
.tk-wc h1.entry-title,
.tk-wc .product_title,
.tk-wc h1{
  font-family:'Constructio Grotesk',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:-.01em;line-height:.95;
  font-size:clamp(28px,5vw,50px);color:var(--tk-ink);margin:0 0 20px;
}

/* ---- buttons: match the site's Anton pill buttons ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .button{
  background:var(--tk-orange);color:#fff;
  border:3px solid var(--tk-ink);border-radius:999px;
  box-shadow:4px 4px 0 var(--tk-ink);
  font:400 15px 'Anton',sans-serif;letter-spacing:.02em;text-transform:uppercase;
  padding:12px 26px;cursor:pointer;
  transition:transform .15s,box-shadow .15s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button:hover{
  transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tk-ink);
  background:var(--tk-orange);color:#fff;
}

/* ---- prices ---- */
.woocommerce .price,
.woocommerce span.amount{color:var(--tk-orange);font-weight:800;}
.woocommerce del span.amount{color:#999;font-weight:500;}

/* ---- product grid cards ---- */
.woocommerce ul.products li.product{
  background:#fff;border:3px solid var(--tk-ink);border-radius:18px;
  box-shadow:6px 6px 0 var(--tk-ink);padding:16px;text-align:center;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font:800 18px 'Work Sans',sans-serif;color:var(--tk-ink);padding-top:10px;
}

/* ---- form fields ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"]{
  border:2px solid var(--tk-ink);border-radius:12px;
  padding:12px 14px;font:500 15px 'Work Sans',sans-serif;background:#fff;
}

/* ---- mobile ----
   Product cards sit two-per-row below 768px, which leaves ~150px of button width — enough to wrap
   "ADD TO CART" onto two lines. Tighten the type and padding so it stays on one line. */
@media (max-width:767px){
  .woocommerce ul.products li.product{padding:12px;}
  .woocommerce ul.products li.product .button{font-size:13px;padding:11px 14px;white-space:nowrap;}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15px;line-height:1.3;}
  /* Cart table: let the built-in responsive stacking breathe rather than squeezing 5 columns. */
  .woocommerce table.shop_table_responsive tr td{padding:10px 12px;}
  .woocommerce .cart-collaterals .cart_totals{width:100%;float:none;}
  /* Order-summary / totals tables shouldn't force the page wider than the screen. */
  .woocommerce table.shop_table{display:block;overflow-x:auto;}
}

/* ---- field hints ----
   WooCommerce styles a field's `description` as an absolutely-positioned blue tooltip with an arrow.
   On mobile it overlaps the neighbouring fields and its own text spills. Render it as a plain hint
   sitting under the field instead. */
.woocommerce form .form-row .description,
.woocommerce-page form .form-row .description{
  position:static !important;display:block !important;float:none !important;
  background:none !important;background-color:transparent !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  color:#666 !important;padding:6px 2px 0 !important;margin:0 !important;
  font:500 13px/1.5 'Work Sans',sans-serif !important;
  max-width:none !important;width:auto !important;z-index:auto !important;
}
.woocommerce form .form-row .description::before,
.woocommerce form .form-row .description::after,
.woocommerce-page form .form-row .description::before,
.woocommerce-page form .form-row .description::after{display:none !important;content:none !important;}

/* ---- password forms (reset / set / account details) ----
   WooCommerce floats the two password fields into ~196px columns, which makes the longer label wrap and
   the fields sit at different heights. On a form this short there's no reason to split them, so stack
   them full width. The show/hide eye is absolutely positioned inside the field, so the input also needs
   right padding or the typed password runs underneath it. */
.woocommerce-ResetPassword,
.woocommerce-LostPassword,
.woocommerce-EditAccountForm{max-width:460px;}
.woocommerce-ResetPassword .form-row-first,
.woocommerce-ResetPassword .form-row-last,
.woocommerce-LostPassword .form-row-first,
.woocommerce-LostPassword .form-row-last,
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last{
  width:100% !important;float:none !important;margin:0 0 18px !important;
}
.woocommerce form .form-row label{display:block;margin:0 0 6px;font:600 14px 'Work Sans',sans-serif;}
/* The eye toggle sits inside the field. */
.woocommerce form .password-input{display:block;position:relative;width:100%;}
.woocommerce form .password-input input.input-text{width:100%;padding-right:46px !important;}
.woocommerce form .show-password-input{
  position:absolute;right:15px;top:50%;transform:translateY(-50%);
  cursor:pointer;padding:0;line-height:0;
}

/* ---- notices ----
   WooCommerce positions the notice icon absolutely and reserves 3.5em of left padding for it. Restate
   that padding here so no page-level list styling can collapse it and print the icon over the text. */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  border-top:3px solid var(--tk-teal);border-radius:8px;
  font-family:'Work Sans',sans-serif;
  padding:1em 2em 1em 3.5em !important;
  list-style:none;
}
.woocommerce-message li,.woocommerce-info li,.woocommerce-error li,.woocommerce-noreviews li{
  list-style:none;margin:0;padding:0;
}
/* Notice text is a message, not a link — only real links inside it should look like links. */
.woocommerce-error,.woocommerce-error li{color:var(--tk-ink);text-decoration:none;}
.woocommerce-message,.woocommerce-message li,.woocommerce-info,.woocommerce-info li{color:var(--tk-ink);text-decoration:none;}
.woocommerce-info{border-top-color:var(--tk-orange);}
.woocommerce-error{border-top-color:#c0392b;}
@media (max-width:767px){
  /* Tighter gutters on small screens, still clearing the icon. */
  .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
    padding:1em 1.1em 1em 3em !important;
  }
}

/* ---- cart & checkout ---- */
.woocommerce table.shop_table{
  border:3px solid var(--tk-ink);border-radius:14px;overflow:hidden;
}
.woocommerce table.shop_table th{
  font-family:'Work Sans',sans-serif;text-transform:uppercase;letter-spacing:.5px;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #payment{
  background:#fff;border:3px solid var(--tk-ink);border-radius:14px;
  padding:24px 26px 26px;                 /* content was sitting flush against the border */
}
.woocommerce .cart-collaterals .cart_totals h2{
  margin:0 0 16px;font-size:clamp(22px,4vw,30px);line-height:1;
}
/* The container already carries the heavy border — drop the inner table's so they don't double up. */
.woocommerce .cart-collaterals .cart_totals table.shop_table{
  border:0;border-radius:0;margin:0 0 20px;width:100%;
}
.woocommerce .cart-collaterals .cart_totals table.shop_table th,
.woocommerce .cart-collaterals .cart_totals table.shop_table td{
  padding:12px 0;border-top:0;border-bottom:1px solid #ececec;
}
.woocommerce .cart-collaterals .cart_totals table.shop_table tr:last-child th,
.woocommerce .cart-collaterals .cart_totals table.shop_table tr:last-child td{border-bottom:0;}
.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout{padding:0;}
.woocommerce .cart-collaterals .cart_totals .checkout-button{
  display:block;width:100%;text-align:center;margin:0;
}
/* Checkout payment box: same treatment, and its inner list shouldn't hug the border either. */
.woocommerce-checkout #payment ul.wc_payment_methods{padding:0;margin:0 0 14px;border-bottom:1px solid #ececec;}
.woocommerce-checkout #payment div.form-row.place-order{padding:0;margin:0;}

/* ---- links inside Woo content ---- */
.tk-wc a{color:#1d7a63;}
.tk-wc a:hover{color:var(--tk-orange);}

/* ---- My Account screens ---- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 24px;padding:0;border:3px solid var(--tk-ink);border-radius:14px;overflow:hidden;}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid #eee;}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:0;}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:12px 16px;font:600 14px 'Work Sans',sans-serif;color:var(--tk-ink);text-decoration:none;}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:#FFF6E6;color:var(--tk-orange);}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--tk-ink);color:#fff;}
.woocommerce-account .woocommerce-MyAccount-content{font-family:'Work Sans',sans-serif;}

/* Sub-headings inside account screens (Billing address, Order details, …). Deliberately modest — the page
   already has a big ADDRESSES/ORDERS h1, so these must not compete with it or wrap onto two lines. */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3{
  font:800 17px/1.25 'Work Sans',sans-serif !important;
  text-transform:uppercase;letter-spacing:.04em;color:var(--tk-ink);
  margin:0 0 10px;
}

/* Addresses: one billing column (nothing ships), readable non-italic text, edit link beside the heading. */
.woocommerce-account .woocommerce-Addresses{display:block;}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address{width:100%;float:none;max-width:520px;}
.woocommerce-account .woocommerce-Address-title{display:flex;align-items:baseline;justify-content:flex-start;gap:14px;margin:0 0 8px;}
.woocommerce-account .woocommerce-Address-title h2{margin:0;}
.woocommerce-account .woocommerce-Address-title .edit{font:600 13px 'Work Sans',sans-serif;text-decoration:underline;white-space:nowrap;}
.woocommerce-account .woocommerce-Address address{
  font-style:normal;font:500 15px/1.7 'Work Sans',sans-serif;color:#333;
  background:#fff;border:2px solid var(--tk-ink);border-radius:12px;padding:14px 16px;margin:0;
}
.woocommerce-account .woocommerce-MyAccount-content p{line-height:1.6;}

/* Account layout: keep the nav a fixed sidebar and the content beside it (Woo's default floats get messy). */
@media (min-width:783px){
  .woocommerce-account .woocommerce-MyAccount-navigation{float:none;width:250px;}
  .woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto;}
  .woocommerce-account .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content{margin-left:0;}
  .woocommerce-account .woocommerce{display:flex;gap:34px;align-items:flex-start;}
  .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation{flex:0 0 250px;}
  .woocommerce-account .woocommerce > .woocommerce-MyAccount-content{flex:1 1 auto;min-width:0;}
}