/* =========================================================
   TAJRIVO MARKET
   File: css/shop.css
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
  --shop-primary: #1677ff;
  --shop-primary-dark: #0b5ed7;
  --shop-primary-light: #eaf3ff;

  --shop-success: #16a34a;
  --shop-danger: #dc2626;
  --shop-warning: #f59e0b;

  --shop-bg: #f5f7fb;
  --shop-card: #ffffff;

  --shop-text: #111827;
  --shop-text-soft: #667085;
  --shop-text-muted: #98a2b3;

  --shop-border: #e5eaf1;
  --shop-border-dark: #d7dee9;

  --shop-radius-sm: 12px;
  --shop-radius: 18px;
  --shop-radius-lg: 26px;
  --shop-radius-xl: 32px;

  --shop-shadow:
    0 10px 35px rgba(15, 23, 42, 0.07);

  --shop-shadow-hover:
    0 20px 45px rgba(15, 23, 42, 0.12);
}


/* =========================================================
   PAGE
========================================================= */

.shop-page {
  background:
    var(--shop-bg);

  min-height:
    calc(100vh - 70px);

  padding-bottom:
    60px;
}


/* =====================================================
   CART STATE FIX
===================================================== */

[hidden] {
  display: none !important;
}

.cart-empty[hidden],
.cart-empty-state[hidden],
.market-cart-empty[hidden] {
  display: none !important;
}

/* =========================================================
   TOPBAR
========================================================= */

.shop-top-location {
  min-height:
    44px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    6px 12px;

  border:
    1px solid var(--shop-border);

  border-radius:
    14px;

  background:
    #ffffff;

  cursor:
    pointer;

  transition:
    .22s ease;
}


.shop-top-location:hover {
  border-color:
    #bdd7ff;

  background:
    #f8fbff;
}


.shop-top-location-flag {
  font-size:
    22px;

  line-height:
    1;
}


.shop-top-location-text {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    1px;
}


.shop-top-location-text small {
  font-size:
    9px;

  color:
    var(--shop-text-muted);

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    .4px;
}


.shop-top-location-text strong {
  max-width:
    120px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(--shop-text);

  font-size:
    11px;

  font-weight:
    900;
}


.shop-top-location-arrow {
  color:
    var(--shop-text-soft);

  font-size:
    11px;
}


/* =========================================================
   CART TOP BUTTON
========================================================= */

.shop-cart-button {
  position:
    relative;

  width:
    44px;

  height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--shop-border);

  border-radius:
    14px;

  background:
    #ffffff;

  cursor:
    pointer;

  transition:
    .22s ease;
}


.shop-cart-button:hover {
  border-color:
    #bdd7ff;

  background:
    var(--shop-primary-light);

  transform:
    translateY(-1px);
}


.shop-cart-icon {
  font-size:
    19px;
}


.shop-cart-count {
  position:
    absolute;

  top:
    -6px;

  right:
    -5px;

  min-width:
    20px;

  height:
    20px;

  padding:
    0 5px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    2px solid #ffffff;

  border-radius:
    999px;

  background:
    var(--shop-primary);

  color:
    #ffffff;

  font-size:
    9px;

  font-weight:
    900;
}


/* =========================================================
   HERO
========================================================= */

.shop-hero {
  position:
    relative;

  overflow:
    hidden;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(320px, .85fr);

  gap:
    35px;

  min-height:
    430px;

  padding:
    48px;

  margin-bottom:
    30px;

  border-radius:
    var(--shop-radius-xl);

  background:
    linear-gradient(
      130deg,
      #0b5ed7 0%,
      #1677ff 48%,
      #55a5ff 100%
    );

  box-shadow:
    0 22px 55px rgba(22, 119, 255, .19);
}


.shop-hero::before {
  content:
    "";

  position:
    absolute;

  width:
    380px;

  height:
    380px;

  top:
    -190px;

  right:
    24%;

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, .10);
}


.shop-hero::after {
  content:
    "";

  position:
    absolute;

  width:
    280px;

  height:
    280px;

  left:
    -110px;

  bottom:
    -170px;

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, .08);
}


.shop-hero-content {
  position:
    relative;

  z-index:
    3;

  align-self:
    center;
}


.shop-hero-badge {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    8px 13px;

  margin-bottom:
    18px;

  border:
    1px solid rgba(255, 255, 255, .20);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, .13);

  color:
    #ffffff;

  backdrop-filter:
    blur(10px);

  font-size:
    11px;

  font-weight:
    800;
}


.shop-hero h1 {
  max-width:
    620px;

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(38px, 5vw, 62px);

  line-height:
    .98;

  font-weight:
    950;

  letter-spacing:
    -2.4px;
}


.shop-hero-content > p {
  max-width:
    610px;

  margin:
    22px 0 0;

  color:
    rgba(255, 255, 255, .82);

  font-size:
    14px;

  line-height:
    1.8;

  font-weight:
    500;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.shop-hero-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    11px;

  margin-top:
    28px;
}


.shop-primary-button,
.shop-secondary-button {
  min-height:
    45px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  padding:
    0 18px;

  border-radius:
    13px;

  font-family:
    inherit;

  font-size:
    11px;

  font-weight:
    900;

  cursor:
    pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}


.shop-primary-button {
  border:
    1px solid var(--shop-primary);

  background:
    var(--shop-primary);

  color:
    #ffffff;

  box-shadow:
    0 10px 25px rgba(22, 119, 255, .18);
}


.shop-primary-button:hover {
  background:
    var(--shop-primary-dark);

  border-color:
    var(--shop-primary-dark);

  transform:
    translateY(-1px);
}


.shop-primary-button:active,
.shop-secondary-button:active {
  transform:
    translateY(0);
}


.shop-primary-button:disabled,
.shop-secondary-button:disabled {
  opacity:
    .55;

  cursor:
    not-allowed;

  transform:
    none;
}


.shop-secondary-button {
  border:
    1px solid var(--shop-border);

  background:
    #ffffff;

  color:
    var(--shop-text);
}


.shop-secondary-button:hover {
  border-color:
    #bad5ff;

  background:
    #f7fbff;

  color:
    var(--shop-primary);
}


.shop-hero .shop-primary-button {
  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    var(--shop-primary-dark);

  box-shadow:
    0 12px 28px rgba(0, 0, 0, .10);
}


.shop-hero .shop-primary-button:hover {
  background:
    #f2f7ff;

  border-color:
    #f2f7ff;
}


.shop-hero .shop-secondary-button {
  border:
    1px solid rgba(255, 255, 255, .28);

  background:
    rgba(255, 255, 255, .10);

  color:
    #ffffff;

  backdrop-filter:
    blur(8px);
}


.shop-hero .shop-secondary-button:hover {
  background:
    rgba(255, 255, 255, .17);
}


/* =========================================================
   HERO FEATURES
========================================================= */

.shop-hero-features {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    16px;

  margin-top:
    25px;
}


.shop-hero-features span {
  color:
    rgba(255, 255, 255, .82);

  font-size:
    10px;

  font-weight:
    700;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.shop-hero-visual {
  position:
    relative;

  z-index:
    2;

  min-height:
    330px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.shop-hero-visual-glow {
  position:
    absolute;

  width:
    300px;

  height:
    300px;

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, .15);

  filter:
    blur(3px);
}


.shop-delivery-card {
  position:
    relative;

  z-index:
    3;

  width:
    min(300px, 88%);

  min-height:
    150px;

  display:
    flex;

  align-items:
    center;

  gap:
    17px;

  padding:
    25px;

  border:
    1px solid rgba(255, 255, 255, .30);

  border-radius:
    26px;

  background:
    rgba(255, 255, 255, .94);

  box-shadow:
    0 28px 60px rgba(3, 35, 82, .22);

  transform:
    rotate(-3deg);
}


.shop-delivery-card-icon {
  flex:
    0 0 66px;

  width:
    66px;

  height:
    66px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    20px;

  background:
    var(--shop-primary-light);

  font-size:
    31px;
}


.shop-delivery-card div:last-child {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.shop-delivery-card small {
  color:
    var(--shop-primary);

  font-size:
    9px;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    .5px;
}


.shop-delivery-card strong {
  color:
    var(--shop-text);

  font-size:
    16px;

  line-height:
    1.2;
}


.shop-delivery-card span {
  color:
    var(--shop-text-soft);

  font-size:
    9px;

  line-height:
    1.45;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.shop-floating-card {
  position:
    absolute;

  z-index:
    5;

  min-width:
    155px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    12px 14px;

  border:
    1px solid rgba(255, 255, 255, .27);

  border-radius:
    16px;

  background:
    rgba(255, 255, 255, .94);

  box-shadow:
    0 18px 38px rgba(9, 41, 90, .17);
}


.shop-floating-card > span {
  width:
    37px;

  height:
    37px;

  flex:
    0 0 37px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    11px;

  background:
    #f3f7fd;

  font-size:
    19px;
}


.shop-floating-card div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.shop-floating-card small {
  color:
    var(--shop-text-muted);

  font-size:
    8px;

  font-weight:
    700;
}


.shop-floating-card strong {
  color:
    var(--shop-text);

  font-size:
    10px;

  font-weight:
    900;
}


.shop-floating-card-gift {
  top:
    14px;

  right:
    5px;

  transform:
    rotate(3deg);
}


.shop-floating-card-grocery {
  left:
    4px;

  bottom:
    20px;

  transform:
    rotate(-2deg);
}


.shop-floating-card-tech {
  right:
    -5px;

  bottom:
    42px;

  transform:
    rotate(3deg);
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.shop-destination-section,
.shop-categories-section,
.shop-products-section,
.shop-all-products-section,
.shop-how-section {
  margin-top:
    30px;
}


.shop-section-heading {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    17px;
}


.shop-section-heading h2 {
  margin:
    5px 0 0;

  color:
    var(--shop-text);

  font-size:
    22px;

  line-height:
    1.2;

  font-weight:
    950;

  letter-spacing:
    -.5px;
}


.shop-section-heading p {
  margin:
    7px 0 0;

  color:
    var(--shop-text-soft);

  font-size:
    11px;

  line-height:
    1.5;
}


.shop-text-button {
  flex:
    0 0 auto;

  border:
    0;

  background:
    transparent;

  color:
    var(--shop-primary);

  font-size:
    10px;

  font-weight:
    900;

  cursor:
    pointer;

  padding:
    6px;
}


.shop-text-button:hover {
  color:
    var(--shop-primary-dark);
}


/* =========================================================
   DESTINATION
========================================================= */

.shop-destination-card {
  display:
    grid;

  grid-template-columns:
    minmax(250px, 1.15fr)
    minmax(250px, .9fr)
    auto;

  align-items:
    center;

  gap:
    25px;

  padding:
    22px;

  border:
    1px solid var(--shop-border);

  border-radius:
    var(--shop-radius);

  background:
    #ffffff;

  box-shadow:
    var(--shop-shadow);
}


.shop-destination-main {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}


.shop-destination-flag {
  width:
    54px;

  height:
    54px;

  flex:
    0 0 54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--shop-border);

  border-radius:
    16px;

  background:
    #f8fafc;

  font-size:
    28px;
}


.shop-destination-info {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.shop-destination-info span {
  color:
    var(--shop-text-muted);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .6px;
}


.shop-destination-info strong {
  color:
    var(--shop-text);

  font-size:
    15px;

  font-weight:
    950;
}


.shop-destination-info small {
  color:
    var(--shop-text-soft);

  font-size:
    9px;
}


.shop-destination-details {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    12px;
}


.shop-destination-details > div {
  padding:
    10px 12px;

  border:
    1px solid var(--shop-border);

  border-radius:
    12px;

  background:
    #fafcff;
}


.shop-destination-details span {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(--shop-text-muted);

  font-size:
    8px;

  font-weight:
    800;
}


.shop-destination-details strong {
  display:
    block;

  max-width:
    140px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(--shop-text);

  font-size:
    9px;
}


.shop-location-change-button {
  min-height:
    42px;

  padding:
    0 15px;

  border:
    1px solid #c8ddff;

  border-radius:
    12px;

  background:
    var(--shop-primary-light);

  color:
    var(--shop-primary);

  font-size:
    10px;

  font-weight:
    900;

  cursor:
    pointer;

  transition:
    .2s ease;
}


.shop-location-change-button:hover {
  background:
    #dcecff;
}


/* =========================================================
   CATEGORIES
========================================================= */

.shop-categories-grid,
.shop-category-loading {
  display:
    grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap:
    13px;
}


.shop-category-card {
  min-height:
    132px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  padding:
    15px 10px;

  border:
    1px solid var(--shop-border);

  border-radius:
    18px;

  background:
    #ffffff;

  text-align:
    center;

  cursor:
    pointer;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.shop-category-card:hover {
  transform:
    translateY(-4px);

  border-color:
    #bfd8ff;

  box-shadow:
    var(--shop-shadow-hover);
}


.shop-category-card.active {
  border-color:
    var(--shop-primary);

  background:
    #f5f9ff;
}


.shop-category-icon {
  width:
    52px;

  height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  border-radius:
    16px;

  background:
    #f3f7fc;

  font-size:
    25px;
}


.shop-category-icon img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.shop-category-card strong {
  max-width:
    100%;

  color:
    var(--shop-text);

  font-size:
    10px;

  font-weight:
    900;

  line-height:
    1.3;
}


.shop-category-card small {
  color:
    var(--shop-text-muted);

  font-size:
    8px;
}


/* =========================================================
   CATEGORY SKELETON
========================================================= */

.shop-category-skeleton {
  height:
    132px;

  border-radius:
    18px;

  background:
    linear-gradient(
      90deg,
      #eef2f7 25%,
      #f7f9fc 50%,
      #eef2f7 75%
    );

  background-size:
    200% 100%;

  animation:
    shopSkeleton 1.3s infinite linear;
}


/* =========================================================
   PRODUCTS GRID
========================================================= */

.shop-products-grid,
.shop-products-loading {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    17px;
}


.shop-products-grid-all {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.shop-product-card {
  position:
    relative;

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid var(--shop-border);

  border-radius:
    20px;

  background:
    #ffffff;

  box-shadow:
    0 5px 20px rgba(15, 23, 42, .035);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}


.shop-product-card:hover {
  transform:
    translateY(-5px);

  border-color:
    #cfddf0;

  box-shadow:
    var(--shop-shadow-hover);
}


.shop-product-image-wrap {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    1 / .78;

  overflow:
    hidden;

  background:
    #f5f7fa;
}


.shop-product-image {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  transition:
    transform .35s ease;
}


.shop-product-card:hover
.shop-product-image {
  transform:
    scale(1.045);
}


.shop-product-image-placeholder {
  width:
    100%;

  height:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    linear-gradient(
      135deg,
      #f3f6fa,
      #e9eef5
    );

  color:
    #9ca8ba;

  font-size:
    36px;
}


/* =========================================================
   PRODUCT BADGES
========================================================= */

.shop-product-badges {
  position:
    absolute;

  top:
    10px;

  left:
    10px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    5px;

  z-index:
    3;
}


.shop-product-badge {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    23px;

  padding:
    0 8px;

  border-radius:
    999px;

  background:
    rgba(17, 24, 39, .82);

  color:
    #ffffff;

  backdrop-filter:
    blur(8px);

  font-size:
    7px;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    .3px;
}


.shop-product-badge.sale {
  background:
    #dc2626;
}


.shop-product-badge.featured {
  background:
    var(--shop-primary);
}


.shop-product-badge.new {
  background:
    #16a34a;
}


/* =========================================================
   FAVORITE BUTTON
========================================================= */

.shop-product-favorite {
  position:
    absolute;

  top:
    10px;

  right:
    10px;

  z-index:
    4;

  width:
    34px;

  height:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid rgba(255, 255, 255, .65);

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, .92);

  color:
    #667085;

  cursor:
    pointer;

  box-shadow:
    0 4px 12px rgba(15, 23, 42, .08);

  transition:
    .2s ease;
}


.shop-product-favorite:hover {
  color:
    #dc2626;

  transform:
    scale(1.06);
}


.shop-product-favorite.active {
  color:
    #dc2626;
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.shop-product-content {
  padding:
    14px;
}


.shop-product-category {
  display:
    block;

  margin-bottom:
    6px;

  color:
    var(--shop-primary);

  font-size:
    7px;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    .45px;
}


.shop-product-name {
  min-height:
    32px;

  display:
    -webkit-box;

  overflow:
    hidden;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;

  margin:
    0;

  color:
    var(--shop-text);

  font-size:
    12px;

  line-height:
    1.35;

  font-weight:
    900;
}


.shop-product-description {
  display:
    -webkit-box;

  overflow:
    hidden;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;

  min-height:
    28px;

  margin:
    7px 0 0;

  color:
    var(--shop-text-soft);

  font-size:
    8px;

  line-height:
    1.55;
}


.shop-product-meta {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    7px;

  margin-top:
    10px;
}


.shop-product-stock {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    var(--shop-success);

  font-size:
    8px;

  font-weight:
    800;
}


.shop-product-stock::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    currentColor;
}


.shop-product-stock.low {
  color:
    var(--shop-warning);
}


.shop-product-stock.out {
  color:
    var(--shop-danger);
}


.shop-product-delivery {
  color:
    var(--shop-text-muted);

  font-size:
    7px;

  text-align:
    right;
}


/* =========================================================
   PRODUCT PRICE
========================================================= */

.shop-product-bottom {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    10px;

  margin-top:
    13px;
}


.shop-product-price-wrap {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.shop-product-price {
  color:
    var(--shop-text);

  font-size:
    16px;

  font-weight:
    950;
}


.shop-product-old-price {
  color:
    var(--shop-text-muted);

  font-size:
    8px;

  text-decoration:
    line-through;
}


.shop-product-add-button {
  width:
    38px;

  height:
    38px;

  flex:
    0 0 38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    12px;

  background:
    var(--shop-primary);

  color:
    #ffffff;

  font-size:
    18px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    .2s ease;
}


.shop-product-add-button:hover {
  background:
    var(--shop-primary-dark);

  transform:
    translateY(-1px);
}


.shop-product-add-button:disabled {
  background:
    #d4dae4;

  cursor:
    not-allowed;

  transform:
    none;
}


/* =========================================================
   PRODUCT SKELETON
========================================================= */

.shop-product-skeleton {
  min-height:
    330px;

  border-radius:
    20px;

  background:
    linear-gradient(
      90deg,
      #eef2f7 25%,
      #f8fafc 50%,
      #eef2f7 75%
    );

  background-size:
    200% 100%;

  animation:
    shopSkeleton 1.25s linear infinite;
}


@keyframes shopSkeleton {

  0% {
    background-position:
      200% 0;
  }

  100% {
    background-position:
      -200% 0;
  }

}


/* =========================================================
   HOW IT WORKS
========================================================= */

.shop-how-section {
  display:
    grid;

  grid-template-columns:
    .75fr 1.25fr;

  gap:
    30px;

  padding:
    33px;

  border:
    1px solid var(--shop-border);

  border-radius:
    25px;

  background:
    #ffffff;

  box-shadow:
    var(--shop-shadow);
}


.shop-how-content {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;
}


.shop-how-content h2 {
  margin:
    7px 0 0;

  color:
    var(--shop-text);

  font-size:
    28px;

  line-height:
    1.08;

  letter-spacing:
    -.8px;

  font-weight:
    950;
}


.shop-how-content p {
  max-width:
    430px;

  margin:
    14px 0 0;

  color:
    var(--shop-text-soft);

  font-size:
    10px;

  line-height:
    1.7;
}


.shop-how-steps {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    12px;
}


.shop-how-steps article {
  min-height:
    130px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  padding:
    16px;

  border:
    1px solid var(--shop-border);

  border-radius:
    17px;

  background:
    #fafcff;
}


.shop-how-steps article > div {
  width:
    31px;

  height:
    31px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    10px;

  border-radius:
    10px;

  background:
    var(--shop-primary-light);

  color:
    var(--shop-primary);

  font-size:
    10px;

  font-weight:
    950;
}


.shop-how-steps strong {
  color:
    var(--shop-text);

  font-size:
    10px;

  font-weight:
    900;
}


.shop-how-steps span {
  margin-top:
    4px;

  color:
    var(--shop-text-soft);

  font-size:
    8px;

  line-height:
    1.5;
}


/* =========================================================
   TOOLBAR
========================================================= */

.shop-toolbar {
  display:
    grid;

  grid-template-columns:
    minmax(250px, 1fr)
    190px
    190px;

  gap:
    10px;

  margin-bottom:
    13px;
}


.shop-search-box {
  min-height:
    46px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    0 13px;

  border:
    1px solid var(--shop-border);

  border-radius:
    13px;

  background:
    #ffffff;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


.shop-search-box:focus-within {
  border-color:
    var(--shop-primary);

  box-shadow:
    0 0 0 3px rgba(22, 119, 255, .09);
}


.shop-search-box > span {
  color:
    var(--shop-text-muted);

  font-size:
    15px;
}


.shop-search-box input {
  width:
    100%;

  min-width:
    0;

  height:
    42px;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--shop-text);

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    600;
}


.shop-search-box input::placeholder {
  color:
    #a3adbb;
}


.shop-search-box button {
  flex:
    0 0 auto;

  width:
    25px;

  height:
    25px;

  border:
    0;

  border-radius:
    50%;

  background:
    #edf1f7;

  color:
    #667085;

  cursor:
    pointer;
}


.shop-toolbar select {
  min-height:
    46px;

  width:
    100%;

  padding:
    0 34px 0 12px;

  border:
    1px solid var(--shop-border);

  border-radius:
    13px;

  outline:
    none;

  background:
    #ffffff;

  color:
    var(--shop-text);

  font-family:
    inherit;

  font-size:
    9px;

  font-weight:
    800;

  cursor:
    pointer;
}


.shop-toolbar select:focus {
  border-color:
    var(--shop-primary);

  box-shadow:
    0 0 0 3px rgba(22, 119, 255, .08);
}


/* =========================================================
   ACTIVE FILTER
========================================================= */

.shop-active-filter {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  margin-bottom:
    14px;

  padding:
    10px 12px;

  border:
    1px solid #cfe1ff;

  border-radius:
    12px;

  background:
    #f4f8ff;
}


.shop-active-filter span {
  color:
    var(--shop-primary-dark);

  font-size:
    9px;

  font-weight:
    800;
}


.shop-active-filter button {
  border:
    0;

  background:
    transparent;

  color:
    var(--shop-primary);

  font-size:
    8px;

  font-weight:
    900;

  cursor:
    pointer;
}


/* =========================================================
   EMPTY / ERROR STATE
========================================================= */

.shop-empty-state {
  min-height:
    240px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    30px;

  border:
    1px dashed #ced8e5;

  border-radius:
    20px;

  background:
    #ffffff;

  text-align:
    center;
}


.shop-empty-state > div {
  width:
    55px;

  height:
    55px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    13px;

  border-radius:
    17px;

  background:
    #f3f7fc;

  font-size:
    25px;
}


.shop-empty-state strong {
  color:
    var(--shop-text);

  font-size:
    13px;

  font-weight:
    900;
}


.shop-empty-state span {
  max-width:
    380px;

  margin-top:
    5px;

  color:
    var(--shop-text-soft);

  font-size:
    9px;

  line-height:
    1.6;
}


.shop-empty-state button {
  margin-top:
    16px;
}


.shop-error-state > div {
  background:
    #fff0f0;

  color:
    var(--shop-danger);

  font-weight:
    950;
}


/* =========================================================
   LOAD MORE
========================================================= */

.shop-load-more {
  display:
    flex;

  justify-content:
    center;

  padding-top:
    22px;
}


.shop-load-more .shop-secondary-button {
  min-width:
    180px;
}


/* =========================================================
   TRUST GRID
========================================================= */

.shop-trust-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    13px;

  margin-top:
    30px;
}


.shop-trust-grid article {
  padding:
    19px;

  border:
    1px solid var(--shop-border);

  border-radius:
    18px;

  background:
    #ffffff;
}


.shop-trust-icon {
  width:
    42px;

  height:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    11px;

  border-radius:
    13px;

  background:
    var(--shop-primary-light);

  font-size:
    20px;
}


.shop-trust-grid strong {
  display:
    block;

  color:
    var(--shop-text);

  font-size:
    10px;

  font-weight:
    900;
}


.shop-trust-grid span {
  display:
    block;

  margin-top:
    4px;

  color:
    var(--shop-text-soft);

  font-size:
    8px;

  line-height:
    1.55;
}


/* =========================================================
   FOOT NOTE
========================================================= */

.shop-footer-note {
  margin-top:
    28px;

  padding:
    28px;

  border-radius:
    20px;

  background:
    #eef5ff;

  text-align:
    center;
}


.shop-footer-note > span {
  display:
    block;

  color:
    var(--shop-primary);

  font-size:
    8px;

  font-weight:
    950;

  text-transform:
    uppercase;

  letter-spacing:
    .6px;
}


.shop-footer-note strong {
  display:
    block;

  margin-top:
    5px;

  color:
    var(--shop-text);

  font-size:
    17px;

  font-weight:
    950;
}


.shop-footer-note p {
  margin:
    6px 0 0;

  color:
    var(--shop-text-soft);

  font-size:
    9px;
}


/* =========================================================
   MODAL BASE
========================================================= */

.shop-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    10000;
}


.shop-modal[hidden] {
  display:
    none;
}


.shop-modal-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(15, 23, 42, .55);

  backdrop-filter:
    blur(3px);
}


.shop-modal-panel {
  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    min(520px, calc(100% - 30px));

  max-height:
    calc(100vh - 40px);

  overflow-y:
    auto;

  transform:
    translate(-50%, -50%);

  border:
    1px solid rgba(255, 255, 255, .5);

  border-radius:
    25px;

  background:
    #ffffff;

  box-shadow:
    0 35px 90px rgba(15, 23, 42, .28);
}


.shop-modal-handle {
  display:
    none;

  width:
    43px;

  height:
    5px;

  margin:
    10px auto 0;

  border-radius:
    999px;

  background:
    #d7dde7;
}


.shop-modal-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    24px 24px 15px;
}


.shop-modal-header h2 {
  margin:
    5px 0 0;

  color:
    var(--shop-text);

  font-size:
    21px;

  font-weight:
    950;

  letter-spacing:
    -.4px;
}


.shop-modal-header p {
  margin:
    6px 0 0;

  color:
    var(--shop-text-soft);

  font-size:
    9px;

  line-height:
    1.5;
}


.shop-modal-close {
  width:
    37px;

  height:
    37px;

  flex:
    0 0 37px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--shop-border);

  border-radius:
    12px;

  background:
    #ffffff;

  color:
    #667085;

  font-size:
    20px;

  line-height:
    1;

  cursor:
    pointer;
}


.shop-modal-close:hover {
  background:
    #f5f7fa;
}


/* =========================================================
   LOCATION FORM
========================================================= */

.shop-location-form {
  display:
    flex;

  flex-direction:
    column;

  gap:
    17px;

  padding:
    5px 24px 22px;
}


.shop-form-group {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.shop-form-group > label {
  color:
    var(--shop-text);

  font-size:
    9px;

  font-weight:
    900;
}


.shop-form-group select {
  width:
    100%;

  min-height:
    48px;

  padding:
    0 13px;

  border:
    1px solid var(--shop-border);

  border-radius:
    13px;

  outline:
    none;

  background:
    #ffffff;

  color:
    var(--shop-text);

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    700;
}


.shop-form-group select:focus {
  border-color:
    var(--shop-primary);

  box-shadow:
    0 0 0 3px rgba(22, 119, 255, .08);
}


.shop-form-group select:disabled {
  background:
    #f5f7fa;

  color:
    #98a2b3;

  cursor:
    not-allowed;
}


/* =========================================================
   COUNTRY OPTION
========================================================= */

.shop-country-option {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    13px;

  border:
    1px solid var(--shop-border);

  border-radius:
    15px;

  background:
    #ffffff;

  text-align:
    left;

  cursor:
    pointer;
}


.shop-country-option.active {
  border-color:
    #add0ff;

  background:
    #f5f9ff;
}


.shop-country-option-flag {
  width:
    46px;

  height:
    46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--shop-border);

  border-radius:
    13px;

  background:
    #ffffff;

  font-size:
    25px;
}


.shop-country-option > span:nth-child(2) {
  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.shop-country-option strong {
  color:
    var(--shop-text);

  font-size:
    11px;

  font-weight:
    900;
}


.shop-country-option small {
  color:
    var(--shop-text-soft);

  font-size:
    8px;
}


.shop-country-check {
  width:
    27px;

  height:
    27px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    var(--shop-primary);

  color:
    #ffffff;

  font-size:
    10px;

  font-weight:
    950;
}


/* =========================================================
   LOCATION NOTICE
========================================================= */

.shop-location-notice {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

  padding:
    11px 12px;

  border:
    1px solid #d5e5ff;

  border-radius:
    12px;

  background:
    #f5f9ff;
}


.shop-location-notice > span {
  font-size:
    15px;
}


.shop-location-notice p {
  margin:
    0;

  color:
    #52637a;

  font-size:
    8px;

  line-height:
    1.55;
}


.shop-modal-actions {
  padding:
    0 24px 24px;
}


.shop-modal-primary {
  width:
    100%;
}


/* =========================================================
   CART DRAWER
========================================================= */

.shop-cart-drawer {
  position:
    fixed;

  inset:
    0;

  z-index:
    11000;
}


.shop-cart-drawer[hidden] {
  display:
    none;
}


.shop-cart-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(15, 23, 42, .52);

  backdrop-filter:
    blur(3px);
}


.shop-cart-panel {
  position:
    absolute;

  top:
    0;

  right:
    0;

  width:
    min(430px, 100%);

  height:
    100%;

  display:
    flex;

  flex-direction:
    column;

  background:
    #ffffff;

  box-shadow:
    -20px 0 55px rgba(15, 23, 42, .17);

  animation:
    shopCartOpen .26s ease;
}


@keyframes shopCartOpen {

  from {
    transform:
      translateX(100%);
  }

  to {
    transform:
      translateX(0);
  }

}


.shop-cart-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    22px;

  border-bottom:
    1px solid var(--shop-border);
}


.shop-cart-header h2 {
  margin:
    5px 0 0;

  color:
    var(--shop-text);

  font-size:
    19px;

  font-weight:
    950;
}


/* =========================================================
   EMPTY CART
========================================================= */

.shop-cart-empty {
  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    30px;

  text-align:
    center;
}


.shop-cart-empty > div {
  width:
    70px;

  height:
    70px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    15px;

  border-radius:
    22px;

  background:
    var(--shop-primary-light);

  font-size:
    32px;
}


.shop-cart-empty strong {
  color:
    var(--shop-text);

  font-size:
    14px;

  font-weight:
    950;
}


.shop-cart-empty span {
  max-width:
    280px;

  margin-top:
    6px;

  color:
    var(--shop-text-soft);

  font-size:
    9px;

  line-height:
    1.55;
}


.shop-cart-empty button {
  margin-top:
    17px;
}


/* =========================================================
   CART CONTENT
========================================================= */

.shop-cart-content {
  min-height:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  padding:
    18px 20px 20px;
}


.shop-cart-items {
  min-height:
    0;

  flex:
    1;

  overflow-y:
    auto;

  padding-right:
    3px;
}


.shop-cart-item {
  display:
    grid;

  grid-template-columns:
    72px 1fr auto;

  gap:
    11px;

  padding:
    11px 0;

  border-bottom:
    1px solid var(--shop-border);
}


.shop-cart-item-image {
  width:
    72px;

  height:
    72px;

  overflow:
    hidden;

  border-radius:
    13px;

  background:
    #f4f6f9;
}


.shop-cart-item-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.shop-cart-item-info {
  min-width:
    0;
}


.shop-cart-item-info strong {
  display:
    -webkit-box;

  overflow:
    hidden;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;

  color:
    var(--shop-text);

  font-size:
    10px;

  line-height:
    1.35;

  font-weight:
    900;
}


.shop-cart-item-price {
  display:
    block;

  margin-top:
    5px;

  color:
    var(--shop-primary);

  font-size:
    10px;

  font-weight:
    900;
}


/* =========================================================
   CART QUANTITY
========================================================= */

.shop-cart-item-quantity {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  margin-top:
    8px;

  padding:
    3px;

  border:
    1px solid var(--shop-border);

  border-radius:
    9px;

  background:
    #ffffff;
}


.shop-cart-item-quantity button {
  width:
    24px;

  height:
    24px;

  border:
    0;

  border-radius:
    7px;

  background:
    #f2f5f9;

  color:
    var(--shop-text);

  font-weight:
    900;

  cursor:
    pointer;
}


.shop-cart-item-quantity span {
  min-width:
    24px;

  text-align:
    center;

  color:
    var(--shop-text);

  font-size:
    9px;

  font-weight:
    900;
}


.shop-cart-item-remove {
  width:
    28px;

  height:
    28px;

  border:
    0;

  border-radius:
    9px;

  background:
    #fff1f1;

  color:
    var(--shop-danger);

  font-size:
    12px;

  cursor:
    pointer;
}


/* =========================================================
   CART SUMMARY
========================================================= */

.shop-cart-summary {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  padding:
    16px 0;

  margin-top:
    10px;

  border-top:
    1px solid var(--shop-border);
}


.shop-cart-summary > div {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;
}


.shop-cart-summary span {
  color:
    var(--shop-text-soft);

  font-size:
    9px;
}


.shop-cart-summary strong {
  color:
    var(--shop-text);

  font-size:
    10px;

  font-weight:
    900;
}


.shop-cart-total {
  padding-top:
    10px;

  border-top:
    1px dashed #d6dde7;
}


.shop-cart-total span {
  color:
    var(--shop-text);

  font-weight:
    900;
}


.shop-cart-total strong {
  color:
    var(--shop-primary);

  font-size:
    16px;
}


.shop-cart-checkout-button {
  width:
    100%;

  min-height:
    50px;
}


.shop-cart-payment-note {
  display:
    block;

  margin-top:
    8px;

  color:
    var(--shop-text-muted);

  font-size:
    7px;

  text-align:
    center;
}


/* =========================================================
   TOAST
========================================================= */

.shop-toast {
  position:
    fixed;

  left:
    50%;

  bottom:
    25px;

  z-index:
    12000;

  min-width:
    220px;

  max-width:
    min(420px, calc(100% - 30px));

  min-height:
    48px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    9px 14px;

  border:
    1px solid var(--shop-border);

  border-radius:
    14px;

  background:
    #ffffff;

  box-shadow:
    0 18px 50px rgba(15, 23, 42, .18);

  transform:
    translateX(-50%);

  color:
    var(--shop-text);

  font-size:
    9px;

  font-weight:
    800;
}


.shop-toast[hidden] {
  display:
    none;
}


.shop-toast-icon {
  width:
    27px;

  height:
    27px;

  flex:
    0 0 27px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    #eaf8ef;

  color:
    var(--shop-success);

  font-weight:
    950;
}


.shop-toast.error
.shop-toast-icon {
  background:
    #fff0f0;

  color:
    var(--shop-danger);
}


/* =========================================================
   BODY LOCK
========================================================= */

body.shop-modal-open,
body.shop-cart-open {
  overflow:
    hidden;
}


/* =========================================================
   HIDDEN SAFETY
========================================================= */

.shop-page [hidden],
.shop-modal[hidden],
.shop-cart-drawer[hidden],
.shop-toast[hidden] {
  display:
    none !important;
}


/* =========================================================
   LARGE SCREENS
========================================================= */

@media (min-width: 1450px) {

  .shop-products-grid,
  .shop-products-loading {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
  }


  .shop-products-grid-all {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
  }


  .shop-categories-grid,
  .shop-category-loading {
    grid-template-columns:
      repeat(7, minmax(0, 1fr));
  }

}


/* =========================================================
   TABLET LARGE
========================================================= */

@media (max-width: 1180px) {

  .shop-hero {
    grid-template-columns:
      1fr 380px;

    padding:
      38px;
  }


  .shop-categories-grid,
  .shop-category-loading {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }


  .shop-products-grid,
  .shop-products-loading,
  .shop-products-grid-all {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .shop-destination-card {
    grid-template-columns:
      1fr 1fr;

    gap:
      15px;
  }


  .shop-location-change-button {
    grid-column:
      1 / -1;
  }


  .shop-how-section {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

  .shop-hero {
    grid-template-columns:
      1fr;

    min-height:
      auto;

    padding:
      34px;
  }


  .shop-hero-visual {
    min-height:
      290px;
  }


  .shop-hero h1 {
    font-size:
      46px;
  }


  .shop-floating-card-gift {
    right:
      8%;
  }


  .shop-floating-card-grocery {
    left:
      8%;
  }


  .shop-floating-card-tech {
    right:
      6%;
  }


  .shop-toolbar {
    grid-template-columns:
      1fr 1fr;
  }


  .shop-search-box {
    grid-column:
      1 / -1;
  }


  .shop-trust-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   MOBILE / SMALL TABLET
========================================================= */

@media (max-width: 760px) {

  .shop-page {
    padding-bottom:
      35px;
  }


  .shop-top-location {
    display:
      none;
  }


  .shop-hero {
    gap:
      20px;

    padding:
      27px 22px;

    border-radius:
      23px;
  }


  .shop-hero h1 {
    font-size:
      39px;

    letter-spacing:
      -1.7px;
  }


  .shop-hero-content > p {
    font-size:
      11px;

    line-height:
      1.7;
  }


  .shop-hero-actions {
    flex-direction:
      column;
  }


  .shop-hero-actions button {
    width:
      100%;
  }


  .shop-hero-features {
    gap:
      8px 14px;
  }


  .shop-hero-features span {
    font-size:
      8px;
  }


  .shop-hero-visual {
    min-height:
      260px;
  }


  .shop-delivery-card {
    width:
      86%;

    min-height:
      130px;

    padding:
      20px;
  }


  .shop-floating-card {
    min-width:
      130px;

    padding:
      9px 10px;
  }


  .shop-floating-card-gift {
    top:
      0;

    right:
      0;
  }


  .shop-floating-card-grocery {
    left:
      0;

    bottom:
      5px;
  }


  .shop-floating-card-tech {
    right:
      0;

    bottom:
      20px;
  }


  .shop-section-heading {
    align-items:
      flex-start;
  }


  .shop-section-heading h2 {
    font-size:
      19px;
  }


  .shop-destination-card {
    grid-template-columns:
      1fr;
  }


  .shop-destination-details {
    grid-template-columns:
      1fr 1fr;
  }


  .shop-location-change-button {
    width:
      100%;
  }


  .shop-categories-grid,
  .shop-category-loading {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .shop-products-grid,
  .shop-products-loading,
  .shop-products-grid-all {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      12px;
  }


  .shop-product-content {
    padding:
      11px;
  }


  .shop-product-name {
    font-size:
      10px;
  }


  .shop-product-description {
    font-size:
      7px;
  }


  .shop-product-price {
    font-size:
      13px;
  }


  .shop-product-add-button {
    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;
  }


  .shop-how-section {
    padding:
      22px;
  }


  .shop-how-content h2 {
    font-size:
      23px;
  }


  .shop-toolbar {
    grid-template-columns:
      1fr;
  }


  .shop-search-box {
    grid-column:
      auto;
  }


  .shop-trust-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .shop-modal-panel {
    top:
      auto;

    bottom:
      0;

    left:
      0;

    width:
      100%;

    max-height:
      90vh;

    transform:
      none;

    border-radius:
      25px 25px 0 0;
  }


  .shop-modal-handle {
    display:
      block;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

  .shop-cart-button {
    width:
      40px;

    height:
      40px;

    border-radius:
      12px;
  }


  .shop-hero {
    padding:
      24px 18px;
  }


  .shop-hero h1 {
    font-size:
      34px;
  }


  .shop-hero-visual {
    min-height:
      235px;
  }


  .shop-delivery-card {
    width:
      95%;

    min-height:
      110px;

    padding:
      16px;
  }


  .shop-delivery-card-icon {
    width:
      52px;

    height:
      52px;

    flex-basis:
      52px;

    border-radius:
      15px;

    font-size:
      25px;
  }


  .shop-floating-card {
    min-width:
      auto;

    max-width:
      130px;
  }


  .shop-floating-card strong {
    font-size:
      8px;
  }


  .shop-floating-card-tech {
    display:
      none;
  }


  .shop-destination-details {
    grid-template-columns:
      1fr;
  }


  .shop-categories-grid,
  .shop-category-loading {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .shop-category-card,
  .shop-category-skeleton {
    min-height:
      116px;
  }


  .shop-category-icon {
    width:
      46px;

    height:
      46px;

    font-size:
      22px;
  }


  .shop-products-grid,
  .shop-products-loading,
  .shop-products-grid-all {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      9px;
  }


  .shop-product-skeleton {
    min-height:
      245px;
  }


  .shop-product-card {
    border-radius:
      16px;
  }


  .shop-product-image-wrap {
    aspect-ratio:
      1 / .88;
  }


  .shop-product-content {
    padding:
      9px;
  }


  .shop-product-description {
    display:
      none;
  }


  .shop-product-meta {
    margin-top:
      7px;
  }


  .shop-product-delivery {
    display:
      none;
  }


  .shop-product-bottom {
    margin-top:
      9px;
  }


  .shop-product-price {
    font-size:
      12px;
  }


  .shop-product-add-button {
    width:
      31px;

    height:
      31px;

    flex-basis:
      31px;

    border-radius:
      10px;

    font-size:
      15px;
  }


  .shop-product-favorite {
    width:
      30px;

    height:
      30px;
  }


  .shop-product-badge {
    min-height:
      20px;

    padding:
      0 6px;

    font-size:
      6px;
  }


  .shop-how-section {
    padding:
      18px;
  }


  .shop-how-steps {
    grid-template-columns:
      1fr;
  }


  .shop-how-steps article {
    min-height:
      105px;
  }


  .shop-trust-grid {
    grid-template-columns:
      1fr 1fr;

    gap:
      9px;
  }


  .shop-trust-grid article {
    padding:
      14px;
  }


  .shop-footer-note {
    padding:
      22px 15px;
  }


  .shop-cart-panel {
    width:
      100%;
  }


  .shop-cart-header {
    padding:
      18px;
  }


  .shop-cart-content {
    padding:
      14px 16px 18px;
  }


  .shop-modal-header {
    padding:
      20px 18px 13px;
  }


  .shop-location-form {
    padding:
      4px 18px 18px;
  }


  .shop-modal-actions {
    padding:
      0 18px 18px;
  }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

  .shop-products-grid,
  .shop-products-loading,
  .shop-products-grid-all {
    grid-template-columns:
      1fr;
  }


  .shop-categories-grid,
  .shop-category-loading {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .shop-trust-grid {
    grid-template-columns:
      1fr;
  }


  .shop-hero h1 {
    font-size:
      30px;
  }

}