/* ==========================================================================================
   ragarfoam.com — custom_layout.css          created 2026-09-21
   ------------------------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   eylar.com splits its editable Porto CSS across TWO served files, custom.css and
   custom_layout.css, and most of its real front-end work lives in the LAYOUT one (for the cart
   alone: 574 rules here vs 95 in custom.css). ragarfoam had no equivalent, so every port from
   eylar either shipped a fraction of the design or had to be appended to custom.css by hand.
   This file gives eylar's slices a like-for-like home, so future ports drop in unchanged.

   LOAD ORDER — matches eylar's head.phtml exactly:
       css/header/type<N>.css  →  custom.css  →  **custom_layout.css**  →  design file  →  settings file
   So rules here beat custom.css, and are still beaten by Porto's own settings_default.css,
   which ships !important rules (that is what painted the mobile cart summary mint green).

   HOW IT IS SERVED
   Porto serves these from pub/media/porto/web/css/ (NOT app/design, NOT pub/static) via
   getPortoWebDir(). head.phtml links it with ?v=<filemtime>, so an edit auto-bumps the version
   — but the <link> itself is cached in block_html, so after editing you MUST
   `bin/magento cache:clean block_html full_page`, or pages keep emitting the OLD ?v= and your
   edit never reaches a browser. Verify with:
       curl -A '<real UA>' https://www.ragarfoam.com/ | grep -oE 'custom_layout\.css\?v=[0-9]+'
   must equal `stat -c %Y pub/media/porto/web/css/custom_layout.css`.
   Flushing full_page also drops FPC coverage → re-run ~/warm_ragarfoam.sh.

   CONVENTIONS
   - Append eylar slices VERBATIM inside a marked "RAGAR <NAME>" banner comment block, keeping
     eylar's own comments and .eylar-* class names so the CSS applies with zero edits.
     Do not hand-parse or re-indent a slice — an invalid selector kills its ENTIRE rule.
   - Port behaviour, not claims: strip eylar copy that is untrue here (free shipping "no
     minimum", "30-Day Returns", IP67 — ragarfoam's free-shipping threshold is $1,000).
   ========================================================================================== */

:root {
    /* Load probe. Nothing depends on it visually; it lets a headless check assert that this
       file is actually linked, fetched and applied rather than silently 404ing. */
    --ragar-layout-css: 1;
}

/* ===== RAGAR PLP MODERN (2026-09-21) =====
   Category/PLP redesign, "Bold commerce" language shared with the PDP.
   Tasks 2, 3 and 5 all append INSIDE this one block so the whole redesign reverts by
   deleting this region. See docs/superpowers/specs/2026-09-21-ragarfoam-plp-redesign-design.md
   ===================================================================================== */
.catalog-category-view .products.wrapper .product-item-info{
  background:#fff;border:1px solid #e9ebef;border-radius:10px;overflow:hidden;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;height:100%}
.catalog-category-view .products.wrapper .product-item-info:hover{
  border-color:#d7dbe2;box-shadow:0 6px 22px rgba(16,24,40,.10);transform:translateY(-2px)}
.catalog-category-view .products.wrapper .product-item-photo{display:block;padding:14px 14px 4px}
.catalog-category-view .products.wrapper .product-item-details{padding:0 14px 16px}
/* hover image swap - the markup already exists (list.phtml emits .hover_image) */
.catalog-category-view .products.wrapper .product-image-photo.hover_image{
  opacity:0;transition:opacity .25s ease;position:absolute;inset:0;margin:auto}
.catalog-category-view .products.wrapper .product-item-photo{position:relative}
.catalog-category-view .products.wrapper .product-item-info:hover .product-image-photo.hover_image{opacity:1}
/* name: two clean lines, never truncated mid-word */
.catalog-category-view .products.wrapper .product-item-name{margin:6px 0 4px;min-height:34px}
.catalog-category-view .products.wrapper .product-item-link{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13.5px;line-height:1.35;font-weight:600;color:#111827;text-decoration:none}
.catalog-category-view .products.wrapper .product-item-link:hover{color:#ec1d2c}
.catalog-category-view .products.wrapper .price-box .price{font-size:19px;font-weight:700;color:#111827}
/* category header presence */
.catalog-category-view .page-title-wrapper .page-title{
  font-size:30px;font-weight:700;color:#111827;margin:18px 0 6px}
/* desktop filter rail: clearer headings, bigger swatches, room to breathe (spec 3.4) */
.catalog-category-view .sidebar .filter-options-title{
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#111827;
  padding:14px 0 8px;border-bottom:1px solid #eceef1;margin:0}
.catalog-category-view .sidebar .filter-options-content{padding:10px 0 16px}
.catalog-category-view .sidebar .filter-options-content .item{margin:0 0 7px;font-size:13px}
.catalog-category-view .sidebar .filter-options-content a{color:#374151;text-decoration:none}
.catalog-category-view .sidebar .filter-options-content a:hover{color:#ec1d2c}
.catalog-category-view .sidebar .swatch-option{
  width:22px !important;height:22px !important;border-radius:50%;border:1px solid rgba(16,24,40,.2)}
.catalog-category-view .filter-current .item{
  display:inline-flex;align-items:center;gap:6px;background:#f3f4f6;border-radius:30px;
  padding:5px 12px;margin:0 6px 6px 0;font-size:12px}
.catalog-category-view .filter-actions a{font-size:12px;font-weight:600;color:#ec1d2c}
@media (max-width:767px){
  .catalog-category-view .products.wrapper .products.list.items{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0 12px}
  .catalog-category-view .products.wrapper .products.list.items>.item{width:auto;margin:0;padding:0;float:none;list-style:none}
  .catalog-category-view .products.wrapper .product-item-photo{padding:10px 10px 2px}
  .catalog-category-view .products.wrapper .product-item-details{padding:0 10px 12px}
  .catalog-category-view .products.wrapper .product-item-link{font-size:12.5px}
  .catalog-category-view .products.wrapper .price-box .price{font-size:16px}
  .catalog-category-view .page-title-wrapper .page-title{font-size:22px;padding:0 12px}
}
@media (min-width:768px) and (max-width:1199px){
  .catalog-category-view .products.wrapper .products.list.items{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .catalog-category-view .products.wrapper .products.list.items>.item{width:auto;margin:0;float:none}
}
/* fix round 1, finding 2: bodyScrollW(393) != winW(390) at 390px. Root cause verified NOT the
   PLP grid - it's the global footer's Bootstrap .row negative-margin bleed (page-footer > ...
   > .row, 3px past its own .footer container), present site-wide, pre-existing. overflow-x:hidden
   on the page itself did not move document.body.scrollWidth (Chrome still reports the
   pre-clip content extent), so the negative margin is neutralized directly at its source,
   scoped to category pages only so the site-wide .row/.col-* classes are unchanged elsewhere. */
.catalog-category-view .row{margin-left:0;margin-right:0}
.catalog-category-view .ragar-swatches{display:flex;align-items:center;gap:5px;margin:0 0 6px;flex-wrap:wrap}
.catalog-category-view .ragar-swatch{width:13px;height:13px;border-radius:50%;
  border:1px solid rgba(16,24,40,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);background:#c9ced6}
.catalog-category-view .ragar-swatch[data-color*="black"]{background:#1a1a1a}
.catalog-category-view .ragar-swatch[data-color*="red"]{background:#ec1d2c}
.catalog-category-view .ragar-swatch[data-color*="tan"]{background:#c8a06a}
.catalog-category-view .ragar-swatch[data-color*="green"]{background:#3f6b33}
.catalog-category-view .ragar-swatch[data-color*="gray"],
.catalog-category-view .ragar-swatch[data-color*="grey"]{background:#8b9096}
.catalog-category-view .ragar-swatch[data-color*="white"]{background:#f4f5f7}
.catalog-category-view .ragar-swatch[data-color*="blue"]{background:#2657b0}
.catalog-category-view .ragar-swatch[data-color*="orange"]{background:#e4761b}
.catalog-category-view .ragar-swatch[data-color*="yellow"]{background:#e9c220}
.catalog-category-view .ragar-swatch[data-color*="pink"]{background:#e262a8}
/* exact labels AFTER the substring rules, because the green and blue substring rules also catch these (review 2026-09-22); hex = eav_attribute_option_swatch */
.catalog-category-view .ragar-swatch[data-color="neon green"]{background:#7bff0f}
.catalog-category-view .ragar-swatch[data-color="light blue"]{background:#00bae8}
.catalog-category-view .ragar-swatch-more{font-size:11px;font-weight:600;color:#6b7280}
/* --- Task 7: type scale + spacing pass (Joe: "fix all text sizing and spacing") ---
   Porto's settings_default.css loads AFTER this file and sets
   .products-list .product-item-photo{width:40%}, which turns the mobile tile into a
   left-thumbnail list row. width/float below need !important purely to beat that. */
.catalog-category-view .products.wrapper .product-item-name{margin:8px 0 6px;min-height:0}
.catalog-category-view .products.wrapper .product-item-link{font-size:14px;line-height:1.4}
/* Step 5 finding #2 (assertion 3): settings_default.css carries
   .product-item-info .product.name a{font-size:16px !important} under (min-width:768px),
   which beats the 14px rule above because it is !important and ours above is not - the extra
   specificity from our longer selector doesn't matter once only one side has !important.
   Matching !important here (our selector still has more classes, so it wins the tie) is the
   minimum override that actually lands 14px on desktop. */
.catalog-category-view .products.wrapper .product-item-link{font-size:14px !important}
.catalog-category-view .products.wrapper .product-reviews-summary{margin:4px 0 6px}
.catalog-category-view .products.wrapper .ragar-swatches{margin:0 0 8px}
.catalog-category-view .products.wrapper .price-box{margin:0 0 4px}
@media (max-width:767px){
  /* Step 5 finding: width/float !important on .product-item-photo were not enough because
     .product-item-info (its parent) is display:flex;flex-direction:row (Porto's list-mode
     markup, not a float layout as assumed above) - flexbox shrinks photo/details by their
     automatic min-content size regardless of an explicit width on the child. Forcing the
     parent to block stacking is the minimum override that makes width:100% actually apply. */
  .catalog-category-view .products.wrapper .product-item-info{display:block}
  .catalog-category-view .products.wrapper .product-item-photo{
    width:100% !important;float:none !important;display:block;padding:10px 10px 0;margin:0}
  .catalog-category-view .products.wrapper .product-item-photo .product-image-container,
  .catalog-category-view .products.wrapper .product-item-photo .product-image-wrapper{
    width:100% !important;padding:0 !important;display:block}
  .catalog-category-view .products.wrapper .product-item-photo img:not(.hover_image){
    width:100% !important;height:auto !important;display:block;position:static}
  .catalog-category-view .products.wrapper .product-item-details{
    width:100% !important;float:none !important;padding:4px 10px 12px;text-align:left}
  .catalog-category-view .products.wrapper .product-item-link{font-size:13px;line-height:1.35}
  /* same !important gap as the desktop rule above - settings_default.css also has
     .product-item-info .product.name a{font-size:14px !important} under (max-width:767px). */
  .catalog-category-view .products.wrapper .product-item-link{font-size:13px !important}
  .catalog-category-view .products.wrapper .price-box .price{font-size:16px}
  .catalog-category-view .products.wrapper .product-item-name{margin:6px 0 5px}
  .catalog-category-view .products.wrapper .ragar-swatches{margin:0 0 6px}
  .catalog-category-view .products.wrapper .freeshippingtext_mobile,
  .catalog-category-view .products.wrapper .freeshippingtext_desktop{font-size:12px}
}
/* Task 5 (2026-09-22): mobile "Filter" button. Porto/Lof ALREADY ship a working off-canvas filter
   drawer ("Shopping Options"), but its trigger was a 51x47 unlabelled icon tab position:fixed on the
   left screen edge, overlapping the first product. Restyle that SAME trigger into a labelled full-width
   pill in the gap above the grid - no new drawer, no JS. :not(.active) leaves the open-drawer close X alone.
   Category pages ONLY: on /catalogsearch the sidebar renders AFTER .column.main, so a static button
   would land at the very bottom of the page - search keeps Porto's fixed edge tab. */
@media (max-width:767px){
  .catalog-category-view .block.filter:not(.active) .filter-title strong{
    position:static !important;display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;height:44px;margin:0 0 6px;padding:0 16px;
    color:#111827 !important;background:#fff;border:1px solid #d1d5db !important;border-radius:30px;
    font-size:14px;font-weight:600;line-height:1;letter-spacing:.02em;text-transform:none}
  .catalog-category-view .block.filter:not(.active) .filter-title strong:before{
    font-size:18px;line-height:1;color:#111827}
  /* gap under the pill: the sidebar carries an EMPTY h2 + h5 (0px tall, 15px/13px margins, h5 wraps a .space div with inline 45px) and the
     title's 10px margin - ~40px of dead space above the grid on phones */
  .catalog-category-view .block.filter:not(.active) .filter-title{margin-bottom:0}
  .catalog-category-view .sidebar.sidebar-main > h2,
  .catalog-category-view .sidebar.sidebar-main > h5{margin:0 !important}
  .catalog-category-view .sidebar.sidebar-main > h5 > p,
  .catalog-category-view .sidebar.sidebar-main > h5 > .space{margin:0 !important} /* empty sidebar snippet: inline margin-bottom:45px */
}
/* ===== END RAGAR PLP MODERN ===== */

/* ===== RAGAR FREESHIP BADGE 2026-09-22 - base rules copied verbatim from eylar custom.css "EYLAR CHECKOUT REVAMP" (cart only here) ===== */
.eylar-freeship-badge{display:none;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;
  background:#e8f7ec;border:1px solid #b8e6c4;border-radius:10px;color:#157a37;
  font-size:14px;line-height:1.3;font-weight:500}
.eylar-freeship-badge__icon{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:#16a34a;color:#fff;font-size:12px;flex:0 0 20px}
.eylar-freeship-badge__text strong{font-weight:700}
.checkout-cart-index .cart-summary .eylar-freeship-badge{display:flex} /* only inside the summary card - never floating on an empty cart */
@media (max-width:767px){.eylar-freeship-badge{font-size:13px;padding:9px 12px;margin-bottom:12px}}
/* ===== END RAGAR FREESHIP BADGE ===== */

/* ===== RAGAR HOME MODERN (2026-09-22) =====
   Homepage redesign. Spec: docs/superpowers/specs/2026-09-22-ragarfoam-homepage-redesign-design.md.
   Every selector starts with .rh so nothing leaks to other pages. Markup lives in CMS block
   ragar-home-modern. Revert: delete this block and restore cms_block 199 from the backup dir. */
.rh{color:#111827;font-size:15px;line-height:1.55;background:#fff}
.rh *{box-sizing:border-box}
.rh-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.rh-kicker{color:#e21d2b;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px}
.rh-sec-title{font-size:26px;line-height:1.2;font-weight:700;margin:0 0 6px;color:#111827;text-transform:none}
.rh-sec-sub{color:#6b7280;margin:0 0 22px}
.rh section{padding:48px 0}
.rh section.rh-alt{background:#f7f7f8}
.rh-btn{display:inline-block;padding:13px 26px;border-radius:30px;background:#e21d2b;color:#fff !important;font-weight:700;font-size:15px;text-decoration:none !important;border:2px solid #e21d2b;transition:transform .15s ease,box-shadow .15s ease}
.rh-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(226,29,43,.25)}
.rh-btn--ghost{background:#fff;color:#111827 !important;border-color:#d1d5db}
.rh-btn--ghost:hover{box-shadow:0 6px 16px rgba(16,24,40,.10)}
.rh-hero{padding:0 !important;background:#fff}
.rh-hero__img{display:block;width:100%;height:auto}
.rh-hero__copy{text-align:center;padding:26px 20px 30px}
.rh-hero__copy h1{font-size:34px;line-height:1.15;font-weight:800;margin:0 0 8px;color:#111827;text-transform:none}
.rh-hero__copy p{color:#374151;font-size:17px;margin:0 0 18px}
.rh-hero__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.rh-trust{padding:0 !important;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;background:#fff}
.rh-trust .rh-wrap{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.rh-trust__item{display:flex;align-items:center;gap:10px;font-size:14px;color:#374151}
.rh-trust__item strong{color:#111827;display:block;font-size:14px}
.rh-trust__item i{color:#e21d2b;font-size:24px}
.rh-cases__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rh-case{display:block;border:1px solid #e5e7eb;border-radius:10px;background:#fff;overflow:hidden;text-decoration:none !important;transition:transform .15s ease,box-shadow .15s ease}
.rh-case:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(16,24,40,.10)}
.rh-case__img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff}
.rh-case__label{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-weight:700;color:#111827;font-size:15px;border-top:1px solid #f0f1f3}
.rh-case__label:after{content:'\2192';color:#e21d2b}
.rh-how__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center}
.rh-how__steps{list-style:none;margin:0;padding:0;counter-reset:rhstep}
.rh-step{display:flex;gap:14px;margin:0 0 18px}
.rh-step__num{flex:0 0 36px;height:36px;border-radius:50%;background:#e21d2b;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.rh-step h3{font-size:17px;margin:4px 0 2px;color:#111827;text-transform:none;font-weight:700}
.rh-step p{margin:0;color:#374151}
.rh-how__video{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.rh-how__video .video-container{position:absolute !important;inset:0;padding:0 !important;height:100% !important;margin:0 !important}
.rh-reviews__row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rh-review{border:1px solid #e5e7eb;border-radius:10px;background:#fff;padding:18px}
.rh-review__stars{color:#f5a623;letter-spacing:2px;font-size:16px;margin:0 0 8px}
.rh-review__text{margin:0 0 10px;color:#374151;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rh-review__who{font-weight:700;font-size:14px;color:#111827}
.rh-review__product{font-size:13px;color:#e21d2b !important}
.rh-row__head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:0 0 14px}
.rh-row__head .rh-sec-sub{margin:0}
.rh-row__all{white-space:nowrap;font-weight:700;color:#e21d2b !important;text-decoration:none !important}
.rh .owl-carousel{display:block !important} /* owl.carousel.css hides it until init; block 199 used to force this */
.rh .owl-stage{margin-bottom:20px;padding-top:2px}
.rh .owl-controls{display:none}
.rh-row .product-item-info{border:1px solid #e5e7eb;border-radius:10px;background:#fff;transition:transform .15s ease,box-shadow .15s ease}
.rh-row .product-item-info:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(16,24,40,.10)}
.rh-about{text-align:center}
.rh-about p{max-width:860px;margin:0 auto 10px;color:#374151}
.rh-about__links a{color:#e21d2b !important;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
@media (max-width:991px){
  .rh-cases__grid{grid-template-columns:repeat(3,1fr)}
  .rh-how__grid{grid-template-columns:1fr}
  .rh-reviews__row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .rh section{padding:32px 0}
  .rh-wrap{padding:0 14px}
  .rh-sec-title{font-size:21px}
  .rh-hero__copy{padding:18px 14px 22px}
  .rh-hero__copy h1{font-size:25px}
  .rh-hero__copy p{font-size:15px}
  .rh-trust .rh-wrap{gap:10px 18px;justify-content:space-around}
  .rh-trust__item{font-size:12px}
  .rh-trust__item i{font-size:20px}
  .rh-cases__grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .rh-case__label{font-size:14px;padding:10px 12px}
  .rh-reviews__row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .rh-review{flex:0 0 82%;scroll-snap-align:start}
  .rh-row__head{flex-direction:column;align-items:flex-start}
}
/* polish 2026-09-22: Porto wraps each row product in an outer shadowed 20px-padded box AND our bordered
   inner card = a double card. Flatten the outer box so only the flat bordered card remains. */
.rh-row .owl-item .product-item{box-shadow:none !important;padding:0 !important;background:transparent !important}
.rh-row .product-item-info{padding:12px}
@media (max-width:767px){
  .rh-trust .rh-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 8px}
  .rh-trust__item{flex-direction:column;text-align:center;gap:4px;line-height:1.25}
  .rh-trust__item span{font-size:0}
  .rh-trust__item strong{font-size:12px}
  .rh-case__img{aspect-ratio:4/3}
  .rh-row .product-item-info{padding:8px}
}
/* ===== END RAGAR HOME MODERN ===== */

/* ===== RAGAR HOME PELICAN (2026-09-22) =====
   Pelican-style layer (image-led, dark bands, heavy uppercase) on top of RAGAR HOME MODERN. Markup = CMS block
   ragar-home-pelican, wrapper class "rh rp". Every selector starts with .rp. Revert: delete this block and point
   cms_block 199 back at ragar-home-modern. Style only is borrowed; no third-party logos, photos or copy. */
.rp{background:#fff}
.rp h1,.rp .rh-sec-title{font-family:'Open Sans',Helvetica,Arial,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.rp .rh-btn{border-radius:4px;text-transform:uppercase;letter-spacing:.08em;font-size:14px;padding:13px 28px}
.rp .rp-btn-outline{background:transparent;border:2px solid #fff;color:#fff !important}
.rp .rp-btn-outline:hover{background:#fff;color:#111827 !important;box-shadow:none}
.rp .rp-btn-link{background:transparent;border-color:transparent;color:#fff !important;text-decoration:underline !important;text-underline-offset:4px}
.rp .rp-btn-link:hover{box-shadow:none}
.rp .rp-hero{position:relative;background:#0b0b0c;overflow:hidden}
.rp .rp-hero .rh-hero__img{width:100%;height:clamp(480px,64vh,660px);object-fit:cover}
.rp .rp-hero__overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.05) 100%)}
.rp .rp-hero__overlay .rh-wrap{width:100%}
.rp .rp-hero .rh-hero__copy{text-align:left;padding:0;max-width:640px}
.rp .rp-hero h1{color:#fff;font-size:54px;line-height:1.02;margin:0 0 14px}
.rp .rp-hero .rh-hero__copy p{color:#e5e7eb;font-size:15px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 26px}
.rp .rp-hero .rh-hero__btns{justify-content:flex-start}
.rp .rp-badge{display:block;width:170px;height:auto;border-radius:6px;margin:0 0 20px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.rp .rh-trust{background:#111;border:0}
.rp .rh-trust__item{color:#9ca3af}
.rp .rh-trust__item strong{color:#fff}
.rp .rp-shopby{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;margin:0 0 20px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#6b7280}
.rp .rp-shopby strong{color:#111827;font-weight:800;border-bottom:3px solid #e21d2b;padding-bottom:4px}
.rp .rh-cases__grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 56px) / 5.25);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.rp .rh-case{position:relative;border:0;border-radius:6px;background:#000;scroll-snap-align:start}
.rp .rh-case:hover{transform:none;box-shadow:none}
.rp .rh-case__img{aspect-ratio:600/822;object-fit:cover;transition:transform .35s ease}
.rp .rh-case:hover .rh-case__img{transform:scale(1.04)}
.rp .rh-case__label{position:absolute;left:0;right:0;bottom:0;border:0;padding:48px 16px 16px;color:#fff;font-size:19px;font-weight:700;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0))}
.rp .rh-case__label:after{color:#fff}
.rp section.rp-banner{position:relative;background-color:#0b0b0c;background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;padding:96px 0}
.rp section.rp-banner:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.2) 100%)}
.rp .rp-banner > .rh-wrap{position:relative}
.rp .rp-banner .rh-sec-title{color:#fff;font-size:46px;line-height:1.04;margin:0 0 14px}
.rp .rp-banner p,.rp .rp-banner .rh-step p{color:#e5e7eb}
.rp .rp-banner .rh-step h3{color:#fff}
.rp .rp-banner .rh-kicker{color:#ff5a64}
.rp .rp-banner .rh-how__video{box-shadow:0 18px 40px rgba(0,0,0,.5)}
.rp .rp-banner--camera .rh-wrap{max-width:1240px}
.rp .rp-banner--camera .rp-banner__copy{max-width:560px}
.rp section.rp-shop{padding:60px 0}
.rp .rp-tabs{display:flex;gap:24px;align-items:baseline;margin:0 0 22px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.rp .rp-tabs span{letter-spacing:.14em;color:#6b7280;font-size:15px;text-transform:uppercase}
.rp .rp-tab{background:none;border:0;border-bottom:3px solid transparent;padding:0 0 6px;font-size:17px;font-weight:800;color:#9ca3af;cursor:pointer;text-transform:uppercase;letter-spacing:.02em;border-radius:0}
.rp .rp-tab.is-active{color:#111827;border-bottom-color:#e21d2b}
.rp .rp-panels{position:relative}
.rp .rp-panel:not(.is-active){position:absolute;top:0;left:0;right:0;visibility:hidden;pointer-events:none}
.rp .rp-panel .rh-kicker,.rp .rp-panel .rh-sec-title{display:none}
.rp .rh-row .product-item-info{border-radius:4px}
.rp .rh-row .product-item-photo{background:#f3f4f6}
.rp section.rh-reviews{background:#111}
.rp .rh-reviews .rh-kicker{color:#ff5a64}
.rp .rh-reviews__head{color:#fff;font-weight:800;text-transform:uppercase;font-size:26px;margin:0 0 22px}
.rp .rh-review{background:transparent;border:0;border-left:1px solid #374151;border-radius:0;padding:4px 22px}
.rp .rh-review__text{color:#d1d5db}
.rp .rh-review__who{color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.rp .rh-review__who:before{content:'\2014\00a0'}
.rp .rh-review__product{color:#ff5a64 !important}
@media (max-width:767px){
  .rp .rp-hero .rh-hero__img{height:560px}
  .rp .rp-hero__overlay{align-items:flex-end;padding-bottom:34px;background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.1) 100%)}
  .rp .rp-hero h1{font-size:33px}
  .rp .rp-hero .rh-hero__copy p{font-size:13px;margin:0 0 18px}
  .rp .rp-badge{width:130px;margin:0 0 14px}
  .rp .rh-cases__grid{grid-auto-columns:64%}
  .rp .rh-case__img{aspect-ratio:600/822}
  .rp section.rp-banner{padding:56px 0}
  .rp .rp-banner .rh-sec-title{font-size:29px}
  .rp .rp-tab{font-size:15px}
  .rp .rp-tabs{gap:16px}
  .rp .rh-review{flex:0 0 84%}
}
/* ===== END RAGAR HOME PELICAN ===== */

/* ===== RAGAR CAT PELICAN (2026-09-22) =====
   Category pages restyled to match the Pelican-style homepage. Hero markup = Eylar_FraudBlock::category/hero.phtml
   (page.top via catalog_category_view.xml). Scoped to .catalog-category-view. Revert: delete this block, remove the
   ragar.category.hero block from the layout XML, restore descriptions from ~/seo_backups/ragarfoam_cat_pelican_20260922/. */
.catalog-category-view .rc-hero{position:relative;background:#0b0b0c;color:#fff;overflow:hidden;min-height:300px;display:flex;align-items:center;margin:0 0 28px}
.catalog-category-view .rc-hero__img{position:absolute;top:0;right:0;bottom:0;width:60%;background-size:cover;background-position:center}
.catalog-category-view .rc-hero__img:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#0b0b0c 0%,rgba(11,11,12,.72) 30%,rgba(11,11,12,.15) 100%)}
.catalog-category-view .rc-hero__wrap{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:46px 20px}
.catalog-category-view .rc-hero__kicker{color:#ff5a64;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
.catalog-category-view .rc-hero__title{font-family:'Open Sans',Helvetica,Arial,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:40px;line-height:1.05;margin:0 0 12px;color:#fff;max-width:660px}
.catalog-category-view .rc-hero__sub{color:#d1d5db;max-width:560px;font-size:15px;line-height:1.55;margin:0}
.catalog-category-view .category-description h2.rc-lead{display:none}
.catalog-category-view .products.wrapper .product-item-info{border-radius:4px;border-color:#e5e7eb}
.catalog-category-view .products.wrapper .product-item-photo{background:#f3f4f6;border-radius:4px 4px 0 0}
.catalog-category-view .products.wrapper .product-item-photo img:not(.hover_image){mix-blend-mode:multiply}
.catalog-category-view .products.wrapper .product-item-details,
.catalog-category-view .products.wrapper .product-item-name,
.catalog-category-view .products.wrapper .price-box{text-align:left !important}
.catalog-category-view .products.wrapper .product-item-details{padding:12px 14px 14px}
.catalog-category-view .products.wrapper .product-item-link{font-weight:600;color:#111827}
.catalog-category-view .products.wrapper .ragar-swatches{justify-content:flex-start}
.catalog-category-view .block.filter .filter-options-title{text-transform:uppercase;font-weight:800;letter-spacing:.1em;font-size:13px;color:#111827}
.catalog-category-view .block.filter .ui-slider-handle{background:#e21d2b !important;border-color:#e21d2b !important}
.catalog-category-view .block.filter .ui-slider .ui-widget-header{background:#e21d2b !important}
.catalog-category-view .page-bottom .category-description{background:#f7f7f8 !important;padding:40px 32px !important;margin:40px 0 0 !important;max-width:none !important} /* lives in .page-bottom, not the grid column; beats its own inline background/max-width !important */
.catalog-category-view .page-bottom .category-description > *{max-width:920px}
.catalog-category-view .category-description h2,.catalog-category-view .category-description h3{font-family:'Open Sans',Helvetica,Arial,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:18px;color:#111827}
@media (max-width:767px){
  .catalog-category-view .rc-hero{min-height:260px;align-items:flex-end;margin:0 0 16px}
  .catalog-category-view .rc-hero__img{width:100%}
  .catalog-category-view .rc-hero__img:after{background:linear-gradient(0deg,#0b0b0c 0%,rgba(11,11,12,.7) 45%,rgba(11,11,12,.2) 100%)}
  .catalog-category-view .rc-hero__wrap{padding:90px 16px 22px}
  .catalog-category-view .rc-hero__title{font-size:25px}
  .catalog-category-view .rc-hero__sub{font-size:13px}
  .catalog-category-view .products.wrapper .product-item-details{padding:8px 10px 12px}
  .catalog-category-view .block.filter:not(.active) .filter-title strong{border-radius:4px !important;background:#111 !important;color:#fff !important;border-color:#111 !important;text-transform:uppercase;letter-spacing:.08em}
  .catalog-category-view .block.filter:not(.active) .filter-title strong:before{color:#fff}
  .catalog-category-view .page-bottom .category-description{padding:28px 16px !important;margin:24px 0 0 !important}
}
/* tighten (Joe: "tighten up the right column"): each grid slot carried 10px 40px padding, so a 287px slot held a
   207px card. 8px padding = even 16px gutter. */
@media (min-width:768px){
  .catalog-category-view .products.wrapper .product-item{padding:8px !important}
  .catalog-category-view .column.main .products.wrapper{margin-left:6px !important} /* first card column was touching the sidebar divider */
}
/* ===== END RAGAR CAT PELICAN ===== */

/* ===== RAGAR LOADER + PRICE SLIDER (2026-09-22) =====
   Joe: "the price bar is to long and change the loading animation to modern across the board".
   One loader for every Magento loading-mask (page-wide / add-to-cart / cart / checkout spinner), the Lof layered-nav
   overlay, Porto's ln_overlay and the minicart counter. Drawn on ::after because settings_default.css (loaded after
   this file) forces .loader::before{content:none !important}. The PDP gallery loader stays hidden, as before.
   Revert: delete this block. */
@keyframes rgspin{to{transform:rotate(360deg)}}
.loading-mask{background:rgba(255,255,255,.55) !important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.loading-mask .loader > img,.lof_overlay img,.ln_overlay img{display:none !important}
.loading-mask .loader > p{display:none !important}
.loading-mask .loader{position:fixed !important;top:0;right:0;bottom:0;left:0;margin:auto !important;width:68px !important;height:68px !important;border:0 !important;border-radius:16px;background:#fff;box-shadow:0 12px 32px rgba(16,24,40,.18);animation:none !important}
.loading-mask .loader:after,.lof_overlay:after,.ln_overlay .loader:after{content:'';position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid rgba(17,24,39,.12);border-top-color:#e21d2b;animation:rgspin .7s linear infinite;box-sizing:border-box}
.lof_overlay{background:rgba(255,255,255,.6) !important;opacity:1 !important;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
.lof_overlay:after{top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-width:3px}
.ln_overlay .loader{border:0 !important;animation:none !important}
.gallery-placeholder .loading-mask .loader:after,.gallery-placeholder .loading-mask .loader{display:none !important}
.minicart-wrapper .action.showcart .counter.qty .loader{position:relative !important;display:inline-block;width:14px !important;height:14px !important;background:transparent;box-shadow:none;border-radius:50%;vertical-align:middle}
.minicart-wrapper .action.showcart .counter.qty .loader:after{width:14px;height:14px;margin:-7px 0 0 -7px;border-width:2px;border-color:rgba(255,255,255,.35);border-top-color:#fff}
@media (prefers-reduced-motion:reduce){.loading-mask .loader:after,.lof_overlay:after,.ln_overlay .loader:after{animation-duration:1.6s}}
.block.filter .ui-slider{max-width:150px;margin:10px 9px 12px !important;height:4px !important;border-radius:4px;background:#e5e7eb !important;border:0 !important}
.block.filter .ui-slider .ui-slider-handle{width:14px !important;height:14px !important;top:-5px !important;margin-left:-7px !important;border-radius:50% !important;border:2px solid #fff !important;box-shadow:0 1px 4px rgba(16,24,40,.35);background:#e21d2b !important;cursor:grab}
.block.filter .ui-slider .ui-widget-header,.block.filter .ui-slider .ui-slider-range{background:#e21d2b !important;height:4px !important;top:0 !important}
/* ===== END RAGAR LOADER + PRICE SLIDER ===== */

/* ===== RAGAR HEADER SEARCH = EYLAR (2026-09-24) =====
   Search bar hidden; a magnifier (like eylar.com header type 5) opens the
   Spotlight search modal (Eylar_FraudBlock search-modal.js captures the click).
   Markup: header.phtml else-branch wraps top.search in .search-area. */
.page-header .header.content .search-area{position:absolute;right:85px;top:50%;transform:translateY(-50%);z-index:5;line-height:1}
.page-header .header.content .search-area .block-search{display:none !important}
.page-header .header.content .search-toggle-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:#222;text-decoration:none;font-size:24px}
.page-header .header.content .search-toggle-icon:hover{color:#e21d2b;text-decoration:none}
.page-header .header.content .search-toggle-icon i{font-size:24px;line-height:1}
@media (max-width:767px){
  .page-header .header.content .search-area{top:27px;right:88px}
  .page-header .header.content .search-toggle-icon,
  .page-header .header.content .search-toggle-icon i{font-size:28px;color:#3e4244}
}
/* ===== END RAGAR HEADER SEARCH ===== */

/* ===== RAGAR HEADER + TOP MENU REDESIGN (2026-09-24) =====
   Joe: "redesign the top menu and header to make it look cleaner and spaced better".
   Before: grey #f9f9f9 header, empty black bar with "WELCOME !", menu wrapped to
   2 rows @1280, 3 rows @1024, 4 rows @820, dark #2F2727 block on hover.
   Now (>=768px only; the phone hamburger drawer is untouched):
   - slim dark utility bar, account links only
   - white main row, logo + icons centred in a 1320px container
   - full-width menu row, ONE line, centred, fluid font/padding, red underline on hover
   - 768-1239px: the menu is one swipeable row instead of wrapping (dropdown hidden there;
     All Products still links to its own page). */
@media (min-width:768px){
  /* every selector carries "html body": configed_css/settings_default.css (Porto admin custom CSS)
     loads AFTER this file with !important header rules (#f9f9f9 bg, 14px/10px menu links) */
  html body .page-header.type16{background:#fff !important;border-bottom:1px solid #e6e6e6;box-shadow:0 2px 10px rgba(0,0,0,.035)}
  /* utility bar */
  html body .page-header.type16 > .panel.wrapper{background:#111 !important;border:0 !important}
  html body .page-header.type16 .panel.header{max-width:1320px;margin:0 auto;padding:0 24px !important;min-height:32px;line-height:32px}
  html body .page-header.type16 .panel.header .header.links{margin:0;line-height:32px}
  html body .page-header.type16 .panel.header .header.links > li{margin:0 0 0 18px;line-height:32px}
  html body .page-header.type16 .panel.header .header.links > li > a,
  html body .page-header.type16 .panel.header .header.links > li > span{font:600 11px/32px "Open Sans","Helvetica Neue",Arial,sans-serif !important;letter-spacing:.08em;text-transform:uppercase;color:#cfcfcf !important;padding:0 !important}
  html body .page-header.type16 .panel.header .header.links > li > a:hover{color:#fff !important;text-decoration:none}
  html body .page-header.type16 .panel.header .greet .not-logged-in{display:none}
  /* main row */
  html body .page-header.type16 .header.content{max-width:1320px;margin:0 auto;padding:16px 24px !important;min-height:0}
  html body .page-header.type16 .header.content .logo{margin:0;vertical-align:middle}
  html body .page-header.type16 .header.content .logo img{height:38px;width:auto}
  html body .page-header.type16 .header.content .search-area{right:92px}
  html body .page-header.type16 .header.content .search-toggle-icon,
  html body .page-header.type16 .header.content .search-toggle-icon i{font-size:23px}
  html body .page-header.type16 .minicart-wrapper .action.showcart:before,
  html body .page-header.type16 .minicart-wrapper .action.showcart:after{color:#222 !important}
  html body .page-header.type16 .minicart-wrapper .action.showcart:hover:before{color:#e21d2b !important}
  /* menu row */
  html body .page-header.type16 .nav-sections{background:#fff !important;border-top:1px solid #efefef;margin:0 !important}
  html body .page-header.type16 .navigation{max-width:1320px;margin:0 auto;padding:0 20px !important;background:transparent !important}
  html body .page-header.type16 .navigation > ul{display:flex;justify-content:center;align-items:stretch;flex-wrap:nowrap;background:transparent !important;padding:0;margin:0}
  html body .page-header.type16 .navigation li.level0{float:none;margin:0 !important;background:transparent !important}
  html body .page-header.type16 .navigation .level0 > .level-top{position:relative;display:block;height:50px;line-height:50px;padding:0 clamp(6px,.72vw,15px) !important;font-size:clamp(12px,.9vw,13.5px) !important;font-weight:600 !important;letter-spacing:.02em;color:#1d1d1d !important;background-color:transparent !important;background-image:linear-gradient(#e21d2b,#e21d2b) !important;background-repeat:no-repeat !important;background-position:50% 38px !important;background-size:0 2px !important;transition:background-size .18s ease,color .18s ease;white-space:nowrap}
  html body .page-header.type16 .navigation .level0:hover > .level-top,
  html body .page-header.type16 .navigation .level0.active > .level-top,
  html body .page-header.type16 .navigation .level0.has-active > .level-top{color:#e21d2b !important;background-color:transparent !important;background-size:calc(100% - 2 * clamp(6px,.72vw,15px)) 2px !important}
  html body .page-header.type16 .navigation .level0.parent > .level-top:hover,
  html body .page-header.type16 .navigation .level0.parent:hover > .level-top{background-size:calc(100% - 2 * clamp(6px,.72vw,15px) - 18px) 2px !important;background-position:calc(50% - 9px) 38px !important}
  /* All Products dropdown: clean card */
  html body .page-header.type16 .navigation .level0.classic > .submenu{border:1px solid #ececec !important;border-radius:0 0 8px 8px;box-shadow:0 12px 28px rgba(0,0,0,.12) !important;padding:8px 0 !important;background:#fff !important;min-width:230px}
  html body .page-header.type16 .navigation .level0.classic > .submenu a{padding:9px 20px !important;font-size:13px !important;color:#333 !important;text-transform:none;letter-spacing:0}
  html body .page-header.type16 .navigation .level0.classic > .submenu a:hover{color:#e21d2b !important;background:#fafafa !important}
}
/* tablet / small laptop: one swipeable row instead of wrapping */
@media (min-width:768px) and (max-width:1239px){
  html body .page-header.type16 .navigation > ul{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 90%,transparent);mask-image:linear-gradient(to right,#000 90%,transparent)}
  html body .page-header.type16 .navigation > ul::-webkit-scrollbar{display:none}
  html body .page-header.type16 .navigation .level0 > .submenu{display:none !important}
  html body .page-header.type16 .navigation .level0 > .level-top{padding:0 12px !important;font-size:12.5px !important}
  html body .page-header.type16 .navigation .level0:hover > .level-top,html body .page-header.type16 .navigation .level0.active > .level-top{background-size:calc(100% - 24px) 2px !important}
  html body .page-header.type16 .navigation .level0.parent > .level-top:after{display:none}
}
/* phone: tidy main row (menu drawer untouched) */
@media (max-width:767px){
  html body .page-header.type16{border-bottom:1px solid #ececec;background:#fff}
}
/* ===== END RAGAR HEADER + TOP MENU REDESIGN ===== */

/* ===== RAGAR MODERN PASS (2026-09-24) =====
   Joe: "what else can you do design wise to make it modern and do it".
   1 sticky header  2 footer (CMS block 86 rewritten)  3 PDP buy box  4 card hover.
   Selectors carry "html body" where Porto's configed_css (loads after this file) competes. */

/* 1. Sticky header: the utility bar scrolls away (top:-33px), logo row + menu stay.
   custom.css sets body,html{overflow-x:hidden}, which makes <body> a scroll container
   and silently disables position:sticky. overflow-x:clip hides overflow the same way
   without that side effect. Not !important, so modal scroll-locks (body._has-modal,
   .nav-before-open body, the search modal's inline style) still win. */
@supports (overflow:clip){ html,body{overflow-x:clip} }
@media (min-width:768px){
  html body .page-header.type16{position:sticky;top:-33px;z-index:900}
}
@media (max-width:767px){
  html body .page-header.type16{position:sticky;top:0;z-index:900}
}

/* 2. Footer */
html body .page-footer .footer-middle-2{background:#0e0f10 !important;color:#a4a7ab;padding:0 !important;border:0 !important}
html body .page-footer .footer-middle-2 > .container,
html body .page-footer .footer-middle-2 .row,
html body .page-footer .footer-middle-2 [class*="col-"]{max-width:none;width:100%;margin:0;padding:0;float:none}
html body .rf-foot{max-width:1320px;margin:0 auto;padding:60px 24px 48px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.5fr;gap:40px;font:14px/1.7 "Open Sans","Helvetica Neue",Arial,sans-serif;text-align:left}
html body .rf-foot-wordmark{font:800 24px/1 "Open Sans",Arial,sans-serif;letter-spacing:.14em;color:#fff;margin-bottom:16px}
html body .rf-foot-wordmark span{color:#e21d2b;margin-left:8px}
html body .rf-foot-brand p{color:#a4a7ab;margin:0 0 14px;max-width:340px;font-size:14px;line-height:1.7}
html body .rf-foot-brand .rf-foot-ship{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:13px}
html body .rf-foot-brand .rf-foot-ship:before{content:"";width:8px;height:8px;border-radius:50%;background:#2fbf5b;box-shadow:0 0 0 4px rgba(47,191,91,.18)}
html body .rf-foot-title{font:700 12px/1 "Open Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:4px 0 18px}
html body .rf-foot ul{list-style:none;margin:0;padding:0}
html body .rf-foot li{margin:0 0 10px;padding:0}
html body .rf-foot a{color:#c3c6ca !important;text-decoration:none;transition:color .15s ease}
html body .rf-foot a:hover{color:#fff !important;text-decoration:none}
html body .rf-foot-contact li{display:flex;gap:10px;align-items:flex-start;color:#c3c6ca}
html body .rf-foot-contact em{color:#e21d2b;font-size:14px;line-height:1.7;width:16px;flex-shrink:0;text-align:center}
html body .page-footer .footer-bottom{background:#08090a !important;border-top:1px solid #1d1f22 !important;padding:0 !important}
html body .page-footer .footer-bottom > .container{max-width:1320px;margin:0 auto;padding:18px 24px !important;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
html body .page-footer .footer-bottom .logo{margin:0;float:none;order:2}
html body .page-footer .footer-bottom .logo img{height:26px;width:auto;opacity:.85}
html body .page-footer .footer-bottom .custom-block:empty{display:none}
html body .page-footer .footer-bottom address{margin:0;float:none;order:1;flex:1 1 auto;text-align:left !important;color:#7d8186;font-size:13px;font-style:normal;padding:0}
html body .page-footer .footer-bottom address a{color:#a4a7ab !important}
html body .page-footer .footer-bottom address a:hover{color:#fff !important}
html body .page-footer .footer-bottom .rf-sep{margin:0 8px;color:#4a4d51}
@media (max-width:991px){
  html body .rf-foot{grid-template-columns:1fr 1fr 1fr;gap:32px 24px}
  html body .rf-foot-brand{grid-column:1 / -1}
  html body .rf-foot-contact{grid-column:1 / -1}
}
@media (max-width:767px){
  html body .rf-foot{grid-template-columns:1fr 1fr;padding:40px 18px 32px;gap:28px 20px}
  html body .rf-foot-col:nth-of-type(4){grid-column:auto}
  html body .rf-foot-title{margin-bottom:14px}
  html body .page-footer .footer-bottom > .container{flex-direction:column;align-items:flex-start;padding:18px !important}
  html body .page-footer .footer-bottom .logo{order:1}
  html body .page-footer .footer-bottom address{order:2}
}

/* 3. PDP buy box */
html body .product-info-main .page-title-wrapper .page-title,
html body .product-info-main .page-title{font-size:26px !important;font-weight:700 !important;line-height:1.25 !important;letter-spacing:-.01em;color:#111 !important}
html body .product-info-main .price-box .price{font-size:34px !important;font-weight:700 !important;color:#111 !important;letter-spacing:-.01em}
html body .product-info-main .stock.available,
html body .product-info-main .stock.unavailable{display:inline-flex;align-items:center;gap:6px;font-size:12px !important;font-weight:600;border-radius:999px;padding:4px 12px;line-height:1.4}
html body .product-info-main .stock.available{background:#e9f7ee;color:#1c7c3b !important}
html body .product-info-main .stock.unavailable{background:#fbeaea;color:#a1262b !important}
html body .product-info-main .stock.available span,
html body .product-info-main .stock.unavailable span{color:inherit !important;font-size:inherit !important;font-weight:inherit !important}
html body .product-info-main .box-tocart{margin-top:6px}
html body .product-info-main .box-tocart .fieldset{display:flex !important;align-items:stretch;gap:10px;flex-wrap:nowrap}
html body .product-info-main .box-tocart .fieldset > .field.qty{flex:0 0 auto;width:auto !important;margin:0 !important;padding:0 !important}
html body .product-info-main .box-tocart .fieldset > .actions{margin:0 !important;padding:0 !important}
html body .product-info-main .box-tocart .field.qty .control{border:1px solid #d9dce1;border-radius:10px;overflow:hidden;display:flex !important;align-items:stretch;background:#fff;width:auto !important;padding:0 !important}
/* Porto parks -/+ in .qty-changer positioned outside the input; pull them into one pill */
html body .product-info-main .box-tocart .field.qty .qty-changer{display:contents !important}
html body .product-info-main .box-tocart .field.qty .control input.qty{order:0;border:0 !important;height:48px !important;width:48px !important;margin:0 !important;font-size:15px;font-weight:600;text-align:center;box-shadow:none !important;border-radius:0 !important}
html body .product-info-main .box-tocart .qty-dec{order:-1}
html body .product-info-main .box-tocart .qty-inc{order:1}
html body .product-info-main .box-tocart .qty-inc,
html body .product-info-main .box-tocart .qty-dec{position:static !important;display:flex !important;align-items:center;justify-content:center;width:40px !important;height:48px !important;margin:0 !important;border:0 !important;color:#666 !important;background:#f6f7f9 !important;cursor:pointer}
html body .product-info-main .box-tocart .qty-inc:hover,
html body .product-info-main .box-tocart .qty-dec:hover{color:#111 !important;background:#eceef1 !important}
html body #product-addtocart-button{height:50px !important;min-width:230px;border-radius:10px !important;font-size:15px !important;font-weight:700 !important;letter-spacing:.05em;text-transform:uppercase;background:#e21d2b !important;border:0 !important;color:#fff !important;box-shadow:0 6px 16px rgba(226,29,43,.25);transition:background .15s ease,box-shadow .15s ease,transform .15s ease}
html body #product-addtocart-button:hover{background:#c8141f !important;box-shadow:0 8px 20px rgba(226,29,43,.33);transform:translateY(-1px)}
@media (max-width:767px){
  html body .product-info-main .page-title-wrapper .page-title,
  html body .product-info-main .page-title{font-size:21px !important}
  html body .product-info-main .box-tocart .fieldset{display:flex !important;align-items:stretch;gap:10px;flex-wrap:nowrap}
  html body .product-info-main .box-tocart .fieldset > .field.qty{flex:0 0 auto;margin:0 !important;padding:0 !important}
  html body .product-info-main .box-tocart .fieldset > .actions{flex:1 1 auto;margin:0 !important;padding:0 !important;display:block !important;width:auto !important}
  html body #product-addtocart-button{min-width:0;width:100% !important;margin:0 !important}
  /* phones: the h1 is hidden and the breadcrumb's last item is the visible title */
  html body.catalog-product-view .breadcrumbs .item.product strong{font-size:19px !important;font-weight:700 !important;line-height:1.3 !important;color:#111 !important;letter-spacing:-.01em}
}
/* reviews: soft neutral note instead of the yellow warning */
html body .block.review-add .message.info.notlogged{background:#f6f7f9 !important;color:#444 !important;border:1px solid #e5e7eb !important;border-radius:12px !important;padding:14px 18px 14px 48px !important;font-size:14px}
html body .block.review-add .message.info.notlogged > *:first-child:before,
html body .block.review-add .message.info.notlogged:before{color:#9aa0a6 !important}
html body .block.review-add .message.info.notlogged a{color:#e21d2b !important;font-weight:600}

/* 4. Product cards everywhere lift on hover (home rows already do) */
html body .products.wrapper .product-item-info,
html body .block.related .product-item-info,
html body .block.upsell .product-item-info{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
html body .products.wrapper .product-item-info:hover,
html body .block.related .product-item-info:hover,
html body .block.upsell .product-item-info:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(16,24,40,.10);border-color:#d6d9de}
@media (hover:none){
  html body .products.wrapper .product-item-info:hover,
  html body .block.related .product-item-info:hover,
  html body .block.upsell .product-item-info:hover{transform:none}
}
/* ===== END RAGAR MODERN PASS ===== */

/* ===== RAGAR PDP LAYOUT CLEANUP (2026-09-24) =====
   Joe: "clean up the layout of the product page". details.phtml got real section titles
   (You May Also Like / Specifications / Product Details); this block gives every PDP section
   the same card, title style and spacing. */
html body.catalog-product-view .related-category-products:not(.second-bar){clear:both;margin:32px 0 0 !important;padding:28px 24px 8px !important;border:1px solid #eceef1;border-radius:18px !important;background:#fff}
html body.catalog-product-view .aplus-section,
html body.catalog-product-view .more-information-section,
html body.catalog-product-view .details-section,
html body.catalog-product-view .related-category-products.second-bar,
html body.catalog-product-view .eylar-product-reviews{margin:24px 0 0 !important;padding:32px !important;border:1px solid #eceef1 !important;border-top:1px solid #eceef1 !important;border-radius:18px !important;box-shadow:0 1px 3px rgba(16,24,40,.05) !important;background:#fff !important}
html body.catalog-product-view .aplus-section{padding:24px !important}
/* one title style for every section */
html body.catalog-product-view .rf-pdp-title,
html body.catalog-product-view .second-bar .section-title,
html body.catalog-product-view .eylar-product-reviews > .block-title,
html body.catalog-product-view .eylar-product-reviews h2.block-title{position:relative;display:block;text-align:left !important;font-size:22px !important;font-weight:700 !important;line-height:1.3 !important;letter-spacing:-.01em;color:#111 !important;margin:0 0 22px !important;padding:0 0 12px !important;height:auto !important;width:auto !important;float:none !important;clear:both}
html body.catalog-product-view .rf-pdp-title:after,
html body.catalog-product-view .second-bar .section-title:after,
html body.catalog-product-view .eylar-product-reviews h2.block-title:after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;border-radius:2px;background:#e21d2b}
/* reviews: left-align the empty-state lines under the new left title */
html body.catalog-product-view .eylar-product-reviews{text-align:left;width:auto !important;max-width:none !important}
html body.catalog-product-view .eylar-product-reviews *{text-align:left !important}
html body.catalog-product-view .eylar-product-reviews .block.review-add .block-title,
html body.catalog-product-view .eylar-product-reviews .review-add h3,
html body.catalog-product-view .eylar-product-reviews .review-add strong{font-size:17px !important;font-weight:700 !important;color:#111 !important}
html body.catalog-product-view .eylar-product-reviews .average-rating.no-reviews{justify-content:flex-start !important;margin:0 0 4px !important}
html body.catalog-product-view .eylar-product-reviews .average-rating.no-reviews span{font-size:16px !important;font-weight:600 !important;color:#111 !important}
html body.catalog-product-view .eylar-product-reviews p.no-reviews{margin:0 !important;font-size:14px !important;color:#6b7076 !important}
html body.catalog-product-view .eylar-product-reviews .review-form-wrapper{margin-top:28px !important;padding-top:24px !important}
html body.catalog-product-view .eylar-product-reviews h3.review-form-title{margin-bottom:14px !important}
/* specifications: table + photo side by side, vertically centred, photo capped */
html body.catalog-product-view .more-information-section > .row{display:flex;flex-wrap:wrap;align-items:center;margin:0 -16px}
html body.catalog-product-view .more-information-section > .row > [class*="col-"]{padding:0 16px}
html body.catalog-product-view .more-information-section table.additional-attributes{width:100%;border-collapse:separate !important;border-spacing:0;border:1px solid #e6e8ec !important;border-radius:12px;overflow:hidden;margin:0 !important}
html body.catalog-product-view .more-information-section table.additional-attributes th,
html body.catalog-product-view .more-information-section table.additional-attributes td{padding:13px 18px !important;font-size:14px !important;line-height:1.5;border:0 !important;border-bottom:1px solid #eef0f3 !important;vertical-align:top}
html body.catalog-product-view .more-information-section table.additional-attributes tr:last-child th,
html body.catalog-product-view .more-information-section table.additional-attributes tr:last-child td{border-bottom:0 !important}
html body.catalog-product-view .more-information-section table.additional-attributes th{width:38%;background:#f7f8fa !important;color:#444 !important;font-weight:600 !important}
html body.catalog-product-view .more-information-section table.additional-attributes td{color:#1d1d1d !important;background:#fff !important}
html body.catalog-product-view .more-information-image img,
html body.catalog-product-view .details-image img{display:block;width:100%;max-width:520px;max-height:440px;height:auto;object-fit:cover;margin:0 auto !important;border-radius:14px}
/* product details: readable body copy */
html body.catalog-product-view .details-section > .row{display:flex;flex-wrap:wrap;align-items:flex-start;margin:0 -16px}
html body.catalog-product-view .details-section > .row > [class*="col-"]{padding:0 16px}
html body.catalog-product-view .description-wrapper{font-size:15px !important;line-height:1.75 !important;color:#333 !important;max-width:680px}
html body.catalog-product-view .description-wrapper p{margin:0 0 14px}
html body.catalog-product-view .description-wrapper h2,
html body.catalog-product-view .description-wrapper h3{font-size:19px !important;font-weight:700 !important;color:#111 !important;line-height:1.35 !important;margin:0 0 12px !important}
@media (max-width:767px){
  html body.catalog-product-view .related-category-products:not(.second-bar){margin-top:20px !important;padding:20px 14px 4px !important}
  html body.catalog-product-view .aplus-section,
  html body.catalog-product-view .more-information-section,
  html body.catalog-product-view .details-section,
  html body.catalog-product-view .related-category-products.second-bar,
  html body.catalog-product-view .eylar-product-reviews{margin-top:16px !important;padding:20px 16px !important;border-radius:14px !important}
  html body.catalog-product-view .aplus-section{padding:12px !important}
  html body.catalog-product-view .rf-pdp-title,
  html body.catalog-product-view .second-bar .section-title,
  html body.catalog-product-view .eylar-product-reviews h2.block-title{font-size:19px !important;margin-bottom:16px !important}
  html body.catalog-product-view .more-information-section > .row > [class*="col-"] + [class*="col-"],
  html body.catalog-product-view .details-section > .row > [class*="col-"] + [class*="col-"]{margin-top:18px}
  html body.catalog-product-view .more-information-section table.additional-attributes th,
  html body.catalog-product-view .more-information-section table.additional-attributes td{padding:11px 12px !important;font-size:13.5px !important}
  html body.catalog-product-view .description-wrapper{font-size:15px !important}
}
/* ===== END RAGAR PDP LAYOUT CLEANUP ===== */

/* ===== RAGAR 2026-09-25 mobile banners: phone-sized WebP (828px) instead of the 1920/1280px desktop files.
   A background overridden by a stylesheet rule is never fetched, so phones skip the big files.
   html body prefix: settings_default.css loads last with !important. Revert = delete this block. ===== */
@media (max-width: 767px) {
    html body .rp-banner--camera { background-image: url(/media/wysiwyg/home/banner-camera-m.webp) !important; }
    html body #how-it-works.rp-banner { background-image: url(/media/wysiwyg/home/banner-rifle-m.webp) !important; }
}

/* ===== RAGAR DESIGNER PROMO (2026-09-30) =====
   Homepage "Design custom foam" band + solid red button on the Pelican layer, PDP link card under the buy box,
   custom-foam pages reuse cfc-btn. Markup: cms_block 261 (.rp-banner--designer), Eylar_FraudBlock product/designer-cta.phtml.
   Revert: delete this block; backups ~/seo_backups/ragarfoam_designer_promo_20260930/. */
.rp .rp-btn-solid{background:#e21d2b;border:2px solid #e21d2b;color:#fff !important}
.rp .rp-btn-solid:hover{background:#c91824;border-color:#c91824;color:#fff !important;box-shadow:none}
.rp .rp-banner--designer{background-position:right center}
.rp section.rp-banner--designer:before{background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 45%,rgba(0,0,0,.25) 100%)}
.rp .rp-banner--designer .rh-wrap{max-width:1240px}
.rp .rp-banner--designer .rp-banner__copy{max-width:600px}
.rp .rp-banner--designer p{font-size:16px;line-height:1.55;margin:0 0 24px}
.rp .rp-banner__btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start}
.rg-designer-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 0;padding:14px 16px;border:1px solid #e5e7eb;border-left:4px solid #e21d2b;border-radius:6px;background:#fafafa}
.rg-designer-cta__t{font-size:14px;color:#374151;font-weight:600}
.rg-designer-cta__a{font-size:14px;font-weight:700;color:#e21d2b !important;white-space:nowrap;text-decoration:none}
.rg-designer-cta__a:hover{text-decoration:underline}
@media (max-width:767px){
  html body .rp-banner--designer{background-image:url(/media/wysiwyg/foam-designer/foam-designer-2d-800.webp) !important;background-position:center}
  .rp .rp-banner--designer p{font-size:14px}
  .rp .rp-banner__btns .rh-btn{width:100%;text-align:center}
}
/* ===== END RAGAR DESIGNER PROMO ===== */