/*
Theme Name: Also Coffee Co
Author: Also Coffee Co
Description: Friendly & playful, subscription-first WooCommerce theme — driven by the Also Coffee Co design system (tokens in /ds, layout in /homepage.css).
Version: 1.0
*/

/* Glue only — design tokens live in /ds/styles.css, homepage layout in /homepage.css.
   A few rules to keep WooCommerce + WordPress chrome on-brand. */

.also-main .also-section{padding-block:var(--section-y)}

/* WooCommerce buttons → brand pills */
.woocommerce a.button,.woocommerce button.button,.woocommerce .button,.woocommerce #respond input#submit{
  background:var(--btn-primary-bg)!important;color:var(--btn-primary-text)!important;
  border-radius:var(--radius-pill)!important;font-family:var(--font-body)!important;font-weight:700!important;
  padding:.7em 1.4em!important;border:0!important;transition:background var(--dur-base) var(--ease-out)}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover{background:var(--btn-primary-bg-hover)!important}
.woocommerce .price{color:var(--text-strong)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--font-display)}

/* Skip link, and the theme's screen-reader-only utility.
   ⚠️ This used to be `position:absolute;left:-999px`, which only hides an element
   when its nearest POSITIONED ancestor is the page. `.also-skip` is also used for
   sr-only labels, and inside the Routine Builder those sit in a
   `position:relative` row - so -999px from a checkbox at x~1040 landed at x~41 and
   three "Include <coffee>" pills rendered on screen, over the page.
   The clip technique below hides regardless of positioning context; :focus uses
   position:fixed so the skip link still appears at the top-left of the viewport. */
.also-skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.also-skip:focus{position:fixed;left:0;top:0;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;background:var(--accent);color:var(--acc-cream);padding:.6rem 1rem;border-radius:0 0 var(--radius-md) 0;z-index:9999}

/* Royal Mail Tracked 48 trust mark - also_royal_mail_tracked() and bundle.js.
   The logo replaces the generic package icon; height follows the line's text. */
.also-rm{display:inline-flex;align-items:center;gap:.35em;white-space:nowrap;vertical-align:middle}
/* Two classes + element on purpose: WooCommerce's own `.woocommerce-page img
   {height:auto}` (0,1,1) beat a single class and snapped the logo back to its
   natural 26px on checkout. */
.also-rm img.also-rm__logo{display:block;height:1.05em;width:auto;max-width:none;border-radius:2px;flex:none}