/**
 * HyperTechno storefront design system v3.
 *
 * Shared brand tokens and component contracts for the English Claue and
 * Arabic Claue RTL storefronts. Feature assets should consume these tokens
 * instead of introducing page-specific button, control, or state styles.
 */

:root {
    /* Official logo palette. */
    --ht-color-primary: #d71920;
    --ht-color-primary-dark: #aa1419;
    --ht-color-primary-active: #821014;
    --ht-color-primary-soft: #fff0f1;
    --ht-color-ink: #111313;
    --ht-color-heading: #111313;
    --ht-color-body: #303437;
    --ht-color-muted: #5f646b;
    --ht-color-disabled: #858a91;

    /* Surfaces and dividers. */
    --ht-color-page: #fff;
    --ht-color-surface: #fff;
    --ht-color-soft: #f6f7f9;
    --ht-color-soft-accent: #f1f3f5;
    --ht-color-line: #d9dde3;
    --ht-color-line-strong: #b7bdc6;

    /* Semantic states. */
    --ht-color-success: #1f7a3d;
    --ht-color-success-soft: #edf8f0;
    --ht-color-success-line: #b8ddc3;
    --ht-color-warning: #8a4b00;
    --ht-color-warning-soft: #fff7e8;
    --ht-color-warning-line: #e8c98f;
    --ht-color-error: #b42318;
    --ht-color-error-soft: #fff1f0;
    --ht-color-error-line: #efb6b1;
    --ht-color-info: #0b5cab;
    --ht-color-info-soft: #eff7ff;
    --ht-color-info-line: #b8d5ef;

    /* Typography. */
    --ht-font-family: "Cairo", "Open Sans", "Helvetica Neue", Arial, Tahoma, sans-serif;
    --ht-font-size-xs: 12px;
    --ht-font-size-sm: 14px;
    --ht-font-size-md: 16px;
    --ht-font-size-lg: 18px;
    --ht-font-size-page-title: 32px;
    --ht-line-height-tight: 1.25;
    --ht-line-height-body: 1.6;
    --ht-font-weight-medium: 600;
    --ht-font-weight-bold: 700;
    --ht-font-weight-heavy: 800;

    /* Spacing. */
    --ht-space-1: 4px;
    --ht-space-2: 8px;
    --ht-space-3: 12px;
    --ht-space-4: 16px;
    --ht-space-5: 20px;
    --ht-space-6: 24px;
    --ht-space-8: 32px;
    --ht-space-10: 40px;
    --ht-space-12: 48px;

    /* Page-shell rhythm. */
    --ht-page-shell-gap: var(--ht-space-12);
    --ht-page-shell-gap-mobile: var(--ht-space-8);

    /* Component geometry. */
    --ht-control-height: 44px;
    --ht-control-padding-inline: 22px;
    --ht-icon-control-size: 44px;
    --ht-radius-sm: 8px;
    --ht-radius-md: 12px;
    --ht-radius-lg: 16px;
    --ht-radius-pill: 999px;

    /* Depth, motion, and layers. */
    --ht-shadow-focus: 0 0 0 3px rgba(215, 25, 32, .22);
    --ht-shadow-sm: 0 4px 8px rgba(17, 19, 19, .08);
    --ht-shadow-md: 0 8px 8px rgba(17, 19, 19, .1);
    --ht-duration-fast: 160ms;
    --ht-duration-base: 200ms;
    --ht-ease-out: cubic-bezier(.22, 1, .36, 1);
    --ht-transition: var(--ht-duration-base) var(--ht-ease-out);
    --ht-layer-dropdown: 60;
    --ht-layer-sticky: 100;
    --ht-layer-modal-backdrop: 800;
    --ht-layer-modal: 900;
    --ht-layer-toast: 1000;
    --ht-layer-tooltip: 1100;
    --ht-content-width: 1260px;
}

body.hypertechno-design-system {
    --thim-mgs-color-17: var(--ht-color-primary);
    background: var(--ht-color-page);
    color: var(--ht-color-body);
    font-family: var(--ht-font-family);
}

body.hypertechno-design-system *,
body.hypertechno-design-system *::before,
body.hypertechno-design-system *::after {
    box-sizing: border-box;
}

body.hypertechno-design-system h1,
body.hypertechno-design-system h2,
body.hypertechno-design-system h3,
body.hypertechno-design-system h4,
body.hypertechno-design-system h5,
body.hypertechno-design-system h6 {
    color: var(--ht-color-heading);
    text-wrap: balance;
}

body.hypertechno-design-system p,
body.hypertechno-design-system .description,
body.hypertechno-design-system .product.attribute.description {
    text-wrap: pretty;
}

body.hypertechno-design-system :focus {
    outline: none;
}

body.hypertechno-design-system :focus-visible {
    outline: 3px solid rgba(215, 25, 32, .3);
    outline-offset: 2px;
}

/*
 * Text-button contract
 * --------------------
 * Primary: purchase, submit, save, and confirm.
 * Secondary: alternate and non-destructive actions.
 * Quiet links and icon actions retain their native role and receive their own
 * focus/touch treatment below.
 */
body.hypertechno-design-system .ht-button,
body.hypertechno-design-system .btn:not(.btn-custom):not(.btn-link),
body.hypertechno-design-system .action-primary,
body.hypertechno-design-system .action.primary,
body.hypertechno-design-system .action-secondary,
body.hypertechno-design-system .btn-secondary,
body.hypertechno-design-system .btn-default,
body.hypertechno-design-system .action.tocart,
body.hypertechno-design-system button.primary,
body.hypertechno-design-system input[type="submit"],
body.hypertechno-design-system .actions-toolbar .primary > button[type="submit"],
body.hypertechno-design-system .mgs-button-block .primary > button,
body.hypertechno-design-system .checkout-methods-items .action.checkout {
    align-items: center;
    appearance: none;
    border: 1px solid transparent;
    border-radius: var(--ht-radius-sm);
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: var(--ht-font-size-sm);
    font-weight: var(--ht-font-weight-bold);
    gap: var(--ht-space-2);
    height: auto;
    justify-content: center;
    line-height: var(--ht-line-height-tight);
    min-height: var(--ht-control-height);
    min-width: var(--ht-control-height);
    padding: 10px var(--ht-control-padding-inline);
    text-align: center;
    text-decoration: none;
    text-transform: none;
    transition:
        background-color var(--ht-transition),
        border-color var(--ht-transition),
        color var(--ht-transition),
        transform var(--ht-transition);
    vertical-align: middle;
    white-space: normal;
}

body.hypertechno-design-system .ht-button--primary,
body.hypertechno-design-system .btn.btn-primary,
body.hypertechno-design-system .action-primary,
body.hypertechno-design-system .action.primary,
body.hypertechno-design-system .action.tocart,
body.hypertechno-design-system button.primary,
body.hypertechno-design-system input[type="submit"],
body.hypertechno-design-system .actions-toolbar .primary > button[type="submit"],
body.hypertechno-design-system .mgs-button-block .primary > button,
body.hypertechno-design-system .checkout-methods-items .action.checkout {
    border-color: var(--ht-color-primary) !important;
    background: var(--ht-color-primary) !important;
    color: #fff !important;
}

body.hypertechno-design-system .ht-button--primary:hover,
body.hypertechno-design-system .ht-button--primary:focus,
body.hypertechno-design-system .btn.btn-primary:hover,
body.hypertechno-design-system .btn.btn-primary:focus,
body.hypertechno-design-system .action-primary:hover,
body.hypertechno-design-system .action-primary:focus,
body.hypertechno-design-system .action.primary:hover,
body.hypertechno-design-system .action.primary:focus,
body.hypertechno-design-system .action.tocart:hover,
body.hypertechno-design-system .action.tocart:focus,
body.hypertechno-design-system button.primary:hover,
body.hypertechno-design-system button.primary:focus,
body.hypertechno-design-system input[type="submit"]:hover,
body.hypertechno-design-system input[type="submit"]:focus,
body.hypertechno-design-system .actions-toolbar .primary > button[type="submit"]:hover,
body.hypertechno-design-system .actions-toolbar .primary > button[type="submit"]:focus,
body.hypertechno-design-system .mgs-button-block .primary > button:hover,
body.hypertechno-design-system .mgs-button-block .primary > button:focus,
body.hypertechno-design-system .checkout-methods-items .action.checkout:hover,
body.hypertechno-design-system .checkout-methods-items .action.checkout:focus {
    border-color: var(--ht-color-primary-dark) !important;
    background: var(--ht-color-primary-dark) !important;
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
}

body.hypertechno-design-system .ht-button--primary:active,
body.hypertechno-design-system .btn.btn-primary:active,
body.hypertechno-design-system .action-primary:active,
body.hypertechno-design-system .action.primary:active,
body.hypertechno-design-system .action.tocart:active,
body.hypertechno-design-system button.primary:active,
body.hypertechno-design-system input[type="submit"]:active,
body.hypertechno-design-system .actions-toolbar .primary > button[type="submit"]:active,
body.hypertechno-design-system .mgs-button-block .primary > button:active,
body.hypertechno-design-system .checkout-methods-items .action.checkout:active {
    border-color: var(--ht-color-primary-active) !important;
    background: var(--ht-color-primary-active) !important;
    transform: translateY(0);
}

body.hypertechno-design-system .ht-button--secondary,
body.hypertechno-design-system .btn:not(.btn-primary):not(.btn-custom):not(.btn-link),
body.hypertechno-design-system .action-secondary,
body.hypertechno-design-system .btn-secondary,
body.hypertechno-design-system .btn-default {
    border-color: var(--ht-color-ink) !important;
    background: var(--ht-color-surface) !important;
    color: var(--ht-color-ink) !important;
}

body.hypertechno-design-system .ht-button--secondary:hover,
body.hypertechno-design-system .ht-button--secondary:focus,
body.hypertechno-design-system .btn:not(.btn-primary):not(.btn-custom):not(.btn-link):hover,
body.hypertechno-design-system .btn:not(.btn-primary):not(.btn-custom):not(.btn-link):focus,
body.hypertechno-design-system .action-secondary:hover,
body.hypertechno-design-system .action-secondary:focus,
body.hypertechno-design-system .btn-secondary:hover,
body.hypertechno-design-system .btn-secondary:focus,
body.hypertechno-design-system .btn-default:hover,
body.hypertechno-design-system .btn-default:focus {
    border-color: var(--ht-color-ink) !important;
    background: var(--ht-color-ink) !important;
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
}

body.hypertechno-design-system .ht-button--secondary:active,
body.hypertechno-design-system .btn:not(.btn-primary):not(.btn-custom):not(.btn-link):active,
body.hypertechno-design-system .action-secondary:active,
body.hypertechno-design-system .btn-secondary:active,
body.hypertechno-design-system .btn-default:active {
    transform: translateY(0);
}

body.hypertechno-design-system .ht-button:focus-visible,
body.hypertechno-design-system .btn:focus-visible,
body.hypertechno-design-system .action-primary:focus-visible,
body.hypertechno-design-system .action.primary:focus-visible,
body.hypertechno-design-system .action-secondary:focus-visible,
body.hypertechno-design-system .action.tocart:focus-visible,
body.hypertechno-design-system button.primary:focus-visible,
body.hypertechno-design-system input[type="submit"]:focus-visible,
body.hypertechno-design-system .actions-toolbar .primary > button[type="submit"]:focus-visible,
body.hypertechno-design-system .mgs-button-block .primary > button:focus-visible {
    box-shadow: var(--ht-shadow-focus) !important;
    outline: none;
}

body.hypertechno-design-system .ht-button[disabled],
body.hypertechno-design-system .ht-button.disabled,
body.hypertechno-design-system .btn[disabled],
body.hypertechno-design-system .btn.disabled,
body.hypertechno-design-system .action-primary[disabled],
body.hypertechno-design-system .action-primary.disabled,
body.hypertechno-design-system .action.primary[disabled],
body.hypertechno-design-system .action.primary.disabled,
body.hypertechno-design-system .action-secondary[disabled],
body.hypertechno-design-system .action-secondary.disabled,
body.hypertechno-design-system .action.tocart[disabled],
body.hypertechno-design-system .action.tocart.disabled,
body.hypertechno-design-system button.primary[disabled],
body.hypertechno-design-system input[type="submit"][disabled],
body.hypertechno-design-system .actions-toolbar .primary > button[type="submit"][disabled],
body.hypertechno-design-system .mgs-button-block .primary > button[disabled] {
    border-color: var(--ht-color-line) !important;
    background: var(--ht-color-soft-accent) !important;
    color: var(--ht-color-disabled) !important;
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
    transform: none;
}

body.hypertechno-design-system .btn.btn-lg,
body.hypertechno-design-system .btn.btn-sm,
body.hypertechno-design-system .btn.btn-xs {
    font-size: var(--ht-font-size-sm);
    height: auto;
    line-height: var(--ht-line-height-tight);
    min-height: var(--ht-control-height);
    padding: 10px var(--ht-control-padding-inline);
}

/* Quiet actions keep link semantics but gain a predictable focus target. */
body.hypertechno-design-system .action.back,
body.hypertechno-design-system .action.cancel,
body.hypertechno-design-system .action.edit,
body.hypertechno-design-system .action.view,
body.hypertechno-design-system .action.continue {
    border-radius: var(--ht-radius-sm);
    color: var(--ht-color-primary);
    font-weight: var(--ht-font-weight-bold);
    text-underline-offset: 3px;
}

body.hypertechno-design-system .action.back:hover,
body.hypertechno-design-system .action.back:focus,
body.hypertechno-design-system .action.cancel:hover,
body.hypertechno-design-system .action.cancel:focus,
body.hypertechno-design-system .action.edit:hover,
body.hypertechno-design-system .action.edit:focus,
body.hypertechno-design-system .action.view:hover,
body.hypertechno-design-system .action.view:focus,
body.hypertechno-design-system .action.continue:hover,
body.hypertechno-design-system .action.continue:focus {
    color: var(--ht-color-primary-dark);
}

/* Reusable icon-button role plus native modal/delete actions. */
body.hypertechno-design-system .ht-icon-button,
body.hypertechno-design-system .modal-popup .action-close,
body.hypertechno-design-system button.action-close,
body.hypertechno-design-system .action.action-delete {
    align-items: center;
    background: var(--ht-color-surface);
    border: 1px solid var(--ht-color-line);
    border-radius: var(--ht-radius-sm);
    box-shadow: none;
    color: var(--ht-color-ink);
    cursor: pointer;
    display: inline-flex;
    height: var(--ht-icon-control-size);
    justify-content: center;
    min-height: var(--ht-icon-control-size);
    min-width: var(--ht-icon-control-size);
    padding: 0;
    transition:
        background-color var(--ht-transition),
        border-color var(--ht-transition),
        color var(--ht-transition),
        transform var(--ht-transition);
    width: var(--ht-icon-control-size);
}

body.hypertechno-design-system .ht-icon-button:hover,
body.hypertechno-design-system .ht-icon-button:focus,
body.hypertechno-design-system .modal-popup .action-close:hover,
body.hypertechno-design-system .modal-popup .action-close:focus,
body.hypertechno-design-system button.action-close:hover,
body.hypertechno-design-system button.action-close:focus,
body.hypertechno-design-system .action.action-delete:hover,
body.hypertechno-design-system .action.action-delete:focus {
    border-color: var(--ht-color-primary);
    background: var(--ht-color-primary);
    color: #fff;
    transform: translateY(-1px);
}

/* Form-control contract. */
body.hypertechno-design-system input[type="text"],
body.hypertechno-design-system input[type="email"],
body.hypertechno-design-system input[type="tel"],
body.hypertechno-design-system input[type="number"],
body.hypertechno-design-system input[type="password"],
body.hypertechno-design-system input[type="url"],
body.hypertechno-design-system input[type="search"],
body.hypertechno-design-system input[type="date"],
body.hypertechno-design-system input[type="datetime"],
body.hypertechno-design-system input[type="datetime-local"],
body.hypertechno-design-system input[type="time"],
body.hypertechno-design-system select,
body.hypertechno-design-system textarea {
    appearance: none;
    border: 1px solid var(--ht-color-line-strong);
    border-radius: var(--ht-radius-sm);
    box-shadow: none;
    color: var(--ht-color-ink);
    font-family: inherit;
    font-size: var(--ht-font-size-sm);
    line-height: 1.4;
    min-height: var(--ht-control-height);
    padding-block: 10px;
    padding-inline: 14px;
    transition:
        background-color var(--ht-transition),
        border-color var(--ht-transition),
        box-shadow var(--ht-transition);
    width: 100%;
}

body.hypertechno-design-system textarea {
    min-height: 128px;
    resize: vertical;
}

body.hypertechno-design-system input::placeholder,
body.hypertechno-design-system textarea::placeholder {
    color: var(--ht-color-muted);
    opacity: 1;
}

body.hypertechno-design-system input[type="text"]:hover,
body.hypertechno-design-system input[type="email"]:hover,
body.hypertechno-design-system input[type="tel"]:hover,
body.hypertechno-design-system input[type="number"]:hover,
body.hypertechno-design-system input[type="password"]:hover,
body.hypertechno-design-system input[type="url"]:hover,
body.hypertechno-design-system input[type="search"]:hover,
body.hypertechno-design-system input[type="date"]:hover,
body.hypertechno-design-system input[type="datetime"]:hover,
body.hypertechno-design-system input[type="datetime-local"]:hover,
body.hypertechno-design-system input[type="time"]:hover,
body.hypertechno-design-system select:hover,
body.hypertechno-design-system textarea:hover {
    border-color: var(--ht-color-muted);
}

body.hypertechno-design-system input[type="text"]:focus,
body.hypertechno-design-system input[type="email"]:focus,
body.hypertechno-design-system input[type="tel"]:focus,
body.hypertechno-design-system input[type="number"]:focus,
body.hypertechno-design-system input[type="password"]:focus,
body.hypertechno-design-system input[type="url"]:focus,
body.hypertechno-design-system input[type="search"]:focus,
body.hypertechno-design-system input[type="date"]:focus,
body.hypertechno-design-system input[type="datetime"]:focus,
body.hypertechno-design-system input[type="datetime-local"]:focus,
body.hypertechno-design-system input[type="time"]:focus,
body.hypertechno-design-system select:focus,
body.hypertechno-design-system textarea:focus {
    border-color: var(--ht-color-primary);
    box-shadow: var(--ht-shadow-focus);
    outline: none;
}

body.hypertechno-design-system input[disabled],
body.hypertechno-design-system select[disabled],
body.hypertechno-design-system textarea[disabled] {
    border-color: var(--ht-color-line);
    background: var(--ht-color-soft-accent);
    color: var(--ht-color-disabled);
    cursor: not-allowed;
    opacity: 1;
}

body.hypertechno-design-system input[readonly],
body.hypertechno-design-system textarea[readonly] {
    background: var(--ht-color-soft);
}

body.hypertechno-design-system .field > .label,
body.hypertechno-design-system .form-group > .label,
body.hypertechno-design-system .field > label,
body.hypertechno-design-system .form-group > label {
    color: var(--ht-color-ink);
    font-size: var(--ht-font-size-sm);
    font-weight: var(--ht-font-weight-bold);
    line-height: 1.4;
    margin-block-end: var(--ht-space-2);
}

body.hypertechno-design-system .field.required > .label::after,
body.hypertechno-design-system .field._required > .label::after {
    color: var(--ht-color-error);
}

body.hypertechno-design-system input.mage-error,
body.hypertechno-design-system select.mage-error,
body.hypertechno-design-system textarea.mage-error,
body.hypertechno-design-system .field._error input,
body.hypertechno-design-system .field._error select,
body.hypertechno-design-system .field._error textarea {
    border-color: var(--ht-color-error) !important;
}

body.hypertechno-design-system div.mage-error,
body.hypertechno-design-system .field-error,
body.hypertechno-design-system .field-error span {
    color: var(--ht-color-error);
    font-size: var(--ht-font-size-xs);
    font-style: normal;
    font-weight: var(--ht-font-weight-medium);
    line-height: 1.45;
    margin-block-start: var(--ht-space-1);
}

/* Choice controls use one bilingual, logical-positioning implementation. */
body.hypertechno-design-system input[type="checkbox"],
body.hypertechno-design-system input[type="radio"] {
    appearance: none;
    background: var(--ht-color-surface);
    border: 1px solid var(--ht-color-line-strong) !important;
    box-shadow: none;
    cursor: pointer;
    display: inline-grid;
    flex: 0 0 18px;
    height: 18px;
    margin: 0;
    place-content: center;
    position: relative;
    transition:
        background-color var(--ht-transition),
        border-color var(--ht-transition),
        box-shadow var(--ht-transition);
    width: 18px;
}

body.hypertechno-design-system input[type="checkbox"] {
    border-radius: 4px;
}

body.hypertechno-design-system input[type="radio"] {
    border-radius: 50%;
}

body.hypertechno-design-system input[type="checkbox"]::after,
body.hypertechno-design-system input[type="radio"]::after {
    content: "";
    transform: scale(0);
    transition: transform var(--ht-transition);
}

body.hypertechno-design-system input[type="checkbox"]::after {
    border: solid #fff;
    border-width: 0 2px 2px 0;
    height: 8px;
    transform: rotate(45deg) scale(0);
    width: 4px;
}

body.hypertechno-design-system input[type="radio"]::after {
    background: #fff;
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

body.hypertechno-design-system input[type="checkbox"]:checked,
body.hypertechno-design-system input[type="radio"]:checked {
    border-color: var(--ht-color-primary) !important;
    background: var(--ht-color-primary);
}

body.hypertechno-design-system input[type="checkbox"]:checked::after {
    transform: rotate(45deg) scale(1);
}

body.hypertechno-design-system input[type="radio"]:checked::after {
    transform: scale(1);
}

body.hypertechno-design-system input[type="checkbox"]:focus-visible,
body.hypertechno-design-system input[type="radio"]:focus-visible {
    box-shadow: var(--ht-shadow-focus);
    outline: none;
}

body.hypertechno-design-system input[type="checkbox"][disabled],
body.hypertechno-design-system input[type="radio"][disabled] {
    border-color: var(--ht-color-line) !important;
    background: var(--ht-color-soft-accent);
    cursor: not-allowed;
}

body.hypertechno-design-system .field.choice:not(.review-field-rating) input[type="checkbox"],
body.hypertechno-design-system .field.choice:not(.review-field-rating) input[type="radio"],
body.hypertechno-design-system .form .choice:not(.review-field-rating) input[type="checkbox"],
body.hypertechno-design-system .form .choice:not(.review-field-rating) input[type="radio"] {
    inset-block-start: 2px !important;
    inset-inline-start: 0 !important;
    left: auto !important;
    position: absolute !important;
    right: auto !important;
    top: auto !important;
}

body.hypertechno-design-system .field.choice:not(.review-field-rating) input + label,
body.hypertechno-design-system .field.choice:not(.review-field-rating) input + .label,
body.hypertechno-design-system .form .choice:not(.review-field-rating) input + label,
body.hypertechno-design-system .form .choice:not(.review-field-rating) input + .label {
    margin: 0;
    padding-inline-start: 28px;
}

/* Feedback messages use complete borders rather than directional accents. */
body.hypertechno-design-system .message,
body.hypertechno-design-system .message-success,
body.hypertechno-design-system .message-error,
body.hypertechno-design-system .message-warning,
body.hypertechno-design-system .message-info {
    border: 1px solid var(--ht-color-line);
    border-radius: var(--ht-radius-md);
    box-shadow: none;
    color: var(--ht-color-body);
    line-height: var(--ht-line-height-body);
    margin-block: var(--ht-space-4);
    padding: var(--ht-space-4);
}

body.hypertechno-design-system .message.info,
body.hypertechno-design-system .message.notice,
body.hypertechno-design-system .message.warning,
body.hypertechno-design-system .message.error,
body.hypertechno-design-system .message.success {
    min-height: 58px;
    padding-block: 14px;
    padding-inline: 58px var(--ht-space-4);
    position: relative;
}

/*
 * Claue positions its legacy status glyph absolutely. Reserve a logical icon
 * lane so the same component remains collision-free in English and Arabic.
 */
body.hypertechno-design-system .message.info > :first-child::before,
body.hypertechno-design-system .message.notice > :first-child::before,
body.hypertechno-design-system .message.warning > :first-child::before,
body.hypertechno-design-system .message.error > :first-child::before,
body.hypertechno-design-system .message.success > :first-child::before {
    align-items: center;
    border: 0;
    border-radius: var(--ht-radius-pill);
    box-sizing: border-box;
    display: inline-flex;
    font-family: "fontAwesome";
    font-size: 18px;
    font-weight: 400;
    height: 34px;
    justify-content: center;
    left: auto !important;
    line-height: 1;
    overflow: visible;
    position: absolute;
    right: auto !important;
    inset-inline-end: auto !important;
    inset-inline-start: var(--ht-space-3) !important;
    text-align: center;
    top: 50%;
    transform: translateY(-50%) !important;
    width: 34px;
}

body.hypertechno-design-system .message.info > :first-child::before,
body.hypertechno-design-system .message.notice > :first-child::before {
    background: var(--ht-color-primary-soft);
    color: var(--ht-color-primary);
    content: "\f05a";
}

body.hypertechno-design-system .message.warning > :first-child::before {
    background: #fff;
    color: var(--ht-color-warning);
    content: "\f071";
}

body.hypertechno-design-system .message.error > :first-child::before {
    background: #fff;
    color: var(--ht-color-error);
    content: "\f06a";
}

body.hypertechno-design-system .message.success > :first-child::before {
    background: #fff;
    color: var(--ht-color-success);
    content: "\f00c";
}

body.hypertechno-design-system .message.success,
body.hypertechno-design-system .message-success {
    border-color: var(--ht-color-success-line);
    background: var(--ht-color-success-soft);
    color: var(--ht-color-success);
}

body.hypertechno-design-system .message.error,
body.hypertechno-design-system .message-error {
    border-color: var(--ht-color-error-line);
    background: var(--ht-color-error-soft);
    color: var(--ht-color-error);
}

body.hypertechno-design-system .message.warning,
body.hypertechno-design-system .message-warning {
    border-color: var(--ht-color-warning-line);
    background: var(--ht-color-warning-soft);
    color: var(--ht-color-warning);
}

body.hypertechno-design-system .message.info,
body.hypertechno-design-system .message.notice,
body.hypertechno-design-system .message-info {
    border-color: var(--ht-color-line);
    background: var(--ht-color-soft);
    color: var(--ht-color-body);
}

body.hypertechno-design-system .message a,
body.hypertechno-design-system .message-success a,
body.hypertechno-design-system .message-error a,
body.hypertechno-design-system .message-warning a,
body.hypertechno-design-system .message-info a {
    color: var(--ht-color-primary);
    font-weight: var(--ht-font-weight-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Tables and pagination share the same geometry and divider vocabulary. */
body.hypertechno-design-system .table-wrapper {
    border: 1px solid var(--ht-color-line);
    border-radius: var(--ht-radius-md);
    box-shadow: none;
    overflow-x: auto;
}

body.hypertechno-design-system .table-wrapper table {
    margin: 0;
}

/* The shared table wrapper is the single frame for cart totals. */
body.hypertechno-design-system.checkout-cart-index .cart-bottom .cart-totals {
    border: 0;
    padding-top: 0;
}

/* Cart summary rows use the shared table inset on every edge. */
body.hypertechno-design-system.checkout-cart-index .cart-bottom .cart-totals .table.totals > tbody > tr > th,
body.hypertechno-design-system.checkout-cart-index .cart-bottom .cart-totals .table.totals > tbody > tr > td {
    padding-block: var(--ht-space-3) !important;
    padding-inline: var(--ht-space-4) !important;
}

body.hypertechno-design-system .table-wrapper thead th {
    background: var(--ht-color-soft);
    color: var(--ht-color-ink);
    font-size: var(--ht-font-size-sm);
    font-weight: var(--ht-font-weight-bold);
}

body.hypertechno-design-system .table-wrapper th,
body.hypertechno-design-system .table-wrapper td {
    border-color: var(--ht-color-line);
    padding: var(--ht-space-3) var(--ht-space-4);
}

body.hypertechno-design-system .pages .item {
    height: var(--ht-control-height);
    line-height: var(--ht-control-height);
    margin-inline: 2px;
    min-width: var(--ht-control-height);
}

body.hypertechno-design-system .pages .item > a,
body.hypertechno-design-system .pages .item > strong,
body.hypertechno-design-system .pages .action {
    align-items: center;
    border: 1px solid var(--ht-color-line);
    border-radius: var(--ht-radius-sm);
    color: var(--ht-color-ink);
    display: inline-flex;
    height: var(--ht-control-height);
    justify-content: center;
    min-width: var(--ht-control-height);
    padding-inline: var(--ht-space-3);
    text-decoration: none;
}

body.hypertechno-design-system .pages .item.current > strong,
body.hypertechno-design-system .pages .item > a:hover,
body.hypertechno-design-system .pages .item > a:focus,
body.hypertechno-design-system .pages .action:hover,
body.hypertechno-design-system .pages .action:focus {
    border-color: var(--ht-color-primary);
    background: var(--ht-color-primary);
    color: #fff;
}

/* Product and commerce states. */
body.hypertechno-design-system .special-price .price,
body.hypertechno-design-system .price-box .price-final_price .price {
    color: var(--ht-color-primary);
}

body.hypertechno-design-system .old-price .price {
    color: var(--ht-color-muted);
    text-decoration-thickness: 1px;
}

body.hypertechno-design-system .stock.available,
body.hypertechno-design-system .stock.unavailable {
    font-size: var(--ht-font-size-sm);
    font-weight: var(--ht-font-weight-bold);
}

body.hypertechno-design-system .stock.available {
    color: var(--ht-color-success);
}

body.hypertechno-design-system .stock.unavailable {
    color: var(--ht-color-error);
}

body.hypertechno-design-system .swatch-option {
    align-items: center;
    border-color: var(--ht-color-line-strong);
    border-radius: var(--ht-radius-sm);
    box-shadow: none;
    display: inline-flex;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
}

body.hypertechno-design-system .swatch-option:hover,
body.hypertechno-design-system .swatch-option:focus,
body.hypertechno-design-system .swatch-option.selected {
    border-color: var(--ht-color-primary);
    box-shadow: var(--ht-shadow-focus);
    outline: none;
}

/* Opt-in shared primitives for new feature work. */
body.hypertechno-design-system .ht-card {
    border: 1px solid var(--ht-color-line);
    border-radius: var(--ht-radius-lg);
    background: var(--ht-color-surface);
    box-shadow: none;
    min-width: 0;
    padding: var(--ht-space-6);
}

body.hypertechno-design-system .ht-badge {
    align-items: center;
    border-radius: var(--ht-radius-pill);
    display: inline-flex;
    font-size: var(--ht-font-size-xs);
    font-weight: var(--ht-font-weight-heavy);
    line-height: 1;
    min-height: 24px;
    padding-inline: var(--ht-space-2);
}

body.hypertechno-design-system .ht-badge--primary {
    background: var(--ht-color-primary);
    color: #fff;
}

body.hypertechno-design-system .ht-badge--neutral {
    background: var(--ht-color-soft-accent);
    color: var(--ht-color-ink);
}

body.hypertechno-design-system .ht-skeleton {
    animation: ht-skeleton-pulse 1.2s ease-in-out infinite alternate;
    border-radius: var(--ht-radius-sm);
    background: var(--ht-color-soft-accent);
    color: transparent;
    pointer-events: none;
}

@keyframes ht-skeleton-pulse {
    from {
        opacity: .58;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 767px) {
    body.hypertechno-design-system .actions-toolbar > .primary {
        width: 100%;
    }

    body.hypertechno-design-system .actions-toolbar > .primary .action,
    body.hypertechno-design-system .actions-toolbar > .primary button {
        width: 100%;
    }

    body.hypertechno-design-system .ht-card {
        padding: var(--ht-space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.hypertechno-design-system *,
    body.hypertechno-design-system *::before,
    body.hypertechno-design-system *::after {
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    body.hypertechno-design-system .ht-skeleton {
        animation: none;
        opacity: .8;
    }
}

@media (forced-colors: active) {
    body.hypertechno-design-system :focus-visible {
        outline: 2px solid CanvasText;
    }

    body.hypertechno-design-system input[type="checkbox"]:checked,
    body.hypertechno-design-system input[type="radio"]:checked {
        forced-color-adjust: none;
    }
}

/* Selected checkout address in both storefront directions. */
body.hypertechno-design-system .opc-wrapper .shipping-address-item.selected-item {
    border-color: var(--ht-color-primary, #d71920);
    color: var(--ht-color-primary, #d71920);
}

body.hypertechno-design-system .opc-wrapper .shipping-address-item.selected-item a {
    color: var(--ht-color-primary, #d71920);
}

body.hypertechno-design-system .opc-wrapper .shipping-address-item.selected-item::after {
    background: var(--ht-color-primary, #d71920);
    color: #fff;
}

/* Storefront-wide text selection for both LTR and RTL views. */
body.hypertechno-design-system ::selection {
    background: var(--ht-color-primary, #d71920);
    color: #fff;
}

body.hypertechno-design-system ::-moz-selection {
    background: var(--ht-color-primary, #d71920);
    color: #fff;
}