/* ===========================================================================
   AR Kitchen — overrides for conflicts with WooCommerce's default stylesheet.
   Kept separate from the verbatim styles.css so the ported design stays pristine.
   =========================================================================== */

/* WooCommerce ships `.woocommerce img, .woocommerce-page img { height: auto }`
   (specificity 0,1,1), which outranks the theme's `.ark-logo-img { height:58px }`
   (0,1,0) on shop/product/cart pages and blows the logo up to its natural size.
   Re-assert the intended logo sizes with higher specificity. */
.ark-header .ark-logo-img { height: 58px; width: auto; }
.ark-footer .ark-logo-light .ark-logo-img { height: 74px; width: auto; }

/* The header search bar is always present in the DOM and shown/hidden via the
   [hidden] attribute (toggled by app.js). `.ark-searchbar { display:flex }` would
   otherwise override [hidden] and leave it permanently visible. Honor the attribute. */
.ark-searchbar[hidden] { display: none; }

/* The `.fld` form-field pattern is defined in checkout.css, which only loads on
   cart/checkout. The Contact page uses it too, so promote the base rules here
   (loaded on every page) — otherwise its labels render inline, unstyled. */
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld.full { grid-column: 1 / -1; }
.fld span {
    font-size: 11.5px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: var(--ink-soft);
}
.fld input, .fld select, .fld textarea {
    font-family: var(--sans); font-size: 14.5px; color: var(--ink);
    background: var(--cream); border: 1.5px solid var(--card-line);
    border-radius: 8px; padding: 12px 13px;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
    outline: none; border-color: var(--gold);
}