/* ============================================================
   sharpen-360.css
   Additive 360px breakpoint layer. Link this LAST, after every
   page's own stylesheet. Nothing here touches desktop — every
   rule is scoped inside the max-width:360px media query, and
   every override uses !important only where it needs to beat
   an inline style written by WWB (left/top/width/height on the
   canvas divs). Do not delete/edit rules in the page CSS files
   to "fix" mobile — add new page-scoped blocks below instead.

   Pages get a body class (pg-home, pg-catalogue, etc.) added
   directly in their HTML so page-specific blocks below only
   ever apply to that one page.
   ============================================================ */

@media (max-width: 360px) {

  /* ---------- 1. GLOBAL SAFETY NET (all pages) ---------- */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  img { max-width: 100%; height: auto; }

  /* ---------- 2. GENERIC HEADER / LOGO (all pages) ----------
     Covers both the #PageHeader1 wrapper (index-style pages)
     and #wb_EmbeddedPage1 used as a header on interior pages.
     Turns the fixed-canvas header into a normal flowing block:
     logo on top, nav below. */
  body.pg-home #PageHeader1,
  body.pg-catalogue #wb_EmbeddedPage1:first-of-type {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
  }
  body.pg-home #PageHeader1 #wb_Image1,
  body.pg-catalogue #wb_EmbeddedPage1:first-of-type #wb_Image1 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  body.pg-home #PageHeader1 #Image1,
  body.pg-catalogue #wb_EmbeddedPage1:first-of-type #Image1 {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }
  /* thin divider line under the header banner: not needed once
     the banner reflows, hide rather than let it float mid-page */
  #wb_Line1 { display: none !important; }

  /* Install-Sharpen! button that sits top-right of the header
     canvas on interior pages: pull it into flow, center it. */
  body.pg-catalogue #wb_EmbeddedPage1:first-of-type #wb_Shape1 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    margin: 6px auto !important;
  }
  body.pg-catalogue #wb_EmbeddedPage1:first-of-type #Shape1 {
    width: 151px !important;
    height: auto !important;
  }

  /* ---------- 3. GENERIC NAV MENU (all pages) ----------
     The bug we're fixing: #wb_CssMenu1 a is #F5F5DC (cream) with
     a transparent background, so on white-bg pages it vanishes.
     Fix: give the nav its own solid bar at this width so contrast
     never depends on what page background sits behind it. */
  #wb_CssMenu1 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    background-color: #014421 !important; /* Sharpen! brand green — avoids clashing with the gold hover state */
    text-align: left !important;
    box-sizing: border-box !important;
    padding: 4px 0 !important;
  }
  #wb_CssMenu1 ul {
    display: block !important;
    width: 100% !important;
    font-size: inherit !important;
  }
  #wb_CssMenu1 li {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #wb_CssMenu1 a,
  #wb_CssMenu1 > ul > li > a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    padding: 10px 16px !important;
    color: #F5F5DC !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  }
  #wb_CssMenu1 li:hover a,
  #wb_CssMenu1 a:hover,
  #wb_CssMenu1 .active {
    color: #DAA520 !important;
    background-color: rgba(255,255,255,0.08) !important;
  }
  /* "Support" submenu: normally shows on :hover, which doesn't
     fire reliably on touch. At minimum keep it legible if a tap
     does trigger it — a follow-up should give it a real
     tap-to-toggle behavior like the ResponsiveMenu1 component
     already uses elsewhere on the site. */
  #wb_CssMenu1 ul ul {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    visibility: visible !important;
    background-color: rgba(0,0,0,0.15) !important;
    box-shadow: none !important;
  }
  #wb_CssMenu1 li li { width: 100% !important; }
  #wb_CssMenu1 ul ul a,
  #wb_CssMenu1 ul :hover ul a {
    width: 100% !important;
    padding-left: 32px !important;
    color: #FFF8DC !important;
  }

  /* ---------- 4. jQuery UI dialogs (catalogue popups) ---------- */
  .ui-dialog { max-width: 92vw !important; }

  /* ---------- 4b. Generic #container wrapper (install / register /
     contact family of pages) — WWB sets this to a fixed 1280px box;
     let it flex to the viewport instead. Safe globally: this ID is
     only ever used as a plain outer wrapper, never page content. ---------- */
  #container, div#container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---------- 4c. Generic card-grid containers (CardContainer1,
     CardContainer2, CardContainer3, CardContainer4... reused across
     ctlg_sharpen*, install*, etc.) — collapse to one column regardless
     of whether the page authored them as flex or grid. Using flexbox
     here rather than CSS grid: tested more reliably across engines
     for overriding an existing flex-row layout at this breakpoint. */
  [id^="CardContainer"] {
    position: relative !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;
    margin: 0 0 16px 0 !important;
  }
  [id^="CardContainer"] > .card {
    width: 100% !important;
    flex: none !important;
  }

  /* ============================================================
     5. PAGE-SPECIFIC: index.html  (body.pg-home)
     Converts the absolute-position hero canvas into a flowed,
     flex column, reordered without touching the HTML.
     ============================================================ */
  body.pg-home {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 18px 28px 18px !important;
    box-sizing: border-box !important;
  }
  body.pg-home > div { position: relative !important; left: 0 !important; top: 0 !important; }

  body.pg-home #PageHeader1 { order: 1; margin: 0 -18px !important; width: calc(100% + 36px) !important; }

  body.pg-home #wb_Text1 {
    order: 2;
    width: 100% !important; height: auto !important;
    font-size: 15px !important; text-align: center !important;
    margin: 16px 0 4px 0 !important;
  }
  body.pg-home #wb_Text2 {
    order: 3;
    width: 100% !important; height: auto !important;
    font-size: 34px !important; line-height: 1.15 !important;
    text-align: center !important; margin: 0 0 10px 0 !important;
  }
  body.pg-home #wb_Line2 { order: 4; width: 60px !important; height: 2px !important; margin: 0 auto 16px auto !important; }
  body.pg-home #wb_Line2 img { width: 60px !important; }

  body.pg-home #wb_Image3,
  body.pg-home #wb_Image2 {
    order: 5;
    width: 70% !important; max-width: 260px !important; height: auto !important;
    margin: 0 auto 12px auto !important;
  }
  /* Decorative backing circle — superseded by the combined badge below */
  body.pg-home #wb_Shape2 {
    display: none !important;
  }
  /* Combined circle + free-trial badge graphic (replaces the separate
     Shape2 + Image4 stack desktop uses, so mobile shows the full
     composited look instead of the badge alone). */
  body.pg-home #wb_Image4 {
    order: 5;
    width: 55% !important; max-width: 210px !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
    margin: 0 auto 12px auto !important;
    background-image: url('images/free_trial_badge.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  body.pg-home #wb_Image4 #Image4 {
    display: none !important;
  }

  body.pg-home #wb_Text3 {
    order: 6;
    width: 100% !important; height: auto !important;
    font-size: 16px !important; text-align: center !important;
    margin: 8px 0 20px 0 !important;
  }

  body.pg-home #wb_Shape1 {
    order: 7;
    width: 220px !important; height: auto !important;
    margin: 0 auto 24px auto !important;
  }
  body.pg-home #wb_Shape1 img { width: 100% !important; height: auto !important; }

  body.pg-home #wb_EmbeddedPage1 {
    order: 10;
    width: calc(100% + 36px) !important; height: auto !important;
    margin: 20px -18px 0 -18px !important;
  }
  body.pg-home #wb_EmbeddedPage1 #wb_footer_1280,
  body.pg-home #wb_EmbeddedPage1 #wb_border_footer {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
  }
  body.pg-home #wb_EmbeddedPage1 #footer_1280 { width: 100% !important; height: auto !important; }

  body.pg-home #PageFooter1,
  body.pg-home #PageFooter2 { display: none !important; }

  /* ============================================================
     6. PAGE-SPECIFIC: ctlg_sharpen.html  (body.pg-catalogue)
     ============================================================ */
  body.pg-catalogue #wb_Text1 {
    position: relative !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
    font-size: 26px !important; line-height: 1.2 !important;
    margin: 16px 0 !important;
    box-sizing: border-box !important;
  }

  body.pg-catalogue #CardContainer1,
  body.pg-catalogue #CardContainer2 {
    position: relative !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;
    margin: 0 0 16px 0 !important;
  }

  body.pg-catalogue #wb_EmbeddedPage2 {
    position: relative !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
    margin-top: 12px !important;
  }
  body.pg-catalogue #wb_EmbeddedPage2 #wb_footer_1280,
  body.pg-catalogue #wb_EmbeddedPage2 #wb_border_footer {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
  }
  body.pg-catalogue #wb_EmbeddedPage2 #footer_1280 { width: 100% !important; height: auto !important; }

  /* ============================================================
     7. PAGE-SPECIFIC: programs.html  (body.pg-programs)
     Two side-by-side plan columns (CSE / UPCAT) -> stacked cards.
     Decorative background panels (Shape1/Shape4) are hidden, same
     reasoning as the index.html free-trial circle: they're sized
     to frame content at fixed desktop proportions and don't scale
     usefully once the layout un-stacks; the green body background
     already does the job of separating sections with margin.
     ============================================================ */
  body.pg-programs {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 18px 28px 18px !important;
    box-sizing: border-box !important;
  }
  body.pg-programs > div { position: relative !important; left: 0 !important; top: 0 !important; }

  body.pg-programs #PageHeader1 { order: 1; margin: 0 -18px !important; width: calc(100% + 36px) !important; height: auto !important; padding-bottom: 8px; display: flex !important; flex-direction: column !important; }
  body.pg-programs #PageHeader1 #wb_Image1 { position: relative !important; width: 190px !important; height: auto !important; margin: 8px auto !important; order: 1 !important; }
  body.pg-programs #PageHeader1 #Image1 { width: 190px !important; height: auto !important; }
  body.pg-programs #PageHeader1 #wb_CssMenu1 { order: 2 !important; }

  body.pg-programs #wb_Text5 { order: 2; width: 100% !important; height: auto !important; font-size: 26px !important; margin: 8px 0 !important; }

  body.pg-programs #wb_Shape1,
  body.pg-programs #wb_Shape4 { display: none !important; }

  /* --- Column 1: Sharpen! for CSE ---
     Shape1 (decorative panel) is hidden above; drawing a simple card
     box across the column's own elements instead, so it still reads
     as a distinct section rather than floating text. */
  body.pg-programs #wb_Text2 {
    order: 10; width: 100% !important; height: auto !important;
    text-align: center !important; font-size: 22px !important;
    margin: 20px 0 0 0 !important; padding: 20px 16px 4px 16px !important;
    background-color: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(218,165,32,0.4) !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
    box-sizing: border-box !important;
  }
  body.pg-programs #wb_Line2 { order: 11; position: relative !important; width: 100% !important; margin: 0 !important; padding: 8px 16px !important; background-color: rgba(255,255,255,0.05) !important; border-left: 1px solid rgba(218,165,32,0.4) !important; border-right: 1px solid rgba(218,165,32,0.4) !important; box-sizing: border-box !important; }
  body.pg-programs #wb_Line2 img { display: block !important; width: 60px !important; margin: 0 auto !important; }
  body.pg-programs #wb_Text1 {
    order: 12; width: 100% !important; height: auto !important;
    font-size: 15px !important; margin: 0 !important;
    padding: 0 16px 10px 16px !important;
    background-color: rgba(255,255,255,0.05) !important;
    border-left: 1px solid rgba(218,165,32,0.4) !important;
    border-right: 1px solid rgba(218,165,32,0.4) !important;
    box-sizing: border-box !important;
  }
  body.pg-programs #wb_Text7 {
    order: 13; width: 100% !important; height: auto !important;
    text-align: center !important; font-size: 28px !important;
    margin: 0 !important; padding: 4px 16px !important;
    background-color: rgba(255,255,255,0.05) !important;
    border-left: 1px solid rgba(218,165,32,0.4) !important;
    border-right: 1px solid rgba(218,165,32,0.4) !important;
    box-sizing: border-box !important;
  }
  body.pg-programs #wb_Text6 {
    order: 14; width: 100% !important; height: auto !important;
    text-align: center !important; margin: 0 !important;
    padding: 0 16px 16px 16px !important;
    background-color: rgba(255,255,255,0.05) !important;
    border-left: 1px solid rgba(218,165,32,0.4) !important;
    border-right: 1px solid rgba(218,165,32,0.4) !important;
    box-sizing: border-box !important;
  }
  body.pg-programs #wb_Shape2 {
    order: 15; width: 200px !important; height: auto !important;
    margin: 0 auto !important; padding: 8px 16px 0 16px !important;
    background-color: rgba(255,255,255,0.05) !important;
    border-left: 1px solid rgba(218,165,32,0.4) !important;
    border-right: 1px solid rgba(218,165,32,0.4) !important;
    box-sizing: border-box !important;
  }
  body.pg-programs #wb_Shape2 img, body.pg-programs #wb_Shape3 img { width: 100% !important; height: auto !important; }
  /* last visual element in the CSE card gets the bottom border+radius */
  body.pg-programs #wb_Shape3 {
    order: 15;
    width: 200px !important; height: auto !important;
    margin: 0 auto !important;
    padding: 8px 16px 16px 16px !important;
    background-color: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(218,165,32,0.4) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    box-sizing: border-box !important;
  }

  /* --- Column 2: Sharpen! for UPCAT --- */
  body.pg-programs #wb_Text4 {
    order: 20; width: 100% !important; height: auto !important;
    text-align: center !important; font-size: 22px !important;
    margin: 28px 0 0 0 !important; padding: 20px 16px 4px 16px !important;
    background-color: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(218,165,32,0.4) !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
    box-sizing: border-box !important;
  }
  body.pg-programs #wb_Line3 { order: 21; position: relative !important; width: 100% !important; margin: 0 !important; padding: 8px 16px !important; background-color: rgba(255,255,255,0.05) !important; border-left: 1px solid rgba(218,165,32,0.4) !important; border-right: 1px solid rgba(218,165,32,0.4) !important; box-sizing: border-box !important; }
  body.pg-programs #wb_Line3 img { display: block !important; width: 60px !important; margin: 0 auto !important; }
  body.pg-programs #wb_Text3 {
    order: 22; width: 100% !important; height: auto !important;
    font-size: 15px !important; margin: 0 !important;
    padding: 0 16px 10px 16px !important;
    background-color: rgba(255,255,255,0.05) !important;
    border-left: 1px solid rgba(218,165,32,0.4) !important;
    border-right: 1px solid rgba(218,165,32,0.4) !important;
    box-sizing: border-box !important;
  }
  body.pg-programs #wb_Text8 {
    order: 23; width: 100% !important; height: auto !important;
    text-align: center !important; font-size: 28px !important;
    margin: 0 !important; padding: 4px 16px !important;
    background-color: rgba(255,255,255,0.05) !important;
    border-left: 1px solid rgba(218,165,32,0.4) !important;
    border-right: 1px solid rgba(218,165,32,0.4) !important;
    box-sizing: border-box !important;
  }
  body.pg-programs #wb_Text9 {
    order: 24; width: 100% !important; height: auto !important;
    text-align: center !important; margin: 0 !important;
    padding: 0 16px 16px 16px !important;
    background-color: rgba(255,255,255,0.05) !important;
    border-left: 1px solid rgba(218,165,32,0.4) !important;
    border-right: 1px solid rgba(218,165,32,0.4) !important;
    box-sizing: border-box !important;
  }
  body.pg-programs #wb_Shape5 {
    order: 25; width: 200px !important; height: auto !important;
    margin: 0 auto !important; padding: 8px 16px 0 16px !important;
    background-color: rgba(255,255,255,0.05) !important;
    border-left: 1px solid rgba(218,165,32,0.4) !important;
    border-right: 1px solid rgba(218,165,32,0.4) !important;
    box-sizing: border-box !important;
  }
  body.pg-programs #wb_Shape5 img, body.pg-programs #wb_Shape6 img { width: 100% !important; height: auto !important; }
  body.pg-programs #wb_Shape6 {
    order: 25;
    width: 200px !important; height: auto !important;
    margin: 0 auto !important;
    padding: 8px 16px 16px 16px !important;
    background-color: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(218,165,32,0.4) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    box-sizing: border-box !important;
  }

  body.pg-programs #wb_EmbeddedPage1 { order: 90; width: calc(100% + 36px) !important; height: auto !important; margin: 24px -18px 0 -18px !important; }
  body.pg-programs #wb_EmbeddedPage1 #wb_footer_1280,
  body.pg-programs #wb_EmbeddedPage1 #wb_border_footer { position: relative !important; left: 0 !important; top: 0 !important; width: 100% !important; height: auto !important; }
  body.pg-programs #wb_EmbeddedPage1 #footer_1280 { width: 100% !important; height: auto !important; }
  body.pg-programs #PageFooter1, body.pg-programs #PageFooter2 { display: none !important; }

  /* ============================================================
     8. PAGE-SPECIFIC: header-collapse reused across the
     install / register / contact family (body.pg-install,
     pg-install2, pg-register, pg-contact). Each page's own header
     block is named per its markup below.
     ============================================================ */
  body.pg-install #wb_EmbeddedPage1,
  body.pg-install2 #wb_EmbeddedPage1,
  body.pg-register #wb_EmbeddedPage1,
  body.pg-contact #wb_EmbeddedPage1,
  body.pg-catalogue1 #wb_EmbeddedPage1 {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
    padding-bottom: 8px !important; box-sizing: border-box !important;
  }
  body.pg-install #wb_EmbeddedPage1 #wb_Image1,
  body.pg-install2 #wb_EmbeddedPage1 #wb_Image1,
  body.pg-register #wb_EmbeddedPage1 #wb_Image1,
  body.pg-contact #wb_EmbeddedPage1 #wb_Image1,
  body.pg-catalogue1 #wb_EmbeddedPage1 #wb_Image1 {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
  }
  body.pg-install #wb_EmbeddedPage1 #Image1,
  body.pg-install2 #wb_EmbeddedPage1 #Image1,
  body.pg-register #wb_EmbeddedPage1 #Image1,
  body.pg-contact #wb_EmbeddedPage1 #Image1,
  body.pg-catalogue1 #wb_EmbeddedPage1 #Image1 {
    width: 100% !important; height: auto !important;
  }
  body.pg-install #wb_EmbeddedPage1 #wb_Line1,
  body.pg-install2 #wb_EmbeddedPage1 #wb_Line1,
  body.pg-register #wb_EmbeddedPage1 #wb_Line1,
  body.pg-contact #wb_EmbeddedPage1 #wb_Line1,
  body.pg-catalogue1 #wb_EmbeddedPage1 #wb_Line1 { display: none !important; }
  body.pg-install #wb_EmbeddedPage1 #wb_Shape1,
  body.pg-install2 #wb_EmbeddedPage1 #wb_Shape1,
  body.pg-register #wb_EmbeddedPage1 #wb_Shape1,
  body.pg-contact #wb_EmbeddedPage1 #wb_Shape1,
  body.pg-catalogue1 #wb_EmbeddedPage1 #wb_Shape1 {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: auto !important; height: auto !important;
    display: flex !important; justify-content: center !important;
    margin: 6px auto !important;
  }
  /* install.html only: a leftover empty #PageHeader1 placeholder div
     (no content) carries position:absolute, z-index:7777, and a solid
     #F8F9FA background covering the full header area — sitting on top
     of the real header (#wb_EmbeddedPage1, z-index:28) and hiding it
     completely. This is a pre-existing artifact in install.css, not
     something introduced above — neutralizing it here. */
  body.pg-install #PageHeader1 {
    display: none !important;
  }

  /* ---------- install.html / install2.html: hero blurb text ---------- */
  body.pg-install #wb_Text1, body.pg-install2 #wb_Text1 {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
    font-size: 24px !important; text-align: center !important; margin: 16px 0 8px 0 !important;
  }
  body.pg-install #wb_Text2, body.pg-install2 #wb_Text2 {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
    font-size: 15px !important; text-align: center !important; margin: 0 0 16px 0 !important;
  }
  /* install.html only: DOM source order puts the header LAST and the
     footer BEFORE the hero heading/blurb (both come after the 4 card
     containers). On desktop this doesn't matter — everything is
     absolutely positioned with explicit coordinates. Once converted
     to normal flow at this breakpoint, raw DOM order would put the
     header at the very bottom. Re-sequencing into proper reading
     order via flex + explicit order on every direct child. */
  body.pg-install #container {
    display: flex !important;
    flex-direction: column !important;
  }
  body.pg-install #wb_EmbeddedPage1 { order: 1 !important; }
  body.pg-install #wb_Text1 { order: 2 !important; }
  body.pg-install #wb_Text2 { order: 3 !important; }
  body.pg-install #CardContainer4 { order: 4 !important; }
  body.pg-install #CardContainer1 { order: 5 !important; }
  body.pg-install #CardContainer2 { order: 6 !important; }
  body.pg-install #CardContainer3 { order: 7 !important; }
  body.pg-install #wb_EmbeddedPage2 { order: 90 !important; }

  /* ---------- How-to-Register.html (pg-register) ----------
     Text-heavy instructional content: reset every direct content
     block to flow, full width, in its existing source order. The
     source order already reads sensibly top-to-bottom; the admin
     login shortcut (Shape3) is pushed to the very end since it's
     not part of the public registration steps. */
  body.pg-register #container > div {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    margin: 0 0 14px 0 !important;
    order: 10;
  }
  body.pg-register #wb_Text1 { font-size: 24px !important; text-align: center !important; order: 2 !important; }
  body.pg-register #wb_Text2 { order: 3 !important; }
  body.pg-register #wb_Text3 { order: 4 !important; }
  body.pg-register #wb_Text6 { order: 5 !important; }
  body.pg-register #wb_Text4 { order: 6 !important; }
  body.pg-register #wb_Text5 { order: 7 !important; }
  body.pg-register #wb_Shape2 { order: 8 !important; }
  body.pg-register #wb_Text7 { order: 9 !important; }
  body.pg-register #wb_Shape3 { order: 99 !important; }
  body.pg-register #container { display: flex !important; flex-direction: column !important; }
  body.pg-register #wb_EmbeddedPage1 { order: 1 !important; padding: 0 !important; }
  body.pg-register #wb_Footer { order: 90 !important; padding: 0 !important; }
  body.pg-register #wb_Footer > div {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
  }
  body.pg-register #wb_Footer img { width: 100% !important; height: auto !important; }

  /* ---------- contact_us.html (pg-contact) ----------
     Icons (globe/mobile/phone/envelope) sit as separate elements from
     their text in the source, so instead of uniform spacing, each
     icon gets a tight margin to the text below it, with a bigger gap
     before the next pair — reads as grouped rather than scattered.
     Reordered slightly so the Facebook logo sits with the social
     media line instead of stranded between Viber and phone. */
  body.pg-contact #container {
    display: flex !important; flex-direction: column !important;
  }
  body.pg-contact #container > div {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    margin: 0 !important;
    text-align: center !important;
  }
  body.pg-contact #wb_EmbeddedPage1 { order: 1 !important; padding: 0 !important; }
  body.pg-contact #wb_Text5 { order: 2 !important; font-size: 24px !important; margin: 16px 0 16px 0 !important; padding-bottom: 12px !important; border-bottom: 2px solid #DAA520 !important; }
  body.pg-contact #wb_Text1 { order: 3 !important; margin: 0 0 4px 0 !important; }
  body.pg-contact #wb_Text2 { order: 4 !important; margin: 0 0 20px 0 !important; }

  body.pg-contact #wb_Icon1 { order: 5 !important; margin: 0 0 4px 0 !important; font-size: 20px !important; color: #014421 !important; }
  body.pg-contact #wb_Text4 { order: 6 !important; margin: 0 0 20px 0 !important; }

  body.pg-contact #wb_Icon2 { order: 7 !important; margin: 0 0 4px 0 !important; font-size: 20px !important; color: #014421 !important; }
  body.pg-contact #wb_Text6 { order: 8 !important; margin: 0 0 20px 0 !important; }

  body.pg-contact #wb_Icon3 { order: 9 !important; margin: 0 0 4px 0 !important; font-size: 20px !important; color: #014421 !important; }
  body.pg-contact #wb_Text8 { order: 10 !important; margin: 0 0 20px 0 !important; }

  body.pg-contact #wb_Icon4 { order: 11 !important; margin: 0 0 4px 0 !important; font-size: 20px !important; color: #014421 !important; }
  body.pg-contact #wb_Text10 { order: 12 !important; margin: 0 0 20px 0 !important; }

  body.pg-contact #wb_Image3 { order: 13 !important; margin: 0 auto 6px auto !important; width: 37px !important; height: 37px !important; }
  body.pg-contact #wb_Image3 #Image3 { width: 37px !important; height: 37px !important; object-fit: contain !important; }
  body.pg-contact #wb_Text7 { order: 14 !important; margin: 0 0 20px 0 !important; }

  body.pg-contact #wb_Image2 { order: 15 !important; margin: 0 auto 20px auto !important; }

  body.pg-contact #wb_EmbeddedPage2 { order: 90 !important; padding: 0 !important; }
  body.pg-contact #wb_EmbeddedPage2 > div {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
  }
  body.pg-contact #wb_EmbeddedPage2 img,
  body.pg-contact #wb_Image2 { width: 100% !important; height: auto !important; }

  /* ---------- ctlg_sharpen1.html (pg-catalogue1) ----------
     Same family as ctlg_sharpen.html: header handled above (block 8),
     title + card grid handled by the generic rules (blocks 4c, 6). */
  body.pg-catalogue1 #wb_Text1 {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
    font-size: 26px !important; line-height: 1.2 !important;
    margin: 16px 0 !important; box-sizing: border-box !important;
  }
  body.pg-catalogue1 #wb_EmbeddedPage2 {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important; margin-top: 12px !important;
  }
  body.pg-catalogue1 #wb_EmbeddedPage2 > div {
    position: relative !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
  }
  body.pg-catalogue1 #wb_EmbeddedPage2 img { width: 100% !important; height: auto !important; }
}