/*
 * Site-specific overrides on top of Shopify's section CSS.
 * Load order: tokens.css -> theme.css -> section-*.css -> component-*.css -> overrides.css
 * Anything here represents a deliberate visual departure from Shopify's defaults
 * (typically because we replicate the OpenCart-era UX).
 */

/* ==========================================================================
   iOS system-blue killer — STOREFRONT-WIDE. DO NOT REMOVE.
   iOS Safari paints unstyled <button>/<select>/<input> (and link) text with its system blue via
   `-webkit-text-fill-color`, which OVERRIDES `color` — so setting `color` alone never fixes it
   (that's why the VSelect "Sort by" and other controls still showed blue on iPad). Pin every
   interactive element's text to its real CSS colour. Class-based colours are more specific, so
   styled buttons/links keep their colour; this only neutralises the otherwise-unstyled controls
   (VSelect is reused across shop / account / product / checkout — same component, same blue).
   ========================================================================== */
a,
button,
select,
input,
textarea {
    -webkit-text-fill-color: currentColor;
}
button,
select,
input,
textarea {
    color: inherit;
}

/* ==========================================================================
   Autofill background killer — ACCOUNT ONLY (.hw-account-page). The global theme.css rule paints
   autofilled fields with var(--color-background-main) (the cream), which leaks into the account's
   white dialogs (the password fields). We deliberately do NOT change that storefront behaviour;
   we just out-specify it inside the account (matching theme's :not() chain + the body class so the
   specificity beats it) and force a white field instead.
   ========================================================================== */
.hw-account-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):-webkit-autofill,
.hw-account-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):-webkit-autofill:hover,
.hw-account-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):-webkit-autofill:focus,
.hw-account-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: var(--color-text-main, #1f2937) !important;
    caret-color: var(--color-text-main, #1f2937);
    /* Chrome reveals its autofill colour after a delay — push that transition out forever. */
    transition: background-color 100000s ease-in-out 0s !important;
}

/* When printing an account order (the "Invoice" button), drop the SPA chrome so only the order
   prints clean. */
@media print {
    .hw-account-page .account-topbar { display: none !important; }
    /* Paper is white whatever the brand palette is — do NOT token this. */
    .hw-account-page { background: #fff !important; }
}

/* ==========================================================================
   Mega menu layout lives in src/components/Header/MegaMenu.vue as a scoped
   <style> block — the panel is a self-contained OpenCart-style dropdown and
   doesn't use the Shopify .submenu.mega-menu CSS pipeline, so there's
   nothing to override from theme.css/section-header.css here.
   ========================================================================== */

/* ==========================================================================
   Header top strip: surface tweaks that aren't in Shopify's section CSS.
   The top bar inherits --color-background-header from :root (cream);
   the bottom nav redeclares the header tokens inside tokens.css.
   ========================================================================== */

/* Apply OC's Bootstrap system font stack + body font size site-wide,
   matching the old site. */
body {
    font-family: var(--bs-font-sans-serif);
    font-size: var(--bs-body-font-size);
}

/* The Vue mount point <div id="vue-app"> wraps the entire Vue-rendered
   header. Give it `display: contents` so it drops out of the layout tree
   entirely — its children behave as if they were direct children of the
   site container. Without this, the mount div adds its own (often tiny or
   zero-height) layout box which breaks assumptions other styles make about
   "the header sits directly in the page flow." */
#vue-app {
    display: contents;
}

/* ==========================================================================
   BREADCRUMB-CRITICAL — DO NOT MAKE THE SHELL/BODY/MAIN A FLEX COLUMN.
   ==========================================================================
   The Shopify breadcrumb (breadcrumb.css → .breadcrumb-main, position:absolute
   with a NEGATIVE top) sits in a slot opened by the first content container's
   TOP MARGIN (.container--vertical-space-small { margin-top }) COLLAPSING upward
   through .main-content. Flex containers do NOT margin-collapse, so a flex shell
   closes that slot and the breadcrumb disappears behind the header. That flex
   layout was the breadcrumb regression — removed per Codex's fix. Keep the WP
   shell as NORMAL block flow so the margin collapses and the breadcrumb shows.
   If a sticky footer is ever wanted again, do it WITHOUT flex on the shell or
   .main-content (margin-collapse here is load-bearing for the breadcrumb).
   ========================================================================== */

/* Logo: image height is driven by --header-logo-image (currently 90px) which
   is INTENTIONALLY larger than --header-logo (the row height, currently 55px).
   This lets the visible logo overflow the row without making the header strip
   grow taller. Drop section-header.css's max-height clamp so the image is free
   to exceed the wrapper, and let the wrapper allow overflow so it isn't clipped. */
.site-header .logo img {
    max-height: none;
}
.site-header .logo,
.site-header .logo-img {
    overflow: visible;
}

/* …but only where there is room for it. On a phone the top row is 75px, so a
   90px logo overflowed it by 7px top AND bottom — the mark ran into the admin
   bar above and the search bar below with no breathing space at all.
   Below the portable breakpoint the image and the row are the same height
   again, and the row keeps real padding either side. */
@media screen and (max-width: 1023px) {
    .site-header .header__top {
        --header-logo: 68px;
        --header-logo-image: 68px;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}

/* ==========================================================================
   /my-account/* — Shopify-style standalone shell. Hide the site nav/header
   so AccountShell owns the chrome. Page background is a soft grey so the
   white card surfaces (account-card) read as elevated.
   ========================================================================== */
body.hw-account-page #vue-app,
body.hw-account-page .hw-unified-header,
body.hw-account-page .site-header {
    display: none !important;
}
body.hw-account-page {
    background: var(--hw-bg, #f3f3f3);
}
body.hw-account-page #container.hw-wordpress-shell {
    background: transparent;
}
body.hw-account-page main,
body.hw-account-page .site-main,
body.hw-account-page #main {
    background: transparent;
}

/* page.php emits .title.h2 + a vertical-spacing container around its content;
   on account pages we hide that heading and collapse the container so the
   AccountShell topbar can sit flush at the top and span the full viewport. */
body.hw-account-page .title.h2,
body.hw-account-page .gutter-bottom--page {
    display: none !important;
}
body.hw-account-page #main.main-content {
    padding: 0 !important;
    margin: 0 !important;
}
body.hw-account-page #main.main-content .shopify-section {
    margin: 0 !important;
    padding: 0 !important;
}
body.hw-account-page #main.main-content .container,
body.hw-account-page #main.main-content .container--large,
body.hw-account-page #main.main-content .container--vertical-space-small {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.hw-account-page #main.main-content article.hw-page-content {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   Privacy policy (and similar legal pages) — a clean, centered reading column
   with comfortable legal-doc typography. Tagged body.hw-legal-page by
   functions.php on the page the hub's privacy generator creates.
   ========================================================================== */
body.hw-legal-page #main.main-content article.hw-page-content {
    /* Fill the page's large container (like About Us), just nicer legal-doc type. */
    font-size: 1.04rem;
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.84);
}
body.hw-legal-page .hw-page-content > * + * {
    margin-top: 1.15em;
}
body.hw-legal-page .hw-page-content h2 {
    margin: 1.9em 0 0.5em;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hw-accent, #32432d);
}
body.hw-legal-page .hw-page-content h3 {
    margin: 1.5em 0 0.4em;
    font-size: 1.14rem;
    font-weight: 700;
}
body.hw-legal-page .hw-page-content ul,
body.hw-legal-page .hw-page-content ol {
    padding-left: 1.4em;
    margin: 0.6em 0;
}
body.hw-legal-page .hw-page-content li {
    margin-bottom: 0.45em;
}
body.hw-legal-page .hw-page-content li::marker {
    color: var(--hw-accent, #32432d);
}
body.hw-legal-page .hw-page-content a {
    color: var(--hw-accent, #32432d);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   Add-payment-method form. Pre-rendered into #hw-add-payment-source on the
   payment-methods view, then DOM-moved into AccountPaymentMethods' dialog
   when the user clicks "Add new". Selectors target the WC form classes so
   styling applies in either location (hidden source or inside the dialog).
   ========================================================================== */
#hw-add-payment-source { display: none; }
.hw-add-payment-host { display: block; }

.hw-add-payment-host #add_payment_method,
.hw-add-payment-host form.add_payment_method,
.hw-add-payment-host #payment.woocommerce-PaymentMethods,
.hw-add-payment-host #payment {
    background: transparent;
}
.hw-add-payment-host ul.payment_methods {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 0;
}
.hw-add-payment-host ul.payment_methods > li {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: var(--hw-card, #fff);
}
.hw-add-payment-host ul.payment_methods > li label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.95rem;
}
.hw-add-payment-host .payment_box {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--hw-card, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
}
.hw-add-payment-host .form-row,
.hw-add-payment-host p.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
}
.hw-add-payment-host label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
}
.hw-add-payment-host input[type="text"],
.hw-add-payment-host input[type="email"],
.hw-add-payment-host input[type="tel"],
.hw-add-payment-host input[type="number"],
.hw-add-payment-host select {
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--hw-card, #fff);
    transition: border-color 0.12s linear, box-shadow 0.12s linear;
}
.hw-add-payment-host input:focus,
.hw-add-payment-host select:focus {
    outline: none;
    border-color: var(--hw-accent);
    box-shadow: 0 0 0 3px rgba(50, 67, 45, 0.15);
}
.hw-add-payment-host .button,
.hw-add-payment-host button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.5rem;
    background: rgba(50, 67, 45, 0.1);
    color: var(--hw-accent);
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s linear;
}
.hw-add-payment-host .button:hover,
.hw-add-payment-host button[type="submit"]:hover {
    background: rgba(50, 67, 45, 0.16);
}

/* Clover hosted-field placeholders. The Clover SDK mounts an <iframe> into
   each #clover-card-* div and styles the input INSIDE the iframe (height 44–
   46px), but leaves the outer placeholder/iframe element unconstrained, so
   it swells to the SDK's default. Clamp the placeholder + the iframe child
   to match the rest of our form inputs. */
.hw-add-payment-host #clover-card-name,
.hw-add-payment-host #clover-card-number,
.hw-add-payment-host #clover-card-expiry,
.hw-add-payment-host #clover-card-cvv,
.hw-add-payment-host #clover-card-postal {
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: var(--hw-card, #fff);
    overflow: hidden;
    /* flex container's left padding insets the hosted-field iframe so the
       card text isn't jammed against the edge (matches the checkout field) */
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
}
.hw-add-payment-host #clover-card-name iframe,
.hw-add-payment-host #clover-card-number iframe,
.hw-add-payment-host #clover-card-expiry iframe,
.hw-add-payment-host #clover-card-cvv iframe,
.hw-add-payment-host #clover-card-postal iframe {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    width: 100% !important;
    display: block !important;
    border: 0 !important;
    margin: 0 !important;
}
/* The gateway's #clover-card-errors is mirrored into Vue and rendered as a real <VAlert> at the
   top of the dialog, so hide the gateway's own (woocommerce-error) box entirely. */
.hw-add-payment-host #clover-card-errors,
.hw-add-payment-host .ccp-card-errors {
    display: none !important;
}

/* The Clover SDK appends a "Secure Payments Powered by Clover" strip and a
   floating reCAPTCHA badge to <body>. We surface that attribution inside the
   add-card dialog instead (.hw-dialog__secure), so keep the page-level ones
   off — Google's terms allow hiding the badge when the legal text is shown. */
body.woocommerce-account .clover-footer,
body.woocommerce-account .clover-secure-footer,
body.woocommerce-account .grecaptcha-badge,
body.woocommerce-checkout .clover-footer,
body.woocommerce-checkout .clover-secure-footer,
body.woocommerce-checkout .grecaptcha-badge {
    display: none !important;
    visibility: hidden !important;
}

/* Checkout: the Clover/reCAPTCHA attribution lives INSIDE the credit-card payment box (injected
   in functions.php) so it never escapes to the page — no background of its own, follows the store
   colours. reCAPTCHA legal text on the left, "Powered by Clover" wordmark in the bottom-right. */
.hw-checkout .hw-clover-footer {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    margin: 0.95rem 0 0.1rem;
    padding: 0;
    background: transparent;
    border: 0;
}
.hw-checkout .hw-clover-footer__legal {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.5);
}
.hw-checkout .hw-clover-footer__legal a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hw-checkout .hw-clover-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.72rem;
    color: rgba(0, 0, 0, 0.5);
}
.hw-checkout .hw-clover-mark__svg {
    width: 13px;
    height: 13px;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.85;
}
.hw-checkout .hw-clover-mark__word {
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Fade the attribution in when the card opens (the method becomes selected). */
@keyframes hw-clover-fade {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
}
.hw-checkout #payment li.payment_method_clover_commerce_pro:has(input:checked) .hw-clover-footer {
    animation: hw-clover-fade 0.4s ease both;
}

/* attribution footer inside the add-payment dialog */
.hw-dialog__secure {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
    text-align: center;
    padding: 0.85rem 1.25rem 1.1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 0.25rem;
}
.hw-dialog__secure-clover {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
}
.hw-dialog__secure-clover .mdi { font-size: 0.95rem; opacity: 0.7; }
.hw-dialog__secure-recaptcha {
    font-size: 0.72rem;
    color: rgba(0, 0, 0, 0.45);
    line-height: 1.4;
}
.hw-dialog__secure-recaptcha a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hw-add-payment-host fieldset.wc-credit-card-form {
    border: 0;
    padding: 0;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Global: breathing room before the footer. Every page ended in a hard cut
   (owner feedback) — give main content consistent bottom padding.
   -------------------------------------------------------------------------- */
main.main-content,
#main.main-content {
    padding-bottom: 4.5rem;
}

/* WooCommerce notices — site-wide styling (was account-pages-only; the
   "please sign in to view this order" notice etc. looked unstyled). */
.woocommerce-notices-wrapper:not(:empty) {
    margin: 0 0 1rem;
}
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    list-style: none;
    background: var(--hw-card, #fff);
    border: 1px solid var(--color-border, #e5e0d8);
    border-left: 4px solid var(--hw-accent, #32432d);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 0 0 0.75rem;
    font-size: 0.92rem;
}
.woocommerce-error { border-left-color: #b3261e; }
.woocommerce-error li,
.woocommerce-message li { margin: 0; }

/* --------------------------------------------------------------------------
   Wallet "Add payment method" dialog — styles for the WC form that gets
   moved from #hw-add-payment-source into the dialog host (the moved nodes
   carry no Vue scope attribute, so these must be global).
   -------------------------------------------------------------------------- */

.hw-add-payment-host ul.payment_methods {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.hw-add-payment-host ul.payment_methods li {
    border: 1.5px solid var(--color-border, #d8d2c7);
    border-radius: 12px;
    background: var(--hw-card, #fff);
    overflow: hidden;
    position: relative;
}

/* Single gateway — no dark-green "selected" ring; the neutral base border is enough. */

.hw-add-payment-host ul.payment_methods input[name="payment_method"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hw-add-payment-host ul.payment_methods > li > label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1rem;
    margin: 0;
    font-weight: 700;
    cursor: pointer;
}
/* Credit-card icon ONLY on the payment-method title (the top "Credit card") — direct child
   label, so it never touches the field labels inside the form. Soft circle to match the
   transaction-page leading icons (.account-txn__icon). */
.hw-add-payment-host ul.payment_methods > li > label::before {
    content: "\F019B";
    /* Full mdi reset (the label is font-weight:700; without this the icon goes faux-bold
       and shifts up, so it never matched the Recent-activity <i class="mdi">). */
    font: normal normal normal 1.3rem/1 "Material Design Icons";
    -webkit-font-smoothing: antialiased;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(50, 67, 45, 0.08);
    color: var(--hw-accent, #32432d);
    flex: none;
}

.hw-add-payment-host .payment_box {
    padding: 0.9rem 1rem 0.4rem;
    background: var(--hw-card, #fff);
    border-top: 1px solid var(--color-border, #eee7db);
    display: block !important; /* single gateway — no toggle JS in the dialog */
}

.hw-add-payment-host .payment_box .form-row {
    margin: 0 0 0.9rem;
    padding: 0;
}

.hw-add-payment-host .payment_box .form-row label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.8;
    margin: 0 0 0.35rem;
}

.hw-add-payment-host .payment_box .form-row-first,
.hw-add-payment-host .payment_box .form-row-last {
    width: calc(50% - 0.45rem);
    display: inline-block;
    vertical-align: top;
}

.hw-add-payment-host .payment_box .form-row-first {
    margin-right: 0.9rem;
}

.hw-add-payment-host fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.hw-add-payment-host button[type="submit"],
.hw-add-payment-host #place_order {
    width: 100%;
    background: rgba(50, 67, 45, 0.1);
    color: var(--hw-accent, #32432d);
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 0.95rem;
    font: inherit;
    font-size: 0.98rem;
    font-weight: 800;
    cursor: pointer;
    margin-top: 0.25rem;
}

.hw-add-payment-host button[type="submit"]:hover,
.hw-add-payment-host #place_order:hover {
    background: rgba(50, 67, 45, 0.16);
}

/* (Card-error alert styling is consolidated up top with #clover-card-errors.) */

/* Gateway's internal hint reads odd inside the add-card dialog — hide it */
.hw-add-payment-host .payment_box > .description,
.hw-add-payment-host p.description {
    display: none;
}

/* --------------------------------------------------------------------------
   Shared dropdown menu (Vuetify-style selects) — used by the Vue VSelect
   component and the checkout's enhanced country/province selects.
   -------------------------------------------------------------------------- */

.hw-menu {
    background: var(--hw-card, #fff);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    padding: 0.4rem;
    max-height: 280px;
    overflow-y: auto;
}

.hw-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.93rem;
    font-weight: 500;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    white-space: nowrap;
}

.hw-menu__item:hover {
    background: rgba(50, 67, 45, 0.07);
}

.hw-menu__item.is-selected {
    background: rgba(50, 67, 45, 0.1);
    font-weight: 700;
}

.hw-menu__item .mdi-check {
    color: var(--hw-accent, #32432d);
}

/* --------------------------------------------------------------------------
   .hw-ofield — reusable Vuetify OUTLINED field for plain HTML inputs and
   textareas (drawer, cart aside, PDP review form). Label notches onto the
   border when filled/focused, rests inside when empty (placeholder=" ").
   -------------------------------------------------------------------------- */

.hw-ofield {
    position: relative;
}

/* ---------- Weight chip + weigh dialog (cart page + slide-out) ----------
   The storefront twin of the hub's "Weigh packages" pattern: weight lines
   show a "N PKG · X LB ✎" chip; clicking opens the dialog. */

.hw-wchip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: #efede8;
    color: inherit;
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}

.hw-wchip:hover:not(:disabled) {
    background: #e3dfd5;
}

.hw-wchip:disabled {
    opacity: 0.55;
    cursor: wait;
}

.hw-wchip .mdi-pencil-outline {
    font-size: 0.95rem;
    opacity: 0.6;
}

.hw-wdlg {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.hw-wdlg__overlay {
    position: absolute;
    inset: 0;
    background: rgba(29, 39, 29, 0.45);
}

.hw-wdlg__card {
    position: relative;
    background: var(--hw-card, #fff);
    border-radius: 16px;
    padding: 1.4rem 1.5rem;
    width: min(420px, 92vw);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.hw-wdlg__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.hw-wdlg__sub {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    opacity: 0.65;
}

.hw-wdlg__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.2rem 0 0;
}

.hw-wdlg__step {
    border: 1px solid rgba(29, 39, 29, 0.35);
    border-radius: 50%;
    background: transparent;
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hw-wdlg__step:hover {
    background: var(--hw-accent, #32432d);
    border-color: var(--hw-accent, #32432d);
    color: var(--hw-on-accent, #fff);
}

.hw-wdlg__winput {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(29, 39, 29, 0.35);
    border-radius: 10px;
    background: var(--hw-card, #fff);
    height: 42px;
    padding: 0 0.7rem;
    transition: border-color 0.12s linear, box-shadow 0.12s linear;
}

.hw-wdlg__winput:focus-within {
    border-color: var(--hw-accent, #32432d);
    box-shadow: 0 0 0 1px var(--hw-accent, #32432d);
}

.hw-wdlg__winput input {
    width: 4rem;
    min-height: 0;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    font: inherit;
    font-weight: 700;
    text-align: right;
    padding: 0;
}

.hw-wdlg__unit {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.6;
    margin-left: 0.35rem;
}

.hw-wdlg__pkgs {
    min-width: 2.2rem;
    text-align: center;
    font-weight: 800;
    font-size: 1.05rem;
}

.hw-wdlg__avg {
    font-size: 0.82rem;
    opacity: 0.6;
}

.hw-wdlg__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--color-border, #e5e0d8);
    margin-top: 1.2rem;
    padding-top: 0.9rem;
    font-weight: 600;
    font-size: 0.92rem;
}

.hw-wdlg__summary strong {
    font-size: 1.05rem;
    font-weight: 800;
}

.hw-wdlg__hint {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    opacity: 0.6;
}

.hw-wdlg__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

.hw-wdlg__btn {
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 700;
    padding: 0 1.1rem;
    min-height: 42px;
    border-radius: 999px;
    cursor: pointer;
    color: inherit;
}

.hw-wdlg__btn--save {
    background: var(--hw-accent, #32432d);
    color: var(--hw-on-accent, #fff);
    padding: 0 1.4rem;
    transition: background 0.18s ease;
}

.hw-wdlg__btn--save:hover:not(:disabled) {
    background: color-mix(in srgb, var(--hw-accent, #32432d) 78%, var(--hw-card, #fff));
}

.hw-wdlg__btn--save:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.hw-ofield::after {
    content: '';
    position: absolute;
    inset: -1px;
    border: 2px solid transparent;
    border-radius: 10px;
    pointer-events: none;
    transition: border-color 0.12s linear;
}

.hw-ofield__label {
    position: absolute;
    top: 0;
    left: 0.7rem;
    transform: translateY(-50%);
    background: var(--hw-notch-bg, #fff);
    border-radius: 4px;
    padding: 0 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 2;
    line-height: 1.2;
    margin: 0;
    transition: top 0.12s ease, font-size 0.12s ease, transform 0.12s ease;
}

.hw-ofield textarea,
.hw-ofield input {
    width: 100%;
    border: 1px solid rgba(29, 39, 29, 0.35);
    border-radius: 10px;
    background: var(--hw-card, #fff);
    font: inherit;
    font-size: 0.95rem;
    padding: 0.75rem 0.85rem;
    box-sizing: border-box;
    outline: none !important;
    box-shadow: none !important;
    resize: vertical;
}

.hw-ofield input {
    min-height: 48px;
    padding: 0 0.85rem;
}

.hw-ofield:focus-within::after {
    border-color: var(--hw-accent, #32432d);
}

.hw-ofield:focus-within textarea,
.hw-ofield:focus-within input {
    border-color: transparent;
}

.hw-ofield:focus-within .hw-ofield__label {
    color: var(--hw-accent, #32432d);
}

/* empty + unfocused → label rests inside like a placeholder */
.hw-ofield:has(input:placeholder-shown):not(:focus-within) .hw-ofield__label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.45);
    background: transparent;
    padding: 0;
    left: 0.85rem;
}

.hw-ofield:has(textarea:placeholder-shown):not(:focus-within) .hw-ofield__label {
    top: 0.85rem;
    transform: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.45);
    background: transparent;
    padding: 0;
    left: 0.85rem;
}