/** Shopify CDN: Minification failed
Line 2077:47 Expected ")" to go with "("
Line 2077:50 Unexpected ")"
**/
#MainContent {
height: calc(100vh - 115px);
}
.is-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.armorer-slider_slide {
width: 100%;
}
#Descripcion-del-producto,
#Configuracion-del-arma,
#productos-similares {
scroll-margin-top: 125px;
}
.currency-btn button {
font-size: 15px;
}
main#MainContent[data-template="404"] .product-card product-price,
main#MainContent[data-template="404"]
.product-card
a.product-card-title:first-child,
product-recommendations .product-card product-price,
product-recommendations .product-card a.product-card-title:first-child,
main#MainContent[data-template="search"] .product-card product-price,
main#MainContent[data-template="search"]
.product-card
a.product-card-title:first-child,
add-to-cart-component,
.quick-add__button.quick-add__button--choose.add-to-cart-button {
display: none;
}
#productos-similares product-recommendations .section-resource-list {
grid-template-columns: 0;
}
.button:hover {
opacity: 0.9;
}
.ctm-width .spacing-style.text-block {
max-width: 600px;
text-align: center;
}
.heading-style-h2 {
font-size: 36px;
line-height: 36px;
}
.heading-style-h4 {
font-size: 1.4rem;
font-weight: 500;
line-height: 1.1;
}
.text-block--align-center {
text-align: center !important;
}
button {
cursor: pointer;
}
.m-auto {
margin: 0 auto;
}
.max-w-large {
width: 100%;
max-width: 48rem;
}
.max-width-medium {
width: 100%;
max-width: 32rem;
}
.text-size-tiny {
font-size: 0.75rem;
}
.text-size-small {
font-size: 0.875rem;
}
.font-bold {
font-weight: 700;
}
.text-size-medium {
font-size: 1.125rem;
}
.text-wrap-balance {
text-wrap: balance;
}
.product-table_spec-text {
text-align: left;
text-wrap: balance;
padding: 0.125rem 0;
}
.welcome-title .h1 {
flex-direction: row;
align-items: center;
justify-content: center;
gap: 13px;
}
@media (max-width: 767px) {
.welcome-title .h1 {
flex-direction: column;
margin-bottom: 12px;
}
.welcome-title p,
.welcome-title .paragraph {
text-align: center !important;
}
}
.welcome-title .h1 img {
width: 220px;
}
.welcome-title p,
.welcome-title .paragraph {
font-family: "Necto Mono";
font-size: 1.125rem;
width: 100%;
max-width: 48rem;
}
@media (max-width: 991px) {
.welcome-title p,
.welcome-title .paragraph {
padding-inline: 10px;
}
}
#header-group {
position: sticky;
top: 0;
background: var(--color-background);
z-index: 999;
}
.small-page-header .h1 {
text-transform: capitalize;
}
.gird-height-full .group-block {
height: 100%;
}
.ctmhigh .spacing-style.text-block.h4 {
display: inline;
width: 100%;
}
.bg-light-gray .section-content-wrapper {
background-color: #f3f4f3;
}
.button.is-small {
min-height: auto;
padding: 0.5rem 1.25em;
}
.small-page-header .custom-section-content {
text-align: center;
}
.button.outline {
background-color: transparent;
border-color: inherit;
}
.button.outline.orange {
border: 1px solid var(--color-primary);
color: var(--color-primary);
}
.ad-contact-btns .button.button-secondary:hover svg path {
fill: #fff;
}
.color-primary {
color: var(--color-foreground) !important;
}
.color-orange {
color: var(--color-primary) !important;
}
.bg-color-primary {
background-color: var(--color-foreground) !important;
}
.bg-color-orange {
background-color: var(--color-primary) !important;
}
.desktop-only {
display: flex;
width: 100%;
}
.mobile-only {
display: none;
}
@media (max-width: 991px) {
.desktop-only {
display: none !important;
}
.mobile-only {
display: flex !important;
width: 100%;
}
}
@media (max-width: 1199px) {
.nav.desktop-only {
display: none !important;
}
.hamburger.mobile-only {
display: flex !important;
}
}
button {
background-color: transparent;
border: 0;
}
/* custom slider for .ctmhigh */
/* ===== MOBILE SLIDER ===== */
@media (max-width: 767px) {
.gird-height-full.ctmhigh {
position: relative;
}
/* ✅ TARGET ONLY MAIN ROW */
.gird-height-full.ctmhigh > .border-style > .mobile-column {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
flex-direction: row !important;
padding-bottom: 90px;
}
/* Slides */
.gird-height-full.ctmhigh > .border-style > .mobile-column > .group-block {
min-width: 85%;
flex: 0 0 auto;
scroll-snap-align: start;
}
/* Hide scrollbar */
.gird-height-full.ctmhigh
> .border-style
> .mobile-column::-webkit-scrollbar {
display: none;
}
/* Arrows */
.ctm-slider-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 10;
}
.ctm-slider-nav button {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid #2f5d3a;
background: transparent;
color: #2f5d3a;
font-size: 22px;
}
}
/* custom slider for .ctmhigh */
/* ---------------------------------------------------------------------------------------------
------------------------------- ****** Header ****** ---------------------------------
--------------------------------------------------------------------------------------------- */
.custom-header {
background: #fff;
border-bottom: 1px solid #eee;
padding: 12px 0;
}
.custom-header .custom-header-wrapper {
grid-column-gap: 2rem;
grid-row-gap: 2rem;
grid-template-rows: auto;
grid-template-columns: minmax(14%, 6rem) 40%;
grid-auto-columns: 1fr;
grid-auto-flow: column;
justify-content: space-between;
place-items: center stretch;
height: 100%;
display: grid;
}
@media (min-width: 1371px) and (max-width: 2000px) {
.custom-header .custom-header-wrapper {
grid-template-columns: minmax(14%, 6rem) 45% !important;
}
}
@media (min-width: 1200px) and (max-width: 1370px) {
.custom-header .custom-header-wrapper {
grid-template-columns: minmax(14%, 6rem) 40% !important;
}
}
@media (max-width: 1199px) {
.custom-header .custom-header-wrapper {
grid-template-columns: minmax(14%, 6rem) 53% !important;
}
}
.custom-header .container {
background: #fff;
}
.sub-header {
background: #d4e7cd;
padding: 12px 0;
width: 100%;
}
.sub-header .custom-header-wrapper {
display: flex;
justify-content: center;
}
.sub-header .custom-header-wrapper nav {
gap: 0.9rem;
}
.btn {
background: var(--color-primary);
color: #fff;
padding: 6px 14px;
border-radius: 4px;
}
/* POPUPS */
.popup {
position: absolute;
top: 50px;
right: 0px;
z-index: 999;
}
.popup a {
display: inline-block;
width: 100%;
}
.popup-box {
background: #fff;
padding: 16px;
border-radius: 3px;
width: 275px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.popup.small .popup-box {
width: 200px;
display: flex;
flex-direction: column;
gap: 8px;
}
.popup.small .popup-box div {
display: flex;
align-items: center;
gap: 8px;
padding: 0.35rem 0.5rem;
border-radius: 0.5rem;
}
.popup .popup-box .option-row {
margin-top: 12px;
display: flex;
gap: 4px;
}
.popup .popup-box .option-row button {
padding: 0;
}
.popup.small .popup-box div:hover {
background-color: color-mix(in hsl, var(--color-foreground) 10%, transparent);
}
.hidden {
display: none;
}
.option-row span {
cursor: pointer;
}
.option-row .active {
border-bottom: 1px solid;
font-weight: 500;
}
.popup-devider {
background: #5d8263;
padding: 0;
width: 1px;
}
.currency-btn {
cursor: pointer;
}
.currency-btn button {
display: flex;
align-items: center;
gap: 4px;
padding: 0;
margin-bottom: 4px;
}
.currency-btn div {
font-size: 9px;
color: #5d8263;
}
.custom-header nav,
.sub-header nav {
display: flex;
justify-content: flex-end;
}
.custom-header nav a,
.sub-header nav a {
display: flex;
align-items: center;
gap: 10px;
color: var(--color-foreground);
}
.custom-header nav a span,
.sub-header nav a span {
margin-top: 1px;
}
.mobile-only.popup .drawer-menu a:active svg path,
.mobile-only.popup .drawer-user a:active svg path,
.mobile-only.popup .drawer-menu a:hover,
.mobile-only.popup .drawer-user a.active span,
.custom-header nav a:hover span,
.custom-header nav a.active span,
.sub-header nav a:hover span,
.sub-header nav a.active span {
color: var(--color-primary);
}
.mobile-only.popup .drawer-menu a:hover svg path,
.mobile-only.popup .drawer-user a:hover svg path,
.custom-header nav a:hover svg path,
.custom-header nav a.active svg path,
.sub-header nav a:hover svg path,
.sub-header nav a.active svg path {
fill: var(--color-primary);
}
.custom-header .nav-right {
justify-content: flex-end;
display: flex;
align-items: center;
}
.user-wrap .user-btn {
display: flex;
align-items: center;
gap: 8px;
color: var(--color-foreground);
}
.user-wrap .user-btn .user-btn-name {
white-space: nowrap;
text-overflow: ellipsis;
flex: 0 auto;
height: 1.2rem;
max-width: 70px;
overflow: hidden;
}
.user-wrap .user-btn:hover {
color: var(--color-primary);
}
.hamburger svg {
max-width: 32px;
width: 100%;
}
.header-search-only .home-product-search-wrapper {
padding: 0;
width: 100%;
background: #fff;
}
.header-search-only .home-product-search-wrapper .form_field-wrapper input {
background-color: #295a310d;
border: 1px solid #295a3126;
}
.header-search-only .home-product-search-wrapper .form_field-wrapper .form_label {
background-color: #f4f7f4;
}
.header-search-only .home-product-search-wrapper .header-search-btn {
position: absolute;
top: 7px;
right: 10px;
width: 34px;
background: #5d826363;
padding: 8px;
border-radius: 50%;
}
.header-search-only .home-product-search-wrapper .header-search-btn svg path {
fill: var(--color-foreground);
}
.header-search-only.mobile-only {
display: none !important;
}
@media (max-width: 767px) {
.header-search-only {
display: none !important;
}
.header-search-only.mobile-only {
display: flex !important;
max-width: 96%;
margin: 10px auto 0;
}
}
/* ===================== RESPONSIVE ===================== */
@media (max-width: 991px) {
.compare_list-titles {
position: sticky;
left: 0;
z-index: 1;
background: #fff;
}
.compare_list-wrapper .compare_content-wrap {
position: relative;
z-index: 0;
}
}
#userPopup svg {
min-width: 16px;
}
.template-index .header-search-only.mobile-only,
.collection-armas .header-search-only.mobile-only {
display: none !important;
}
.tab-only {
display: none;
}
@media (max-width: 1199px) {
.hide-in-tab {
display: none;
}
.custom-header .nav-right {
gap: 8px;
}
.custom-header .custom-header-wrapper {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
}
.custom-header .custom-header-wrapper a.logo {
max-width: 143px;
min-width: 140px;
width: 100%;
position: relative;
z-index: 9999;
}
.custom-header .button.is-small {
padding: 7px;
}
.custom-header .nav-right a {
font-size: 14px;
text-align: center;
}
button#settingsToggle {
padding: 0;
}
button#settingsToggle svg {
width: 32px;
height: 32px;
min-width: 32px;
}
.custom-header-wrapper {
gap: 5px !important;
}
.user-btn svg:first-child {
min-width: 32px;
min-height: auto;
}
.user-btn svg:last-child {
min-width: 10px;
}
.mobile-drawer {
background: #fbfbfb;
padding: 8px;
border-radius: 0px;
width: 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
max-width: 475px;
}
button#closeDrawer svg path {
transition: all ease-in-out 400ms;
}
button#closeDrawer:hover svg path {
fill: red;
transition: all ease-in-out 400ms;
}
body.overflow-locked:after {
content: "";
position: absolute;
top: 0;
left: 0;
background: #00000054;
height: 100%;
width: 100%;
z-index: 1;
transition: all 400ms ease-in-out;
}
body.overflow-locked {
position: relative;
transition: all 400ms ease-in-out;
}
.mobile-only.hamburger {
width: fit-content;
}
.mobile-only.popup {
right: 0;
top: 0;
width: 100%;
height: 100dvh;
position: fixed;
transform: translateX(-100%);
transition: transform 400ms ease;
z-index: 999;
background: rgba(0, 0, 0, 0);
}
.mobile-only.popup.active {
transform: translateX(0);
transition: transform 400ms ease;
display: flex;
}
.mobile-only.popup .drawer-header {
text-align: end;
padding-block: 8px;
background: #fff;
}
html.overflow-locked,
body.overflow-locked {
overflow: hidden;
height: 100%;
}
.mobile-only.popup .drawer-menu,
.mobile-only.popup .drawer-user {
display: flex;
flex-direction: column;
gap: 0;
}
.mobile-only.popup .drawer-menu a,
.mobile-only.popup .drawer-user a {
color: var(--color-foreground);
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding-block: 24px;
border-bottom: 1px solid #d6ded7;
}
.mobile-only.popup .drawer-menu a:last-child,
.mobile-only.popup .drawer-user a:last-child {
border: 0;
}
.mobile-only.popup .drawer-menu a:hover,
.mobile-only.popup .drawer-user a:hover {
color: var(--color-primary);
}
.custom-footer .footer-bottom {
display: flex !important;
}
.drawer-user {
margin-inline: 8px;
padding-inline: 16px;
background: #f3f4f3;
border-radius: 16px;
}
.drawer-menu {
padding-inline: 8px;
}
}
@media (max-width: 375px) {
.custom-header .nav-right a {
font-size: 12px;
}
button#settingsToggle svg,
.hamburger svg {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
}
.custom-header .custom-header-wrapper a.logo {
max-width: 100px;
min-width: 100px;
width: 100%;
}
}
/* ---------------------------------------------------------------------------------------------
------------------------------- ****** Header ****** ---------------------------------
--------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------
------------------------------- ****** weapon-Hero ****** ---------------------------------
--------------------------------------------------------------------------------------------- */
.product-detail-page section {
margin-bottom: 60px;
}
.weapon-hero .weapon-info h2 {
margin-top: 0;
}
.weapon-hero .weapon-info .weapon-subtitle,
.weapon-hero .weapon-info .weapon-description p {
font-size: 18px;
line-height: 22px;
}
.weapon-hero .weapon-image {
align-self: center;
border-radius: 16px;
background-color: #f3f4f3;
padding: 8px;
overflow: hidden;
height: fit-content;
}
.weapon-hero .weapon-image img {
aspect-ratio: 16 / 9;
border-radius: 8px;
background-color: #fbfbfb;
object-fit: contain;
width: 100%;
}
.weapon-hero .weapon-image-wrapper .banner-action-buttons {
justify-content: center;
margin-top: 8px;
}
/* ---------------------------------------------------------------------------------------------
------------------------------- ****** weapon-Hero ****** ---------------------------------
--------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------
------------------------------- ****** weapon-config ****** ---------------------------------
--------------------------------------------------------------------------------------------- */
.weapon-grid {
grid-column-gap: 10%;
grid-row-gap: 10%;
grid-template-rows: auto;
grid-template-columns: 1.25fr 1fr;
grid-auto-columns: 1fr;
min-height: 40vh;
display: grid;
align-items: center;
padding-top: 2rem;
padding-bottom: 2rem;
}
.weapon-config {
margin-bottom: 60px;
}
.weapon-config * {
background-attachment: scroll !important;
}
.weapon-config .product-options_table {
padding-right: 2rem;
padding-bottom: 0.5rem;
padding-left: 2rem;
grid-column-gap: 0rem;
grid-row-gap: 0rem;
margin-bottom: -0.5rem;
margin-left: calc(-1 * 2rem);
margin-right: calc(-1 * 2rem);
border-radius: 0.5rem;
flex-flow: column;
grid-template-rows: auto;
grid-template-columns: 1fr;
grid-auto-columns: 1fr;
justify-content: flex-start;
align-items: flex-start;
max-height: 75vh;
display: grid;
overflow: auto;
}
.weapon-config .product-options_table .product-table_row {
grid-column-gap: 1rem;
grid-row-gap: 1rem;
grid-template-rows: auto;
grid-template-columns: minmax(6rem, 13ch) minmax(6rem, 12ch) minmax(
6rem,
18ch
) minmax(6rem, 12ch) minmax(6rem, 12ch) minmax(6rem, 13ch) minmax(
6rem,
12ch
) 27rem;
grid-auto-columns: minmax(6rem, 1fr);
grid-auto-flow: column;
align-items: center;
padding: 0.5rem 0.25rem;
display: grid;
}
.weapon-config .product-options_table .product-options_header-row {
z-index: 3;
background-color: #fbfbfb;
place-items: start stretch;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
position: sticky;
top: 0;
}
.weapon-config .product-options_table .product-table_row .product-table_cell {
grid-column-gap: 0.25rem;
grid-row-gap: 0.25rem;
text-wrap: pretty;
flex-flow: wrap;
padding: 0;
font-size: 0.85rem;
line-height: 1.2;
display: flex;
}
.weapon-config
.product-options_table
.product-table_row
.product-table_cell
.product-table_tooltip {
width: 100%;
display: block;
}
.weapon-config .product-options_table .product-options_accordeon_content {
overflow: clip;
}
.weapon-config
.product-options_table
.product-options_accordeon_content
.product-options_accordeon_list {
scrollbar-gutter: stable;
}
.weapon-config
.product-options_table
.product-options_accordeon_content
.product-options_accordeon_list
.product-options_item {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.weapon-config
.product-options_table
.product-options_accordeon_content
.product-options_accordeon_list
.product-options_item:nth-child(even) {
background-color: color-mix(
in srgb,
var(--color-foreground) 2.5%,
var(--color-background)
);
}
.product-options_group {
border-bottom: 1px solid #e7e7e7;
}
.product-options_group-header {
width: 100%;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 30px;
padding: 12px 0;
transition: background .25s;
font-size: 0.85rem;
}
.product-options_group-title {
font-weight: 600;
color: #295A31;
display: flex;
flex-direction: column;
}
.product-options_group-count {
margin-left: 0px;
text-align: left;
color: color-mix( in srgb, var(--color-foreground) 75%, var(--color-background) );
font-weight: normal;
}
.product-options_group-arrow {
transition: transform .3s ease;
}
.product-options_group-content{
max-height:0;
overflow:hidden;
transition:max-height .35s ease;
}
.product-options_group.is-open .product-options_group-content{
max-height:3000px;
}
.product-options_group .product-options_group-toggle {
align-items: center;
}
.product-options_group .product-options_group-toggle svg {
width: 18px;
height: 18px;
}
.product-options_group .product-options_group-toggle svg path {
stroke: rgb(224 109 49 / 1.0);
}
.product-options_group.is-open .product-options_group-toggle .icon-plus {
transform: rotate(45deg);
display: inline-block;
}
.product-options_buttons-sticky {
z-index: 2;
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
background-color: inherit;
justify-content: flex-end;
align-items: center;
padding: 0.125rem;
font-size: 0.75rem;
display: flex;
position: sticky;
right: 0;
grid-area: 1 / -2 / 2 / -1;
justify-self: end;
}
.product-options_buttons-wrap {
z-index: 2;
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
justify-content: flex-end;
align-items: center;
padding: 0.125rem;
font-size: 0.75rem;
display: flex;
}
.product-options_buttons-wrap .product-card_button {
z-index: 2;
grid-column-gap: 0.75em;
grid-row-gap: 0.75em;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
color: var(--color-foreground);
white-space: nowrap;
background-color: color-mix(in srgb, var(--color-foreground) 5%, #fbfbfb);
border-style: solid;
border-width: 0.0625rem;
border-top-color: color-mix(in hsl, var(--color-foreground) 5%, transparent);
border-right-color: color-mix(
in hsl,
var(--color-foreground) 5%,
transparent
);
border-bottom-color: color-mix(
in hsl,
var(--color-foreground) 5%,
transparent
);
border-left-color: color-mix(in hsl, var(--color-foreground) 5%, transparent);
flex: 0 auto;
justify-content: flex-start;
align-items: center;
padding: 0.5em 0.5em 0.5em 0.75em;
font-size: 0.75rem;
text-decoration: none;
transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: ease;
display: flex;
font-weight: 400 !important;
cursor: pointer !important;
}
.product-options_buttons-wrap .product-card_button:hover {
background-color: color-mix(
in srgb,
var(--color-foreground) 15%,
var(--color-background)
);
}
.product-options_buttons-wrap .product-card_button .product-card_icon {
width: 16px;
height: 16px;
}
.product-options_buttons-wrap
.product-card_button.fav-button.is-active
svg
path,
.product-options_buttons-wrap
.product-card_button.compare-btn.is-added
svg
path {
fill: var(--color-primary);
stroke: var(--color-primary);
}
/* ---------------------------------------------------------------------------------------------
------------------------------- ****** weapon-config ****** ---------------------------------
--------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------
------------------------------- ****** Technical data ****** ---------------------------------
--------------------------------------------------------------------------------------------- */
.tech-grid {
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
grid-template-rows: auto;
grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
grid-auto-columns: 1fr;
grid-auto-flow: dense;
display: grid;
}
.tech-grid .tech-row {
grid-column-gap: 1rem;
grid-row-gap: 1rem;
border-radius: 0.25rem;
background-color: #f3f4f3;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
font-size: 0.875rem;
display: flex;
}
.tech-grid .tech-row span:first-child {
color: color-mix(
in srgb,
var(--color-foreground) 75%,
var(--color-background)
);
}
/* ---------------------------------------------------------------------------------------------
------------------------------- ****** Technical data ****** ---------------------------------
--------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------
------------------------------- ****** Where to Buy and my-adverts listing ****** ---------------------------------
--------------------------------------------------------------------------------------------- */
.ads-list_list {
grid-template-rows: 1fr;
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
grid-auto-columns: 1fr;
display: grid;
grid-column-gap: 1rem;
grid-row-gap: 1rem;
}
.ads-list_item {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
}
#my-adverts-empty .product-list_empty {
padding: 30px;
background: #f3f4f3;
border-radius: 24px;
}
.ads-list_item.disabled .ad-card_component * {
opacity: 0.8;
pointer-events: none;
}
.ads-list_item.disabled .ad-card_button-wrap,
.ads-list_item.disabled .ad-card_button-wrap * {
opacity: 1;
pointer-events: unset;
}
.ads-list_item.disabled.sold
.ad-card_button-wrap
.ad-card_button-list
.btn-link {
opacity: 1;
pointer-events: unset;
}
.ads-list_item.is-used {
grid-template-columns: minmax(10%, 14rem) 2fr;
grid-auto-columns: 1fr;
}
.ad-card_thumb {
aspect-ratio: 25/14;
object-fit: contain;
width: 100%;
min-height: 3rem;
}
.ad-card_thumb.is-used {
object-fit: cover;
object-fit: cover;
}
.ad-card_component {
grid-column-gap: 2rem;
grid-row-gap: 2rem;
border-radius: 1rem;
background-color: #f3f4f3;
grid-template-rows: auto;
grid-template-columns: minmax(12%, 6rem) 2fr;
grid-auto-columns: 1fr;
grid-auto-flow: column;
justify-content: space-between;
place-items: center stretch;
height: 100%;
padding: 0.5rem 0.5rem;
display: grid;
}
.my-adverts .ad-card_component {
grid-template-columns: minmax(12%, 6rem) 5fr;
}
.my-adverts
.ad-card_component
.ad-card_component-data
.ad-card_component-data-top,
.my-adverts
.ad-card_component
.ad-card_component-data
.ad-card_component-data-bottom {
grid-column-gap: 2rem;
grid-row-gap: 2rem;
background-color: #f3f4f3;
grid-template-rows: auto;
grid-auto-columns: 1fr;
grid-auto-flow: column;
justify-content: space-between;
place-items: center stretch;
height: 100%;
padding: 0.5rem 0.5rem;
display: grid;
grid-template-columns: 2fr;
}
.my-adverts
.ad-card_component
.ad-card_component-data
.ad-card_component-data-top {
border-bottom: 1px solid rgba(41, 90, 49, 0.2);
padding-bottom: 10px;
margin-bottom: 10px;
}
.my-adverts
.ad-card_component
.ad-card_component-data
.ad-card_component-data-bottom {
grid-template-columns: 1fr;
}
.my-adverts
.ad-card_component
.ad-card_component-data
.ad-card_component-data-bottom
.stat-item:not(:last-child) {
border-right: 1px solid rgba(41, 90, 49, 0.2);
}
.my-adverts
.ad-card_component
.ad-card_component-data
.ad-card_component-data-bottom
.stat-item
div {
display: flex;
gap: 5px;
align-items: center;
}
.my-adverts
.ad-card_component
.ad-card_component-data
.ad-card_component-data-bottom
.stat-item
p {
margin-top: 1.5px;
color: #5e8263;
}
.ad-card_component.is-armory {
grid-template-columns: minmax(12%, 6rem) 1fr;
}
.ad-card_logo-wrap {
position: relative;
}
.product-table_spec-text {
text-align: left;
text-wrap: balance;
padding: 0.125rem 0;
}
.ad-card_stat {
grid-column-gap: 0.125rem;
grid-row-gap: 0.125rem;
flex-flow: column;
justify-content: space-between;
align-items: flex-start;
display: flex;
}
.ad-card_button-wrap {
width: 10rem;
}
.ad-card_button-wrap {
display: flex;
flex-direction: column;
gap: 10px;
}
.ad-card_button-wrap .button {
width: 100%;
}
.ad-card_button-wrap .ad-card_button-list {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.ad-card_button-wrap button.btn-link {
background: transparent;
border: 0;
padding: 0;
text-decoration: underline;
}
.placeholder-image {
width: 100%;
height: 70px;
object-fit: contain;
}
.gun-card__media-wrapper {
position: relative;
overflow: hidden;
padding-left: 15px;
padding-right: 15px;
}
.gun-card__media {
border: 0.0625rem solid #fbfbfb;
border-radius: 0.5rem;
background-color: #fbfbfb;
min-width: 145px;
}
.gun-card__media img {
object-fit: contain;
}
.gun-slider {
display: flex;
transition: transform 0.3s ease;
}
/* Slide */
.gun-slide {
min-width: 100%;
min-width: 145px;
border-radius: 8px;
}
.gun-slide img {
width: 145px;
min-width: 145px;
height: 80px;
object-fit: contain;
}
/* Buttons */
.gun-prev,
.gun-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid var(--color-foreground);
background: transparent;
color: var(--color-foreground);
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.gun-prev {
left: 0px;
}
.gun-next {
right: 0px;
}
/* Hide if single image */
.gun-card__media.single .gun-prev,
.gun-card__media.single .gun-next {
display: none;
}
.ad-card_title {
display: flex;
flex-direction: column;
gap: 3px;
}
.ad-card_title a,
.ad-related-card__info a {
color: var(--color-foreground);
text-decoration: underline;
}
.ad-card_useralias {
text-transform: uppercase;
}
.user-type-badge {
font-size: 10px;
padding: 4px;
border: 1px solid #5e826370;
border-radius: 4px;
text-transform: uppercase;
}
.product-table_header-cell,
.ad-related-card__meta-label {
color: #5e8263;
}
.ad-related-card__meta-val {
text-transform: capitalize;
}
.ads-list_list {
display: flex;
flex-direction: column;
gap: 16px;
}
.ads-list_item {
border: 1px solid #e8ede9;
border-radius: 14px;
overflow: hidden;
transition: opacity 0.2s;
display: flex;
flex-direction: column;
}
.ad-card_component {
display: grid;
grid-template-columns: 180px 1fr auto;
gap: 0;
}
/* Image area */
.ad-card_logo-wrap {
width: 180px;
min-height: 140px;
overflow: hidden;
}
.gun-card__media-wrapper {
width: 100%;
height: 100%;
}
.gun-card__media {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.gun-slider {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.gun-slider-track {
display: flex;
height: 100%;
width: 100%;
transition: transform 0.3s ease;
}
.gun-slide {
min-width: 100%;
height: 140px;
}
.gun-slide img,
.ad-single-image {
width: 100%;
height: 140px;
object-fit: contain;
display: block;
}
.gun-prev,
.gun-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.85);
border: none;
border-radius: 50%;
width: 28px;
height: 28px;
font-size: 1.1rem;
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.gun-prev {
left: 6px;
}
.gun-next {
right: 6px;
}
.gun-dots {
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 4px;
}
.gun-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.gun-dot.is-active {
background: #fff;
}
/* Data area */
.ad-card_component-data {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.ad-card_component-data-top {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-start;
}
.ad-card_title {
flex: 1;
min-width: 160px;
}
.ad-card_title-text {
color: var(--color-foreground);
}
.ad-card_product-link {
font-size: 0.8rem;
color: #666;
display: block;
margin-top: 2px;
text-decoration: none;
}
.ad-card_stat {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 80px;
}
/* Stats bottom */
.ad-card_component-data-bottom {
display: flex;
gap: 24px;
flex-wrap: wrap;
padding-top: 8px;
border-top: 1px solid #f0f0f0;
}
.stat-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.stat-item > div {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 0.95rem;
}
.stat-item p {
font-size: 0.75rem;
color: #888;
margin: 0;
}
.stat-item.highlight > div {
color: var(--color-foreground, #295a31);
}
.stat-item .icon {
display: flex;
align-items: center;
}
/* Button area */
.ads-list_item .ad-card_button-wrap {
padding: 16px 12px;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 180px;
border-left: 1px solid #f0f0f0;
justify-content: center;
}
.ad-card_button-list {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* Edit ad popup labels */
.edit-ad-label {
display: block;
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 6px;
color: #444;
}
.edit-ad-field {
display: flex;
flex-direction: column;
font-size: 0.75rem;
color: var(--color-primary);
font-weight: 600;
background: #fef9f0;
padding: 2px 8px;
border-radius: 20px;
}
/* Button styles */
.button.outline.orange {
border: 1.5px solid var(--color-primary);
color: var(--color-primary);
background: transparent;
}
.button.outline.orange:hover {
background: var(--color-primary);
color: #fff;
}
.btn-link {
background: none;
border: none;
cursor: pointer;
font-size: 0.85rem;
padding: 0;
}
.btn-link.underline {
text-decoration: underline;
}
.btn-link.color-primary {
color: var(--color-primary, #295a31);
}
.btn-link.color-orange {
color: var(--color-primary);
}
@media (max-width: 991px) {
.ad-card_component {
grid-template-columns: 1fr;
}
.ad-card_logo-wrap {
width: 100%;
}
.gun-slide,
.gun-slide img,
.ad-single-image {
height: 200px;
}
.ad-card_button-wrap {
border-left: none;
border-top: 1px solid #f0f0f0;
flex-direction: row;
flex-wrap: wrap;
}
.ad-card_component-data-top {
flex-direction: column;
}
}
/* Not in armorer — card state */
.ads-list_item.not-in-armorer {
border-color: #f0c070;
opacity: 0.75;
}
/* Not in armorer — warning banner */
.ad-not-in-armorer-banner {
display: flex;
align-items: center;
gap: 8px;
background: #fef9f0;
border-bottom: 1px solid #f0c070;
padding: 10px 16px;
font-size: 0.82rem;
color: #b7770d;
font-weight: 500;
order: 2;
}
.ad-not-in-armorer-banner svg {
flex-shrink: 0;
}
/* ---------------------------------------------------------------------------------------------
------------------------------- ****** Where to Buy and my-adverts listing ****** ---------------------------------
--------------------------------------------------------------------------------------------- */
.section_product-page_toc {
z-index: 500;
position: fixed;
inset: auto 0% 1rem;
}
.toc_layout {
display: flex;
flex-flow: row;
border-radius: 1rem;
background-color: var(--color-background);
margin-left: -0.5rem;
margin-right: -0.5rem;
padding: 0.5rem;
font-size: 0.875rem;
position: relative;
overflow: auto;
justify-content: flex-start;
align-items: stretch;
grid-column-gap: 0.25rem;
grid-row-gap: 0.25rem;
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.09);
}
.toc_link {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
white-space: nowrap;
background-color: color-mix(in srgb, var(--color-foreground) 4%, transparent);
padding: 0.5rem;
text-decoration: none;
transition-property: color, background-color;
transition-duration: 0.2s, 0.2s;
transition-timing-function: ease, ease;
color: var(--color-foreground);
line-height: 1.2;
}
.toc_link.active {
background-color: var(--color-primary);
color: #fff;
}
.resource-list__item {
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
background-color: #f3f4f3;
grid-template-columns: 1fr;
grid-auto-columns: 1fr;
grid-template-rows: subgrid;
flex-flow: column;
grid-row: span 4;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 0.75rem;
display: flex;
position: relative;
}
.related-blogs .resource-list--grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.blog-post-card__content-text {
color: color-mix(
in srgb,
var(--color-foreground) 75%,
var(--color-background)
);
}
.product-card__content .card-gallery .product-media {
aspect-ratio: 16 / 9;
border-radius: 1rem;
background-color: #fff;
border: 0.06rem solid #0000001a;
width: 100%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
object-position: center;
}
.product-card__content .card-gallery .product-media img {
background-color: transparent;
padding: 0.5rem;
object-fit: contain;
position: absolute;
margin: auto;
}
.product-card-title {
font-size: 1.4rem;
line-height: 1;
font-weight: 500;
color: var(--color-foreground);
}
.home-product-search-result .product-card__meta {
justify-content: space-between;
}
.product-card__meta {
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
flex-flow: column;
flex: 1;
justify-content: flex-end;
align-items: stretch;
width: 100%;
padding: 0.5rem;
display: flex;
}
.product-card_specs-wrap {
flex-flow: column;
flex: 1;
justify-content: flex-end;
align-items: stretch;
width: 100%;
margin-bottom: 0.5rem;
display: flex;
}
.meta-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.product-card_specs-wrap .meta-row span:last-child {
text-align: right;
white-space: nowrap;
text-overflow: ellipsis;
flex: 0 auto;
max-width: 55%;
height: 1.2rem;
overflow: hidden;
}
.meta-row span {
font-size: 1rem;
}
.meta-row span:first-child {
font-size: 0.85rem;
color: color-mix(
in srgb,
var(--color-foreground) 75%,
var(--color-background)
);
}
.product-card_button-wrap .button {
width: 100%;
}
/*----------------------------------------------------
home page product list
----------------------------------------------------- */
.home-product-search .container {
display: flex;
flex-direction: column;
gap: 32px;
}
.home-product-search-wrapper {
display: flex;
flex-direction: column;
gap: 16px;
}
.home-product-search-wrapper .form_field-wrapper {
width: 100%;
max-width: 48rem;
z-index: 1;
min-width: 8rem;
margin: 0 auto;
position: relative;
}
.home-product-search-wrapper .form_field-wrapper .form_field-input-icon {
opacity: 0;
pointer-events: none;
color: color-mix(in srgb, var(--color-foreground) 65%, transparent);
width: 1.2rem;
height: 1.2rem;
transition-property: opacity;
transition-duration: 0.2s;
transition-timing-function: ease;
position: absolute;
top: 1rem;
left: 0.75rem;
z-index: 3;
}
.home-product-search-wrapper .form_field-wrapper:hover .form_field-input-icon,
.home-product-search-wrapper
.form_field-wrapper:has(input:focus)
.form_field-input-icon,
.home-product-search-wrapper
.form_field-wrapper:has(input:not(:placeholder-shown))
.form_field-input-icon {
opacity: 1;
}
.home-product-search-wrapper .form_field-wrapper .form_label {
z-index: 2;
grid-column-gap: 0.15rem;
grid-row-gap: 0.15rem;
background-color: var(--color-background);
color: color-mix(
in srgb,
var(--color-foreground) 75%,
var(--color-background)
);
white-space: nowrap;
cursor: pointer;
padding-left: 0.25rem;
padding-right: 0.25rem;
transition: font-size 0.2s, left 0.2s, color 0.2s, top 0.2s;
display: flex;
position: absolute;
top: 1rem;
left: 0.75rem;
pointer-events: none;
margin-bottom: 0.25rem;
font-weight: 500;
}
.home-product-search-wrapper .form_field-wrapper:hover .form_label {
left: 2.25rem;
}
.home-product-search-wrapper .form_field-wrapper input:focus + label,
.home-product-search-wrapper
.form_field-wrapper:has(input:not(:placeholder-shown))
label {
top: -0.6em;
left: 0.75rem !important;
font-size: 0.85rem;
color: var(--color-primary);
}
.home-product-search-wrapper .form_field-wrapper input {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
color: var(--color-foreground);
border-style: solid;
border-width: 0.06rem;
border-color: color-mix(in srgb, var(--color-foreground) 15%, transparent);
background-color: #0000;
width: 100%;
min-width: auto;
height: 3rem;
min-height: 3rem;
margin-bottom: 0;
padding: 0.75rem 1rem;
font-size: 1rem;
transition-property: border;
transition-duration: 0.2s;
transition-timing-function: ease;
padding-left: 2.5rem;
}
.home-product-search-wrapper .form_field-wrapper:hover input {
border-color: var(--color-primary);
}
.home-product-search-wrapper .form_field-wrapper input:focus-visible {
border-color: var(--color-primary);
color: var(--color-primary);
outline-style: solid;
outline-offset: 0.065rem !important;
outline-width: 0.065rem !important;
outline-color: currentColor !important;
}
.product-grid {
grid-column-gap: 1rem;
grid-row-gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
grid-auto-columns: 1fr;
align-items: stretch;
justify-content: center;
min-height: 100%;
display: grid;
grid-template-rows: auto !important;
}
.product-grid .search-item {
display: flex;
}
/* .product-card {
border:1px solid #eee;
padding:14px;
border-radius:10px;
text-align:center;
} */
.home-product-search .view-all-link {
}
.product-grid .resource-list__item:nth-child(5 + n) {
display: none;
}
@media (min-width: 992px) and (max-width: 1327px) {
.product-grid .resource-list__item:last-child {
display: none !important;
}
}
/*----------------------------------------------------
home page product list
----------------------------------------------------- */
/*----------------------------------------------------
Ask for Advice
----------------------------------------------------- */
.ask-for-advice h2 {
line-height: 1.1 !important;
}
.ask-for-advice .button {
background-color: var(--color-primary);
}
.ask-for-advice .image-block {
aspect-ratio: 36 / 30;
width: 100%;
position: relative;
overflow: hidden;
}
.ask-for-advice.welcome-title .paragraph {
text-align: left !important;
}
/*----------------------------------------------------
Ask for Advice
----------------------------------------------------- */
/*----------------------------------------------------
FAQ
----------------------------------------------------- */
.FAQ .accordion .details .details-content .text-block a {
display: contents !important;
}
.FAQ .accordion {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.FAQ .accordion .details {
padding: 1rem 1.5rem;
border-radius: 0.5rem;
background-color: #f3f4f3;
}
.FAQ .accordion .details .details__header {
padding: 0;
line-height: 1.2 !important;
min-height: auto;
}
.FAQ .accordion svg path {
stroke: var(--color-primary);
}
.FAQ .accordion .svg-wrapper {
width: 24px;
height: 24px;
}
.FAQ .accordion .details .details-content {
padding-top: 1.5rem;
}
.FAQ .accordion .details .details-content .text-block {
width: 100%;
max-width: 48rem;
font-family: "Chivo";
font-weight: 300;
font-size: 16px;
line-height: 19px;
color: #295a31;
}
/*----------------------------------------------------
FAQ
----------------------------------------------------- */
/*----------------------------------------------------
Footer
----------------------------------------------------- */
.custom-footer {
color: #ffffff;
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 32px;
}
.custom-footer .footer-top {
grid-column-gap: 3rem;
grid-row-gap: 2rem;
border-radius: 1rem;
grid-template-rows: auto;
grid-template-columns: 2fr 1fr 1fr;
grid-auto-columns: 1fr;
align-items: start;
padding: 2rem;
display: grid;
}
.custom-footer .footer-heading {
font-size: 3.5rem;
margin-top: 0;
font-weight: 500;
line-height: 1.1 !important;
text-wrap: balance;
}
.custom-footer .footer_logo img {
flex-direction: column;
justify-content: center;
align-items: center;
width: 14.5rem;
height: 3.1875rem;
display: flex;
}
.custom-footer .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.custom-footer .footer-links li {
margin-bottom: 14px;
}
.custom-footer .footer-links a {
color: inherit;
text-decoration: none;
font-size: 16px;
transition: opacity 0.3s ease;
}
.custom-footer .footer-links a:hover {
opacity: 0.7;
}
.custom-footer .footer-domain {
display: block;
margin-top: 20px;
color: #ff6a00;
font-weight: 500;
}
.custom-footer .footer-newsletter {
flex-flow: column;
place-content: stretch flex-start;
align-items: stretch;
display: flex;
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
}
.custom-footer .footer-newsletter h4 {
margin-bottom: 20px;
font-weight: 500;
}
.custom-footer .footer-newsletter input[type="email"] {
width: 100%;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.5);
background: transparent;
color: white;
margin-bottom: 15px;
}
.custom-footer .footer-newsletter input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.custom-footer .footer-newsletter .checkbox {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 20px;
font-size: 14px;
cursor: pointer;
align-items: flex-start;
color: color-mix(in srgb, var(--color-background) 60%, transparent);
}
.custom-footer .footer-newsletter .checkbox input {
margin-top: 1px !important;
}
.custom-footer .footer-newsletter .checkbox label {
cursor: pointer;
}
.custom-footer .footer-newsletter button {
width: 100%;
border: none;
background: #fff;
cursor: pointer;
font-weight: 500;
transition: 0.3s ease;
text-align: left;
color: var(--color-foreground);
font-family: "Paralucent Medium";
text-align: center;
}
.custom-footer .footer-newsletter button:hover {
opacity: 0.85;
}
/* Bottom Section */
.custom-footer .footer-bottom {
grid-column-gap: 3rem;
grid-row-gap: 2rem;
border-radius: 1rem;
grid-template-rows: auto;
grid-template-columns: 2fr 1fr 1fr;
grid-auto-columns: 1fr;
align-items: start;
padding: 2rem;
display: grid;
color: color-mix(in srgb, var(--color-foreground) 65%, transparent);
background-color: #f3f4f3;
}
.custom-footer .footer-legal {
flex-flow: column;
align-items: flex-start;
display: flex;
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
}
.custom-footer .footer-legal a {
margin: 0 15px;
text-decoration: none;
color: inherit;
}
.custom-footer .footer-credit a {
text-decoration: none;
font-weight: 500;
color: var(--color-primary);
}
/* Responsive */
@media (max-width: 992px) {
.custom-footer .footer-top {
grid-template-columns: 1fr;
gap: 40px;
}
.custom-footer .footer-heading {
font-size: 36px;
}
.custom-footer .footer-bottom {
flex-direction: column-reverse;
gap: 20px;
text-align: center;
}
}
/*----------------------------------------------------
Footer
----------------------------------------------------- */
/*----------------------------------------------------
blog listing
----------------------------------------------------- */
/* blog tabs style */
.blog-tabs {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 48px;
}
.blog-tabs .tab-btn {
cursor: pointer;
background-color: color-mix(in srgb, var(--color-foreground) 5%, transparent);
border: none;
border-radius: 1rem;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
padding: 1rem 1.5rem;
transition-property: color, background-color;
transition-duration: 0.2s, 0.2s;
transition-timing-function: ease, ease;
display: flex;
position: relative;
z-index: 1;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
font-weight: 500;
overflow: hidden;
color: var(--color-foreground);
}
.blog-tabs .tab-btn.active {
background-color: var(--color-foreground);
color: #fff;
}
/* blog tabs style */
.blog-image-wrapper {
position: relative;
}
.blog-image-wrapper .blog-card__tags {
z-index: 2;
border-radius: 0.5rem;
background-color: #f3f4f3;
color: var(--color-foreground);
padding: 0.25rem 0.5rem;
font-size: 0.88rem;
position: absolute;
inset: 0.5rem auto auto 0.5rem;
}
.blog-image-wrapper .featured-blog-posts-card__image {
aspect-ratio: 3 / 2;
border-radius: 1rem;
position: relative;
overflow: hidden;
}
.featured-blog-posts-card .featured-blog-posts-card__inner {
height: 100%;
}
.featured-blog-posts-card
.featured-blog-posts-card__inner
.featured-blog-posts-card__content {
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
flex-flow: column;
flex: 1;
justify-content: space-between;
align-items: stretch;
width: 100%;
padding: 0.5rem;
display: flex;
}
.featured-blog-posts-card
.featured-blog-posts-card__inner
.featured-blog-posts-card__content
.shopify-block {
flex-flow: column;
flex: 1;
justify-content: flex-end;
align-items: stretch;
width: 100%;
margin-bottom: 0.5rem;
display: flex;
}
/* blog detail */
.blog-detail-wrapper {
display: grid;
gap: 32px;
grid-template-columns: 1.4fr 1fr;
text-align: left;
align-items: center;
}
.blog-detail-wrapper .blog-detail-left header {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 20px;
margin-bottom: 32px;
}
.blog-detail-wrapper .blog-detail-left header * {
text-align: left;
}
.blog-post-content-wrapper .blog-post-content {
text-align: left;
margin: unset;
}
/* blog detail */
/*----------------------------------------------------
blog listing
----------------------------------------------------- */
/* --------------------------- weapon listing page -------------------------- */
.weapon-header {
padding: 38px 15px 38px;
background: #f3f4f3;
margin-bottom: 32px;
}
.weapons-page {
padding-left: 2rem;
padding-right: 2rem;
}
@media (max-width: 767px) {
.weapons-page {
padding-left: 10px;
padding-right: 10px;
}
}
.weapon-header label {
background: #f3f4f3 !important;
}
.weapons-layout {
grid-column-gap: 1rem;
grid-row-gap: 1rem;
grid-template-rows: auto;
grid-template-columns: 18rem 1fr;
grid-auto-columns: 1fr;
margin-left: auto;
margin-right: auto;
display: grid;
align-items: flex-start;
margin-bottom: 32px;
}
.weapons-layout .filters-sidebar {
z-index: 2;
border-top-style: solid;
border-top-width: 0.0625rem;
border-top-color: #f3f4f3;
border-right-style: solid;
border-right-width: 0.0625rem;
border-right-color: #f3f4f3;
border-bottom-style: solid;
border-bottom-width: 0.0625rem;
border-bottom-color: #f3f4f3;
border-left-style: solid;
border-left-width: 0.0625rem;
border-left-color: #f3f4f3;
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
background-color: #f3f4f3;
flex-flow: column;
width: 100%;
max-height: calc(100vh - 9rem);
margin-bottom: 0;
padding: 0.5rem;
display: flex;
position: sticky;
top: 8rem;
}
.weapons-layout .filters-sidebar .gl-filters {
flex-flow: column;
align-items: stretch;
display: flex;
grid-column-gap: 1rem;
grid-row-gap: 1rem;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
border-style: solid;
border-width: 0.0625rem;
border-top-color: color-mix(in hsl, var(--color-foreground) 0%, transparent);
border-right-color: color-mix(
in hsl,
var(--color-foreground) 0%,
transparent
);
border-bottom-color: color-mix(
in hsl,
var(--color-foreground) 0%,
transparent
);
border-left-color: color-mix(in hsl, var(--color-foreground) 0%, transparent);
flex: 1;
padding: 0.5rem;
padding-bottom: 0;
transition-property: border-color;
transition-duration: 0.2s;
transition-timing-function: ease;
overflow: auto;
}
.filters-sidebar .gl-filters .filter-group {
cursor: pointer;
padding: 4px;
border: 1px solid transparent;
border-radius: 0.5rem;
position: relative;
}
.filters-sidebar .gl-filters .filter-group .filter-arrow {
position: absolute;
z-index: 999;
right: 14px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
top: 14px;
}
.filters-sidebar .gl-filters .filter-group .form_label {
background-color: #f3f4f3;
}
.filters-sidebar .filter-group .filter-toggle {
border-radius: 0.5rem;
color: color-mix(
in srgb,
var(--color-foreground) 75%,
var(--color-background)
);
border-style: solid;
border-width: 0.06rem;
border-color: color-mix(in srgb, var(--color-foreground) 15%, transparent);
background-color: #0000;
width: 100%;
min-width: auto;
height: 3rem;
min-height: 3rem;
margin-bottom: 0;
font-size: 1rem;
transition-property: border;
transition-duration: 0.2s;
transition-timing-function: ease;
padding: 0.75rem 1rem;
text-align: left;
cursor: pointer;
position: relative;
}
.filters-sidebar .filter-group .filter-toggle .filter-title {
z-index: 2;
grid-column-gap: 0.15rem;
grid-row-gap: 0.15rem;
background-color: #f3f4f3;
color: color-mix(
in srgb,
var(--color-foreground) 75%,
var(--color-background)
);
white-space: nowrap;
cursor: pointer;
padding-left: 0.25rem;
padding-right: 0.25rem;
transition: font-size 0.2s, left 0.2s, color 0.2s, top 0.2s;
display: flex;
position: absolute;
top: 1rem;
left: 0.75rem;
pointer-events: none;
margin-bottom: 0.25rem;
font-weight: 500;
}
.filters-sidebar
.filter-group.withSelectedValue
.form_field-wrapper
.form_label,
.filters-sidebar .filter-group.withSelectedValue .filter-title {
top: -0.6em;
left: 0.75rem !important;
font-size: 0.85rem;
}
.filters-sidebar
.filter-group.withSelectedValue
.form_field-wrapper
.filter-search {
padding: 0.75rem 1rem;
}
.filters-sidebar
.filter-group.withSelectedValue
.form_field-wrapper
.form_field-input-icon {
display: none;
}
.filters-sidebar
.filter-group.withSelectedValue
.form_field-wrapper
.filter-selected-values {
pointer-events: none;
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(100% - 3rem);
transition-property: opacity;
transition-duration: 0.2s;
transition-timing-function: ease;
position: absolute;
left: 1rem;
overflow: hidden;
top: 15px;
}
.filters-sidebar
.filter-group.withSelectedValue:has(input:focus-visible)
.filter-selected-values {
padding: 0;
opacity: 0;
}
.filters-sidebar
.filter-group
.filter-toggle.withSelectedValue
.filter-selected-values {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
.filters-sidebar .filter-group .filter-toggle:hover {
border-color: var(--color-primary);
}
.filters-sidebar .gl-filters .filter-group.open {
border-color: color-mix(in srgb, var(--color-foreground) 15%, transparent);
}
.filters-sidebar .gl-filters .filter-group .filter-content {
display: none;
}
.filters-sidebar .gl-filters .filter-group .filter-content ul {
display: flex;
list-style: none;
flex-direction: column;
padding: 0;
grid-column-gap: 0.25rem;
grid-row-gap: 0.25rem;
align-items: stretch;
}
.filters-sidebar .gl-filters .filter-group .filter-content ul li {
cursor: pointer;
background-color: #0000;
border-radius: 0.5rem;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
padding: 0.35rem 0.5rem;
transition-property: color, background-color;
transition-duration: 0.2s, 0.2s;
transition-timing-function: ease, ease;
display: flex;
position: relative;
font-size: 1rem;
cursor: pointer;
}
.filters-sidebar .gl-filters .filter-group .filter-content ul li:hover {
background-color: color-mix(in hsl, var(--color-foreground) 10%, transparent);
}
.filters-sidebar .gl-filters .filter-group .filter-content ul li label {
position: relative;
width: 100%;
}
.filters-sidebar .gl-filters .filter-group .filter-content ul li label * {
cursor: pointer;
width: 100%;
display: block;
}
.filters-sidebar .gl-filters .filter-group .filter-content ul li label input {
opacity: 0;
position: absolute;
left: 0;
}
.filters-sidebar .gl-filters .filter-group.open .filter-content {
display: flex;
flex-direction: column;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
}
.filters-sidebar
.gl-filters
.filter-group.open
.filter-content
ul
.filter-item.is-active {
background-color: var(--color-foreground);
color: #fff;
}
.filters-sidebar
.gl-filters
.filter-group.open
.filter-content
ul
.filter-item.disabled {
order: 1;
opacity: 0.25;
}
.filters-sidebar
.gl-filters
.filter-group.open
.filter-content
ul
.filter-item.disabled
span {
text-decoration: line-through;
pointer-events: none;
}
.filters-sidebar
.gl-filters
.filter-group
.filter-content
.filter-reset
.button {
padding: 8px;
}
.filters-sidebar .gl-filters .filter-global-reset {
z-index: 999;
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-rows: auto;
grid-template-columns: 1fr;
grid-auto-columns: 1fr;
padding: 0.5rem;
display: grid;
position: sticky;
bottom: 0;
background-color: #f3f4f3;
}
.view-results-btn { display: none; }
@media (max-width: 767px) {
.view-results-btn {
display: block;
width: 100%;
background: var(--color-primary);
color: #fff;
}
}
.listing-list-top {
display: flex;
align-items: flex-start;
gap: 24px;
width: 100%;
justify-content: space-between;
}
.active-filters {
display: flex;
gap: 0.5rem;
margin-bottom: 16px;
flex-wrap: wrap;
}
.active-filters .filter-chip {
background-color: color-mix(in hsl, var(--color-foreground) 5%, transparent);
padding: 7px 12px;
border-radius: 20px;
color: color-mix(in hsl, var(--color-foreground) 65%, transparent);
}
.active-filters .filter-chip button {
background: transparent;
border: 0;
color: var(--color-foreground);
cursor: pointer;
}
.weapons-sort-wrapper {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-bottom: 16px;
background-color: #f3f4f3;
border-radius: 4px;
padding: 6px 18px;
border-radius: 20px;
}
.weapons-sort-wrapper label {
white-space: nowrap;
}
.weapons-sort-select {
appearance: none;
-webkit-appearance: none;
background-color: transparent;
border: 0;
padding: 6px 32px 6px 12px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
min-width: 160px;
}
.weapons-sort-select:focus {
outline: 2px solid var(--color-primary, #333);
outline-offset: 2px;
}
.range-slider {
position: relative;
user-select: none;
padding: 1.5rem 0 0.5rem;
}
.slider-track {
position: relative;
height: 6px;
background: #fff;
border-radius: 3px;
margin-bottom: 2rem;
}
.slider-progress {
position: absolute;
height: 100%;
background: var(--color-foreground);
border-radius: 3px;
top: 0;
pointer-events: none;
left: 0%;
right: 0%;
}
.range-inputs-wrap {
position: absolute;
top: calc(1.5rem - 10px);
left: 0;
width: 100%;
height: 20px;
}
.range-min,
.range-max {
position: absolute;
width: 100%;
height: 20px;
top: 0;
left: 0;
-webkit-appearance: none;
appearance: none;
background: none;
border: none;
outline: none;
pointer-events: none;
}
.range-min {
z-index: 4;
}
.range-max {
z-index: 3;
}
.range-min::-webkit-slider-thumb,
.range-max::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 20px;
background: var(--color-foreground);
cursor: grab;
pointer-events: all;
box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
}
.range-min::-webkit-slider-thumb:active,
.range-max::-webkit-slider-thumb:active {
cursor: grabbing;
background: #6fb92f;
}
.range-min::-moz-range-thumb,
.range-max::-moz-range-thumb {
width: 10px;
height: 20px;
background: var(--color-foreground);
cursor: grab;
pointer-events: all;
box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
}
.range-min::-moz-range-track,
.range-max::-moz-range-track {
background: none;
border: none;
}
.range-values-display {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
font-weight: 600;
color: #333;
padding: 0 2px;
}
.filter-reset {
margin-top: 1rem;
}
.filter-reset .button {
width: 100%;
padding: 0.75rem;
text-align: center;
font-size: 0.9rem;
}
/* --------------------------- weapon listing page -------------------------- */
/* ---------------------------
My armorer listing page
-------------------------- */
.my-armorer-collection_layout {
padding-top: 2rem;
padding-bottom: 2rem;
flex-flow: column;
align-items: stretch;
display: flex;
grid-column-gap: 1rem;
grid-row-gap: 1rem;
}
.my-armorer-collection_layout .product-list_empty {
padding: 2rem;
text-align: center;
flex-flow: column;
align-items: center;
display: flex;
grid-column-gap: 1rem;
grid-row-gap: 1rem;
border-radius: 1.5rem;
background-color: #f3f4f3;
flex: 1;
}
.my-armorer-collection_layout .product-list_empty h4 {
margin-bottom: 0;
}
.my-armorer-collection_layout .products-grid_list-wrap {
z-index: 1;
width: 100%;
position: relative;
}
.my-armorer-collection_layout .products-grid_list {
grid-column-gap: 1rem;
grid-row-gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
grid-auto-columns: 1fr;
align-items: stretch;
min-height: 100%;
display: grid;
grid-template-rows: auto !important;
}
.my-armorer-collection_layout .product-grid_add-btn_component,
.section-classifieds .product-grid_add-btn_component,
.my-adverts .product-grid_add-btn_component {
grid-column-gap: 1rem;
grid-row-gap: 1rem;
border-radius: 1.5rem;
background-color: #f3f4f3;
text-align: center;
border-style: solid;
border-width: 0.0625rem;
border-color: color-mix(in hsl, var(--color-foreground) 10%, transparent);
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
min-width: 20rem;
height: 100%;
min-height: 20rem;
padding: 4rem;
transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: ease;
display: flex;
}
.my-adverts .product-grid_add-btn_component {
min-height: unset;
padding: 2rem;
width: fit-content;
margin-left: auto;
padding: 10px 20px;
border-radius: 8px;
min-width: fit-content;
}
.my-armorer-collection_layout .product-grid_add-btn_layout,
.section-classifieds .product-grid_add-btn_layout,
.my-adverts .product-grid_add-btn_layout {
flex-flow: column;
place-content: center;
align-items: center;
display: flex;
grid-column-gap: 1rem;
grid-row-gap: 1rem;
opacity: 0.5;
height: 100%;
}
.my-adverts .product-grid_add-btn_layout {
flex-direction: row;
}
.my-armorer-collection_layout .product-grid_add-btn_icon,
.section-classifieds .product-grid_add-btn_icon,
.my-adverts .product-grid_add-btn_icon {
width: 2.5rem;
height: 2.5rem;
}
.my-armorer-collection_layout .product-grid_add-btn_label,
.section-classifieds .product-grid_add-btn_label,
.my-adverts .product-grid_add-btn_label {
text-transform: uppercase;
}
.my-armorer-collection_layout .product-grid_empty-slots {
z-index: -1;
pointer-events: none;
height: 100%;
position: absolute;
inset: 0%;
}
.my-armorer-collection_layout .products-grid_list {
grid-column-gap: 1rem;
grid-row-gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
grid-auto-columns: 1fr;
align-items: stretch;
min-height: 100%;
display: grid;
grid-template-rows: auto !important;
}
.my-armorer-collection_layout .product-grid_empty-slot {
border: 0.0625rem dashed var(--color-foreground);
border-radius: 1.5rem;
background-color: #f3f4f3;
opacity: 0.2;
width: 100%;
height: 100%;
min-height: 20rem;
}
.my-armorer-collection_layout .product-grid_empty-slot:empty {
padding: 0;
}
.my-armorer-collection_layout .products-grid_item {
flex: none;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
height: 100%;
}
.my-armorer-collection_layout .products-grid_item .product-card_component {
border-radius: 1.5rem;
background-color: #f3f4f3;
grid-template-columns: 1fr;
grid-auto-columns: 1fr;
grid-template-rows: subgrid;
flex-flow: column;
grid-row: span 4;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 0.75rem;
display: flex;
position: relative;
}
.my-armorer-collection_layout .products-grid_item .product-card_thumb-wrap {
grid-column-gap: 16px;
grid-row-gap: 16px;
aspect-ratio: 16 / 9;
border-radius: 1rem;
background-color: #fff;
border: 0.06rem solid #0000001a;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
width: 100%;
position: relative;
overflow: hidden;
}
.my-armorer-collection_layout .products-grid_item .product-card_thumb-image {
object-fit: contain;
background-color: var(--color-background);
padding: 0.5rem;
width: 100%;
height: 100%;
}
.my-armorer-collection_layout .products-grid_item .product-card_details-wrap {
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
flex-flow: column;
flex: 1;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
justify-content: space-between;
align-items: stretch;
width: 100%;
padding: 0.5rem;
display: flex;
}
.my-armorer-collection_layout .products-grid_item .product-card_heading {
line-height: 1;
margin-top: 0;
margin-bottom: 0;
}
.my-armorer-collection_layout .products-grid_item .product-card_specs-wrap {
grid-column-gap: 0.25rem;
grid-row-gap: 0.25rem;
flex-flow: column;
flex: 1;
justify-content: flex-end;
align-items: stretch;
width: 100%;
margin-bottom: 0.5rem;
display: flex;
}
.my-armorer-collection_layout .products-grid_item .product-card_specs_list {
margin-top: 0;
margin-bottom: 0;
padding: 0;
list-style: none;
grid-column-gap: 0.25rem;
grid-row-gap: 0.25rem;
list-style-type: none;
flex: none;
}
.my-armorer-collection_layout .products-grid_item .product-card_specs_item {
grid-column-gap: 2rem;
grid-row-gap: 2rem;
flex-flow: row;
grid-template-rows: auto;
grid-template-columns: auto;
grid-auto-columns: 1fr;
grid-auto-flow: column;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
display: flex;
}
.my-armorer-collection_layout .products-grid_item .product-card_specs_label {
color: color-mix(
in srgb,
var(--color-foreground) 75%,
var(--color-background)
);
font-size: 0.85rem;
}
.my-armorer-collection_layout
.products-grid_item
.product-card_specs_spec-text {
text-align: right;
white-space: nowrap;
text-overflow: ellipsis;
flex: 0 auto;
max-width: 100%;
height: 1.2rem;
overflow: hidden;
color: color-mix(in srgb, var(--color-foreground) 65%, transparent);
}
.my-armorer-collection_layout .products-grid_item .product-card_button-wrap {
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
display: flex;
flex-direction: column;
}
.my-armorer-collection_layout
.products-grid_item
.product-card_specs-separator {
opacity: 0.25;
width: 100%;
}
.my-armorer-collection_layout
.products-grid_item
.product-card_button-wrap
.button {
width: 100%;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.my-armorer-collection_layout .products-grid_item .product-card_icon {
width: 16px;
}
.my-armorer-collection_layout
.products-grid_item
.product-card_button-wrap
.button:hover
svg
> * {
stroke: white;
}
/* ---- Delete Confirmation Popup ---- */
.delete-confirm-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
}
.delete-confirm-popup {
background: #fff;
border-radius: 16px;
padding: 32px 28px 28px;
width: 100%;
max-width: 560px;
position: relative;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}
.delete-confirm-close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
cursor: pointer;
padding: 0;
line-height: 0;
}
.delete-confirm-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-foreground);
margin: 0 0 28px 0;
padding-right: 40px;
}
.delete-confirm-actions {
display: flex;
gap: 16px;
}
.delete-confirm-btn {
flex: 1;
padding: 16px 20px;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
border: none;
transition: opacity 0.2s;
}
.delete-confirm-btn:hover {
opacity: 0.85;
}
.delete-confirm-btn--cancel {
background: #fff;
color: var(--color-foreground);
border: 1.5px solid var(--color-foreground);
}
.delete-confirm-btn--confirm {
background: var(--color-primary);
color: #fff;
}
.delete-confirm-btn--confirm:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ---------------------------
My armorer listing page
-------------------------- */
/* ---------------------------
Help contact form
-------------------------- */
#contactPopup {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
#contactPopup:not(.hidden) {
display: flex;
}
.contactPopup-title-wrap {
justify-content: space-between;
}
#contactPopup .popup-box {
background: #fff;
padding: 24px;
border-radius: 12px;
width: 636px;
position: relative;
}
#contactPopup .popup-box h4 {
margin-bottom: 0;
}
#contactPopup .popup-box input,
#contactPopup .popup-box textarea {
background: #fff;
border: 1px solid #295a3126;
border-radius: 8px;
}
#contactPopup .popup-box input::placeholder,
#contactPopup .popup-box textarea::placeholder,
#contactPopup .popup-box .material_filled-label span {
color: #5e8263 !important;
}
#contactPopup .popup-box .material_filled-label span.text-danger {
color: var(--color-primary) !important;
}
#contactPopup .popup-box form * {
font-family: "Paralucent Medium";
font-size: 16px !important;
}
#contactPopup .popup-box form .gfb__footer button {
padding: 14px;
font-size: 16px;
}
#contactPopup .close-btn {
position: absolute;
top: 10px;
right: 10px;
}
#contactPopup .error-msg {
color: red;
font-size: 12px;
margin-bottom: 8px;
display: block;
}
#contactPopup .success-msg {
color: green;
margin-top: 10px;
font-weight: 500;
}
/* ---------------------------
Help contact form
-------------------------- */
/* ---------------------------
Comparator style
-------------------------- */
.compare_list-wrapper {
grid-column-gap: 0rem;
grid-row-gap: 0rem;
grid-template-rows: auto;
grid-template-columns: 16rem auto;
grid-auto-columns: 1fr;
grid-auto-flow: column;
margin-left: auto;
margin-right: auto;
display: grid;
position: relative;
width: 100%;
}
.compare_list-wrapper .products-grid_list-wrap {
z-index: 1;
width: 100%;
position: relative;
}
.compare_list-wrapper .compare_list-titles {
flex: none;
justify-content: flex-end;
align-items: flex-end;
width: 100%;
padding-bottom: 12.75rem;
padding-left: 2rem;
padding-right: 1rem;
display: flex;
}
@media (min-width: 768px) and (max-width: 991px) {
.compare_list-wrapper .compare_list-titles {
padding-bottom: 17.46rem;
}
}
.private-user .compare_list-wrapper .compare_list-titles {
padding-bottom: 9.3rem;
}
@media (min-width: 768px) and (max-width: 991px) {
.private-user .compare_list-wrapper .compare_list-titles {
padding-bottom: 14rem;
}
}
.compare_list-wrapper .product-card_specs_list {
flex-flow: column;
place-content: stretch flex-start;
align-items: stretch;
display: flex;
grid-column-gap: 0.25rem;
grid-row-gap: 0.25rem;
flex: none;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
list-style-type: none;
}
.compare_list-wrapper .product-card_specs_item {
grid-column-gap: 2rem;
grid-row-gap: 2rem;
flex-flow: row;
grid-template-rows: auto;
grid-template-columns: auto;
grid-auto-columns: 1fr;
grid-auto-flow: column;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
display: flex;
border-radius: 0.5rem;
padding: 0.25rem 0.5rem;
margin: 0rem -0.5rem;
}
.compare_list-wrapper .product-card_specs_item.is-legend {
text-align: right;
text-align: right;
justify-content: flex-end;
align-items: center;
height: 1.7rem;
display: flex;
}
.compare_list-wrapper .product-card_specs_item:nth-child(even) {
background-color: color-mix(
in srgb,
var(--color-foreground) 2.5%,
transparent
);
}
.compare_list-wrapper .product-card_specs_label {
color: color-mix(
in srgb,
var(--color-foreground) 75%,
var(--color-background)
);
font-size: 0.85rem;
}
/* .compare_list-wrapper .product-card_specs_label.is-compare {
display: none;
} */
.compare_list-wrapper .compare_content-wrap {
justify-content: flex-start;
align-items: stretch;
flex-flow: row;
display: flex;
grid-column-gap: 0.75rem;
grid-row-gap: 0.75rem;
border-radius: 1rem;
width: 100%;
min-width: 38rem;
padding-right: 1rem;
overflow: hidden;
}
.compare_list-wrapper .products-grid_list {
justify-content: flex-start;
align-items: stretch;
width: 100%;
display: flex;
grid-column-gap: 0rem;
grid-row-gap: 0rem;
}
.compare_list-wrapper .products-grid_item {
width: 50%;
min-width: auto;
height: auto;
padding-left: 0.5rem;
padding-right: 0.5rem;
position: relative;
transition-property: transform;
display: block;
}
.compare_list-wrapper .product-card_component {
border-radius: 1.5rem;
background-color: #f3f4f3;
grid-template-columns: 1fr;
grid-auto-columns: 1fr;
grid-template-rows: subgrid;
flex-flow: column;
grid-row: span 4;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 0.75rem;
display: flex;
position: relative;
}
.compare_list-wrapper .product-card_thumb-wrap {
grid-column-gap: 16px;
grid-row-gap: 16px;
aspect-ratio: 16 / 9;
border-radius: 1rem;
background-color: #fff;
border: 0.06rem solid #0000001a;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
width: 100%;
position: relative;
overflow: hidden;
}
.compare_list-wrapper .product-card_thumb-image {
object-fit: contain;
background-color: var(--color-background);
padding: 0.5rem;
width: 100%;
height: 100%;
}
.compare_list-wrapper .product-card_details-wrap {
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
flex-flow: column;
flex: 1;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
justify-content: space-between;
align-items: stretch;
width: 100%;
padding: 0.5rem;
display: flex;
}
/* .compare_list-wrapper .product-card_heading {
line-height: 1;
margin-top: 0;
margin-bottom: 0;
white-space: nowrap;
text-overflow: ellipsis;
flex: 0 auto;
max-width: 100%;
overflow: hidden;
} */
.compare_list-wrapper .product-card_button-wrap {
padding-top: 8px;
}
.compare_list-wrapper .product-card_button-wrap > div {
gap: 4px;
}
.compare_list-wrapper .product-card_button-wrap a.button,
.compare_list-wrapper .product-card_button-wrap button {
display: flex !important;
align-items: center !important;
text-align: center;
justify-content: center;
padding: 12px 6px;
gap: 5px;
}
@media (min-width: 768px) {
.compare_list-wrapper .product-card_button-wrap a.button,
.compare_list-wrapper .product-card_button-wrap button {
max-height: 48px;
min-height: 48px;
}
}
.compare_list-wrapper .product-card_button-wrap button .product-card_icon {
width: 24px;
height: 24px;
}
.comparator-browse-btn {
display: inline-flex;
align-items: center;
gap: 4px;
width: 100%;
max-width: 512px;
text-align: center;
justify-content: center;
}
.compare_list-wrapper
.product-card_button-wrap
button:hover
.product-card_icon
svg
* {
fill: #fff;
}
.compare_list-wrapper
.product-card_button-wrap
button:hover
.product-card_icon.with-stroke
svg
* {
fill: unset;
stroke: #fff;
}
.comparator-section-wrap {
padding: 40px 0 80px;
}
.comparator-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 80px 20px;
color: #888;
font-size: 0.95rem;
}
.comparator-spinner {
width: 36px;
height: 36px;
border: 3px solid #e8ede9;
border-top-color: var(--color-foreground);
border-radius: 50%;
animation: cmpSpin 0.7s linear infinite;
}
@keyframes cmpSpin {
to {
transform: rotate(360deg);
}
}
.comparator-empty,
.comparator-login-prompt,
.product-list_empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 80px 20px;
text-align: center;
}
.comparator-empty h3,
.comparator-login-prompt h3,
.product-list_empty h3 {
margin: 0;
}
.comparator-browse-btn.is-secondary {
background: transparent;
color: var(--color-foreground);
border: 1px solid var(--color-foreground);
}
.comparator-browse-btn.is-secondary:hover {
background: #f0f7f1;
}
.product-card_button-wrap {
display: flex;
flex-direction: column;
gap: 8px;
}
.comparator-footer {
padding: 40px 0;
text-align: center;
border-top: 1px solid #e8ede9;
margin-top: 40px;
}
@media (max-width: 991px) {
.compare_list-titles {
width: 120px !important;
max-width: 120px !important;
}
.compare_list-wrapper {
display: flex;
gap: 10px;
overflow-x: scroll; /* force scroll */
scrollbar-width: auto; /* Firefox */
}
.compare_list-wrapper .products-grid_list {
padding-bottom: 20px;
}
/* Chrome, Edge, Safari */
.compare_list-wrapper::-webkit-scrollbar {
height: 8px;
}
.compare_list-wrapper::-webkit-scrollbar-track {
background: #eee;
}
.compare_list-wrapper::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.compare_list-wrapper::-webkit-scrollbar-thumb:hover {
background: #555;
}
}
@media (max-width: 991px) {
.product-card_specs_item.is-legend {
padding: 8px;
min-height: 40px;
}
.products-grid_item.is-compare {
min-width: 200px;
}
.product-card_specs_item {
min-height: 40px;
padding: 8px;
}
.product-card_specs_spec-text {
font-size: 0.78rem;
}
.compare_list-wrapper .product-card_button-wrap > div {
flex-direction: column;
gap: 8px;
}
}
.product-card_specs_label.is-compare {
display: none !important;
}
@media (max-width: 767px) {
.compare_list-titles {
display: none !important;
}
.product-card_specs_label.is-compare {
display: block !important;
}
}
/* ---------------------------
Comparator style
-------------------------- */
/* ==========================================
===================== AD DETAIL PAGE =====================
======================================================*/
/* ===================== LOADING / ERROR ===================== */
.ad-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 24px;
color: var(--gl-text-muted);
gap: 16px;
}
.ad-loading__spinner {
width: 36px;
height: 36px;
border: 3px solid var(--gl-border);
border-top-color: var(--color-foreground);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.ad-error {
text-align: center;
padding: 80px 24px;
color: var(--gl-text-muted);
}
/* ===================== META BAR ===================== */
.ad-meta-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid #295a3126;
}
.ad-meta-bar__left {
display: flex;
}
.ad-meta-stat {
display: flex;
align-items: center;
gap: 6px;
padding: 14px;
}
.ad-meta-bar__left .ad-meta-stat:not(:last-child) {
border-right: 1px solid #295a3126;
}
.ad-meta-stat svg {
opacity: 0.7;
}
.ad-btn-share {
display: flex;
align-items: center;
gap: 7px;
border: 1px solid var(--gl-border);
border-radius: 8px;
padding: 8px 16px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
.ad-btn-share svg {
min-width: 20px;
}
.ad-btn-share:hover svg path {
fill: #fff;
}
/* ===================== LAYOUT ===================== */
.ad-detail-layout {
display: grid;
/* minmax(0, 1fr): grid items default to min-width:auto same as flex
items — a bare 1fr column still won't shrink below its content's
natural size. This is why fixing .ad-thumb-track alone didn't help:
this outer grid was already handing .ad-gallery more than the
viewport's width to lay out in, so the track never even saw an
overflow to scroll — the page was overflowing one level up instead. */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 36px;
padding-bottom: 24px;
}
@media (max-width: 991px) {
.ad-detail-layout {
grid-template-columns: 1fr;
}
}
/* ===================== GALLERY ===================== */
.ad-gallery {
display: flex;
flex-direction: column;
gap: 12px;
}
.ad-gallery__main {
background: #f3f3f3;
border-radius: 0.5rem;
border: 1px solid #295a3126;
overflow: hidden;
aspect-ratio: 4/3;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 991px) {
.ad-gallery__main {
aspect-ratio: 3/2;
}
}
.ad-gallery__main img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 16px;
box-sizing: border-box;
}
.ad-gallery__thumbs {
display: flex;
align-items: center;
gap: 8px;
}
.ad-thumb-track {
display: flex;
gap: 8px;
flex: 1;
/* min-width:0 lets this flex item actually shrink below its thumbnails'
combined width (flex items default to min-width:auto, i.e. their
content's full size, which otherwise forces the whole gallery — and
the page — wider than the viewport on mobile). With it in place,
overflow-x:auto turns any overflow into a proper swipeable strip
instead of the page overflowing horizontally. */
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/* `safe` centers when everything fits, and falls back to start-aligned
the moment content would overflow — so a few thumbnails stay centered,
and many thumbnails start at the first one instead of pushing it out
of view. One rule, no JS needed. */
justify-content: safe center;
}
.ad-thumb-item {
width: 80px;
height: 64px;
border-radius: 6px;
border: 2px solid transparent;
overflow: hidden;
cursor: pointer;
flex-shrink: 0;
background: var(--color-background);
transition: border-color 0.2s;
}
.ad-thumb-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ad-thumb-item.active,
.ad-thumb-item:hover {
border-color: var(--color-foreground);
}
.ad-thumb-nav {
background: var(--color-background);
border: 1px solid var(--color-foreground);
border-radius: 6px;
width: 32px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 0.2s;
}
.ad-thumb-nav:hover {
background: var(--color-foreground);
color: white;
}
.ad-thumb-nav:hover svg {
stroke: white;
}
/* ===================== AD INFO ===================== */
.ad-info-name-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid #295a3126;
}
/* Three-line ad title. Lines 1 and 2 (name+barrel, caliber) share a size;
line 3 (type // sub-type) is the smaller supporting line.
Explicit sizes because lines 2 and 3 are now, not
— without them
they'd inherit body copy and lines 1/2 would stop matching. */
.ad-info__title,
.ad-info__caliber,
.ad-info__subtitle {
margin: 0;
}
.ad-info__title,
.ad-info__caliber {
overflow-wrap: break-word;
}
.ad-info__subtitle {
font-size: 14px;
line-height: 1.45;
font-weight: 400;
color: #5d8263;
overflow-wrap: break-word;
}
.ad-info {
display: flex;
flex-direction: column;
gap: 0;
padding-top: 4px;
}
/* ===================== STATS GRID ===================== */
.ad-stats-grid {
display: grid;
/* minmax(0, 1fr), not bare 1fr: a plain 1fr column still won't shrink
below its cells' longest unbreakable word (e.g. "Wholesaler", a date),
forcing the whole grid — and the page — wider on narrow screens. The
explicit 0 minimum, paired with overflow-wrap below, is what actually
lets these columns shrink to fit. */
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 20px;
overflow: hidden;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid #295a3126;
}
.ad-stat-cell {
padding: 12px 14px;
border-right: 1px solid #295a3126;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
text-align: center;
}
.ad-stat-cell:nth-child(3n) {
border-right: none;
}
.ad-stat-cell__label {
color: #5d8263;
letter-spacing: 0.04em;
}
.ad-stat-cell__value {
overflow-wrap: break-word;
}
/* ── Ad status banner ──────────────────────────────────────────────────────
Sits at the top of the ad information column. "Sold" is public; the other
three only ever render for the ad's owner or an admin, because canViewAd()
refuses everyone else before the page is drawn. */
.ad-state-banner {
padding: 10px 14px;
margin-bottom: 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
/* Sold is a normal outcome, not a warning — neutral grey, matching the SOLD
badge on the cards. */
.ad-state-banner--sold {
background: #f3f4f6;
border: 1px solid #d1d5db;
color: #374151;
}
/* Under review: informational. */
.ad-state-banner--pending {
background: #fff7ed;
border: 1px solid #fed7aa;
color: #9a3412;
}
/* Rejected: the one the owner needs to actually notice. */
.ad-state-banner--rejected {
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
}
.ad-state-banner--archived {
background: #f3f4f6;
border: 1px solid #d1d5db;
color: #4b5563;
}
/* The blocked screen already has its layout above (line ~3902); it only needs
room for the new "back to Clasificados" button, so this adds spacing rather
than a second, competing .ad-error rule. */
.ad-error .button {
display: inline-block;
margin-top: 16px;
}
/* ===================== SELLER ROW ===================== */
.ad-seller-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid #295a3126;
}
.ad-seller-info {
display: flex;
align-items: center;
gap: 12px;
}
.ad-seller-info svg {
width: 56px;
height: 56px;
border-radius: 100%;
}
.ad-seller-info__col {
display: flex;
flex-direction: column;
gap: 3px;
}
.ad-seller-info__label {
color: #5d8263;
}
.ad-seller-info__value {
}
.ad-contact-btns {
display: flex;
gap: 8px;
}
.ad-btn-phone,
.ad-btn-contact {
display: flex;
align-items: center;
gap: 6px;
}
.ad-seller-type {
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid #295a3126;
}
.ad-seller-type strong {
color: var(--gl-text);
}
.ad-divider {
border: none;
border-top: 1px solid #295a3126;
margin: 0 0 18px;
}
/* ===================== DESCRIPTION ===================== */
.ad-description {
padding: 24px;
background: rgb(255, 255, 255);
border: 1px solid rgb(232, 234, 230);
border-radius: 0.5rem;
}
.ad-description__heading {
color: var(--color-foreground);
margin: 0 0 12px;
text-transform: capitalize;
}
.ad-description__body {
white-space: pre-line;
}
.ad-extra-details {
margin-top: 16px;
}
.ad-extra-details__heading {
margin: 0 0 8px;
}
.ad-extra-details p {
color: #5d8263;
}
.ad-product-link {
margin-top: 20px;
}
.ad-btn-catalogue {
display: inline-block;
padding: 10px 18px;
background: var(--color-foreground);
color: white;
border-radius: 8px;
font-size: 13px;
text-decoration: none;
transition: background 0.2s;
}
.ad-btn-catalogue:hover {
background: var(--gl-green-light);
}
/* ===================== SAFETY SECTION ===================== */
.ad-safety-section {
border-top: 1px solid var(--gl-border);
padding: 40px 0;
}
.ad-safety-section__heading {
margin: 0 0 18px;
}
.ad-safety-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.ad-safety-list li {
color: #5d8263;
padding-left: 20px;
position: relative;
}
.ad-safety-list li::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 12px;
height: 11px;
border-radius: 42%;
background: #5d8263;
}
/* ===================== RELATED ADS ===================== */
.ad-related-section {
padding: 40px 0 60px;
}
.ad-related-section__heading {
margin: 0 0 20px;
}
.ad-related-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.ad-related-card {
background: #f3f4f3;
border-radius: 8px;
display: grid;
/* img, info, then one track per __meta block (City/Price/Availability/Status),
plus the button. Deliberately the SAME track sizes as the Clasificados /
Mis anuncios / Where to Buy card, which resolves to a 180px thumbnail, a
minmax(0, 3.4fr) info column, four equal stat columns and an auto button
— this card keeps its own markup, so the sizes have to be restated here
rather than inherited. Keep the two in step if either changes. */
grid-template-columns: 180px minmax(0, 3.4fr) 1fr 1fr 1fr 1fr auto;
align-items: center;
gap: 1.25rem;
padding: 14px 16px;
transition: box-shadow 0.2s;
}
.ad-related-card__img {
width: 180px;
height: 80px;
border-radius: 6px;
overflow: hidden;
background: var(--color-background);
flex-shrink: 0;
/* Anchor for .clf-sold-overlay, which is position:absolute. Without it the
SOLD badge would position against the page, not the thumbnail. */
position: relative;
}
/* The shared overlay is sized for the wider Clasificados card. This thumbnail
is only 180px, so it takes the full width here instead. */
.ad-related-card__img .clf-sold-overlay {
width: 100%;
border-radius: 6px;
}
.ad-related-card__img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ad-related-card__info {
display: flex;
flex-direction: column;
gap: 3px;
}
.ad-related-card__seller {
color: var(--gl-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ad-related-card__meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.ad-related-card__btn {
margin-left: auto;
}
/* "Show more" — appends the next 6 related ads below the current list. */
.ad-related-more-wrap {
display: flex;
justify-content: center;
margin-top: 20px;
}
/* ===================== MODAL ===================== */
.ad-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.ad-modal {
background: var(--color-background);
border-radius: 16px;
padding: 28px 28px 24px;
width: 100%;
max-width: 512px;
position: relative;
max-height: 90vh;
overflow-y: auto;
}
.ad-modal__close {
position: absolute;
top: 16px;
right: 16px;
border: none;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
.ad-modal__title {
margin: 0 0 20px;
}
.ad-modal__seller {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
}
.ad-modal__seller-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.ad-modal__seller-avatar svg {
width: 52px;
height: 52px;
}
.ad-modal__seller-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ad-modal__seller-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.ad-modal__seller-label {
color: var(--gl-text-muted);
}
.ad-modal__seller-badge {
display: inline-block;
background: #d4e7cd;
color: var(--color-foreground);
padding: 4px;
border-radius: 6px;
margin-bottom: 16px;
border: 1px solid #d4e7cd;
}
.ad-modal__prefill {
border: 1px solid #5e826326;
border-radius: 8px;
padding: 8px;
color: #295a31bf;
line-height: 1.65;
margin-bottom: 16px;
white-space: pre-line;
}
.ad-modal__form {
display: flex;
flex-direction: column;
gap: 12px;
}
.ad-form-group {
display: flex;
flex-direction: column;
gap: 5px;
position: relative;
}
.ad-form-label {
color: #5e8263;
position: absolute;
background: #fbfbfb;
padding: 2px;
top: -0.7em;
left: 0.75rem !important;
font-size: 12px;
}
.ad-form-input {
border: 1px solid #295a3126;
border-radius: 8px;
padding: 11px 14px;
color: var(--color-foreground);
background: var(--color-background);
outline: none;
transition: border-color 0.2s;
}
.ad-form-input::placeholder {
color: var(--color-foreground);
}
.ad-form-input:focus {
border-color: var(--color-foreground);
}
.ad-form-check {
display: flex;
align-items: center;
gap: 10px;
color: var(--gl-text);
}
.ad-form-check input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--color-foreground);
cursor: pointer;
}
.ad-form-error {
color: #dc2626;
padding: 8px 12px;
background: #fef2f2;
border-radius: 6px;
border: 1px solid #fecaca;
}
.ad-btn-send {
background: var(--gl-orange);
color: white;
border: none;
border-radius: 10px;
padding: 14px;
cursor: pointer;
transition: background 0.2s;
margin-top: 4px;
font-family: inherit;
}
.ad-btn-send:hover {
background: var(--gl-orange-dark);
}
.ad-btn-send:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.ad-modal__phone-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
color: var(--color-foreground);
padding: 10px 14px;
background: #e8f5eb;
border-radius: 8px;
border: 1px solid #c3dfc8;
}
.ad-modal__see-phone-btn {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
background: none;
border: none;
color: var(--color-foreground);
cursor: pointer;
padding: 0;
font-family: inherit;
}
.ad-modal__see-phone-btn:hover {
text-decoration: underline;
}
.ad-modal__success {
text-align: center;
padding: 24px 0 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.ad-modal__success p {
color: var(--gl-text);
line-height: 1.6;
}
/* ===================== SHARE TOAST ===================== */
.ad-share-toast {
position: fixed;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
background: var(--gl-text);
color: var(--color-background);
padding: 12px 22px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 8px;
z-index: 99999;
animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateX(-50%) translateY(10px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
.ad-related-card {
grid-template-columns: 1fr;
}
.ad-related-card__img {
width: 100%;
height: 200px;
}
}
/* ==========================================
===================== AD DETAIL PAGE =====================
======================================================*/
/* ======================================================================================= */
.classifieds-heading {
margin-bottom: 18px;
}
.classifieds-heading-wrapper {
background: #f3f4f4;
padding: 38px 15px 38px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin-bottom: 2rem;
}
.classifieds-heading-wrapper .form_label {
background-color: #f3f4f3 !important;
}
.section-classifieds .product-grid_add-btn_component {
min-height: unset;
padding: 2rem;
width: fit-content;
margin-left: auto;
padding: 10px 20px;
border-radius: 8px;
min-width: fit-content;
}
.section-classifieds .product-grid_add-btn_layout {
flex-flow: row;
}
.section-classifieds .ad-card_component-data,
.product-detail-page .section_all-ads .ad-card_component-data {
padding: 0 !important;
}
.section-classifieds .ad-card_component-data-top,
.product-detail-page .section_all-ads .ad-card_component-data-top {
grid-column-gap: 2rem;
grid-row-gap: 2rem;
background-color: #f3f4f3;
grid-template-rows: auto;
grid-auto-columns: 1fr;
grid-auto-flow: column;
justify-content: space-between;
place-items: center stretch;
height: 100%;
padding: 0.5rem 0.5rem;
display: grid;
grid-template-columns: 2fr;
}
.ctm-max-width rte-formatter.spacing-style.text-block {
max-width: 700px;
text-align: center;
}
.ctm-max-width .spacing-style.text-block.h2 {
max-width: 620px;
text-align: center;
}
#settingsToggle:hover svg path {
fill: var(--color-primary);
}
/* ==========================================
===================== AD-CONSOL PAGE =====================
======================================================*/
/* ==============AD-CONSOL table============================================================= */
.img-wrapper {
text-align: center;
}
.wapon-name {
min-width: 250px;
max-width: 250px;
}
.seller-name {
max-width: 120px;
word-wrap: break-word;
}
.city-name {
max-width: 90px;
min-width: 90px;
}
.wapon-price {
min-width: 75px;
max-width: 75px;
}
@media (min-width: 992px) {
.active-filters-desktop {
display: block;
}
.active-filters-tablet {
display: none;
}
}
.firearms header .home-product-search-wrapper {
display: none;
}
/* ==============AD-CONSOL table============================================================= */
/* ============== General Responsive ============================================================= */
.active-filters-tablet {
display: none;
}
.filter-button-wrapper {
display: flex;
align-items: center;
gap: 8px;
padding: 16px;
background: #f3f4f3;
border-radius: 8px;
cursor: pointer;
}
@media (max-width: 991px) {
.active-filters-tablet {
display: block;
}
.active-filters .filter-chip {
font-size: 14px;
}
}
.mobile-filters-sidebar-header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding-bottom: 8px;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
}
.mobile-filters-sidebar-header h4 {
margin-bottom: 0;
}
.resource-list__item .product-badges {
display: none !important;
}
@media (max-width: 767px) {
h1,
.h1 {
font-size: 2.5rem !important;
}
h2,
.h2 {
font-size: 2rem !important;
}
body {
font-size: 1rem;
}
.active-filters .filter-chip {
font-size: 14px;
}
.weapons-sort-wrapper {
margin-bottom: 0;
}
.FAQ .accordion .details .details__header {
font-size: 16px;
}
.FAQ .accordion .details .details-content .text-block {
font-size: 14px;
}
.text-size-medium {
font-size: 1rem;
}
.weapon-header {
padding: 40px 15px;
}
.weapons-layout {
grid-template-columns: 1fr;
}
.weapons-layout .filters-sidebar {
position: fixed;
width: 100%;
left: 0;
top: 0;
height: 100vh;
background: #f3f4f4;
z-index: 999;
max-height: 100dvh;
padding-top: 24px;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.weapons-layout .filters-sidebar.open-sidebar {
transform: translateX(0);
}
.weapons-sort-wrapper label {
display: none;
}
/* .filters-sidebar .gl-filters .filter-global-reset {
position: relative;
} */
.weapon-grid {
grid-template-columns: 1fr;
min-height: 100%;
gap: 12px;
flex-direction: column-reverse;
display: flex;
}
.weapon-image-wrapper {
width: 100%;
}
.product-options_buttons-sticky {
position: relative;
}
.tech-grid {
grid-template-columns: 1fr;
}
.product-recommendations .resource-list--grid,
.featured-blog-posts .resource-list--grid,
.related-blogs .resource-list--grid {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
overflow-x: auto;
padding-bottom: 10px;
}
.product-recommendations .resource-list--grid .resource-list__item,
.featured-blog-posts .resource-list--grid .resource-list__item,
.related-blogs .resource-list--grid .resource-list__item {
min-width: 94%;
}
.product-detail-page section {
overflow: hidden;
}
.weapon-config .product-options_table .product-table_row {
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
}
.ad-meta-bar {
gap: 9px;
}
.ad-meta-stat {
padding: 7px;
font-size: 14px;
}
.ad-meta-bar__left {
}
.ad-meta-bar__right {
width: fit-content;
display: flex;
justify-content: flex-end;
}
.ad-btn-share {
padding: 0.5rem 0.75rem !important;
}
.ad-stats-grid {
gap: 10px;
grid-template-columns: repeat(2, 1fr);
}
.ad-stat-cell {
border: 0;
border-bottom: 1px solid #295a3126;
}
.ad-stat-cell:nth-last-child(-n+2) {
border-bottom: none;
}
.listing-list-top {
flex-flow: row wrap;
}
.active-filters-desktop {
order: 3;
width: 100%;
}
}
#comparator-products-list .is-add-more-card {
width: 50%;
min-width: auto;
height: auto;
position: relative;
grid-column-gap: 1rem;
grid-row-gap: 1rem;
border-radius: 1.5rem;
text-align: center;
border-style: solid;
border-width: 0.0625rem;
border-color: color-mix(in hsl, var(--color-foreground) 10%, transparent);
flex-flow: column;
justify-content: flex-start;
align-items: center;
padding: 4rem;
transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: ease;
display: flex;
}
#comparator-products-list .is-add-more-card .product-grid_add-btn_icon {
width: 2.5rem;
height: 2.5rem;
}
#comparator-products-list .is-add-more-card .product-grid_add-btn_layout {
flex-flow: column;
place-content: center;
align-items: center;
display: flex;
grid-column-gap: 1rem;
grid-row-gap: 1rem;
opacity: 0.5;
height: 100%;
}
@media (max-width: 767px) {
.ask-for-advice > .border-style > .mobile-column {
flex-direction: column-reverse !important;
}
.product-grid_empty-slots {
display: none;
}
.ad-related-list {
flex-direction: row;
flex-wrap: nowrap;
overflow: hidden;
overflow-x: auto;
padding-bottom: 15px;
}
.ad-related-card {
min-width: 90%;
}
.ad-related-card__meta {
flex-direction: row;
justify-content: space-between;
gap: 10px;
}
.ad-related-card__btn {
width: 100%;
}
.ad-detail-layout {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.ad-seller-row {
flex-direction: column;
align-items: flex-start;
}
/* The mobile-only bottom-fixed version of #ad-contact-btns that used to
live here has been replaced by .ad-sticky-cta, which carries identity and
price alongside the buttons and runs at every breakpoint. The seller-row
buttons now stay in the seller row on mobile too, stacked full-width. */
.ad-contact-btns {
width: 100%;
}
.ad-contact-btns .button {
flex: 1 1 0;
width: auto;
justify-content: center;
}
.blog-detail-wrapper {
grid-template-columns: 1;
gap: 12px;
display: flex;
flex-direction: column-reverse;
}
.product-card_button-wrap .flex {
flex-direction: column;
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
}
}
/* ===================== STICKY AD CTA STRIP =====================
Identity + price + actions, fixed to the bottom of the viewport at every
breakpoint. Replaces the mobile-only button bar that used to fix
#ad-contact-btns itself; those buttons stay in the seller row now, and the
ones in here are mirrors that forward their clicks (see setupStickyCta).
z-index 500 is deliberately below the contact modal (9999) and the share
toast (99999) - the strip opens the modal, so it must never sit over it. */
.ad-sticky-cta {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 500;
background: var(--color-background, #fff);
border-top: 1px solid #295a3126;
box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.09);
/* Clears the iOS home indicator, which would otherwise sit over the
buttons on an iPhone. */
padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Added by JS once the ad has actually rendered - an empty strip showing
em-dashes while the fetch is in flight is worse than no strip. */
.ad-sticky-cta.is-visible {
display: block;
}
/* .container supplies the width and side padding, so the thumbnail lines up
with the gallery above it. Two-class selector so the vertical padding wins
over .container's `padding: 0 32px` regardless of stylesheet order. */
.ad-sticky-cta .ad-sticky-cta__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-block: 10px;
}
.ad-sticky-cta__identity {
display: flex;
align-items: center;
gap: 12px;
/* min-width:0 is what actually lets the title ellipsis - without it the
flex item refuses to shrink below its text's intrinsic width and pushes
the price and buttons off the right edge. */
min-width: 0;
flex: 1 1 auto;
}
.ad-sticky-cta__thumb {
width: 48px;
height: 48px;
flex: none;
border-radius: 6px;
object-fit: contain;
background: #f3f4f3;
}
.ad-sticky-cta__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ad-sticky-cta__title,
.ad-sticky-cta__meta {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ad-sticky-cta__title {
font-size: 15px;
font-weight: 500;
line-height: 1.35;
color: var(--color-foreground, #295a31);
}
.ad-sticky-cta__meta {
font-size: 12.5px;
line-height: 1.35;
color: #5d8263;
}
.ad-sticky-cta__actions {
display: flex;
align-items: center;
gap: 16px;
flex: none;
}
.ad-sticky-cta__price {
font-size: 24px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
color: var(--color-foreground, #295a31);
}
.ad-sticky-cta__btns {
display: flex;
align-items: center;
gap: 8px;
}
.ad-sticky-cta__btns .button {
white-space: nowrap;
}
.ad-sticky-cta__btns .button svg g path,
.ad-btn-contact svg g path {
fill: #fff;
}
/* Reserve room for the strip so it can't cover the footer or the last row of
related ads. On , not .ad-detail-content: the strip overlaps whatever
sits at the bottom of the document, and the footer is outside that element.
--ad-sticky-h is measured from the real strip in JS, so a taller strip (the
longer English button labels, a wrapped line) still gets exact clearance. */
body.has-ad-sticky-cta {
padding-bottom: var(--ad-sticky-h, 88px);
}
@media (max-width: 991px) {
.ad-sticky-cta__price {
font-size: 18px;
}
.ad-sticky-cta .ad-sticky-cta__inner {
gap: 12px;
}
}
@media (max-width: 767px) {
/* TWO rows on phones, not three:
row 1 thumb + title + meta
row 2 price (left) + action button(s) (right)
display:contents dissolves .ad-sticky-cta__actions so the price and the
button group become direct flex children of the row and can be placed
independently. */
.ad-sticky-cta .ad-sticky-cta__inner {
flex-wrap: wrap;
gap: 6px 12px;
padding-block: 8px 10px;
}
.ad-sticky-cta__actions {
display: contents;
}
/* flex-basis 100%, not auto: a wrapping flex container picks its line
breaks from each item's HYPOTHETICAL size, before any shrinking happens,
so an identity block sized by its own long title shoved the price onto a
line of its own and made the strip three rows tall. Claiming the whole
first row outright is deterministic instead of depending on title
length. */
.ad-sticky-cta__identity {
flex: 1 1 100%;
min-width: 0;
}
.ad-sticky-cta__thumb {
width: 40px;
height: 40px;
}
.ad-sticky-cta__title {
font-size: 14px;
}
.ad-sticky-cta__meta {
font-size: 12px;
}
/* Row two: price takes the slack, buttons hug the right edge. */
.ad-sticky-cta__price {
flex: 1 1 auto;
font-size: 24px;
}
.ad-sticky-cta__btns {
flex: 0 0 auto;
gap: 8px;
}
.ad-sticky-cta__btns .button {
flex: 0 0 auto;
min-width: 0;
justify-content: center;
}
/* BOTH buttons keep their labels on mobile. Checked at 365px: the pair
fits beside the price with room to spare, so collapsing them to bare
icons traded a real label ("Ver teléfono") for a guessable pictogram and
bought nothing. Only the sizing tightens.
.is-single / .is-dual are set in setupStickyCta, because CSS can't count
which siblings JS has hidden. */
.ad-sticky-cta__btns.is-dual .button {
font-size: 13px;
padding-inline: 10px;
gap: 5px;
}
.ad-sticky-cta__btns.is-dual .button svg {
flex: none;
width: 18px;
height: 18px;
}
/* One button (this seller published no phone): it has the row to itself, so
give the label normal breathing room. */
.ad-sticky-cta__btns.is-single .button {
padding-inline: 18px;
}
}
/* Narrow phones (380px and under): tighten the buttons, keep every label.
Icons stay — they still fit at 365px, which is where this was checked. */
@media (max-width: 380px) {
.ad-sticky-cta__price {
font-size: 18px;
}
.ad-sticky-cta__btns.is-single .button {
font-size: 13px;
padding-inline: 12px;
}
.ad-sticky-cta__btns.is-dual .button {
font-size: 12.5px;
padding-inline: 8px;
}
}
/* Last resort, below ~340px (original iPhone SE and narrower): the icons go
and the words stay, because the words are what identify the buttons. Even
if this still isn't enough, nothing overflows — .ad-sticky-cta__btns is a
flex item in a wrapping row, so it drops to a line of its own rather than
pushing the strip sideways. */
@media (max-width: 340px) {
.ad-sticky-cta__btns .button svg {
display: none;
}
.ad-sticky-cta__btns.is-dual .button {
font-size: 12px;
gap: 0;
}
.ad-sticky-cta__price {
font-size: 16px;
}
}
/* ============== General Responsive ============================================================= */
#main[data-template="blog"] .blog-view-all {
display: none;
}
/* ── Pagination ── */
.clf-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 24px 0 8px;
}
.clf-page-btn {
width: 36px;
height: 36px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s;
}
.clf-page-btn:hover {
background: #295a31;
color: white;
border-color: #295a31;
}
.clf-page-btn:hover svg {
stroke: white;
}
.clf-page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.clf-page-numbers {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.clf-page-num {
width: 36px;
height: 36px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
font-family: inherit;
}
.clf-page-num:hover {
border-color: #295a31;
color: #295a31;
}
.clf-page-num.active {
background: #295a31;
color: white;
border-color: #295a31;
}
.clf-page-dots {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #9ca3af;
}
/* ── Search ── */
.classifieds-search-input {
width: 100%;
padding: 12px 16px;
border: 1px solid #e8ede9;
border-radius: 8px;
font-size: 1rem;
outline: none;
transition: border-color 0.2s;
background: #f3f4f3;
}
.classifieds-search-input:focus {
border-color: #295a31;
background: #fff;
}
/* ── Toolbar ── */
.classifieds-toolbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.classifieds-filters {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.classifieds-filter-label {
font-size: 14px;
white-space: nowrap;
}
.clf-apply-btn {
padding: 7px 10px !important;
font-size: 14px;
}
.clf-reset-btn {
font-size: 14px;
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
color: #295a31;
}
/* ── "More filters" toggle + collapsible extra filters ──
.clf-extra items and .clf-row-break are plain flow siblings inside
.filter-tabs (not a wrapping container) so that trailing items — Reset,
Apply — naturally continue on whichever row is currently visible instead
of being pushed to a forced new row.
Visibility is toggled via the `hidden` attribute (in JS) rather than a
class, so the shown state falls back to .clf-dropdown's own display rules
(incl. the mobile-specific ones) instead of fighting them on specificity. ── */
.clf-more-toggle {
font-weight: 500;
}
/* ── Reset button ──
One trigger, .clf-reset-inline, sitting inside .filter-tabs: inline with
the last filter row on desktop, pinned to the bottom of the drawer on
mobile (see the AD LISTING UI block at the end of this file).
There used to be a second, .clf-reset-outside, parked outside the drawer
for mobile — it read as a link floating loose under the toolbar. ── */
.clf-reset-inline {
display: none;
}
/* ── 70/30 filters/sort split (desktop only — mobile keeps its own layout) ── */
@media (min-width: 769px) {
.classifieds-filters {
flex: 1 1 75%;
max-width: 74%;
/* Keep the "Filtrar por:" label and .filter-tabs on the same line — if
filter-tabs doesn't fit beside the label, don't drop the WHOLE block
to its own row; let filter-tabs shrink and wrap its own chips
internally instead (see .filter-tabs rule below). */
flex-wrap: nowrap;
}
.classifieds-sort {
flex: 1 1 25%;
max-width: 24%;
justify-content: flex-end;
}
.filter-tabs {
flex: 1 1 auto;
min-width: 0;
}
/* When not hidden, this empty spacer claims the full remaining row width,
forcing the next visible item (the first .clf-extra) onto a new line —
Reset/Apply after it then continue normally on THAT line since nothing
forces another break. */
.clf-row-break:not([hidden]) {
flex-basis: 100%;
}
.clf-reset-inline {
display: inline-block;
}
}
/* ── Filter dropdowns ── */
.clf-dropdown {
position: relative;
}
.clf-dropdown-toggle {
display: flex;
align-items: center;
gap: 20px;
padding: 8px 12px;
border: 1px solid #e8ede9;
border-radius: 8px;
background: #f3f4f3;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
transition: border-color 0.2s, background 0.2s;
color: var(--color-foreground);
}
.clf-dropdown-toggle:hover {
border-color: #295a31;
background: #fff;
}
.clf-dropdown-toggle.clf-active {
border-color: #295a31;
background: #fff;
color: #295a31;
font-weight: 600;
}
.clf-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
background: #fff;
border: 1px solid #e8ede9;
border-radius: 12px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
z-index: 200;
min-width: 200px;
padding: 8px;
}
.clf-dropdown.open .clf-dropdown-menu {
display: block;
}
.clf-dropdown-search {
width: 100%;
padding: 8px 10px;
border: 1px solid #e8ede9;
border-radius: 6px;
font-size: 0.82rem;
margin-bottom: 6px;
outline: none;
background: #f3f4f3;
}
.clf-dropdown-search:focus {
border-color: #295a31;
background: #fff;
}
.clf-dropdown-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 220px;
overflow-y: auto;
}
.clf-option {
padding: 8px 10px;
font-size: 14px;
cursor: pointer;
border-radius: 6px;
transition: background 0.15s;
color: var(--color-foreground);
}
.clf-option:hover {
background: #f3f4f3;
}
.clf-option.is-selected {
background: #f3f4f3;
color: #295a31;
font-weight: 600;
}
/* ── Sort ── */
.classifieds-sort {
display: flex;
align-items: center;
gap: 8px;
}
.clf-sort-label {
font-size: 14px;
color: #5e8263;
font-weight: 500;
}
.clf-sort-select {
padding: 8px 12px;
border: 1px solid #e8ede9;
border-radius: 8px;
font-size: 14px;
background: #f3f4f3;
cursor: pointer;
outline: none;
color: var(--color-foreground);
}
.clf-sort-select:focus {
border-color: #295a31;
}
/* ── Results count ── */
.classifieds-results-count {
font-size: 0.82rem;
color: #5e8263;
margin-bottom: 8px;
font-weight: 500;
}
/* ── Loading / Empty ── */
.classifieds-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 60px 0;
color: #888;
}
.classifieds-empty {
display: none;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 60px 0;
text-align: center;
color: #888;
}
/* ── Sold ── */
.clf-sold {
opacity: 0.65;
pointer-events: none;
cursor: not-allowed;
user-select: none;
}
.clf-sold-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
width: calc(100% - 30px);
left: 0;
right: 0;
margin: 0 auto;
}
.clf-sold-badge {
background: #374151;
color: #fff;
font-size: 0.68rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ── Seller alias ── */
.ad-card_useralias {
font-size: 0.75rem;
color: #5e8263;
text-transform: uppercase;
margin-top: 2px;
display: block;
}
/* ── Card overrides ── */
.clf-card .ad-card_component {
grid-template-columns: 180px 1fr auto;
padding: 8px;
gap: 0;
}
.clf-card .ad-card_logo-wrap {
width: 180px;
min-height: 80px;
max-height: 80px;
}
.clf-card .gun-slide,
.clf-card .gun-slide img,
.clf-card .ad-single-image {
height: 80px;
min-height: 80px;
max-height: 80px;
object-fit: contain;
}
@media (max-width: 768px) {
.classifieds-toolbar {
flex-direction: column;
align-items: flex-start;
}
.classifieds-filters {
gap: 6px;
}
.clf-card .ad-card_component {
grid-template-columns: 1fr;
}
.clf-card .ad-card_logo-wrap {
width: 100%;
}
.clf-card .gun-slide,
.clf-card .gun-slide img,
.clf-card .ad-single-image {
height: 200px;
}
.clf-card .ad-card_button-wrap {
border-left: none;
border-top: 1px solid #f0f0f0;
flex-direction: row;
flex-wrap: wrap;
}
}
/* Additional Content */
.additional-content-section{
padding:60px 0;
}
.additional-content-section h2{
margin-bottom:30px;
}
.additional-content-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}
.additional-content-card{
display:block;
text-decoration:none;
color:inherit;
}
.additional-content-image{
aspect-ratio:16/9;
overflow:hidden;
border-radius:12px;
background:#f5f5f5;
}
.additional-content-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.additional-content-placeholder{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
background:#ececec;
color:#777;
font-size:14px;
}
.additional-content-title{
margin-top:14px;
font-size:16px;
font-weight:600;
line-height:1.4;
}
.additional-content-card:hover img{
transform:scale(1.04);
transition:.3s;
}
.additional-content-image img{
transition:.3s;
}
@media (max-width:990px){
.additional-content-grid{
display:flex;
overflow-x:auto;
gap:16px;
scroll-snap-type:x mandatory;
padding-bottom:10px;
}
.additional-content-card{
min-width:320px;
flex:0 0 320px;
scroll-snap-align:start;
}
}
/* Additional Content */
.ad-form-cooldown { margin-top:8px;font-size:0.8rem;color:#6b7280;text-align:center; }
.ad-btn-send:disabled { opacity:0.55;cursor:not-allowed; }
.ad-modal__success-title { font-weight:600;color:#295A31;margin:8px 0 4px; }
.ad-modal__success-note { font-size:0.875rem;color:#6b7280;margin:0; }
.ad-modal__success-cooldown { font-size:0.8rem;color:#9ca3af;margin-top:8px; }
.ad-modal__form.is-cooling > * {
opacity: 0.5;
pointer-events: none; /* blocks clicks/focus on every child */
user-select: none;
transition: opacity 0.2s ease;
}
/* keep the cooldown notice fully readable */
.ad-modal__form.is-cooling .ad-form-cooldown {
opacity: 1;
pointer-events: auto;
position: relative;
z-index: 9;
}
.ad-form-cooldown { margin-top:8px;font-size:0.8rem;color:#295A31;text-align:center; }
/* ==========================================
=========== AD LISTING UI (Clasificados + Mis anuncios) ===========
Shared by section.classifieds.liquid and section.my-adverts.liquid, which
render the same card and the same filter bar. See snippets/gl-ad-meta.liquid
for the JS half.
======================================================*/
/* ── Active filter toggles: "Label: Value x" ──────────────────────────────
The value alone ("Ambidiestro") didn't say which filter it belonged to, so
an active toggle now carries its own label and a one-click clear. Filled
green so "on" reads at a glance next to the untouched filters. */
.clf-dropdown-toggle.clf-active {
background: #295a31;
border-color: #295a31;
color: #fff;
gap: 10px;
}
.clf-dropdown-toggle.clf-active:hover {
background: #22492a;
border-color: #22492a;
color: #fff;
}
.clf-toggle-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.clf-chip-clear {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 15px;
line-height: 1;
cursor: pointer;
opacity: 0.75;
transition: opacity 0.15s, background 0.15s;
}
.clf-chip-clear:hover,
.clf-chip-clear:focus-visible {
opacity: 1;
background: rgba(255, 255, 255, 0.2);
}
/* ── Active filter chip rail ───────────────────────────────────────────────
Mobile only: the toggles carry their own label on desktop, but on mobile
they sit inside a drawer, so nothing on screen said what was filtered. */
.clf-active-chips {
display: none;
flex-wrap: nowrap;
gap: 8px;
margin-bottom: 12px;
/* One scrollable row rather than a growing stack — a handful of active
filters would otherwise push the results off the first screen. */
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
.clf-active-chips::-webkit-scrollbar {
display: none;
}
.clf-active-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 8px;
background: #295a31;
color: #fff;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
}
@media (max-width: 768px) {
.clf-active-chips:not([hidden]) {
display: flex;
}
}
/* ── Mobile Reset: bottom of the filter drawer ─────────────────────────────
It used to sit outside the drawer, where it read as a stray link floating
under the toolbar with nothing to anchor it. There is now one Reset: inline
with the last filter row on desktop, last item in the drawer on mobile. */
@media (max-width: 768px) {
.clf-reset-inline {
display: block;
width: 100%;
margin-top: auto;
padding: 12px;
border: 1px solid #295a31;
border-radius: 8px;
text-align: center;
text-decoration: none;
}
}
/* ── Card meta row: type/subtype, barrel and handedness on one line ─────────
The data row is a 5-column grid (title + 4 stats). Give the title column
more of it and tighten the gutters, so the three meta items fit on one
line as in the design instead of the handedness chip dropping below. */
.section-classifieds .ad-card_component-data-top,
.my-adverts .ad-card_component .ad-card_component-data .ad-card_component-data-top,
.product-detail-page .section_all-ads .ad-card_component-data-top {
grid-column-gap: 1.25rem;
grid-template-columns: minmax(0, 3.4fr);
}
.section-classifieds .ad-card_title,
.my-adverts .ad-card_title,
.product-detail-page .section_all-ads .ad-card_title {
min-width: 0;
}
.section-classifieds .ad-card_product-link,
.my-adverts .ad-card_product-link,
.product-detail-page .section_all-ads .ad-card_product-link {
display: inline;
margin-top: 0;
}
.ad-card_meta-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}
.ad-card_chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border: 1px solid #d2d4d1;
border-radius: 4px;
background: #eceeea;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
color: #4a5a4c;
}
/* Handedness carries the accent for all three values, so it reads apart from
the neutral barrel chip beside it. */
.ad-card_chip--hand {
border-color: #e4c4bf;
background: #fbeeec;
color: #a8463a;
}
/* ── Similar Products (T2) ─────────────────────────────────────────────
"Show more" beneath the grid. Matches the Related Ads / Where to Buy
treatment so the three lists behave the same way. */
.sp-more-wrap {
display: flex;
justify-content: center;
margin-top: 24px;
}
/* Similar Products grid. base.css.liquid sizes .resource-list--grid from
--resource-list-columns and gaps from --resource-list-row-gap /
--resource-list-column-gap. Pin all three here so the four cards divide the
section width evenly instead of sizing to their content and leaving a gap
at the right edge. minmax(0,1fr) stops a long product title widening its
column. */
.similar-products .resource-list--grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--resource-list-column-gap-desktop, 12px);
row-gap: var(--resource-list-row-gap-desktop, 24px);
}
@media screen and (min-width: 750px) {
.similar-products .resource-list--grid {
grid-template-columns: repeat(var(--column-count, 4), minmax(0, 1fr));
}
}
.ctm-similar-product > .section {
grid-template-columns: max-content;
}