/*!
 * Aurora — TH3P identity layer
 * Loaded after theme.css. Everything brand-specific lives here so theme.css
 * stays a neutral base: the logo's teal / orange palette and its 45° cut
 * letterforms (chamfered corners, square badges, orange corner marks).
 */

/* =====================================================================
   1. Palette
   ===================================================================== */
:root,
[data-bs-theme="light"] {
    --au-primary: #007c99;
    --au-primary-rgb: 0, 124, 153;
    --au-primary-hover: #00677f;
    --au-primary-active: #00546a;
    --au-primary-soft: rgba(0, 124, 153, .09);
    --au-primary-contrast: #ffffff;
    --au-accent: #ff9d00;
    --au-accent-rgb: 255, 157, 0;
    --au-accent-hover: #e88f00;
    --au-accent-active: #cf7f00;
    --au-accent-contrast: #1b1200;
    --au-gradient: linear-gradient(135deg, #007c99, #005f76);
    --au-gradient-soft: rgba(0, 124, 153, .07);

    --au-bg: #f2f6f8;
    --au-bg-rgb: 242, 246, 248;
    --au-surface: #ffffff;
    --au-surface-2: #f6f9fa;
    --au-surface-3: #e9f0f3;
    --au-border: #dbe4e9;
    --au-border-strong: #c6d3da;

    --au-text: #10222b;
    --au-text-rgb: 16, 34, 43;
    --au-text-2: #45606c;
    --au-text-3: #61808c;
    --au-heading: #0a1a21;

    --au-ring: 0 0 0 .2rem rgba(0, 124, 153, .22);
    --au-header-bg: #ffffff;
    --au-hero-bg: none;

    --au-radius-sm: .25rem;
    --au-radius: .375rem;
    --au-radius-lg: .5rem;
    --au-radius-xl: .75rem;
    --au-cut: 14px;      /* chamfer size on cards */
    --au-cut-sm: 8px;    /* chamfer size on buttons */
    --au-cut-bg: var(--au-bg);

    --bs-border-radius: var(--au-radius-sm);
    --bs-border-radius-sm: .2rem;
    --bs-border-radius-lg: var(--au-radius);
    --bs-border-radius-xl: var(--au-radius-lg);
    --bs-border-radius-xxl: var(--au-radius-xl);
    --bs-border-color-translucent: rgba(16, 34, 43, .08);
    --bs-secondary-color-rgb: 69, 96, 108;
    --bs-primary-bg-subtle: rgba(0, 124, 153, .09);
    --bs-primary-border-subtle: rgba(0, 124, 153, .3);
    --bs-link-hover-color-rgb: 0, 103, 127;
    --bs-focus-ring-color: rgba(0, 124, 153, .25);
    --bs-code-color: #b45309;
}

[data-bs-theme="dark"] {
    --au-primary: #19c1dd;
    --au-primary-rgb: 25, 193, 221;
    --au-primary-hover: #49d0e7;
    --au-primary-active: #0fa9c3;
    --au-primary-soft: rgba(25, 193, 221, .13);
    --au-primary-contrast: #05222a;
    --au-accent: #ffab2e;
    --au-accent-rgb: 255, 171, 46;
    --au-accent-hover: #ffbd5c;
    --au-accent-active: #f59e0b;
    --au-accent-contrast: #1b1200;
    --au-gradient: linear-gradient(135deg, #0f7f97, #0a5c70);
    --au-gradient-soft: rgba(25, 193, 221, .08);

    --au-bg: #0a161c;
    --au-bg-rgb: 10, 22, 28;
    --au-surface: #10212a;
    --au-surface-rgb: 16, 33, 42;
    --au-surface-2: #142933;
    --au-surface-3: #1a3441;
    --au-border: #1f3843;
    --au-border-strong: #2b4b59;

    --au-text: #dbe7ec;
    --au-text-rgb: 219, 231, 236;
    --au-text-2: #9db4bf;
    --au-text-3: #7d97a3;
    --au-heading: #f2f8fa;

    --au-ring: 0 0 0 .2rem rgba(25, 193, 221, .28);
    --au-header-bg: #0d1c23;
    --au-hero-bg: none;
    --au-cut-bg: var(--au-bg);

    --bs-border-color-translucent: rgba(255, 255, 255, .07);
    --bs-secondary-color-rgb: 157, 180, 191;
    --bs-primary-text-emphasis: #8fe3f2;
    --bs-primary-bg-subtle: rgba(25, 193, 221, .13);
    --bs-primary-border-subtle: rgba(25, 193, 221, .35);
    --bs-link-hover-color-rgb: 73, 208, 231;
    --bs-code-color: #fbbf24;
    --bs-focus-ring-color: rgba(25, 193, 221, .3);
}

/* =====================================================================
   2. Type — headings echo the heavy, tight logo letterforms
   ===================================================================== */
h1, h2, h3, .h1, .h2, .h3, .card-title, .au-hero h1 {
    font-weight: 800;
    letter-spacing: -.025em;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3, [dir="rtl"] .card-title {
    letter-spacing: 0;
    font-weight: 800;
}

/* Orange corner mark on page titles (the dot above the Arabic wordmark) */
.au-page-head h1 {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.au-page-head h1::before {
    content: "";
    flex: 0 0 auto;
    width: .5em;
    height: .5em;
    background: var(--au-accent);
    clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%);
}
[dir="rtl"] .au-page-head h1::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 35% 100%, 0 65%); }

/* =====================================================================
   3. Shape — square cards; the 45° logo cut only on self-contained
      blocks (tiles, sidebar panels, cart product / summary) where a
      real clip-path is safe because nothing (dropdowns, pickers)
      overflows them. Ordinary cards stay square with a 3px accent line.
   ===================================================================== */
.card, .au-panel, .tiles .tile, .div-service-item, .list-group, .dropdown-menu, .alert, .popover, .toast, .table-container, .table-responsive,
.form-control, .form-select, .input-group-text, .input-group > .btn, .nav-tabs .nav-link, .nav-pills .nav-link, .page-link, .list-group-item, .au-search .form-control, .au-icon-btn, .au-user-btn, .progress,
.modal-content, .store-promoted-product, #order-standard_cart .product, #order-standard_cart .order-summary, #order-standard_cart .sidebar-collapsed > .card {
    border-radius: 0;
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-list-group-border-radius: 0;
}
.card { box-shadow: none; }
.card.card-hover:hover, a.card:hover { box-shadow: none; border-color: var(--au-primary); }

/* Real cut corner (top, inline-end) */
.tiles .tile,
.au-panel,
.sidebar .card-sidebar,
#order-standard_cart .cart-sidebar .card,
#order-standard_cart .sidebar-collapsed > .card,
#order-standard_cart .product,
#order-standard_cart .order-summary,
.store-promoted-product {
    clip-path: polygon(0 0, calc(100% - var(--au-cut)) 0, 100% var(--au-cut), 100% 100%, 0 100%);
}
[dir="rtl"] .tiles .tile,
[dir="rtl"] .au-panel,
[dir="rtl"] .sidebar .card-sidebar,
[dir="rtl"] #order-standard_cart .cart-sidebar .card,
[dir="rtl"] #order-standard_cart .sidebar-collapsed > .card,
[dir="rtl"] #order-standard_cart .product,
[dir="rtl"] #order-standard_cart .order-summary,
[dir="rtl"] .store-promoted-product {
    clip-path: polygon(var(--au-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--au-cut));
}
/* Tiles: colour bar on the inline-start edge (opposite the cut); hover = teal border, no clipped shadow */
.tiles .tile { box-shadow: none; border-top-width: 1px; }
.tiles .tile .highlight { display: block; width: 4px; }
[dir="ltr"] .tiles .tile .highlight { left: 0; right: auto; }
[dir="rtl"] .tiles .tile .highlight { right: 0; left: auto; }
.tiles .tile:hover { box-shadow: none; transform: none; border-color: var(--au-primary); }
/* Sidebar panels: the cut runs through the header, keep header text clear of it */
.sidebar .card-sidebar > .card-header, .au-panel .au-panel-title { padding-inline-end: calc(1.25rem + var(--au-cut)); }
.sidebar .card-sidebar, .au-panel { box-shadow: none; }
/* Accented home cards: square corners + coloured 3px top line, nothing else */
.card-accent, .card[class*="card-accent-"] { border-top-width: 3px; }

/* =====================================================================
   4. Buttons — bottom-end corner cut, flat, no glow
   ===================================================================== */
.btn:not(.btn-link):not(.dropdown-toggle):not(.btn-icon):not(.au-icon-btn) {
    --bs-btn-border-radius: 0;
    border-radius: 0;
    box-shadow: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--au-cut-sm)), calc(100% - var(--au-cut-sm)) 100%, 0 100%);
}
[dir="rtl"] .btn:not(.btn-link):not(.dropdown-toggle):not(.btn-icon):not(.au-icon-btn) {
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--au-cut-sm) 100%, 0 calc(100% - var(--au-cut-sm)));
}
.btn-sm, .btn-group-sm > .btn, .btn-xs { --au-cut-sm: 6px; }
.btn-lg, .btn-group-lg > .btn { --au-cut-sm: 10px; }
.btn-primary { box-shadow: none; }
.btn-gradient { background-image: none; background-color: var(--au-primary); box-shadow: none; }
.btn-gradient:hover { background-color: var(--au-primary-hover); }
.btn-group > .btn { clip-path: none; }
.btn-group > .btn:last-child:not(.dropdown-toggle) {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--au-cut-sm)), calc(100% - var(--au-cut-sm)) 100%, 0 100%);
}
.input-group > .btn { clip-path: none; }

/* Purchase / checkout CTAs are orange — the one place the accent shouts */
.btn-order-now,
.btn-checkout,
#btnCompleteProductConfig,
#btnCompleteOrder,
#checkout,
.btn-add-to-cart,
.btn-buy,
#order-standard_cart .btn-success,
.home-domain-search .btn-primary,
.au-hero .btn-primary,
#btnDomainSearch,
#btnTransfer {
    --bs-btn-bg: var(--au-accent);
    --bs-btn-border-color: var(--au-accent);
    --bs-btn-color: var(--au-accent-contrast);
    --bs-btn-hover-bg: var(--au-accent-hover);
    --bs-btn-hover-border-color: var(--au-accent-hover);
    --bs-btn-hover-color: var(--au-accent-contrast);
    --bs-btn-active-bg: var(--au-accent-active);
    --bs-btn-active-border-color: var(--au-accent-active);
    --bs-btn-active-color: var(--au-accent-contrast);
    --bs-btn-disabled-bg: var(--au-accent);
    --bs-btn-disabled-border-color: var(--au-accent);
    --bs-btn-disabled-color: var(--au-accent-contrast);
    --bs-btn-font-weight: 700;
    box-shadow: none;
}
body #order-standard_cart .product .btn-order-now { width: 100%; }

/* =====================================================================
   5. Header & navigation
   ===================================================================== */
.au-header {
    background: var(--au-header-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 3px solid var(--au-primary);
    border-bottom: 1px solid var(--au-border);
}
.au-header.is-scrolled { box-shadow: 0 6px 16px -12px rgba(16, 34, 43, .35); }
.au-brand-mark {
    border-radius: 0;
    background: var(--au-primary);
    box-shadow: none;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}
.au-nav > li > a {
    position: relative;
    border-radius: 0;
    font-weight: 560;
}
.au-nav > li > a:hover, .au-nav > li > a:focus-visible, .au-nav > li.show > a { background: transparent; color: var(--au-primary); }
.au-nav > li.active > a { background: transparent; color: var(--au-primary); }
.au-nav > li.active > a::after {
    content: "";
    position: absolute;
    left: .8rem; right: .8rem; bottom: .1rem;
    height: 2px;
    background: var(--au-accent);
}
.au-nav > li > a .badge, .au-icon-btn .badge { border-radius: 2px; }
.au-icon-btn .badge { background: var(--au-accent); color: var(--au-accent-contrast); }
.au-icon-btn, .au-user-btn, .au-search .form-control { border-radius: var(--au-radius-sm); }
.au-avatar { border-radius: 2px; background: var(--au-primary); color: var(--au-primary-contrast); }
.dropdown-menu { border-radius: 0; box-shadow: 0 12px 28px -12px rgba(16, 34, 43, .35); border: 1px solid var(--au-border-strong); }
.dropdown-item { border-radius: 0; }
.dropdown-item.active, .dropdown-item:active { background: var(--au-primary); color: var(--au-primary-contrast); }
.au-offcanvas .list-group-item.active, .au-mobile-nav a.active { border-inline-start: 3px solid var(--au-accent); }
/* =====================================================================
   6. Hero — copy + domain search on one side, a TLD price board on the
      other, and the wordmark's "3" as a faint watermark. No patterns.
   ===================================================================== */
.au-hero {
    position: relative;
    background: var(--au-surface);
    border-bottom: 1px solid var(--au-border);
    padding: 3rem 0 3.25rem;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%);
}
[dir="rtl"] .au-hero { clip-path: polygon(0 0, 100% 0, 100% 100%, 36px 100%, 0 calc(100% - 36px)); }
@media (min-width: 992px) { .au-hero { padding: 4.5rem 0 4.75rem; } }
.au-hero-mark {
    position: absolute;
    top: -6%;
    inset-inline-end: -2%;
    height: 118%;
    width: auto;
    fill: var(--au-accent);
    opacity: .045;
    pointer-events: none;
    display: none;
}
@media (min-width: 992px) { .au-hero-mark { display: block; } }
.au-hero .container { position: relative; }
.au-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .au-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr); gap: 4rem; } }
.au-hero-copy { text-align: start; }
.au-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--au-primary);
    margin-bottom: 1rem;
}
[dir="rtl"] .au-hero-eyebrow { letter-spacing: 0; font-size: .9rem; }
.au-hero-eyebrow::before { content: ""; width: .6rem; height: .6rem; background: var(--au-accent); clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%); }
.au-hero h1 { max-width: 16ch; }
.au-hero .lead { margin-inline: 0; max-width: 36rem; }
.au-hero .au-gradient-text { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--au-primary); }
.au-hero h1 em, .au-hero h1 .accent { font-style: normal; color: var(--au-accent); }
.home-domain-search .input-group-wrapper { margin-inline: 0; max-width: 40rem; }
.home-domain-search .input-group { box-shadow: none; border-radius: 0; padding: .3rem; }
.home-domain-search .form-control { border-radius: 0; }
.home-domain-search .row.d-sm-none { margin-inline: 0 !important; }

/* TLD price board */
.au-tld-board {
    background: var(--au-bg);
    border: 1px solid var(--au-border-strong);
    clip-path: polygon(0 0, calc(100% - var(--au-cut)) 0, 100% var(--au-cut), 100% 100%, 0 100%);
    position: relative;
}
[dir="rtl"] .au-tld-board { clip-path: polygon(var(--au-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--au-cut)); }
.au-tld-board::before {
    content: ""; position: absolute; top: -1px; inset-inline-end: -1px; width: var(--au-cut); height: var(--au-cut); z-index: 5; pointer-events: none;
    background: linear-gradient(to bottom left, transparent 50%, var(--au-border-strong) 50%, var(--au-border-strong) calc(50% + 1px), transparent calc(50% + 1px));
}
[dir="rtl"] .au-tld-board::before { background: linear-gradient(to bottom right, transparent 50%, var(--au-border-strong) 50%, var(--au-border-strong) calc(50% + 1px), transparent calc(50% + 1px)); }
.au-tld-board-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: .8rem 1.1rem; padding-inline-end: calc(1.1rem + var(--au-cut));
    background: var(--au-primary); color: var(--au-primary-contrast);
    font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
[dir="rtl"] .au-tld-board-head { letter-spacing: 0; font-size: .9rem; }
.au-tld-board-cur { font-weight: 600; opacity: .8; letter-spacing: .04em; }
.au-tld-board ul { list-style: none; margin: 0; padding: .25rem 0; }
.au-tld-board li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .7rem 1.1rem;
    border-bottom: 1px dashed var(--au-border);
}
.au-tld-board li:last-child { border-bottom: 0; }
.au-tld-name { font-weight: 800; font-size: 1.15rem; color: var(--au-heading); letter-spacing: -.01em; direction: ltr; }
.au-tld-price { font-weight: 700; color: var(--au-accent); font-variant-numeric: tabular-nums; direction: ltr; }
.au-tld-price small { font-weight: 500; color: var(--au-text-3); }
.au-tld-board-foot {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .7rem 1.1rem; border-top: 1px solid var(--au-border);
    background: var(--au-surface); font-size: .875rem; font-weight: 600; color: var(--au-primary);
}
.au-tld-board-foot:hover { background: var(--au-primary-soft); text-decoration: none; }
@media (max-width: 991.98px) {
    .au-tld-board { max-width: 26rem; }
}

/* =====================================================================
   7. Status chips, badges, alerts — square, not pills
   ===================================================================== */
.badge, .label, .status, [class*="status-"], .au-nav > li > a .badge {
    --bs-badge-border-radius: 2px;
    border-radius: 2px !important;
    letter-spacing: .02em;
}
.alert {
    border-radius: 0;
    border-width: 1px;
    border-inline-start-width: 4px;
}
.alert-info, .alert-primary { border-inline-start-color: var(--au-primary); }
.alert-warning { border-inline-start-color: var(--au-accent); }
.progress { border-radius: 0; }
.progress-bar { border-radius: 0; }
.nav-tabs .nav-link { border-radius: 0; }
.nav-tabs .nav-link.active { border-bottom: 2px solid var(--au-accent); }
.nav-pills .nav-link { border-radius: var(--au-radius-sm); }
.list-group-item.active { border-inline-start: 3px solid var(--au-accent); }
.sidebar .list-group-item.active { background: var(--au-primary-soft); color: var(--au-primary); border-inline-start: 3px solid var(--au-accent); }
.form-control, .form-select { border-radius: var(--au-radius-sm); }
.form-check-input { border-radius: 2px; }
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked { background-color: var(--au-primary); border-color: var(--au-primary); }
.form-switch .form-check-input { border-radius: 2em; }
.form-switch .form-check-input:checked { background-color: var(--au-primary); }
.pagination .page-link { border-radius: 0; }
.pagination .page-item.active .page-link { background: var(--au-primary); border-color: var(--au-primary); color: var(--au-primary-contrast); }
.modal-content { border: 1px solid var(--au-border-strong); border-radius: 0; }
.modal-header { border-top: 3px solid var(--au-primary); }
.au-back-to-top { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); box-shadow: none; background: var(--au-primary); color: var(--au-primary-contrast); border: 0; }
[dir="rtl"] .au-back-to-top { clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 0 70%); }
.au-back-to-top:hover { background: var(--au-primary-hover); color: var(--au-primary-contrast); }

/* Home panels: teal top bar, orange for the "important" ones */
.card-accent, .card[class*="card-accent-"] { border-top-width: 3px; }
.card-accent-gold, .bg-color-gold, .card-accent-orange, .bg-color-orange { --au-accent-color: var(--au-accent); }
.card-accent-blue, .bg-color-blue, .card-accent-teal, .bg-color-teal, .card-accent-turquoise, .bg-color-turquoise { --au-accent-color: var(--au-primary); }
.tiles .tile .icon, .tiles .tile i:first-child { color: var(--au-primary); }

/* Cart specifics */
body #order-standard_cart .product header { border-radius: 0; }
body #order-standard_cart .order-summary h2 { background: var(--au-primary); color: var(--au-primary-contrast); }
body #order-standard_cart .order-summary .total-due-today .amt { color: var(--au-accent); }
body #order-standard_cart .product .product-desc .price .amt, body #order-standard_cart .product .pricing .price { color: var(--au-primary); }
body #order-standard_cart .cart-sidebar .list-group-item.active { border-inline-start: 3px solid var(--au-accent); }

/* Footer: page-title style headings get the small orange mark too */
.au-footer .au-footer-title { display: flex; align-items: center; gap: .5rem; }
.au-footer .au-footer-title::before { content: ""; width: .45em; height: .45em; background: var(--au-accent); clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%); }
.au-footer .au-social a, .au-footer-pill, .au-footer-telegram { border-radius: 2px; }
.au-footer-telegram { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); box-shadow: none; }
.au-footer-telegram:hover { transform: none; box-shadow: none; }
.au-footer-payments a { border-radius: 2px; }

/* clip-path hides outer focus rings on buttons, so paint the ring inside */
.btn:focus-visible { box-shadow: inset 0 0 0 2px var(--au-accent) !important; outline: none; }

/* Sidebar rows are square so the orange active edge reads as a straight bar */
.sidebar .list-group-item, #order-standard_cart .cart-sidebar .list-group-item, .au-offcanvas .list-group-item { border-radius: 0; }
/* Home domain search: square wrapper, orange search button */
.home-domain-search .input-group-wrapper, .home-domain-search .input-group, .home-domain-search .input-group > .form-control { border-radius: 0 !important; }

/* Cart "Order now" — outranks the order form stylesheet (loaded later, id-based selectors) */
body #order-standard_cart .products .product footer .btn-order-now,
body #order-standard_cart .btn-checkout,
body #order-standard_cart #btnCompleteProductConfig,
body #order-standard_cart #btnCompleteOrder {
    --bs-btn-bg: var(--au-accent);
    --bs-btn-border-color: var(--au-accent);
    --bs-btn-color: var(--au-accent-contrast);
    --bs-btn-hover-bg: var(--au-accent-hover);
    --bs-btn-hover-border-color: var(--au-accent-hover);
    --bs-btn-hover-color: var(--au-accent-contrast);
    --bs-btn-active-bg: var(--au-accent-active);
    --bs-btn-active-border-color: var(--au-accent-active);
    --bs-btn-active-color: var(--au-accent-contrast);
    --bs-btn-font-weight: 700;
    box-shadow: none;
}
body #order-standard_cart .products .product div.product-pricing span.price { color: var(--au-primary); }

/* ---- Home page polish ---- */
/* Service rows: action buttons wrap instead of spilling out of the card */
.div-service-item { flex-wrap: wrap; }
.div-service-buttons { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 1; }
/* Sitejet panel: the edit button carries the div-service-item class — no corner, full label */
.btn.div-service-item { display: inline-flex; }
#sitejetSsoButton { white-space: normal; flex-shrink: 0; }
#sitejetServiceSelect { min-width: 0; }
/* Buttons inside any input group (incl. legacy .input-group-btn wrappers) stay square */
.input-group .btn { clip-path: none; }

/* Hairline along the cut edge (clip-path never paints a border on the clipped side) */
.tiles .tile, .au-panel, .sidebar .card-sidebar, #order-standard_cart .cart-sidebar .card, #order-standard_cart .sidebar-collapsed > .card,
#order-standard_cart .product, #order-standard_cart .order-summary, .store-promoted-product { position: relative; }
.tiles .tile::before, .au-panel::before, .sidebar .card-sidebar::before, #order-standard_cart .cart-sidebar .card::before, #order-standard_cart .sidebar-collapsed > .card::before,
#order-standard_cart .product::before, #order-standard_cart .order-summary::before, .store-promoted-product::before {
    content: "";
    position: absolute;
    top: -1px;
    inset-inline-end: -1px;
    width: var(--au-cut);
    height: var(--au-cut);
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(to bottom left, transparent 50%, var(--au-cut-line, var(--au-border-strong)) 50%, var(--au-cut-line, var(--au-border-strong)) calc(50% + 1px), transparent calc(50% + 1px));
}
[dir="rtl"] .tiles .tile::before, [dir="rtl"] .au-panel::before, [dir="rtl"] .sidebar .card-sidebar::before, [dir="rtl"] #order-standard_cart .cart-sidebar .card::before, [dir="rtl"] #order-standard_cart .sidebar-collapsed > .card::before,
[dir="rtl"] #order-standard_cart .product::before, [dir="rtl"] #order-standard_cart .order-summary::before, [dir="rtl"] .store-promoted-product::before {
    background: linear-gradient(to bottom right, transparent 50%, var(--au-cut-line, var(--au-border-strong)) 50%, var(--au-cut-line, var(--au-border-strong)) calc(50% + 1px), transparent calc(50% + 1px));
}

/* Buttons: hairline along the cut corner too (drawn inside the padding box, since .btn clips overflow) */
.btn:not(.btn-link):not(.dropdown-toggle):not(.btn-icon):not(.au-icon-btn) { position: relative; }
.btn:not(.btn-link):not(.dropdown-toggle):not(.btn-icon):not(.au-icon-btn):not(.btn-group > .btn):not(.input-group .btn)::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    width: var(--au-cut-sm);
    height: var(--au-cut-sm);
    pointer-events: none;
    background: linear-gradient(to bottom right, transparent calc(50% - .3px), var(--bs-btn-border-color) calc(50% - .3px), var(--bs-btn-border-color) calc(50% + .8px), transparent calc(50% + .8px));
    transition: none;
}
[dir="rtl"] .btn:not(.btn-link):not(.dropdown-toggle):not(.btn-icon):not(.au-icon-btn):not(.btn-group > .btn):not(.input-group .btn)::after {
    background: linear-gradient(to bottom left, transparent calc(50% - .3px), var(--bs-btn-border-color) calc(50% - .3px), var(--bs-btn-border-color) calc(50% + .8px), transparent calc(50% + .8px));
}
.btn:hover::after { --bs-btn-border-color: var(--bs-btn-hover-border-color); }
.btn:active::after, .btn.active::after { --bs-btn-border-color: var(--bs-btn-active-border-color); }
/* Hover: the hairline on the cut edge follows the border colour */
.tiles .tile:hover { --au-cut-line: var(--au-primary); }
/* <input class="btn"> can't carry pseudo-elements: paint the same hairline as a background instead */
input.btn:not(.btn-link) {
    background-image: linear-gradient(to bottom right, transparent calc(50% - .3px), var(--au-btn-line, var(--bs-btn-border-color)) calc(50% - .3px), var(--au-btn-line, var(--bs-btn-border-color)) calc(50% + .8px), transparent calc(50% + .8px));
    background-repeat: no-repeat;
    background-size: var(--au-cut-sm) var(--au-cut-sm);
    background-position: right bottom;
}
[dir="rtl"] input.btn:not(.btn-link) {
    background-image: linear-gradient(to bottom left, transparent calc(50% - .3px), var(--au-btn-line, var(--bs-btn-border-color)) calc(50% - .3px), var(--au-btn-line, var(--bs-btn-border-color)) calc(50% + .8px), transparent calc(50% + .8px));
    background-position: left bottom;
}
input.btn:hover { --au-btn-line: var(--bs-btn-hover-border-color); }
input.btn:active { --au-btn-line: var(--bs-btn-active-border-color); }

/* ---- Home page: product-group cards & quick-link tiles ---- */
.au-product-card, .action-icon-btns a {
    position: relative;
    border-radius: 0;
    box-shadow: none;
    clip-path: polygon(0 0, calc(100% - var(--au-cut)) 0, 100% var(--au-cut), 100% 100%, 0 100%);
}
[dir="rtl"] .au-product-card, [dir="rtl"] .action-icon-btns a { clip-path: polygon(var(--au-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--au-cut)); }
.au-product-card::before, .action-icon-btns a::before {
    content: ""; position: absolute; top: -1px; inset-inline-end: -1px; width: var(--au-cut); height: var(--au-cut); z-index: 5; pointer-events: none;
    background: linear-gradient(to bottom left, transparent 50%, var(--au-cut-line, var(--au-border-strong)) 50%, var(--au-cut-line, var(--au-border-strong)) calc(50% + 1px), transparent calc(50% + 1px));
}
[dir="rtl"] .au-product-card::before, [dir="rtl"] .action-icon-btns a::before {
    background: linear-gradient(to bottom right, transparent 50%, var(--au-cut-line, var(--au-border-strong)) 50%, var(--au-cut-line, var(--au-border-strong)) calc(50% + 1px), transparent calc(50% + 1px));
}
.au-product-card:hover, .action-icon-btns a:hover { transform: none; box-shadow: none; border-color: var(--au-primary); --au-cut-line: var(--au-primary); }
.au-product-card .au-product-icon { border-radius: 0; background: var(--au-primary-soft); clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.au-product-card h3 { font-size: 1.15rem; }
/* The whole card is the link: a single arrow is enough as the affordance */
.au-product-more {
    align-self: flex-end;
    display: inline-grid; place-items: center;
    width: 2.1rem; height: 2.1rem;
    border: 1px solid var(--au-border-strong);
    color: var(--au-text-3);
    transition: background-color .15s, color .15s, border-color .15s, transform .2s;
}
[dir="rtl"] .au-product-more i { transform: scaleX(-1); }
.au-product-card:hover .au-product-more { background: var(--au-accent); border-color: var(--au-accent); color: var(--au-accent-contrast); }
.action-icon-btns .ico-container { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); }