/* WhatsTK storefront layer — batch 12: account, order tracking, 404, contact and policy pages. Scoped to body.wtk-sf-page.
   Visual only: no field is hidden, renamed or moved between forms. */

/* Page card: a thin border instead of a shadow, same radius as the rest of the new layer. */
html body.wtk-sf-page .content-area .entry.content-bg.single-entry,
html body.wtk-sf-page.error404 .content-area .content-bg{box-shadow:none!important;border:1px solid var(--sf-line);border-radius:var(--sf-radius-lg)}

/* Reading text on contact / policy pages */
html body.wtk-sf-page .entry-content{color:var(--sf-ink-2)}
html body.wtk-sf-page .entry-content > p,
html body.wtk-sf-page .entry-content > ul,
html body.wtk-sf-page .entry-content > ol{max-width:72ch;line-height:1.7}
html body.wtk-sf-page .entry-content > h2{font-size:var(--sf-step-2);line-height:1.3;letter-spacing:-.01em;margin:1.6em 0 .5em;color:var(--sf-ink)}
html body.wtk-sf-page .entry-content > h3{font-size:var(--sf-step-1);line-height:1.35;margin:1.4em 0 .4em;color:var(--sf-ink)}
html body.wtk-sf-page .entry-content > h2:first-child,html body.wtk-sf-page .entry-content > h3:first-child{margin-top:0}
html body.wtk-sf-page .entry-content a:not(.button){color:var(--sf-ink);text-decoration:underline;text-underline-offset:3px}

/* Buttons on these pages: one primary style, at least 48 px high. */
html body.wtk-sf-page .woocommerce form.login button.button,
html body.wtk-sf-page .woocommerce form.register button.button,
html body.wtk-sf-page form.track_order button.button,
html body.wtk-sf-page form.woocommerce-ResetPassword button.button{min-height:48px;padding:0 28px!important;border-radius:var(--sf-pill)!important;
  background:var(--sf-cta)!important;border:1px solid var(--sf-cta)!important;color:#fff!important;font-weight:600}
html body.wtk-sf-page .woocommerce form.login button.button:hover,
html body.wtk-sf-page .woocommerce form.register button.button:hover,
html body.wtk-sf-page form.track_order button.button:hover{background:var(--sf-cta-hover)!important;border-color:var(--sf-cta-hover)!important}

/* Account: login / register boxes and the "ordered without an account" line */
html body.wtk-sf-page .woocommerce form.login,
html body.wtk-sf-page .woocommerce form.register{border:1px solid var(--sf-line)!important;border-radius:var(--sf-radius)!important;background:var(--sf-bg)}
html body.wtk-sf-page #customer_login h2{font-size:var(--sf-step-2);letter-spacing:-.01em}
html body.wtk-sf-page .woocommerce-account .woocommerce-info,
html body.wtk-sf-page .woocommerce > .woocommerce-info{border-radius:var(--sf-radius);font-size:var(--sf-step--1)}
html body.wtk-sf-page .woocommerce form .woocommerce-LostPassword a{font-size:var(--sf-step--1)}

/* Order tracking */
html body.wtk-sf-page form.track_order{max-width:720px}
html body.wtk-sf-page form.track_order > p:first-child{margin-bottom:20px;color:var(--sf-ink-2)}

/* 404 */
html body.wtk-sf-page.error404 .page-header .page-title,
html body.wtk-sf-page.error404 h1{font-size:var(--sf-step-3);letter-spacing:-.02em}
html body.wtk-sf-page.error404 .wtk-404-links{display:flex;flex-wrap:wrap;gap:10px}
html body.wtk-sf-page.error404 .wtk-404-links .button{min-height:44px}

@media (max-width:767px){
  html body.wtk-sf-page .woocommerce form.login button.button,
  html body.wtk-sf-page .woocommerce form.register button.button,
  html body.wtk-sf-page form.track_order button.button{width:100%}
  html body.wtk-sf-page .entry-content > h2{font-size:var(--sf-step-1)}
  /* The page card spans the full phone width: no side borders or rounded corners touching the screen edge. */
  html body.wtk-sf-page .content-area .entry.content-bg.single-entry,
  html body.wtk-sf-page.error404 .content-area .content-bg{border-left:0;border-right:0;border-radius:0}
}

/* ---------- batch 21: signed-in account pages (dashboard, orders, order details, addresses, account details) ----------
   Look only: every link, form field and button stays where WooCommerce puts it. */
html body.wtk-sf-page.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
html body.wtk-sf-page.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li{margin:0;border:0!important}
html body.wtk-sf-page.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a{display:flex;align-items:center;min-height:44px;padding:0 14px!important;
  border-radius:var(--sf-pill);color:var(--sf-ink-2)!important;text-decoration:none!important;font-size:var(--sf-step-0);font-weight:500}
html body.wtk-sf-page.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a:hover{background:var(--sf-surface);color:var(--sf-ink)!important}
html body.wtk-sf-page.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li.is-active a{background:var(--sf-ink);color:#fff!important;font-weight:600}
html body.wtk-sf-page.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li.is-active::before,
html body.wtk-sf-page.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li.is-active a::before{display:none!important}
html body.wtk-sf-page.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--sf-ink-3)!important}
/* Orders table */
html body.wtk-sf-page.woocommerce-account .woocommerce-orders-table{border-collapse:collapse;width:100%;font-size:var(--sf-step--1)}
html body.wtk-sf-page.woocommerce-account .woocommerce-orders-table th{font-weight:600;color:var(--sf-ink-3);text-transform:uppercase;letter-spacing:.04em;font-size:12px}
html body.wtk-sf-page.woocommerce-account .woocommerce-orders-table td,
html body.wtk-sf-page.woocommerce-account .woocommerce-orders-table th{padding:12px 8px!important;border-bottom:1px solid var(--sf-line)!important;vertical-align:middle}
html body.wtk-sf-page.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-status{color:var(--sf-ink);font-weight:500}
html body.wtk-sf-page.woocommerce-account .woocommerce-orders-table .woocommerce-button,
html body.wtk-sf-page.woocommerce-account a.woocommerce-button.button{min-height:40px!important;padding:0 18px!important;border-radius:var(--sf-pill)!important;font-size:var(--sf-step--1)!important}
/* Order details and addresses: cards */
html body.wtk-sf-page.woocommerce-account .woocommerce-order-details,
html body.wtk-sf-page.woocommerce-account .woocommerce-customer-details,
html body.wtk-sf-page.woocommerce-account .woocommerce-Addresses .woocommerce-Address{padding:20px;border:1px solid var(--sf-line);border-radius:var(--sf-radius);background:var(--sf-bg);margin-bottom:20px}
html body.wtk-sf-page.woocommerce-account .woocommerce-order-details__title,
html body.wtk-sf-page.woocommerce-account .woocommerce-column__title,
html body.wtk-sf-page.woocommerce-account .woocommerce-Address-title h2,
html body.wtk-sf-page.woocommerce-account .woocommerce-Address-title h3{font-size:var(--sf-step-1)!important;margin:0 0 12px!important}
html body.wtk-sf-page.woocommerce-account .woocommerce-customer-details address{border:0!important;padding:0!important;font-style:normal;line-height:1.6}
html body.wtk-sf-page.woocommerce-account .woocommerce-MyAccount-content > p:first-child mark{background:transparent;font-weight:600;color:var(--sf-ink)}
html body.wtk-sf-page.woocommerce-account .woocommerce-MyAccount-content form .button{min-height:48px;padding:0 28px!important;border-radius:var(--sf-pill)!important;background:var(--sf-cta)!important;border-color:var(--sf-cta)!important;color:#fff!important}
html body.wtk-sf-page.woocommerce-account .woocommerce-MyAccount-content fieldset{border:1px solid var(--sf-line);border-radius:var(--sf-radius);padding:16px 20px;margin:20px 0}
@media (max-width:767px){
  /* Phones: the account menu becomes one row of pills that scrolls sideways (every pill is a link, so it stays
     reachable by keyboard) instead of a 300 px tall list above the content. */
  html body.wtk-sf-page.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  html body.wtk-sf-page.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a{white-space:nowrap;border:1px solid var(--sf-line);font-size:14px}
  html body.wtk-sf-page.woocommerce-account.logged-in .woocommerce-MyAccount-navigation{margin-bottom:20px}
  /* Notices with a button (e.g. Confirm email address): the button goes under the sentence instead of squeezing it. */
  html body.wtk-sf-page.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
  html body.wtk-sf-page.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button{float:none!important;display:inline-flex!important;margin:0 0 10px!important}
  html body.wtk-sf-page.woocommerce-account .woocommerce-orders-table td,
  html body.wtk-sf-page.woocommerce-account .woocommerce-orders-table th{padding:10px 4px!important}
}

/* ---------- batch 2-01: 404 page, one card ----------
   The theme draws a white card with a shadow around the whole 404 section, and the batch 12 rule above drew a second
   bordered card inside it, so the three buttons hung below the inner card. Now the outer section is the only card
   (border, no shadow) and the inner box is plain. */
html body.wtk-sf-page.error404 #main section.error{background:var(--sf-bg)!important;box-shadow:none!important;border:1px solid var(--sf-line);border-radius:var(--sf-radius-lg);padding:0!important;overflow:hidden}
html body.wtk-sf-page.error404 #main section.error > .content-bg{border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important;background:transparent!important}
html body.wtk-sf-page.error404 #main section.error .page-header{margin-bottom:12px}
html body.wtk-sf-page.error404 #main section.error .search-form{max-width:560px}
html body.wtk-sf-page.error404 #main section.error > .wtk-404-links{margin:0!important;padding:0 32px 32px!important}
@media (max-width:767px){
  html body.wtk-sf-page.error404 #main section.error > .content-bg .entry-content-wrap{padding:24px 16px!important}
  html body.wtk-sf-page.error404 #main section.error > .wtk-404-links{padding:0 16px 24px!important}
}

/* ---------- batch 2-02: reading width for content pages (desktop) ----------
   Order tracking, contact, shipping, returns, privacy, terms: the white card ran 1240 px wide while the text stopped
   at 72ch / 720 px, leaving the right half empty. The card now ends at 880 px, left-aligned with the page title.
   Account pages (two columns) and the 404 card keep the full width. */
@media (min-width:1025px){
  html body.wtk-sf-page:not(.woocommerce-account):not(.error404) .content-area .entry.content-bg.single-entry{max-width:880px}
}

/* ---------- batch 2-03 ----------
   (1) Lost / reset password: a one-field form in a 1240 px card; same 880 px reading width as the content pages. */
@media (min-width:1025px){
  html body.wtk-sf-page.woocommerce-lost-password .content-area .entry.content-bg.single-entry{max-width:880px}
}
/* (2) Affiliate pages (SliceWP login and registration forms): square 3 px inputs, light 17 px labels and a square
   button, unlike every other form on the site. Same look as the WooCommerce forms now: bold labels, 46 px rounded
   fields, gold pill button. Fields, names and behaviour unchanged. */
html body.wtk-sf-page .slicewp-form .slicewp-field-label-wrapper label{font-size:15px!important;font-weight:700!important;color:#1f2a44!important;line-height:1.4}
html body.wtk-sf-page .slicewp-form .slicewp-field-wrapper{margin-bottom:16px}
html body.wtk-sf-page .slicewp-form :is(input[type="text"],input[type="email"],input[type="password"],input[type="url"],input[type="tel"],select){min-height:46px;padding:0 14px!important;border:1px solid #d3d7de!important;border-radius:10px!important;font-size:16px!important;background:#fff!important;box-shadow:none!important}
html body.wtk-sf-page .slicewp-form .slicewp-field-input-password input{padding-right:48px!important}
html body.wtk-sf-page .slicewp-form textarea{padding:10px 14px!important;border:1px solid #d3d7de!important;border-radius:10px!important;font-size:16px!important;box-shadow:none!important}
html body.wtk-sf-page .slicewp-form :is(button[type="submit"],input[type="submit"]){min-height:48px;padding:0 28px!important;border-radius:var(--sf-pill)!important;
  background:var(--sf-cta)!important;border:1px solid var(--sf-cta)!important;color:#fff!important;font-size:15px!important;font-weight:600!important;line-height:1!important;cursor:pointer}
html body.wtk-sf-page .slicewp-form :is(button[type="submit"],input[type="submit"]):hover{background:var(--sf-cta-hover)!important;border-color:var(--sf-cta-hover)!important}
html body.wtk-sf-page .slicewp-form a:not(.slicewp-show-hide-password){font-size:var(--sf-step--1)}
/* ---------- batch 2-14: products under the 404 card ---------- */
html body.wtk-sf-page.error404 #main .wtk-sf-suggest--404{margin:32px 0 8px;padding-top:0;border-top:0}
html body.wtk-sf-page.error404 #main .wtk-sf-suggest--404 a.wtk-sf-card__link{text-decoration:none!important}
@media (max-width:767px){ html body.wtk-sf-page.error404 #main .wtk-sf-suggest--404{margin-top:24px} }

/* ---------- batch 2-09: reading rhythm on policy pages ----------
   Paragraphs were 32 px apart and headings only 35 px below the text above them, so sections did not stand out
   (returns, privacy, terms, shipping). Paragraphs 1em apart, a clear 2em before each heading. */
html body.wtk-sf-page :is(.entry-content, .entry-content > .wtk-policy) > p{margin-top:0;margin-bottom:1em}
html body.wtk-sf-page :is(.entry-content, .entry-content > .wtk-policy) > :is(h2,h3):not(:first-child){margin-top:2em}
/* Shipping and terms wrap their text in div.wtk-policy, so the batch 12 reading styles above never reached them. */
html body.wtk-sf-page .entry-content > .wtk-policy > :is(p,ul,ol){max-width:72ch;line-height:1.7}
html body.wtk-sf-page .entry-content > .wtk-policy > h2{font-size:var(--sf-step-2);line-height:1.3;letter-spacing:-.01em;margin-bottom:.5em;color:var(--sf-ink)}
html body.wtk-sf-page .entry-content > .wtk-policy > h3{font-size:var(--sf-step-1);line-height:1.35;margin-bottom:.4em;color:var(--sf-ink)}
html body.wtk-sf-page .entry-content > .wtk-policy > :is(h2,h3):first-child{margin-top:0}
@media (max-width:767px){ html body.wtk-sf-page .entry-content > .wtk-policy > h2{font-size:var(--sf-step-1)} }

/* ---------- batch 2-08: contact page cards ----------
   The three cards (email, WhatsApp, Telegram) are links but looked like static boxes: no arrow, no hover change.
   They get a small arrow and a dark border on hover / keyboard focus. From 900 px they keep one row of three
   (narrower than that the email address would break mid-word, so they stay stacked). Links and texts unchanged. */
html body.wtk-sf-page .wtk-contact .wtk-contact__card{transition:border-color .15s ease}
html body.wtk-sf-page .wtk-contact .wtk-contact__card:hover,
html body.wtk-sf-page .wtk-contact .wtk-contact__card:focus-visible{border-color:var(--sf-ink)!important}
html body.wtk-sf-page .wtk-contact .wtk-contact__card strong::after{content:"\00a0\2192";font-weight:400}
@media (min-width:900px){
  html body.wtk-sf-page .wtk-contact{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  html body.wtk-sf-page .wtk-contact .wtk-contact__card{width:auto!important;min-width:0;margin:0!important}
}

/* "Show password" eye: 22 px tap area grows to 44 px around the same spot (padding + negative margin, icon stays put). */
html body.wtk-sf-page .slicewp-form a.slicewp-show-hide-password{padding:11px!important;margin:-11px!important;box-sizing:content-box}