/* ========================================================================
   ABCXYZ Responsive App Shell v1.36.2
   Global layout architecture for mobile, tablet and desktop.
   Purpose: one predictable canvas, symmetric gutters, zero inherited Bootstrap
   drift, responsive surfaces, safe areas and app-like component spacing.
   ======================================================================== */

html.abcxyz-shell-v2,
body.abcxyz-shell-v2{
  --abc-shell-max:1440px;
  --abc-shell-gutter:clamp(18px,2.4vw,34px);
  --abc-shell-section-gap:clamp(18px,2.4vw,34px);
  --abc-shell-radius:clamp(18px,1.8vw,28px);
  --abc-shell-radius-sm:14px;
  --abc-shell-bg:#f3f7fa;
  --abc-shell-surface:#ffffff;
  --abc-shell-surface-soft:#f8fbfd;
  --abc-shell-text:#17384d;
  --abc-shell-muted:#647b8b;
  --abc-shell-line:rgba(22,73,104,.10);
  --abc-shell-accent:#1179a5;
  --abc-shell-accent-2:#145b83;
  --abc-shell-shadow:0 16px 44px rgba(17,63,91,.08);
  --abc-shell-shadow-soft:0 8px 24px rgba(17,63,91,.055);
  --abc-shell-tap:44px;
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

html.abcxyz-shell-v2{background:var(--abc-shell-bg)}
body.abcxyz-shell-v2{
  margin:0!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(40,151,194,.07),transparent 24rem),
    radial-gradient(circle at 90% 12%,rgba(91,150,211,.055),transparent 30rem),
    var(--abc-shell-bg)!important;
  color:var(--abc-shell-text);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.abcxyz-shell-v2 *,
body.abcxyz-shell-v2 *::before,
body.abcxyz-shell-v2 *::after{box-sizing:border-box}

body.abcxyz-shell-v2 img,
body.abcxyz-shell-v2 video,
body.abcxyz-shell-v2 canvas,
body.abcxyz-shell-v2 svg{max-inline-size:100%;height:auto}

body.abcxyz-shell-v2 iframe{max-inline-size:100%}

/* ------------------------------------------------------------------------
   1. Structural reset: remove old template width drift without moving data.
   ------------------------------------------------------------------------ */
body.abcxyz-shell-v2 :where(.main-wrapper,.page-content,#sp-main-body,.component-content,main){
  inline-size:100%!important;
  max-inline-size:none!important;
  margin-inline:0!important;
  overflow:visible!important;
}

body.abcxyz-shell-v2 .abcxyz-shell-root{
  position:relative;
  inline-size:100%!important;
  max-inline-size:none!important;
  margin-inline:0!important;
  padding-inline:0!important;
  overflow:visible!important;
  isolation:isolate;
}

/* Any container directly responsible for the page canvas uses one gutter only. */
body.abcxyz-shell-v2 .abcxyz-shell-root > :where(.container,.container-fluid,.container-lg,.container-xl),
body.abcxyz-shell-v2 .abcxyz-shell-root > .section-ptb > :where(.container,.container-fluid,.container-lg,.container-xl),
body.abcxyz-shell-v2 :where(.page-content,.section-ptb,#sp-main-body) > :where(.container,.container-fluid){
  inline-size:min(100%,var(--abc-shell-max))!important;
  max-inline-size:var(--abc-shell-max)!important;
  margin-inline:auto!important;
  padding-inline:var(--abc-shell-gutter)!important;
}

/* Nested Bootstrap containers must not add a second gutter. */
body.abcxyz-shell-v2 .abcxyz-shell-root :where(.container,.container-fluid) :where(.container,.container-fluid){
  inline-size:100%!important;
  max-inline-size:none!important;
  margin-inline:0!important;
  padding-inline:0!important;
}

/* Bootstrap rows are a common cause of unequal left/right gaps. */
body.abcxyz-shell-v2 .abcxyz-shell-root :where(.row,.row-fluid){
  max-inline-size:100%!important;
  margin-inline:0!important;
}

body.abcxyz-shell-v2 .abcxyz-shell-root :where(.row,.row-fluid) > [class*="col-"]{
  min-inline-size:0;
}

/* ------------------------------------------------------------------------
   2. Page surface architecture: viewport-centred, independent of old parent.
   This is the key fix for the historic asymmetric mobile gutters.
   ------------------------------------------------------------------------ */
body.abcxyz-shell-v2 .abcxyz-shell-surface{
  --abc-surface-width:min(var(--abc-shell-max),calc(100vw - (var(--abc-shell-gutter) + var(--abc-shell-gutter))));
  position:relative!important;
  left:auto!important;
  translate:none!important;
  transform:translate3d(var(--abc-shell-shift,0px),0,0)!important;
  inline-size:var(--abc-surface-width)!important;
  max-inline-size:var(--abc-shell-max)!important;
  margin-inline:0!important;
  container-type:inline-size;
}

@supports (width:100dvw){
  body.abcxyz-shell-v2 .abcxyz-shell-surface{
    --abc-surface-width:min(var(--abc-shell-max),calc(100dvw - (var(--abc-shell-gutter) + var(--abc-shell-gutter))));
  }
}

body.abcxyz-shell-v2 .abcxyz-shell-surface > :where(.container,.container-fluid){
  inline-size:100%!important;
  max-inline-size:none!important;
  margin-inline:0!important;
  padding-inline:0!important;
}

/* Generic Joomla content gets one intentional surface, not nested desktop boxes. */
body.abcxyz-shell-v2 .abcxyz-shell-surface:is(.item-page,.com-content-article,.category-list,.blog,.contact):not(.abcxyz-about-host):not(.abcxyz-contacthub-host){
  border:1px solid var(--abc-shell-line)!important;
  border-radius:var(--abc-shell-radius)!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:var(--abc-shell-shadow-soft)!important;
  padding:clamp(18px,2.6vw,38px)!important;
}

/* ------------------------------------------------------------------------
   3. Type, rhythm and controls. Fluid, readable and touch-safe.
   ------------------------------------------------------------------------ */
body.abcxyz-shell-v2 .abcxyz-shell-root :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote){
  max-inline-size:100%;
}
body.abcxyz-shell-v2 .abcxyz-shell-root h1{font-size:clamp(1.65rem,2.4vw,2.65rem);line-height:1.35}
body.abcxyz-shell-v2 .abcxyz-shell-root h2{font-size:clamp(1.35rem,1.9vw,2rem);line-height:1.42}
body.abcxyz-shell-v2 .abcxyz-shell-root h3{font-size:clamp(1.12rem,1.45vw,1.5rem);line-height:1.5}
body.abcxyz-shell-v2 .abcxyz-shell-root :where(p,li){line-height:1.9}

body.abcxyz-shell-v2 .abcxyz-shell-root :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){
  max-inline-size:100%!important;
  border-radius:14px!important;
  border:1px solid var(--abc-shell-line)!important;
  background:#fff!important;
  color:#18394e!important;
  box-shadow:none!important;
}
body.abcxyz-shell-v2 .abcxyz-shell-root :where(button,.btn,a.button,input[type="submit"],input[type="button"]){
  min-block-size:var(--abc-shell-tap);
}
body.abcxyz-shell-v2 .abcxyz-shell-root :where(input,select,textarea,button,a):focus-visible{
  outline:3px solid color-mix(in srgb,var(--abc-shell-accent) 22%,transparent)!important;
  outline-offset:2px!important;
}

/* Responsive tables remain usable instead of forcing the whole page wider. */
body.abcxyz-shell-v2 .abcxyz-shell-root :where(.table-responsive,.table_items){
  inline-size:100%!important;
  max-inline-size:100%!important;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}

/* ------------------------------------------------------------------------
   4. JoomShopping / checkout is placed on the same canvas as the rest of app.
   Business logic is untouched; this only normalizes geometry.
   ------------------------------------------------------------------------ */
body.abcxyz-shell-v2 :where(#comjshop,.jshop,.jshop_list_product,.jshop_list_category,
.checkout_shipping_block,.checkout_payment_block,.checkout_pfinish_block,.address_block){
  max-inline-size:100%!important;
}

body.abcxyz-shell-v2.abcxyz-appmode-shop .abcxyz-shell-surface,
body.abcxyz-shell-v2.abcxyz-appmode-cart .abcxyz-shell-surface{
  background:transparent!important;
}

body.abcxyz-shell-v2 .abcxyz-cart-portal{
  --abc-cart-width:min(var(--abc-shell-max),calc(100vw - (var(--abc-shell-gutter) + var(--abc-shell-gutter))));
  position:relative!important;
  left:auto!important;
  translate:none!important;
  transform:translate3d(var(--abc-shell-shift,0px),0,0)!important;
  inline-size:var(--abc-cart-width)!important;
  max-inline-size:var(--abc-shell-max)!important;
  margin:0!important;
  padding:0!important;
  container-type:inline-size;
  container-name:abc-cart;
}
@supports (width:100dvw){
  body.abcxyz-shell-v2 .abcxyz-cart-portal{
    --abc-cart-width:min(var(--abc-shell-max),calc(100dvw - (var(--abc-shell-gutter) + var(--abc-shell-gutter))));
  }
}
body.abcxyz-shell-v2 .abcxyz-cart-portal .abc-cart-showcase{
  inline-size:100%!important;
  max-inline-size:none!important;
  margin-inline:0!important;
}

/* Checkout forms share one visual system across steps. */
body.abcxyz-shell-v2.abcxyz-appmode-shop :where(.checkout_shipping_block,.checkout_payment_block,.checkout_pfinish_block,.address_block){
  border:1px solid var(--abc-shell-line)!important;
  border-radius:var(--abc-shell-radius)!important;
  background:var(--abc-shell-surface)!important;
  box-shadow:var(--abc-shell-shadow-soft)!important;
}

/* ------------------------------------------------------------------------
   5. Header/footer geometry. Keep branding, remove legacy width inconsistencies.
   ------------------------------------------------------------------------ */
body.abcxyz-shell-v2 :where(.header-bottom-area,#mainHeader){
  max-inline-size:100%!important;
}
body.abcxyz-shell-v2 .header-bottom-area > :where(.container,.container-fluid),
body.abcxyz-shell-v2 #mainHeader > :where(.container,.container-fluid){
  inline-size:min(100%,var(--abc-shell-max))!important;
  max-inline-size:var(--abc-shell-max)!important;
  margin-inline:auto!important;
  padding-inline:var(--abc-shell-gutter)!important;
}
body.abcxyz-shell-v2 footer :where(.container,.container-fluid){
  inline-size:min(100%,var(--abc-shell-max))!important;
  max-inline-size:var(--abc-shell-max)!important;
  margin-inline:auto!important;
  padding-inline:var(--abc-shell-gutter)!important;
}

/* ------------------------------------------------------------------------
   6. Mobile / tablet app canvas.
   8px usable gutter = edge-to-edge feel without touching the screen edge.
   ------------------------------------------------------------------------ */
@media (max-width:900px){
  html.abcxyz-shell-v2,
  body.abcxyz-shell-v2{
    --abc-shell-gutter:max(8px,env(safe-area-inset-left,0px));
    --abc-shell-radius:18px;
    --abc-shell-radius-sm:13px;
    --abc-shell-section-gap:12px;
    --abc-shell-tap:46px;
  }

  body.abcxyz-shell-v2{
    min-block-size:100dvh;
    overflow-x:clip!important;
  }

  body.abcxyz-shell-v2 .abcxyz-shell-root > :where(.container,.container-fluid,.container-lg,.container-xl),
  body.abcxyz-shell-v2 .abcxyz-shell-root > .section-ptb > :where(.container,.container-fluid,.container-lg,.container-xl),
  body.abcxyz-shell-v2 :where(.page-content,.section-ptb,#sp-main-body) > :where(.container,.container-fluid){
    inline-size:100%!important;
    max-inline-size:none!important;
    padding-inline:var(--abc-shell-gutter)!important;
  }

  body.abcxyz-shell-v2 .abcxyz-shell-surface{
    --abc-surface-width:calc(100vw - (var(--abc-shell-gutter) + var(--abc-shell-gutter)));
    max-inline-size:none!important;
  }
  @supports (width:100dvw){
    body.abcxyz-shell-v2 .abcxyz-shell-surface{--abc-surface-width:calc(100dvw - (var(--abc-shell-gutter) + var(--abc-shell-gutter)))}
  }

  /* Kill accumulated Bootstrap negative margin/padding on phone layouts. */
  body.abcxyz-shell-v2 .abcxyz-shell-root :where(.row,.row-fluid){
    --bs-gutter-x:0px!important;
    margin-left:0!important;
    margin-right:0!important;
    gap:0;
  }
  body.abcxyz-shell-v2 .abcxyz-shell-root :where(.row,.row-fluid) > [class*="col-"]{
    padding-left:0!important;
    padding-right:0!important;
    inline-size:100%;
    max-inline-size:100%;
  }

  body.abcxyz-shell-v2 .abcxyz-shell-surface:is(.item-page,.com-content-article,.category-list,.blog,.contact):not(.abcxyz-about-host):not(.abcxyz-contacthub-host){
    padding:15px!important;
    border-radius:18px!important;
    box-shadow:0 7px 22px rgba(17,63,91,.045)!important;
  }

  body.abcxyz-shell-v2 .abcxyz-shell-root h1{font-size:clamp(1.55rem,7vw,2rem)!important}
  body.abcxyz-shell-v2 .abcxyz-shell-root h2{font-size:clamp(1.25rem,5.8vw,1.6rem)!important}
  body.abcxyz-shell-v2 .abcxyz-shell-root h3{font-size:clamp(1.08rem,4.8vw,1.32rem)!important}
  body.abcxyz-shell-v2 .abcxyz-shell-root :where(p,li){font-size:max(14px,1rem);line-height:1.9}

  body.abcxyz-shell-v2 .abcxyz-shell-root :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){
    min-block-size:48px!important;
    font-size:16px!important;
    padding:11px 12px!important;
  }

  /* Cart now occupies the same exact 8px canvas as every other app surface. */
  body.abcxyz-shell-v2 .abcxyz-cart-portal{
    --abc-cart-width:calc(100vw - (var(--abc-shell-gutter) + var(--abc-shell-gutter)));
    max-inline-size:none!important;
  }
  @supports (width:100dvw){
    body.abcxyz-shell-v2 .abcxyz-cart-portal{--abc-cart-width:calc(100dvw - (var(--abc-shell-gutter) + var(--abc-shell-gutter)))}
  }
  body.abcxyz-shell-v2.abcxyz-appmode-cart .abc-cart-showcase{
    padding-inline:0!important;
  }

  /* The old green trust panel may be injected outside Cart after render. */
  body.abcxyz-shell-v2.abcxyz-appmode-cart .abcxyz-cart-legacy-trust-hidden{display:none!important}
}

/* Small phones: preserve usable space, never create a second gutter. */
@media (max-width:420px){
  html.abcxyz-shell-v2,
  body.abcxyz-shell-v2{--abc-shell-gutter:max(7px,env(safe-area-inset-left,0px))}
  body.abcxyz-shell-v2 .abcxyz-shell-surface:is(.item-page,.com-content-article,.category-list,.blog,.contact):not(.abcxyz-about-host):not(.abcxyz-contacthub-host){padding:13px!important}
}

/* Desktop: intentionally use the screen while preserving readable line length. */
@media (min-width:901px){
  body.abcxyz-shell-v2 .abcxyz-shell-root{padding-block:0}
  body.abcxyz-shell-v2 .section-ptb{padding-block:clamp(18px,2.4vw,34px)!important}
  body.abcxyz-shell-v2 .abcxyz-shell-surface:is(.item-page,.com-content-article,.category-list,.blog,.contact):not(.abcxyz-about-host):not(.abcxyz-contacthub-host){
    margin-block:0 var(--abc-shell-section-gap)!important;
  }
}

/* Component-level responsiveness follows its actual available width, not device labels. */
@container abc-cart (max-width:760px){
  .abc-cart-showcase__layout{grid-template-columns:1fr!important}
  .abc-cart-summary{position:relative!important;top:auto!important}
}

/* Motion/accessibility baseline for the app shell. */
@media (prefers-reduced-motion:reduce){
  body.abcxyz-shell-v2 *,
  body.abcxyz-shell-v2 *::before,
  body.abcxyz-shell-v2 *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* ========================================================================
   v1.33.0 — Home App Canvas + Article Edge Rhythm
   Promote the homepage application hero to the same viewport-centred surface
   architecture as Shop/Cart, and remove legacy module chrome around it.
   ======================================================================== */

/* The legacy Joomla module wrappers around the Home hero are structural only.
   They must not create a second white frame, shadow, max-width or gutter. */
body.abcxyz-shell-v2.abcxyz-appmode-home :where(.abcxyz-home-hero-host,.abcxyz-home-canvas,.abcxyz-home-structural-host){
  inline-size:100%!important;
  max-inline-size:none!important;
  margin-inline:0!important;
  padding-inline:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body.abcxyz-shell-v2.abcxyz-appmode-home :where(.abcxyz-home-hero-host,.abcxyz-home-structural-host) > :where(.container,.container-fluid,.row,[class*="col-"]){
  inline-size:100%!important;
  max-inline-size:none!important;
  margin-inline:0!important;
  padding-inline:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Home Hero is now a first-class App-Shell surface. Its outer width is governed
   by the same viewport geometry engine as the Cart instead of by module width. */
body.abcxyz-shell-v2.abcxyz-appmode-home #english11000-home-hero.abcxyz-home-primary-surface{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  translate:none!important;
  transform:translate3d(var(--abc-shell-shift,0px),0,0)!important;
  inline-size:var(--abc-surface-width)!important;
  max-inline-size:var(--abc-shell-max)!important;
  margin-block:8px 14px!important;
  margin-inline:0!important;
  padding-inline:0!important;
  overflow:hidden!important;
  container-type:inline-size;
}
@supports (width:100dvw){
  body.abcxyz-shell-v2.abcxyz-appmode-home #english11000-home-hero.abcxyz-home-primary-surface{
    --abc-surface-width:min(var(--abc-shell-max),calc(100dvw - (var(--abc-shell-gutter) + var(--abc-shell-gutter))));
  }
}
body.abcxyz-shell-v2.abcxyz-appmode-home #english11000-home-hero.abcxyz-home-primary-surface :where(.e11-grid){
  inline-size:100%!important;
  max-inline-size:none!important;
  margin-inline:0!important;
}

/* Article pages use one consistent reading inset. This also catches Joomla page
   headings that render just outside the article wrapper. */
body.abcxyz-shell-v2 .abcxyz-article-heading-zone,
body.abcxyz-shell-v2 .abcxyz-article-surface > :where(.page-header,.article-header,h1:first-child,h2:first-child){
  max-inline-size:100%!important;
  margin-inline:0!important;
}

@media (max-width:900px){
  html.abcxyz-shell-v2,
  body.abcxyz-shell-v2{
    --abc-shell-gutter:clamp(7px,2vw,10px);
  }

  /* No double-gutter on Home. The hero itself owns the phone-edge spacing. */
  body.abcxyz-shell-v2.abcxyz-appmode-home :where(.abcxyz-home-hero-host,.abcxyz-home-canvas,.abcxyz-home-structural-host){
    padding-inline:0!important;
    margin-inline:0!important;
  }
  body.abcxyz-shell-v2.abcxyz-appmode-home #english11000-home-hero.abcxyz-home-primary-surface{
    border-radius:clamp(18px,5vw,24px)!important;
  }
  body.abcxyz-shell-v2.abcxyz-appmode-home #english11000-home-hero.abcxyz-home-primary-surface .e11-grid{
    padding-inline:clamp(16px,4.5vw,22px)!important;
  }

  /* Article title/body edge rhythm: enough breathing room to avoid touching the
     phone edge, while still keeping an app-like wide content canvas. */
  body.abcxyz-shell-v2 .abcxyz-article-surface{
    padding-inline:clamp(12px,3.2vw,16px)!important;
  }
  body.abcxyz-shell-v2 .abcxyz-article-heading-zone,
  body.abcxyz-shell-v2 .abcxyz-article-surface > :where(.page-header,.article-header,h1:first-child,h2:first-child){
    padding-inline:0!important;
  }

  /* Home primary content must not inherit old Bootstrap column padding. */
  body.abcxyz-shell-v2.abcxyz-appmode-home .abcxyz-shell-root :where(.abcxyz-home-hero-host,.abcxyz-home-canvas) :where(.row,.row-fluid){
    margin-inline:0!important;
  }
  body.abcxyz-shell-v2.abcxyz-appmode-home .abcxyz-shell-root :where(.abcxyz-home-hero-host,.abcxyz-home-canvas) :where(.row,.row-fluid) > [class*="col-"]{
    padding-inline:0!important;
  }
}

@media (min-width:901px){
  /* Desktop keeps the same system: wide, centred, but bounded for readability. */
  body.abcxyz-shell-v2.abcxyz-appmode-home #english11000-home-hero.abcxyz-home-primary-surface{
    margin-block:clamp(14px,1.5vw,24px) clamp(20px,2vw,32px)!important;
  }
}


/* ========================================================================
   v1.34.0 — Reading Experience + Payment Result Screen + Bottom UI Safety
   ======================================================================== */

/* Article pages: one calm reading surface with deliberate line length. */
body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface{
  inline-size:min(980px,var(--abc-surface-width))!important;
  max-inline-size:980px!important;
  padding:clamp(24px,3vw,44px)!important;
  border-radius:24px!important;
  margin-block:clamp(12px,2vw,24px) var(--abc-shell-section-gap)!important;
  background:#fff!important;
  box-shadow:0 14px 42px rgba(17,63,91,.055)!important;
}
body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface .abcxyz-article-heading-zone,
body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface :where(h1,h2,h3){
  color:#153f59!important;
  letter-spacing:-.015em;
}
body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface .abcxyz-article-heading-zone :where(h1,h2),
body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface > :where(h1,h2){
  font-size:clamp(1.75rem,2.3vw,2.35rem)!important;
  line-height:1.55!important;
  margin-block:0 20px!important;
}
body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface :where(p,li){
  font-size:clamp(1.02rem,1.08vw,1.14rem)!important;
  line-height:2.05!important;
  color:#253e4e!important;
}
body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface p{
  margin-block:0 1.25em!important;
}
body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface :where(img,video,iframe,figure){
  border-radius:16px;
}
body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface :where(blockquote){
  margin:22px 0!important;
  padding:16px 18px!important;
  border-inline-start:4px solid #2aa7d2!important;
  border-radius:14px!important;
  background:#f5fbfe!important;
}

/* Payment finish: replace scattered legacy prose with a clear result screen. */
body.abcxyz-shell-v2.abcxyz-payment-result .abcxyz-payment-result-host{
  padding:clamp(16px,2.8vw,34px)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body.abcxyz-payment-result .abcxyz-payment-result-legacy-title,
body.abcxyz-payment-result .abcxyz-payment-result-legacy-copy{
  display:none!important;
}
.abcxyz-payment-result-card{
  width:min(860px,100%);
  margin:clamp(18px,3vw,40px) auto;
  padding:clamp(24px,4vw,44px);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:22px;
  align-items:start;
  direction:rtl;
  background:#fff;
  border:1px solid rgba(23,76,106,.10);
  border-radius:28px;
  box-shadow:0 22px 60px rgba(18,62,88,.09);
}
.abcxyz-payment-result-card__icon{
  width:62px;height:62px;border-radius:20px;display:grid;place-items:center;
  font-size:30px;font-weight:900;
}
.abcxyz-payment-result-card--success .abcxyz-payment-result-card__icon{
  color:#147a52;background:#e9f8f0;border:1px solid #ccebdc;
}
.abcxyz-payment-result-card--failure .abcxyz-payment-result-card__icon{
  color:#b24343;background:#fff1f0;border:1px solid #f3d1ce;
}
.abcxyz-payment-result-card__eyebrow{
  display:inline-flex;align-items:center;min-height:32px;padding:5px 11px;border-radius:999px;
  font-size:.86rem;font-weight:800;color:#166b4e;background:#edf8f3;
}
.abcxyz-payment-result-card h2{
  margin:12px 0 10px!important;font-size:clamp(1.7rem,2.7vw,2.45rem)!important;
  line-height:1.45!important;color:#153f59!important;
}
.abcxyz-payment-result-card__lead{
  margin:0 0 9px!important;font-size:1.08rem!important;line-height:1.9!important;color:#31566a!important;
}
.abcxyz-payment-result-card__helper{
  margin:0!important;font-size:.96rem!important;line-height:1.85!important;color:#687f8e!important;
}
.abcxyz-payment-result-card__actions{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;
}
.abcxyz-payment-result-card__actions a{
  min-height:48px;padding:11px 20px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none!important;font-weight:850!important;
}
.abcxyz-payment-result-card__primary{
  color:#fff!important;background:linear-gradient(135deg,#0d739b,#124f78)!important;
  box-shadow:0 10px 24px rgba(13,115,155,.18);
}
.abcxyz-payment-result-card__secondary{
  color:#244b62!important;background:#fff!important;border:1px solid rgba(23,76,106,.15)!important;
}

/* Cart mobile dock must never cover the last real content. */
@media (max-width:900px){
  body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface{
    --abc-article-gutter:14px;
    inline-size:calc(100dvw - (var(--abc-article-gutter) + var(--abc-article-gutter)))!important;
    max-inline-size:none!important;
    padding:20px 16px 24px!important;
    border-radius:20px!important;
    margin-block:8px 16px!important;
  }
  body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface .abcxyz-article-heading-zone :where(h1,h2),
  body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface > :where(h1,h2){
    font-size:clamp(1.55rem,6.2vw,1.9rem)!important;
    line-height:1.6!important;
    margin-bottom:16px!important;
  }
  body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface :where(p,li){
    font-size:17px!important;
    line-height:2!important;
  }
  body.abcxyz-shell-v2.abcxyz-article-reading .abcxyz-article-surface :where(.page-header,.article-header){
    padding-inline:2px!important;
  }

  .abcxyz-payment-result-card{
    width:100%;margin:10px 0 18px;padding:22px 17px;
    grid-template-columns:1fr;gap:14px;border-radius:22px;
  }
  .abcxyz-payment-result-card__icon{width:54px;height:54px;border-radius:17px;font-size:27px}
  .abcxyz-payment-result-card h2{font-size:1.65rem!important;margin-top:8px!important}
  .abcxyz-payment-result-card__lead{font-size:1rem!important}
  .abcxyz-payment-result-card__helper{font-size:.93rem!important}
  .abcxyz-payment-result-card__actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:18px}
  .abcxyz-payment-result-card__actions a{width:100%}

  body.abcxyz-shell-v2.abcxyz-appmode-cart .abcxyz-cart-portal{
    padding-bottom:112px!important;
  }
}