* {
    box-sizing: border-box;
  }
  
  #appify_rcc_image {
    margin-bottom: -8px;
  }
  .appify_rcc_content {
    margin: 14px 8px 10px 20px;
  }
  
  /* outline:none WITHOUT a replacement is a WCAG 2.4.7 failure, and it bites hardest
     here: the consent buttons are the first tab stop on the page, so a keyboard user
     lands on them immediately and could not see which one they were on. The visible
     ring is defined once, below, for both buttons. */
  .appify_rcc_button {
    outline: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    right: 10px;
    display: block;
    float: right;
    width: 100%;
    transition-duration: 0.4s;
  }
  
  .appify_rcc_cancel_button {
    outline: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    right: 10px;
    display: block;
    margin-top: 10px;
    float: right;
    width: 100%;
  }
  
  .appify_rcc_row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .appify_rcc_column {
    align-self: center;
  }
  
  .appify_rcc_column1 {
    align-self: center;
    float: left;
    width: 99%;
  }
  
  .appify_rcc_column2 {
    float: right;
    align-self: center;
  }
  
  .appify_rcc_bottomR {
    /* justify-content: space-between; */
    display: flex;
    position: fixed;
    bottom: 0px;
    right: 0;
    cursor: pointer;
    z-index: 999999 !important;
  }
  
  .appify_rcc_bottomL {
    /* justify-content: space-between; */
    display: flex;
    position: fixed;
    bottom: 0px;
    left: 0;
    cursor: pointer;
    z-index: 999999 !important;
  }
  
  .appify_rcc_topR {
    /* justify-content: space-between; */
    display: flex;
    position: fixed;
    top: 0px;
    right: 0;
    cursor: pointer;
    z-index: 999999 !important;
  }
  
  .appify_rcc_topL {
    /* justify-content: space-between; */
    display: flex;
    position: fixed;
    top: 0px;
    left: 0;
    cursor: pointer;
    z-index: 999999 !important;
  }
  
  .appify_rcc_item {
    padding-top: 15px;
  }
  
  @media only screen and (max-width: 600px) {
    .appify_rcc_bottomR,
    .appify_rcc_bottomL,
    .appify_rcc_topR,
    .appify_rcc_topL {
      width: unset !important;
    }
  }
  
  /* #toast rules removed: the element they styled was admin-preview markup that had been
     copy-pasted into the storefront build. The admin keeps its own copy in
     adminhtml/web/css/styles.css. */

  /* Visible keyboard focus for both consent buttons.
     ONE rule covering :focus and :focus-visible together, deliberately. Split across two
     rules, the later :focus block won the cascade and silently dropped the halo — and the
     halo is the half that matters, because merchants choose the button colours and a dark
     ring alone disappears on a dark button. Two layers means one of them always
     contrasts, whatever palette is configured. Keeping :focus as well as :focus-visible
     costs a ring on mouse click and buys one on every browser. */
  .appify_rcc_button:focus,
  .appify_rcc_cancel_button:focus,
  .appify_rcc_item:focus,
  .appify_rcc_button:focus-visible,
  .appify_rcc_cancel_button:focus-visible,
  .appify_rcc_item:focus-visible {
    outline: 3px solid #12395c;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.95);
  }

  /* The policy link sits BEFORE both buttons in the banner, so it is the first thing a
     keyboard user lands on. Themes routinely reset link outlines, so it needs the ring
     stated here explicitly — !important because Luma's own a:focus reset would otherwise
     win on the storefront and leave the first tab stop with no indicator at all. */
  .appify_rcc_item:focus,
  .appify_rcc_item:focus-visible {
    outline: 3px solid #12395c !important;
    outline-offset: 2px !important;
  }

  .appify_rcc_message{
    line-height: 2rem;
  }