/* ============================================================
   responsive.css  --  generated by convert.js
   Edit this ONE file to adjust the whole site.

   Above 900px: almost nothing is changed. Desktop stays as it was.
   At or below 900px: layout tables stack, data tables scroll sideways.
   ============================================================ */

/* ---------- applies at every width ---------- */

/* Photos scale down proportionally. Spacer/divider pixels (class added by the
   converter) keep the exact height their width/height attributes ask for,
   otherwise a 1x1 gif stretched to 388x2 would render as a 388x388 block. */
/* max-width and height must travel together: if a narrow viewport shrinks the
   width while a height attribute holds the height fixed, the image is squashed.
   Images sized by height alone are skipped - they have nothing to scale against,
   and auto would blow them up to their full natural size. */
/* NOTE: image sizing rules live in the mobile block only.
   max-width:100% makes an image infinitely shrinkable, and table auto-layout
   then treats image columns as flexible while text columns stay rigid - so on a
   fixed-width desktop layout every tight row steals space from the pictures and
   the spacer columns. On desktop the authored width/height are left untouched. */

/* The 1px border on a thumbnail otherwise adds 2px per image, which is enough to
   push a three-across row past the width it was designed for. */
img.thumbProps, img.thumbProps-sm { box-sizing: border-box; }

.rw-burger, .rw-drawer, .rw-scrim { display: none; }

/* ---------- guide cards: optional wrapping variant ----------
   The default .guide-grid puts every card on one line, which is right for the
   four- and five-card rows. Add guide-grid-wrap alongside it on a grid that has
   more cards than fit comfortably:

       <div class="guide-grid guide-grid-wrap">

   Cards then run five to a line and wrap onto a second row. Grids without the
   extra class are untouched. */
/* The card has 16px side padding and a 1.5px border. Without border-box those
   sit OUTSIDE any flex-basis, so two cards at 50% actually need 100% + 70px and
   the second wraps - which is why two-across never happened at any width. */
.guide-card {
  box-sizing: border-box;
}

.guide-grid.guide-grid-wrap {
  flex-wrap: wrap;
}
.guide-grid.guide-grid-wrap .guide-card {
  /* Three per row, stated as a basis rather than left to a minimum width:
     3 x 33.333% fills the line exactly, so a fourth card always wraps. */
  flex: 1 1 calc(33.333% - 8px);
  max-width: calc(33.333% - 8px);
  min-width: 0;
  box-sizing: border-box;
}

/* ---------- category product grid ----------
   display:contents on the rows makes the browser ignore the three-per-row
   grouping and treat every cell as a direct grid item, so products flow
   continuously. Row shape in the source stops mattering: a row of one, three or
   four all feed the same grid. Section headers and wrapper rows span the width;
   the old spacer cells are dropped because the gap replaces them. */
table.rw-prodgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 14px;
  width: 100%;
  align-items: start;
}
table.rw-prodgrid > tbody { display: contents; }

/* product rows dissolve so their cells become grid items */
table.rw-prodgrid > tbody > tr.rw-prodrow,
table.rw-prodgrid > tr.rw-prodrow { display: contents; }

/* every other row stays one full-width block and KEEPS ITS BOX, so anything
   positioned inside it still has something to anchor to */
table.rw-prodgrid > tbody > tr:not(.rw-prodrow),
table.rw-prodgrid > tr:not(.rw-prodrow) {
  display: block;
  grid-column: 1 / -1;
}

/* Direct children only. A descendant selector here would also restyle the cells
   of any table nested INSIDE a product cell and break it. */
table.rw-prodgrid > tbody > tr > td,
table.rw-prodgrid > tr > td { display: block; width: auto; }


table.rw-prodgrid > tbody > tr > td.rw-span,
table.rw-prodgrid > tr > td.rw-span { grid-column: 1 / -1; }

table.rw-prodgrid > tbody > tr > td.rw-gutcell,
table.rw-prodgrid > tr > td.rw-gutcell { display: none; }

/* A fixed height on a table cell is only ever a MINIMUM - the cell grows if the
   content needs more. Once that cell is a block inside the grid the height
   becomes a hard limit, and long text overflows onto whatever follows. Every
   category page has one of these on its description cell (130px to 290px), so
   releasing it is what stops the description running over the section band. */
table.rw-prodgrid > tbody > tr > td[style*="height"],
table.rw-prodgrid > tr > td[style*="height"] { height: auto !important; }

/* Space between rows comes from the cells themselves. Using the grid's row-gap
   would also push the first row away from the section heading above it, which
   already has its own bottom margin. */
table.rw-prodgrid > tbody > tr > td.prodContainer,
table.rw-prodgrid > tbody > tr > td.prodContainer480,
table.rw-prodgrid > tbody > tr > td.prodContainer_smaller,
table.rw-prodgrid > tbody > tr > td.rw-accentcell,
table.rw-prodgrid > tr > td.prodContainer,
table.rw-prodgrid > tr > td.prodContainer480,
table.rw-prodgrid > tr > td.prodContainer_smaller { padding-bottom: 90px; }

/* fixed cell heights are pointless once the grid aligns the rows */
table.rw-prodgrid > tbody > tr > td.prodContainer,
table.rw-prodgrid > tbody > tr > td.prodContainer480,
table.rw-prodgrid > tbody > tr > td.prodContainer_smaller { height: auto; }

/* Pictures fill their column instead of sitting at a fixed pixel width. The
   _smaller and 480 cells were previously left out, so their images kept widths
   like 213px and 231px inside a wider column while the caption below spanned
   the full width - which is what made the captions look outdented. */
table.rw-prodgrid > tbody > tr > td.prodContainer > a > img.thumbProps,
table.rw-prodgrid > tbody > tr > td.prodContainer > img.thumbProps,
table.rw-prodgrid > tbody > tr > td.prodContainer_smaller > a > img.thumbProps,
table.rw-prodgrid > tbody > tr > td.prodContainer_smaller > img.thumbProps,
table.rw-prodgrid > tbody > tr > td.prodContainer480 > a > img.thumbProps,
table.rw-prodgrid > tbody > tr > td.prodContainer480 > img.thumbProps { width: 100%; height: auto; }

/* and the caption starts at the same edge as the picture */
table.rw-prodgrid > tbody > tr > td[class*="prodContainer"] { text-align: left; }

/* ---------- category page accent cards (FAQ / video tiles) ----------
   These are sized by a fixed height with a non-scaling background image, so they
   only ever fitted one exact cell size. Letting the background cover the box and
   the height grow with the text makes them work at any width. */
.landAccent, .landAccentVideo, .landAccentwide {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  height: auto !important;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
}
.landAccent, .landAccentVideo { min-height: 400px; }
/* ---------- Add to Bag (product detail pages) ---------- */
.atb-title { background:#fdf5f7; border-left:4px solid #e1306e; padding:10px 14px;
  border-radius:0 6px 6px 0; margin-bottom:30px; }
.atb-title-text { font-size:15px; font-weight:700; color:#1a0a10; margin:0; padding:0; line-height:1.3; }

.atb-card { background:#ffffff; border:1px solid #e8e4e0; border-radius:12px;
  padding:24px 16px; margin-bottom:10px; }

.atb-card-header { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.atb-swatch { width:18px; height:18px; border-radius:50%; border:1px solid #d8d3ce; flex-shrink:0; }
.atb-color-name { font-size:12px; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:rgb(90,84,84); }

.atb-field { margin-bottom:18px; }
.atb-field:last-of-type { margin-bottom:0; }
.atb-label { display:flex; align-items:center; font-size:11px; font-weight:600;
  letter-spacing:0.07em; text-transform:uppercase; color:rgb(90,84,84); margin-bottom:5px; }
.atb-tip { display:inline-flex; align-items:center; margin-left:6px; line-height:0; flex-shrink:0; }
.atb-tip img { width:17px; height:17px; display:block; opacity:0.75; transition:opacity 0.15s; }
.atb-tip:hover img { opacity:1; }

.atb-field select { width:100%; box-sizing:border-box; font-size:13px; padding:10px;
  border:1px solid #d8d3ce; border-radius:8px; background:#ffffff; color:#1a0a10;
  font-family:'PT Sans', sans-serif; }

.atb-optional { background:#fdf5f7; border-radius:8px; padding:14px 12px 20px; margin-top:14px; }
.atb-optional-header { font-size:13px; font-weight:400; color:rgb(90,84,84); margin-bottom:15px; }

.atb-button { display:block; width:100%; box-sizing:border-box; margin-top:14px; padding:12px;
  background:rgb(249,248,249); color:rgb(90,84,84); border:1.5px solid #dcdee0; border-radius:8px;
  font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  text-align:center; cursor:pointer; font-family:'PT Sans', sans-serif;
  transition:background 0.15s, border-color 0.15s, color 0.15s; }
.atb-button:hover { background:#e1306e; border-color:#e1306e; color:#ffffff; }

.atb-section { margin-bottom: 80px; width: 100%; box-sizing: border-box; }

/* atb-mens: recoloured from the blush and pink defaults */
.atb-section.atb-mens .atb-title,
.atb-section.atb-mens .atb-optional { background: #F5F9FD; }

.atb-section.atb-mens .atb-title { border-left-color: #2F6DAB; }

.atb-section.atb-mens .atb-button:hover {
  background: #2F6DAB;
  border-color: #2F6DAB;
  color: #ffffff;
}

/* The table the cards landed in has no width of its own, so it would otherwise
   shrink to the widest dropdown instead of filling the product column. */
table.rw-atb-host { width: 100% !important; }

/* tap targets stay comfortable on a phone */
@media (max-width: 900px) {
  .atb-field select, .atb-button { min-height: 44px; }
}


/* ---------- MOBILE ---------- */
@media (max-width: 900px) {

  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }



  /* Images scale down only here, where the screen really is narrower than the
     layout. max-width and height:auto must travel together or a fixed height
     attribute squashes the picture. */
  img { max-width: 100%; }
  img[width]:not(.rw-px) { height: auto; }

  /* A gutter spacer holds a table column open; it must keep its given width. */
  img.rw-gutter { max-width: none; width: auto; }

  /* Release fixed-width containers */
  body > table,
  #wrapper, #container, #content, #contentbox, #main {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Any table or cell pinned to a fixed pixel width. Listing a few known values
     missed things like <td width="395">, which holds the video embeds: the cell
     stayed 395px on a 375px screen so the video could not shrink.
     Percentage widths are left alone - those already scale. */
  table[width]:not([width$="%"]),
  td[width]:not([width$="%"]),
  th[width]:not([width$="%"]),
  col[width]:not([width$="%"]) {
    width: auto !important;
    max-width: 100% !important;
  }

  /* --- layout tables: stack every cell into one column --- */
  /* :not(.rw-prodgrid) matters: a product grid carries both classes, and
     display:block here would otherwise override its display:grid and collapse
     the whole grid back to one item per row. */
  table.rw-stack:not(.rw-prodgrid),
  table.rw-stack:not(.rw-prodgrid) > tbody,
  table.rw-stack:not(.rw-prodgrid) > thead,
  table.rw-stack:not(.rw-prodgrid) > tfoot,
  table.rw-stack:not(.rw-prodgrid) > tbody > tr,
  table.rw-stack:not(.rw-prodgrid) > thead > tr,
  table.rw-stack:not(.rw-prodgrid) > tr,
  table.rw-stack:not(.rw-prodgrid) > tbody > tr > td,
  table.rw-stack:not(.rw-prodgrid) > tbody > tr > th,
  table.rw-stack:not(.rw-prodgrid) > tr > td,
  table.rw-stack:not(.rw-prodgrid) > tr > th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  table.rw-stack > tbody > tr > td,
  table.rw-stack > tr > td {
    text-align: left !important;
    white-space: normal !important;
  }

  /* --- breathing room at the screen edges ---
     Applied to the outermost stacked table only. Because these pages nest tables
     several levels deep, putting padding on every cell would compound it and march
     the text inwards. The second rule cancels it for any nested table.
     Full-width colour bands are unaffected: the background sits on the wrapping
     div, so the band still reaches both edges while its text is inset. */
  table.rw-stack {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  table.rw-stack table.rw-stack {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Text sitting directly in the page rather than in a table */
  body > p, body > h1, body > h2, body > h3, body > ul, body > ol, body > blockquote {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Data tables scroll, so pad the scroll container rather than the rows */
  .rw-scroll { padding-left: 14px; padding-right: 14px; }

  /* Inside an accordion the container already provides its own side padding, so
     the scroller must not add more - it inset the size charts from both edges. */
  .content .rw-scroll {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Truly empty spacer cells add dead space once stacked. A cell carrying a class
     is excluded: it is probably drawing something (a rule, a tint) via CSS. */
  table.rw-stack td:empty:not([class]) { display: none !important; }

  /* --- data tables: keep the grid, scroll it sideways --- */
  .rw-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  table.rw-data { max-width: none; }

  /* --- desktop nav bars and the left nav column are replaced by the drawer --- */
  .rw-desktop-nav { display: none !important; }

  /* --- anything listed in CONFIG.hideOnMobile --- */
  .rw-hide-mobile.rw-hide-mobile.rw-hide-mobile,
  table.rw-stack > tbody > tr > .rw-hide-mobile.rw-hide-mobile.rw-hide-mobile,
  table.rw-stack > tr > .rw-hide-mobile.rw-hide-mobile.rw-hide-mobile,
  table.rw-headerbar > tbody > tr > .rw-hide-mobile.rw-hide-mobile.rw-hide-mobile,
  table.rw-data > tbody > tr > .rw-hide-mobile.rw-hide-mobile.rw-hide-mobile { display: none !important; }

  #navtoptable,
  table.rw-stack > tbody > tr > #navtoptable,
  table.rw-stack > tr > #navtoptable,
  table.rw-headerbar > tbody > tr > #navtoptable,
  table.rw-data > tbody > tr > #navtoptable { display: none !important; }

  #leftnavcolumn,
  table.rw-stack > tbody > tr > #leftnavcolumn,
  table.rw-stack > tr > #leftnavcolumn,
  table.rw-headerbar > tbody > tr > #leftnavcolumn,
  table.rw-data > tbody > tr > #leftnavcolumn { display: none !important; }

  /* also collapse a cell whose only content is one of the above */
  td:has(> .rw-hide-mobile), th:has(> .rw-hide-mobile) { display: none !important; }
  td:has(> #navtoptable), th:has(> #navtoptable) { display: none !important; }
  td:has(> #leftnavcolumn), th:has(> #leftnavcolumn) { display: none !important; }

  /* --- header band: burger | logo | customer icons, all on one row ---
     These rules come after the stacking rules so they win. The three cells are
     targeted by position, which works whether or not they carry ids. */
  table.rw-headerbar.rw-headerbar,
  table.rw-headerbar.rw-headerbar > tbody { display: block !important; width: 100% !important; }

  table.rw-headerbar.rw-headerbar > tbody > tr,
  table.rw-headerbar.rw-headerbar > tr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  table.rw-headerbar.rw-headerbar > tbody > tr > td,
  table.rw-headerbar.rw-headerbar > tr > td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* cell 1 holds the burger; its own icon links move into the menu instead */
  table.rw-headerbar.rw-headerbar > tbody > tr > td:nth-child(1) > a,
  table.rw-headerbar.rw-headerbar > tr > td:nth-child(1) > a { display: none !important; }

  /* The two OUTER cells share the leftover space equally and the logo sizes to
     its content. Letting the logo cell take the slack instead centres it within
     that cell, which is off-centre on the page because the three icons on the
     right are far wider than the burger on the left. */
  table.rw-headerbar.rw-headerbar > tbody > tr > td:nth-child(1),
  table.rw-headerbar.rw-headerbar > tr > td:nth-child(1),
  table.rw-headerbar.rw-headerbar #hideOnMobile {
    flex: 1 1 0 !important;
    min-width: 0;
    text-align: left !important;
  }

  table.rw-headerbar.rw-headerbar > tbody > tr > td:nth-child(2),
  table.rw-headerbar.rw-headerbar > tr > td:nth-child(2),
  table.rw-headerbar.rw-headerbar #logo { flex: 0 0 auto !important; }

  table.rw-headerbar.rw-headerbar > tbody > tr > td:nth-child(3),
  table.rw-headerbar.rw-headerbar > tr > td:nth-child(3),
  table.rw-headerbar.rw-headerbar #customerlinks {
    flex: 1 1 0 !important;
    min-width: 0;
    text-align: right !important;
  }

  /* the 10px margins on each icon are too generous on a narrow screen */
  table.rw-headerbar.rw-headerbar td:nth-child(3) img { margin: 0 4px !important; }

  /* burger sits on the dark band, so lose its own background */
  table.rw-headerbar.rw-headerbar .rw-burger {
    background: transparent !important;
    margin: 0 !important;
  }

  /* --- data tables whose headings live in <div class="columnHeader"> ---
     Stacked, each value carries its own heading so nothing is orphaned, and the
     original heading row is hidden because it would otherwise stack as three
     stray words. */
  table.rw-labeled,
  table.rw-labeled > tbody,
  table.rw-labeled > tbody > tr,
  table.rw-labeled > tr,
  table.rw-labeled > tbody > tr > td,
  table.rw-labeled > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  table.rw-labeled tr.rw-hdr { display: none !important; }

  table.rw-labeled > tbody > tr,
  table.rw-labeled > tr {
    padding: 4px 0 10px !important;
  }

  table.rw-labeled td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b625d;
    margin-bottom: 3px;
  }

  table.rw-labeled td[data-label] { padding-bottom: 10px !important; }

  /* --- more space between rows of products --- */
  table.rw-prodgrid > tbody > tr > td.prodContainer,
  table.rw-prodgrid > tbody > tr > td.prodContainer480,
  td.prodContainer, td.prodContainer480 {
    padding-bottom: 72px !important;
  }

  /* --- product grid drops to fewer columns --- */
  table.rw-prodgrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  table.rw-prodgrid > tbody { display: contents !important; }
  table.rw-prodgrid > tbody > tr.rw-prodrow,
  table.rw-prodgrid > tr.rw-prodrow { display: contents !important; }
  table.rw-prodgrid > tbody > tr:not(.rw-prodrow),
  table.rw-prodgrid > tr:not(.rw-prodrow) {
    display: block !important;
    grid-column: 1 / -1 !important;
  }

  table.rw-prodgrid > tbody > tr > td,
  table.rw-prodgrid > tr > td {
    display: block !important;
    width: auto !important;
  }

  table.rw-prodgrid > tbody > tr > td.rw-gutcell,
  table.rw-prodgrid > tr > td.rw-gutcell { display: none !important; }
  table.rw-prodgrid > tbody > tr > td.rw-span,
  table.rw-prodgrid > tr > td.rw-span { grid-column: 1 / -1 !important; }

  /* --- guide cards: four across is far too narrow on a phone --- */
  .guide-grid {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .guide-card {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: none !important;   /* release the three-per-row cap from desktop */
    min-width: 0 !important;
  }
  @media (max-width: 500px) {
    .guide-card { flex-basis: 100% !important; }

    /* Opt out of the one-per-row drop and stay two across on a phone:
           <div class="guide-grid guide-grid-two">
       Grids without the extra class are unaffected. */
    .guide-grid.guide-grid-two .guide-card {
      flex-basis: calc(50% - 5px) !important;
      max-width: calc(50% - 5px) !important;
    }
  }

  /* --- FAQ answer layout ---
     These wrappers use display:table / table-row. In the automatic table
     algorithm a specified width is only a MINIMUM, so the box grows past it
     whenever its contents ask for more - and a video embed sized by percentage
     padding gives that algorithm nothing measurable, so the answer never
     shrinks to the screen. Plain blocks size predictably. */
  .divTable,
  .divTableBody,
  .divTableRow,
  .divTableCell,
  .divTableHead,
  .divTableQuestion,
  .divTableTags,
  .divTableBreadcrumb {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* the body carries a 10% bottom margin that is huge on a phone */
  .divTableBody { margin-bottom: 24px !important; }

  /* --- category description blocks ---
     The description paragraphs carry fixed pixel widths (425-595px) to keep the
     text clear of a background image sitting 500-625px from the left. On a phone
     that width simply runs off the screen, and the background is off-screen
     anyway, so release both and drop the reserved height with them. */
  [class^="cat"][class*="Description"] {
    width: auto !important;
    max-width: 100% !important;
  }
  [class^="cat"][class*="Header"] {
    background-image: none !important;
    min-height: 0 !important;
    padding-right: 0 !important;
  }

  /* --- category page cards and product cells: fixed heights make no sense once
         everything is stacked one per row --- */
  /* The accent blocks keep their minimum height on mobile too. Zeroing it here
     dated from when they stacked one per row; in the two-column grid it just
     cropped them. Padding is deliberately NOT overridden either: styles.css
     sets a padding-top on the video card to hold its text clear of the
     photograph, and forcing a value here would undo that. */
  .landAccentwide { min-height: 0 !important; }
  .prodContainer, .prodContainer480, .prodContainer_smaller {
    height: auto !important;
  }

  /* --- opt-in centring --- */
  .rw-center-mobile.rw-center-mobile.rw-center-mobile,
  table.rw-stack > tbody > tr > .rw-center-mobile.rw-center-mobile.rw-center-mobile,
  table.rw-stack > tr > .rw-center-mobile.rw-center-mobile.rw-center-mobile,
  .rw-center-mobile.rw-center-mobile.rw-center-mobile td,
  .rw-center-mobile.rw-center-mobile.rw-center-mobile th,
  .rw-center-mobile.rw-center-mobile.rw-center-mobile div,
  .rw-center-mobile.rw-center-mobile.rw-center-mobile p { text-align: center !important; }

  .rw-center-mobile.rw-center-mobile.rw-center-mobile img { margin-left: auto !important; margin-right: auto !important; }

  /* --- percentage-width inline-block boxes stack full width ---
     These are sized with width:23%/22% for a 990px page, which leaves them far
     too narrow on a phone. Anything listed in stackOnMobile is released. */
  /* nothing configured */

  /* --- promo row shows one message at a time --- */
  /* Repeated class deliberately: the stacking rules carry two classes and four
     elements, so a single-class selector here loses and both promos show. */
  table.rw-rotate.rw-rotate.rw-rotate .rw-slide { display: none !important; }
  /* Each message becomes a fixed-height centred box, so the band is exactly the
     same height whichever message is showing. Padding alone was not enough: the
     messages carry different inner markup and so produced different heights. */
  table.rw-rotate.rw-rotate.rw-rotate .rw-slide.rw-on {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 6px 14px !important;
    /* One promo cell carries an inline line-height (40px) and the other does not,
       which is what made the band change height between messages. Normalise it. */
    line-height: 1.4 !important;
    animation: rw-fade .45s ease;
  }

  /* neutralise margins/padding on whatever the message is wrapped in */
  table.rw-rotate.rw-rotate .rw-slide.rw-on > *,
  table.rw-rotate.rw-rotate .rw-slide.rw-on td,
  table.rw-rotate.rw-rotate .rw-slide.rw-on p,
  table.rw-rotate.rw-rotate .rw-slide.rw-on div,
  table.rw-rotate.rw-rotate .rw-slide.rw-on a {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }

  /* a trailing <br> inside one message but not the other adds phantom height */
  table.rw-rotate.rw-rotate .rw-slide.rw-on br { display: none !important; }
  @keyframes rw-fade { from { opacity: 0 } to { opacity: 1 } }

  /* --- hamburger --- */
  .rw-burger {
    display: block;
    position: static;          /* scrolls away with the page */
    margin: 8px 0 8px 10px;
    z-index: 10001;
    width: 44px; height: 44px;
    padding: 10px 9px;
    background: #291115;
    border: 0; border-radius: 6px;
    cursor: pointer;
  }
  .rw-burger span {
    display: block;
    height: 2px;
    background: #fff;
    margin: 4px 0;
    transition: transform .2s ease, opacity .2s ease;
  }
  body.rw-open .rw-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.rw-open .rw-burger span:nth-child(2) { opacity: 0; }
  body.rw-open .rw-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .rw-drawer {
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 268px; max-width: 82vw;
    z-index: 10000;
    background: #fff;
    padding: 64px 0 24px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 2px 0 14px rgba(0,0,0,.2);
  }
  body.rw-open .rw-drawer { transform: translateX(0); }

  .rw-drawer a {
    display: block;
    padding: 13px 25px 20px 20px;
    font: 14px/1.3 Arial, Helvetica, sans-serif;
    color: #291115;
    text-decoration: none;
    border-bottom: 1px solid #e2d8dd;
  }
  .rw-drawer a:active { background: #fbeef3; }

  /* main product categories carry the weight */
  .rw-drawer a { font-weight: 700; }

  /* the support links below are secondary */
  .rw-drawer a.rw-extra { font-weight: 400; color: #5a5450; }

  /* and are separated from the categories by a heavier rule */
  .rw-drawer a.rw-extra-first {
    border-top: 3px solid #fff;
    margin-top: 22px;
  }

  .rw-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  body.rw-open .rw-scrim { opacity: 1; pointer-events: auto; }

}

/* ---------- print ---------- */
@media print {
  .rw-burger, .rw-drawer, .rw-scrim { display: none !important; }
}