.markdown, .toastui-editor-contents  {
  
  @media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  /* Do NOT expand link/abbr URLs into printed text. On the fragment/commerce
     pages (cart, accessories, ...) this dumped every href — (/photos/...),
     (/img/...jpg), the /c?s=... share URL, social links — as literal text,
     making the printout unreadable. Keep links styled but silent in print. */
  a[href]:after,
  abbr[title]:after,
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  /* Don't force images to full page width in print. width:100% blew every
     product thumbnail up to fill its table cell, which pushed the price
     column off the right edge of the paper (clipping $3699 / £286. etc.).
     Let images print at their intended size, capped to the container. */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Cart line-item thumbnails: hard cap so each row and its price column
     always fit the printed page (screen renders these at ~76px). */
  #shoppingtable img {
    max-width: 90px !important;
  }

  /* The little photo-gallery icon overlaying each product image never prints. */
  #shoppingtable .fa-window-restore {
    display: none !important;
  }

  /* The compact per-item "In stock" flag and "Weight: Ng" note live in the
     .shipdate line, which is the DEFAULT (specs-collapsed) view. Keep those
     off the printed order form. The detailed .specifications block (which has
     its own Product weight / dimensions / SKU) is display:none until the
     shopper clicks "Show specifications" — when they do, it prints naturally.
     So: specs collapsed -> clean order form; specs expanded -> full detail. */
  #shoppingtable .shipdate .fa-calendar-check-o,   /* "In stock" */
  #shoppingtable .shipdate .fa-balance-scale {      /* "Weight: Ng" */
    display: none !important;
  }

  /* Keep every page container within the printable width. The site's
     responsive layout is driven by SCREEN-only media queries, so in print the
     full desktop-width layout is used and its containers are wider than the
     paper — which is what makes cards, video rows and even body text run off
     the right edge (compare, coffeecart, warranty, overview, home). Capping
     the containers to the page lets the existing flex grids reflow (2-up, 3-up,
     …) to fit — i.e. print matches the web at a narrow window, instead of one
     giant full-width column. */
  #page-wrapper, #wrapper, #main, #banner, #footer,
  .container, .wrapper, .box, .columns, .ytgrid,
  section, article {
    max-width: 100% !important;
  }
  .columns {
    width: 100% !important;
  }
  /* Product/model images inside grids never exceed their card. */
  .columns img, .ytbox img, .alsoboughtbox img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Keep the ```cards product/model grids at their intended N-up layout in
     print. The site's phone breakpoint (a plain max-width query, so it DOES
     match on the narrow print page) would otherwise collapse every card to a
     full-width one-per-row block — which is why the home 3-up showcase printed
     as giant stacked images instead of the web's grid. Re-assert the grid so
     print matches the web. */
  .columns.cards:not([class*="cols"]) > .box,
  .columns.cards.cols2 > .box {
    flex-basis: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
  .columns.cards.cols3 > .box {
    flex-basis: calc(33.333% - 13.34px) !important;
    max-width: calc(33.333% - 13.34px) !important;
  }
  .columns.cards.cols4 > .box {
    flex-basis: calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

pre,
code {
  font-family: Menlo, Monaco, "Courier New", monospace;
}

li {
  list-style-position:  outside
}

pre {
  padding: .5rem;
  line-height: 1.25;
  overflow-x: scroll;
}

a,
a:visited {
  color: #3498db;
}

a:hover,
a:focus,
a:active {
  color: #2980b9;
}

.modest-no-decoration {
  text-decoration: none;
}

html {
  font-size: 12px;
}

@media screen and (min-width: 32rem) and (max-width: 48rem) {
  html {
    font-size: 15px;
  }
}

@media screen and (min-width: 48rem) {
  html {
    font-size: 16px;
  }
}

body {
  line-height: 1.85;
}

p,
.modest-p {
  margin-bottom: 1rem;
}

h1,
.modest-h1,
h2,
.modest-h2,
h3,
.modest-h3,
h4,
.modest-h4 {
  margin: 1.414rem 0 .5rem;
  font-weight: inherit;
  line-height: 1.42;
  scroll-margin-top: 50px;
}

h1,
.modest-h1 {
  margin-top: 0;
  font-size: 1.798rem;
  font-weight: bold;
}

h2,
.modest-h2 {
  font-size: 1.527rem;
  font-weight: bold;
}

h3,
.modest-h3 {
  font-size: 1.3rem;
  font-weight: bold;
}

h4,
.modest-h4 {
  font-size: 1.2rem;
  font-weight: bold;
}

h5,
.modest-h5 {
  font-size: 1.1rem;
  font-weight: bold;
}

h6,
.modest-h6 {
  font-size: 1.05rem;
  font-weight: bold;
}

small,
.modest-small {
  font-size: .707em;
}

a {
  text-decoration: none;
  border-bottom: none;
  scroll-margin-top: 50px;
}
/* https://github.com/mrmrs/fluidity */

img,
canvas,
iframe,
video,
svg,
select,
textarea {
  max-width: 100%;
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);

@import url(http://fonts.googleapis.com/css?family=Arimo:700,700italic);

html {
  font-size: 18px;
  max-width: 100%;
}

body {
  color: #444;
  font-family: 'Lato', 'Open Sans Condensed', sans-serif;
  font-weight: 300;
  margin: 0 auto;
  max-width: 48rem;
  line-height: 1.45;
  padding: .25rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Lato', Arimo, Helvetica, sans-serif;
  text-align: left;
}


ul {
  margin-bottom: 0.5rem;  
  padding-bottom: 0.5rem;  
}

h1 {
  border-bottom: 2px solid #d0d0d0;
  margin-bottom: 0.9rem;
  padding-bottom: 0rem;  
  margin-top: 3rem;
  text-align: left !important;   
}
h2 {
  border-bottom: 2px solid #d0d0d0;
  margin-bottom: 0.5rem;
  margin-top: 2rem;
  padding-bottom: 0rem;  
}
h3 {
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 0.3rem;
  margin-top: 1.5rem;
  padding-bottom: 0rem;
  text-align: left;
}

/* The cart title (#shoppingcarttitle h2, injected by shopping.js) is an app
   heading, not markdown content, so drop the markdown h2 underline above — the
   hand-coded /cart has no line. Scoped to #shoppingcarttitle, so it only touches
   the cart title on fragment pages; other headings and the live cart are
   unaffected. */
#shoppingcarttitle h2 {
  border-bottom: none;
  margin-top: 0;
}

blockquote {
  border-left: 12px solid #f4f4f4;
  padding: 1rem;
}

pre,
code {
  background-color: #e0e0e0;
}


.imghref  {
  width: 100%;
  max-width: 100%;
  height: auto;
    border-radius: 5px;
    border-bottom: none;
    filter: drop-shadow(0px 0px 1px #EEEEEE);    
  }

.ytimghref  {
    width: 100%;
    max-width: 100% !important;
    border-radius: 5px;
    border-bottom: none;
    filter: drop-shadow(0px 0px 1px #EEEEEE);    
  }

.smallimghref  {
    width: 100%;
    max-width: 100% !important;
    border-radius: 5px;
    border-bottom: none;
    filter: drop-shadow(0px 0px 1px #EEEEEE);    
  }


.alsoboughtimghref  {
    width: 100%;
    max-width: 100% !important;
    border-radius: 0px;
    border-width: 0;
    border-bottom: none;
  }


.columns {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
}


/* Scoped to .columns so it styles ONLY markdown code-box grids (always
   <div class="columns"><div class="box">…), not skel's own .box components
   (e.g. the "Our blog" widget's <div class="box alt">), which markdown.css
   would otherwise clobber with max-width:600px on fragment pages. */
.columns .box {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
}

/* ```cards — homepage-style product/accessory card grid.
   Each card = linked image + underlined linked title (+ optional description),
   centred, on a white card with a thin light-grey border (matching index.adp's
   "box post" cards). Bare ```cards is an even 2-up that gains newspaper-style
   width variety on wide screens; ```cards N (e.g. 3) is an even N-up row.
   Phones collapse to a single column. */
.columns.cards { align-items: flex-start; gap: 20px; }
.columns.cards > .box {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
    min-width: 0;
    background: #f8f8f8;
    border: 1px solid #e7e7e7;
    box-shadow: none;
    border-radius: 8px;
    padding: 0 0 18px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}
/* image sits flush at the top of the card (full bleed), rounded to match */
.columns.cards > .box p { margin: 0; padding: 6px 16px 0; color: #777; line-height: 1.5; }
.columns.cards > .box p:has(> a.imghref) { padding: 0; }
.columns.cards > .box img.imghref { border-radius: 8px 8px 0 0; }
/* title link: dark, bold, underlined, centred, tight to the image */
.columns.cards > .box a:not(.imghref) {
    display: inline-block;
    margin: 12px 0 2px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    color: #4b5966;
    text-decoration: underline;
}

/* Even N-up variants (```cards 2 / 3 / 4). Subtract the shared gap: N cards in a
   row share (N-1) gaps of 20px, i.e. 20*(N-1)/N per card. */
.columns.cards.cols2 > .box { flex-basis: calc(50%    - 10px);    max-width: calc(50%    - 10px); }
.columns.cards.cols3 > .box { flex-basis: calc(33.333% - 13.34px); max-width: calc(33.333% - 13.34px); }
.columns.cards.cols4 > .box { flex-basis: calc(25%    - 15px);    max-width: calc(25%    - 15px); }

/* Wide screens: newspaper variety for the bare (non-cols) grid. Cards are laid
   2-per-row; an 8-card cycle (7u,5u,6u,6u,5u,7u,6u,6u — the ratios index.adp
   uses) makes rows 1 and 3 of each cycle wide|narrow and narrow|wide, the rest
   even, so neighbouring rows differ. Each width subtracts half the 20px gap. */
@media (min-width: 981px) {
    .columns.cards:not([class*="cols"]) > .box:nth-child(8n+1),
    .columns.cards:not([class*="cols"]) > .box:nth-child(8n+6) {
        flex-basis: calc(58.333% - 10px);
        max-width: calc(58.333% - 10px);
    }
    .columns.cards:not([class*="cols"]) > .box:nth-child(8n+2),
    .columns.cards:not([class*="cols"]) > .box:nth-child(8n+5) {
        flex-basis: calc(41.667% - 10px);
        max-width: calc(41.667% - 10px);
    }
}
/* Tablet: every card grid becomes an even 2-up (cols selectors listed so they
   out-rank the .cols3/.cols4 base rules above by source order). */
@media (min-width: 737px) and (max-width: 980px) {
    .columns.cards > .box,
    .columns.cards.cols3 > .box,
    .columns.cards.cols4 > .box { flex-basis: calc(50% - 10px); max-width: calc(50% - 10px); }
}
/* Phone: single column */
@media (max-width: 736px) {
    .columns.cards > .box,
    .columns.cards.cols3 > .box,
    .columns.cards.cols4 > .box { flex-basis: 100%; max-width: 100%; }
}

.box300 {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    background-color: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.03);
}

/* ========================================
   Basket Page Custom Styles
   ======================================== */

/* Feature Grid - 2 Column Layout */
.feature-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    margin: 0 auto;
    visibility: visible !important;
}

@media (max-width: 768px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* Feature Card */
.feature-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 20px;
    border: 1px solid #eee;
    background: #fff;
    visibility: visible !important;
}

.feature-card-icon {
    margin-top: 15px;
}

.feature-card-icon i {
    font-size: 40px;
    color: #be7117;
    line-height: 0;
}

.feature-card p {
    margin: 0;
    color: #777;
    line-height: 1.5;
    letter-spacing: 0.5px;
}

.feature-card ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}

.feature-card li {
    font-family: 'Poppins', sans-serif;
    color: #777;
    line-height: 1.5;
    letter-spacing: 0.5px;
}

/* Box 1-2 Layout (Two Column) */
.box1-2 {
    flex: 1;
    min-width: 300px;
    background-color: white;
    border-radius: 8px;
    padding: 25px;
}

/* YouTube Video Grid */
#ytVideoGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin: 24px 0;
    box-sizing: border-box;
    overflow: hidden;
}

@media (max-width: 992px) {
    #ytVideoGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    #ytVideoGrid {
        grid-template-columns: 1fr;
    }
}

/* Video Card */
.video-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.yt-thumb {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
}

.yt-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.yt-thumb-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.7;
}

.yt-thumb:hover .yt-thumb-overlay {
    opacity: 1;
}

.video-card h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #4b5966;
    line-height: 1.3;
    margin: 10px 0 6px 0;
}

.video-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #777;
    line-height: 1.5;
    margin: 0;
}

/* YouTube Modal */
#youtubeModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
}

#youtubeModal.active {
    display: flex;
}

.youtube-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    background: transparent;
    border: 0;
    z-index: 10001;
    line-height: 1;
}

.youtube-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

#youtubePlayerWrap {
    position: relative;
    z-index: 10000;
    width: 80%;
}

@media (max-width: 768px) {
    #youtubePlayerWrap {
        width: 95%;
    }
}

.youtube-player-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

#youtubePlayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Zoom Animation */
.zoom-in {
    animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Accordion Styles */
.accordion {
    width: 100%;
}

.accordion-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.accordion-header {
    cursor: pointer;
    padding: 15px 20px;
    background-color: #f8f8f8;
    border-radius: 5px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #4b5966;
    text-align: left;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
}

.accordion-header:hover {
    background-color: #efefef;
}

.accordion-header.active {
    background-color: #be7117;
    color: #fff;
}

.accordion-content {
    display: none;
    padding: 15px 20px;
    background-color: #fff;
    border-left: 3px solid #be7117;
    margin-top: 5px;
}

.accordion-content.active {
    display: block;
}

.accordion-content p {
    margin: 10px 0;
    line-height: 1.6;
    color: #555;
}

/* Column Layout */
.column {
    width: 100%;
    margin-bottom: 40px;
}

/* Text Utilities */
.text-center {
    text-align: center;
}

.title {
    font-size: 18px;
    font-weight: 600;
    color: #4b5966;
    margin-bottom: 10px;
}

/* Button Styles */
.gi-quickview-cart {
    margin-top: 20px;
}

.gi-btn-1 {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    text-align: center;
    position: relative;
    border-radius: 5px;
    padding: 10px 15px;
    background-color: #4b5966;
    color: #fff;
    border: 0;
    font-size: 15px;
    letter-spacing: 0;
    font-weight: 500;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.gi-btn-1:hover {
    background-color: #be7117;
    color: #fff;
}

.gi-btn-1 i {
    font-size: 14px;
    line-height: 0;
    margin-right: 5px;
}

@media (max-width: 767px) {
    .gi-btn-1 {
        padding: 6px 10px;
        font-size: 13px;
    }
}
.box100 {
    flex: 1;
    min-width: 100px;
    max-width: 200px;
    background-color: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.03);    
}
.box150 {
    flex: 1;
    min-width: 150px;
    max-width: 300px;
    background-color: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.03);    
}
.box200 {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    background-color: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.03);    
}

.box250 {
    flex: 1;
    min-width: 250px;
    max-width: 500px;
    background-color: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.03);    
}


.smallbox {
    flex: 1;
    min-width: 50px;
    background-color: white;
    border-radius: 8px;
    padding: 2px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.03);    
}



.ytbox {
    flex: 1;
    min-width: 100px;
    background-color: white;
    border-radius: 8px;
    padding: 5px;
    border-bottom: none;
}

.ytgrid {
  display: flex; flex-direction: column; min-width: 0;
}

.alsoboughtbox {
    flex: 1;
    min-width: 100px;
    background-color: white;
    border-radius: 8px;
    padding: 5px;
    border-bottom: none;
}


.fanormal {
  color: #FF0000;
  border-bottom: none;
  text-decoration: none;
}
.fawide {
  color: #444444;
  font-size: 60px;
  border-bottom: none;
  text-decoration: none;
}

/*
 * Font Awesome 7 wins inside markdown content. The legacy FA 4.7 stylesheet
 * (still loaded for the skel ".icon" buttons) also defines .fa-NAME:before and
 * a few icons changed codepoint between v4 and v7 (e.g. calendar, tablet). This
 * rule forces FA7's own glyph (--fa) for icons inside .markdown so the 4.7
 * rules can never override them. Scoped to .markdown so skel buttons are
 * untouched.
 */
.markdown .fa-solid:before,
.markdown .fa-regular:before,
.markdown .fa-brands:before {
  content: var(--fa) !important;
}

.graphic-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.overlay-text {
    position: absolute;
    left: 20px;
    bottom: 0px;
    color: white;
    font-size: 1.8rem;
    font-weight: bold;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    max-width: 80%;
}

.markdownbox {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
/*    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; */
    background-color: transparent;
    border-radius: 0.5em;
    border: solid 1px rgba(144, 144, 144, 0.25) !important;
    color: #545454 !important;
    cursor: pointer;
    display: inline-block;
    font-size: 0.7em;
    font-weight: 700;
    /* height: 2.2em; might not be needed and seems to fix safari/firefox treating box height differently */
    line-height: 1.5em;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.05), 0px 1px 1px rgba(0, 0, 0, 0.03); 
    letter-spacing: 0.1em;
    overflow: hidden;
    padding: 0 1em;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* typed-link buttons ([text](button small|url)) use the .button class; align them
   to the middle of the text line they sit on, like .markdownbox already does, and
   give 1px top/bottom (2px between rows) so wrapped buttons don't touch. */
.markdown a.button {
    vertical-align: middle;
    margin: 1px 0;
}

  input[type="button"],
  .mdbutton {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    background-color: transparent;
    border-radius: 0.5em;
    border: solid 1px rgba(144, 144, 144, 0.25) !important;
    color: #545454 !important;
    cursor: pointer;
    display: inline-block;
    font-size: 0.6em;
    font-weight: 700;
    height: 3.0em;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.05), 0px 1px 3px rgba(0, 0, 0, 0.03); 
    letter-spacing: 0.1em;
    line-height: 3.0em;
    overflow: hidden;
    padding: 0 2em;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }