.designer-mugs-page{background:#030916;color:#f5f7fb}
.designer-mugs-hero{padding-top:10px}
.designer-mugs-hero-frame{overflow:hidden;border:1px solid rgba(207,215,225,.34);border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.42)}
.designer-mugs-hero-frame img{display:block;width:100%;height:auto}
.catalogue-section{padding-top:72px}
.collection-filters{display:flex;gap:10px;overflow-x:auto;padding:4px 0 18px;scrollbar-width:none}
.collection-filters::-webkit-scrollbar{display:none}
.filter-chip{white-space:nowrap;border:1px solid rgba(79,183,255,.28);background:rgba(8,23,45,.82);color:#dce8f6;border-radius:999px;padding:11px 17px;cursor:pointer;font-weight:700}
.filter-chip:hover,.filter-chip.is-active{border-color:#20a8ff;background:linear-gradient(180deg,#138ff0,#075aae);color:white;box-shadow:0 0 24px rgba(32,168,255,.2)}
.catalogue-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:12px 0 28px}
.catalogue-summary{display:flex;flex-direction:column;gap:5px}
.catalogue-summary span{color:#9fb0c5;font-size:.9rem}
.sort-control select:not(.native-sort-select){min-width:210px;padding:12px 40px 12px 14px;border:1px solid rgba(79,183,255,.3);border-radius:9px;background:#07162b;color:#f5f7fb}
.sort-control select.native-sort-select,.custom-sort select,[data-custom-sort] select{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}
.designer-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.designer-card{position:relative;overflow:hidden;border:1px solid rgba(125,165,205,.25);border-radius:21px;background:linear-gradient(165deg,rgba(11,30,57,.97),rgba(3,11,25,.98));box-shadow:0 20px 44px rgba(0,0,0,.3);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.designer-card:hover{transform:translateY(-7px);border-color:#1e90ff;box-shadow:0 0 34px rgba(30,144,255,.32),0 22px 50px rgba(0,0,0,.45)}
.product-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(circle at 50% 60%,rgba(28,110,190,.28),transparent 62%)}
.product-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.designer-card:hover .product-media img{transform:scale(1.04)}
.product-badge{position:absolute;left:14px;top:14px;border:1px solid rgba(80,190,255,.45);border-radius:7px;padding:6px 10px;background:rgba(3,15,32,.86);font-size:.7rem;font-weight:800;letter-spacing:.06em}
.product-badge.best{border-color:#f3b64d;color:#ffd477}
.wishlist,.quick-view{position:absolute;right:13px;width:42px;height:42px;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:rgba(2,10,23,.78);color:#fff;font-size:1.25rem;cursor:pointer}
.wishlist{top:13px}.quick-view{top:64px;opacity:0;transform:translateX(8px);transition:.25s ease}
.designer-card:hover .quick-view{opacity:1;transform:none}
.product-body{padding:18px}
.product-category{color:#2caeff;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.product-title{font-family:Georgia,"Times New Roman",serif;font-size:1.25rem;margin:8px 0 8px}
.rating{display:flex;align-items:center;gap:8px;color:#ffc34d;font-size:.88rem}
.rating small{color:#b4c5d8}
.price-row{display:flex;align-items:center;gap:10px;margin:13px 0}
.sale-price{font-size:1.55rem;font-weight:850;color:#2aa8ff}.mrp{text-decoration:line-through;color:#a8b9cc}.discount{font-size:.7rem;background:#123963;color:#bfe4ff;border-radius:5px;padding:4px 7px}
.feature-row{display:flex;gap:10px;border-top:1px solid rgba(255,255,255,.09);padding-top:13px;margin-top:10px;color:#d4deea;font-size:.78rem}
.feature-row span{flex:1}
.view-product{display:flex;align-items:center;justify-content:center;margin-top:16px;padding:12px;border-radius:99px;background:linear-gradient(180deg,#168ef0,#0758ac);color:white;text-decoration:none;font-weight:800}
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:38px}
.pagination button{min-width:42px;height:42px;padding:0 13px;border:1px solid rgba(75,180,255,.3);border-radius:8px;background:#07162b;color:#eaf3ff;cursor:pointer}
.pagination button.is-active{background:linear-gradient(180deg,#168ef0,#0758ac);border-color:#2aafff}
.pagination button:disabled{opacity:.35;cursor:not-allowed}
.bulk-panel{display:flex;justify-content:space-between;align-items:center;gap:35px;padding:42px;border:1px solid rgba(75,180,255,.3);border-radius:24px;background:linear-gradient(135deg,rgba(14,39,72,.95),rgba(4,13,28,.98));box-shadow:0 25px 65px rgba(0,0,0,.35)}
.bulk-panel h2{margin:8px 0 12px}.bulk-panel p{max-width:700px;color:#c8d7e7;line-height:1.7}
.bulk-benefits{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.bulk-benefits span{padding:8px 11px;border:1px solid rgba(75,180,255,.22);border-radius:999px;color:#d7e5f5;font-size:.82rem}
.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.related-card{display:block;padding:27px;border:1px solid rgba(75,180,255,.22);border-radius:19px;background:linear-gradient(145deg,rgba(15,38,68,.9),rgba(4,13,28,.98));text-decoration:none;color:white}
.related-card span{color:#35b5ff;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.related-card h3{margin:10px 0}.related-card p{margin:0;color:#b8c9dc;line-height:1.55}
@media(max-width:1100px){.designer-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
.designer-mugs-hero-frame{border-radius:14px}.catalogue-section{padding-top:52px}.catalogue-toolbar{align-items:flex-start;flex-direction:column}.sort-control,.sort-control select{width:100%}
.designer-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.product-body{padding:12px}.product-title{font-size:1rem}.sale-price{font-size:1.25rem}.mrp,.discount{font-size:.65rem}.feature-row{display:none}.wishlist{width:36px;height:36px}.quick-view{display:none}.product-badge{font-size:.6rem;padding:5px 8px}.view-product{font-size:.78rem;padding:10px}.bulk-panel{align-items:flex-start;flex-direction:column;padding:28px}.related-grid{grid-template-columns:1fr}.catalogue-summary span{display:none}
}


/* Designer Mugs v1.1 refinements */

/* Breadcrumbs: aligned with the locked category-page treatment */
.designer-mugs-page .breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 16px 0 18px;
  color: #9fb0c5;
  font-size: 0.88rem;
  line-height: 1.4;
}

.designer-mugs-page .breadcrumbs a {
  color: #b8c8da;
  text-decoration: none;
  transition: color 220ms ease;
}

.designer-mugs-page .breadcrumbs a:hover,
.designer-mugs-page .breadcrumbs a:focus-visible {
  color: #39b8ff;
}

.designer-mugs-page .breadcrumbs span[aria-hidden="true"],
.designer-mugs-page .breadcrumbs .breadcrumb-separator {
  color: rgba(156, 190, 222, 0.55);
  font-size: 0.78rem;
}

.designer-mugs-page .breadcrumbs .breadcrumb-current {
  color: #f4f8fd;
  font-weight: 700;
}

/* Smooth ambient illumination behind each product card */
.designer-card {
  isolation: isolate;
  transition:
    transform 380ms cubic-bezier(.22, .61, .36, 1),
    border-color 420ms ease,
    box-shadow 520ms ease;
}

.designer-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22%;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(39, 164, 255, 0.34) 0%,
      rgba(23, 115, 210, 0.17) 30%,
      rgba(5, 31, 66, 0.05) 56%,
      transparent 74%
    );
  opacity: 0;
  transform: scale(0.86);
  filter: blur(18px);
  transition:
    opacity 620ms cubic-bezier(.22, .61, .36, 1),
    transform 760ms cubic-bezier(.22, .61, .36, 1),
    filter 650ms ease;
}

.designer-card:hover::before,
.designer-card:focus-within::before {
  opacity: 1;
  transform: scale(1);
  filter: blur(11px);
}

.designer-card:hover,
.designer-card:focus-within {
  transform: translateY(-7px);
  border-color: rgba(45, 169, 255, 0.92);
  box-shadow:
    0 0 38px rgba(30, 144, 255, 0.24),
    0 24px 54px rgba(0, 0, 0, 0.44);
}

.product-media img {
  transition: transform 680ms cubic-bezier(.22, .61, .36, 1);
}

.quick-view {
  transition:
    opacity 420ms ease,
    transform 480ms cubic-bezier(.22, .61, .36, 1),
    border-color 300ms ease,
    background 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .designer-card,
  .designer-card::before,
  .product-media img,
  .quick-view {
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 760px) {
  .designer-mugs-page .breadcrumbs {
    gap: 7px;
    padding: 12px 0 15px;
    font-size: 0.78rem;
  }

  /* Touch devices do not need a persistent hover glow */
  .designer-card::before {
    display: none;
  }
}

/* Version 4.0.3: mobile catalogue alignment polish */
.designer-product-grid{
  align-items:stretch;
}
.designer-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.designer-card .product-body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
}
.designer-card .product-title{
  min-height:2.45em;
}
.designer-card .rating{
  min-height:1.35rem;
}
.designer-card .price-row{
  display:grid;
  grid-template-columns:auto auto minmax(44px,1fr);
  align-items:center;
  column-gap:8px;
}
.designer-card .discount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  min-width:44px;
  min-height:34px;
  padding:4px 6px;
  text-align:center;
  line-height:1.05;
  white-space:normal;
  box-sizing:border-box;
}
.designer-card .view-product{
  margin-top:auto;
}

@media(max-width:760px){
  .designer-product-grid{
    grid-auto-rows:1fr;
  }
  .designer-card .product-body{
    min-height:205px;
  }
  .designer-card .product-category{
    min-height:1.05rem;
  }
  .designer-card .product-title{
    min-height:2.55em;
    line-height:1.18;
  }
  .designer-card .rating{
    min-height:2.1rem;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:2px 6px;
    line-height:1.1;
  }
  .designer-card .price-row{
    grid-template-columns:auto auto minmax(42px,1fr);
    min-height:42px;
    gap:5px;
    margin:10px 0 12px;
  }
  .designer-card .discount{
    width:46px;
    min-width:46px;
    min-height:36px;
    padding:4px;
    font-size:.62rem;
  }
  .designer-card .view-product{
    min-height:40px;
    box-sizing:border-box;
  }
}

/* Version 5.0.3: unified catalogue metadata and specification alignment */
.product-category{
  color:#2caeff;
}
.designer-card .feature-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:42px;
  margin-top:auto;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.09);
  color:#d4deea;
  font-size:.76rem;
  line-height:1.2;
}
.designer-card .feature-row span{
  min-width:0;
  white-space:nowrap;
}
.designer-card .feature-row span:last-child{
  justify-self:end;
  text-align:right;
}
.designer-card .view-product{
  margin-top:10px;
}
@media(max-width:1180px) and (min-width:761px){
  .designer-card .feature-row{
    font-size:.7rem;
    gap:7px;
  }
}
@media(max-width:760px){
  .designer-card .feature-row{display:none}
  .designer-card .view-product{margin-top:auto}
}

/* Version 7.0.1: master product-listing template */
.v701-designer-mugs .designer-shopping-realm{padding-bottom:84px}
.v701-designer-mugs .designer-style-orbit{margin-top:24px}
.v701-designer-mugs .designer-style-orbit .category-item{appearance:none;color:inherit;font:inherit;cursor:pointer;text-align:center}
.v701-designer-mugs .designer-style-orbit .category-item.is-active{border-color:rgba(83,205,255,.95)!important;box-shadow:0 0 38px rgba(34,168,255,.28),inset 0 0 32px rgba(40,145,255,.12)!important}
.v701-designer-mugs .catalogue-continuum{margin-top:24px;padding-top:24px;border-top:1px solid rgba(116,187,255,.12)}
.v701-designer-mugs .catalogue-toolbar{padding:16px 18px;border:1px solid rgba(92,178,255,.18);border-radius:16px;background:linear-gradient(135deg,rgba(9,26,49,.76),rgba(4,14,29,.74));backdrop-filter:blur(12px)}
.v701-designer-mugs .catalogue-summary{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
.v701-designer-mugs .catalogue-total{padding:7px 11px;border:1px solid rgba(60,190,255,.25);border-radius:999px;color:#50c5ff;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.v701-designer-mugs .sort-control{display:flex;align-items:center;gap:10px;color:#aebed0;font-size:.82rem;font-weight:700}
.v701-designer-mugs .product-media{aspect-ratio:4/4.45}
.v701-designer-mugs .wishlist,.v701-designer-mugs .quick-view{display:none}
.v701-designer-mugs .product-body{padding:19px 19px 20px}
.v701-designer-mugs .product-title{font-size:1.18rem}
.v701-designer-mugs .view-product{min-height:46px;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
.v701-designer-mugs .view-product:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 10px 25px rgba(24,142,240,.3)}
.v701-designer-mugs .related-promo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.v701-designer-mugs .related-promo{position:relative;isolation:isolate;min-height:310px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:32px;border:1px solid rgba(102,190,255,.28);border-radius:24px;color:#fff;text-decoration:none;background-size:cover;background-position:center;box-shadow:0 24px 58px rgba(0,0,0,.34);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.v701-designer-mugs .related-promo::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(2,9,20,.14),rgba(2,9,20,.96) 80%)}
.v701-designer-mugs .related-promo:hover{transform:translateY(-6px);border-color:#39b8ff;box-shadow:0 0 36px rgba(32,168,255,.2),0 28px 64px rgba(0,0,0,.45)}
.v701-designer-mugs .related-promo.festival{background-image:url('../assets/images/AR-Festival-Mugs-Hero-Banner.png')}
.v701-designer-mugs .related-promo.birthday{background-image:url('../assets/images/AR-Birthday-Mugs-Hero-Banner.png')}
.v701-designer-mugs .related-promo.anniversary{background-image:url('../assets/images/AR-Anniversary-Mugs-Hero-Banner.png')}
.v701-designer-mugs .related-promo.devotional{background-image:url('../assets/images/AR-Devotional-Mugs-Hero-Banner.png')}
.v701-designer-mugs .related-promo span{color:#55cfff;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.v701-designer-mugs .related-promo h3{margin:9px 0 8px;font:clamp(1.65rem,3vw,2.3rem) Georgia,serif}
.v701-designer-mugs .related-promo p{max-width:520px;margin:0 0 18px;color:#c7d4e2;line-height:1.65}
.v701-designer-mugs .related-promo b{font-size:.9rem;color:#eef9ff}
@media(max-width:900px){.v701-designer-mugs .related-promo-grid{grid-template-columns:1fr}.v701-designer-mugs .related-promo{min-height:270px}}
@media(max-width:760px){.v701-designer-mugs .designer-shopping-realm{padding-bottom:58px}.v701-designer-mugs .catalogue-continuum{margin-top:12px;padding-top:14px}.v701-designer-mugs .catalogue-toolbar{padding:14px}.v701-designer-mugs .catalogue-summary{align-items:flex-start;flex-direction:column;gap:7px}.v701-designer-mugs .sort-control{width:100%;justify-content:space-between}.v701-designer-mugs .product-media{aspect-ratio:1/1.08}.v701-designer-mugs .related-promo{min-height:230px;padding:23px;border-radius:18px}}


/* Version 7.0.2: Feedback 2 refinements */
.v702-designer-mugs .personalise-cta-panel{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:22px;padding:26px 28px;border:1px solid rgba(92,178,255,.2);border-radius:22px;background:linear-gradient(145deg,rgba(57,125,255,.075),rgba(255,255,255,.022));box-shadow:0 20px 48px rgba(0,0,0,.18)}
.v702-designer-mugs .personalise-cta-panel h3{margin:7px 0 8px;font:clamp(1.65rem,3vw,2.2rem) Georgia,serif}
.v702-designer-mugs .personalise-cta-panel p{max-width:760px;margin:0;color:#aebfd0;line-height:1.7}
.v702-designer-mugs .personalise-cta-panel .btn{flex:0 0 auto;white-space:nowrap}
.v702-designer-mugs .related-collection-rail .collection-card{display:block;text-decoration:none;color:inherit}
.v702-designer-mugs .related-collection-rail .collection-card h4{margin-top:28px}
@media(max-width:760px){.v702-designer-mugs .personalise-cta-panel{align-items:flex-start;flex-direction:column;padding:22px}.v702-designer-mugs .personalise-cta-panel .btn{width:100%;text-align:center}.v702-designer-mugs .related-collection-rail{margin-right:-12px;padding-right:12px}}


/* Version 7.0.3: actionable twin CTAs over the approved Designer Mugs hero */
.designer-mugs-hero-frame{position:relative}
.designer-hero-actions{
  position:absolute;
  left:4.35%;
  top:59.55%;
  z-index:3;
  display:flex;
  gap:1.5%;
  width:39.9%;
  height:6.85%;
}
.designer-hero-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7%;
  width:49.25%;
  height:100%;
  border:1px solid rgba(102,190,255,.9);
  border-radius:10px;
  background:linear-gradient(180deg,#2f8eff 0%,#1465d4 48%,#0a3e9f 100%);
  box-shadow:0 8px 22px rgba(0,73,190,.38),inset 0 1px 0 rgba(255,255,255,.3);
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:800;
  font-size:clamp(7px,1.05vw,16px);
  line-height:1;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,border-color .2s ease;
}
.designer-hero-cta svg{
  width:clamp(12px,2.1vw,32px);
  height:clamp(12px,2.1vw,32px);
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.designer-hero-cta:hover{
  transform:translateY(-3px);
  filter:brightness(1.12);
  border-color:#b8e6ff;
  box-shadow:0 12px 30px rgba(0,116,255,.5),0 0 20px rgba(42,166,255,.28),inset 0 1px 0 rgba(255,255,255,.4);
}
.designer-hero-cta:active{transform:translateY(0) scale(.985)}
.designer-hero-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
#collection,#bulk-orders{scroll-margin-top:96px}
@media(max-width:760px){
  .designer-hero-actions{left:4.35%;top:59.55%;width:39.9%;height:6.85%;gap:1.5%}
  .designer-hero-cta{border-radius:5px;font-size:clamp(5px,1.05vw,8px);gap:5%;border-width:1px}
  .designer-hero-cta svg{width:clamp(8px,2.1vw,14px);height:clamp(8px,2.1vw,14px)}
}
@media(prefers-reduced-motion:reduce){.designer-hero-cta{transition:none}}

/* =========================================================
   Version 7.0.4 — Final Designer Mugs template lock
   ========================================================= */
.v704-designer-mugs .designer-mugs-hero-frame{position:relative}
.v704-designer-mugs .designer-mugs-hero-frame img{display:block;width:100%;height:auto}
.v704-designer-mugs .designer-hero-actions{display:none!important}

.v704-designer-mugs .personalise-cta-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:22px;
  padding:26px 28px;
  border:1px solid rgba(92,178,255,.2);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(57,125,255,.075),rgba(255,255,255,.022));
  box-shadow:0 20px 48px rgba(0,0,0,.18)
}
.v704-designer-mugs .personalise-cta-panel h3{
  margin:7px 0 8px;
  font:clamp(1.65rem,3vw,2.2rem) Georgia,serif
}
.v704-designer-mugs .personalise-cta-panel p{
  max-width:760px;
  margin:0;
  color:#aebfd0;
  line-height:1.7
}
.v704-designer-mugs .personalise-cta-panel .btn{
  flex:0 0 auto;
  white-space:nowrap
}
@media(max-width:760px){
  .v704-designer-mugs .personalise-cta-panel{
    align-items:flex-start;
    flex-direction:column;
    padding:22px
  }
  .v704-designer-mugs .personalise-cta-panel .btn{
    width:100%;
    text-align:center
  }
}

/* =========================================================
   Version 7.0.5 — Designer Mugs mobile spacing and overflow QA
   ========================================================= */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:clip}

  /* Tighten hero-divider-catalogue rhythm. */
  .v704-designer-mugs .mug-hero + .mugs-section-divider{
    margin-top:18px!important;
    margin-bottom:8px!important;
  }
  .v704-designer-mugs .designer-shopping-realm{
    padding-top:8px!important;
  }
  .v704-designer-mugs .designer-shopping-realm .section-head{
    margin-bottom:14px!important;
  }

  /* Give Sort By and the select a clear visual gap. */
  .v704-designer-mugs .sort-control{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    column-gap:16px!important;
  }
  .v704-designer-mugs .sort-control select{
    width:100%;
    min-width:0;
  }

  /* Remove surplus card space below View Product. */
  .v704-designer-mugs .designer-product-grid{
    grid-auto-rows:auto!important;
    align-items:start!important;
  }
  .v704-designer-mugs .designer-card{
    height:auto!important;
  }
  .v704-designer-mugs .designer-card .product-body,
  .v704-designer-mugs .designer-product-grid > article .product-body{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    height:auto!important;
    padding:12px!important;
    row-gap:0!important;
  }
  .v704-designer-mugs .designer-card .product-category{min-height:0!important}
  .v704-designer-mugs .designer-card .product-title{min-height:0!important;margin:7px 0 6px!important}
  .v704-designer-mugs .designer-card .rating{min-height:0!important;margin-bottom:6px!important}
  .v704-designer-mugs .designer-card .price-row{min-height:44px!important;margin:5px 0 10px!important}
  .v704-designer-mugs .designer-card .view-product{
    margin-top:0!important;
    margin-bottom:0!important;
    align-self:stretch!important;
  }

  /* Keep swipe rails inside the viewport and stop body-level sideways movement. */
  .v704-designer-mugs .related-mug-collections,
  .v704-designer-mugs .related-mug-collections .container{
    max-width:100%;
    overflow:hidden;
  }
  .v704-designer-mugs .related-collection-rail{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:12px!important;
    box-sizing:border-box;
    overscroll-behavior-inline:contain;
    touch-action:pan-x pan-y;
  }
  .v704-designer-mugs .related-collection-rail .collection-card:last-child{
    margin-right:0!important;
  }
}


/* =========================================================
   Version 7.0.6 — Mobile View Product alignment
   ========================================================= */
@media(max-width:760px){
  .v704-designer-mugs .designer-product-grid{
    align-items:stretch!important;
    grid-auto-rows:1fr!important;
  }
  .v704-designer-mugs .designer-card{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
  }
  .v704-designer-mugs .designer-card .product-media{flex:0 0 auto!important}
  .v704-designer-mugs .designer-card .product-body{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    height:100%!important;
    min-height:0!important;
  }
  .v704-designer-mugs .designer-card .product-category{
    min-height:29px!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .v704-designer-mugs .designer-card .product-title{
    min-height:40px!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .v704-designer-mugs .designer-card .rating{min-height:20px!important}
  .v704-designer-mugs .designer-card .price-row{min-height:44px!important}
  .v704-designer-mugs .designer-card .view-product{
    margin-top:auto!important;
    width:100%!important;
    min-height:42px!important;
    box-sizing:border-box!important;
  }
}

/* =========================================================
   Version 7.0.8 — Static laptop/desktop Designer Mugs hero
   Keep the approved artwork border fixed before, during and after
   pointer hover. The artwork itself keeps the shared
   .hero-frame:hover img zoom every other category page has.
   ========================================================= */
@media (min-width: 761px) {
  .v704-designer-mugs .designer-mugs-hero-frame,
  .v704-designer-mugs .designer-mugs-hero-frame:hover {
    overflow: hidden;
  }
}

/* =========================================================
   Version 7.0.9 — Laptop sort-control alignment correction
   Keeps the label and select comfortably inside the toolbar,
   with a stable, left-aligned native dropdown control.
   ========================================================= */
@media (min-width: 761px) {
  .v704-designer-mugs .catalogue-toolbar {
    padding-right: 28px;
  }

  .v704-designer-mugs .sort-control {
    flex: 0 0 auto;
    min-width: 350px;
    margin-left: auto;
    padding-right: 2px;
    justify-content: flex-end;
    gap: 16px;
    white-space: nowrap;
  }

  .v704-designer-mugs .sort-control > span {
    display: inline-block;
    flex: 0 0 auto;
    min-width: 52px;
    margin: 0;
    text-align: right;
    line-height: 1.2;
  }

  .v704-designer-mugs .sort-control select {
    display: block;
    flex: 0 0 220px;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    margin: 0;
    box-sizing: border-box;
    text-align: left;
    text-align-last: left;
    vertical-align: middle;
  }
}

/* =========================================================
   Version 7.0.10 — Designer hero motion + sort control polish
   - Adds an outer glow on hover on top of the shared artwork zoom.
   - Stacks the Sort By label directly above the native select,
     keeping both left edges aligned on desktop and mobile.
   - Removes the persistent browser focus halo after selection.
   ========================================================= */

/* Static artwork geometry with a subtle animated outer glow. */
.v704-designer-mugs .designer-mugs-hero-frame {
  transform: translateZ(0);
  transition: box-shadow 420ms ease, filter 420ms ease;
}
.v704-designer-mugs .designer-mugs-hero-frame:hover {
  box-shadow: 0 30px 86px rgba(0,0,0,.48), 0 0 30px rgba(45,169,255,.16);
  filter: brightness(1.018);
}
/* One predictable stacked control: label and field share one left edge. */
.v704-designer-mugs .sort-control {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 220px;
  min-width: 220px;
  margin-left: auto;
  padding: 0 !important;
  white-space: normal;
}
.v704-designer-mugs .sort-control > span {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 2px;
  text-align: left;
  line-height: 1.2;
}
.v704-designer-mugs .sort-control select {
  display: block;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  margin: 0 !important;
  box-sizing: border-box;
  text-align: left;
  text-align-last: left;
  outline: none !important;
  box-shadow: none !important;
}
.v704-designer-mugs .sort-control select:focus,
.v704-designer-mugs .sort-control select:focus-visible,
.v704-designer-mugs .sort-control select:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(79,183,255,.48);
}

@media (max-width: 760px) {
  .v704-designer-mugs .sort-control {
    width: min(220px, 100%);
    min-width: 0;
    margin-left: 0;
  }
  .v704-designer-mugs .sort-control select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 220px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v704-designer-mugs .designer-mugs-hero-frame {
    transition: none !important;
  }
}

/* =========================================================
   Version 7.0.11 — Restore proven reference hero interaction
   and return Sort By to the approved inline desktop layout.
   ========================================================= */
@media (min-width: 761px) {
  /* Match the hover behaviour in the user-approved reference HTML. */
  .v711-reference-hero-animation .designer-mugs-hero-frame,
  .v711-reference-hero-animation .designer-mugs-hero-frame:hover {
    overflow: hidden;
    border: 0;
    filter: none;
    box-shadow: 0 28px 80px rgba(0,0,0,.42);
    transition: box-shadow .35s ease;
  }

  .v711-reference-hero-animation .designer-mugs-hero-frame img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
    transform-origin: center center;
    transition: transform .8s ease !important;
  }

  .v711-reference-hero-animation .designer-mugs-hero-frame:hover img {
    transform: scale(1.015) !important;
  }

  /* Approved reference alignment: label close to and centred with field. */
  .v711-reference-hero-animation .catalogue-toolbar {
    align-items: center;
    padding-right: 18px;
  }

  .v711-reference-hero-animation .sort-control {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: auto;
    min-width: 0;
    margin-left: auto;
    padding: 0 !important;
    white-space: nowrap;
  }

  .v711-reference-hero-animation .sort-control > span {
    display: inline-block;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: right;
    line-height: 1.2;
  }

  .v711-reference-hero-animation .sort-control select {
    display: block;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    margin: 0 !important;
    padding: 12px 40px 12px 14px;
    box-sizing: border-box;
    text-align: left;
    text-align-last: left;
    outline: none !important;
    box-shadow: none !important;
  }

  .v711-reference-hero-animation .sort-control select:focus,
  .v711-reference-hero-animation .sort-control select:focus-visible,
  .v711-reference-hero-animation .sort-control select:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: rgba(79,183,255,.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v711-reference-hero-animation .designer-mugs-hero-frame img {
    transition: none !important;
  }
}

/* =========================================================
   Version 7.0.12 — Smooth static-border hero animation
   + fully aligned custom Sort By dropdown.
   The banner artwork never scales or moves. Animation is
   produced by a clipped light sweep and outer glow only.
   ========================================================= */
@media (min-width:761px){
  .v712-smooth-static-hero .designer-mugs-hero-frame,
  .v712-smooth-static-hero .designer-mugs-hero-frame:hover{
    position:relative;
    overflow:hidden;
    border:0;
    filter:none;
    transform:none;
    box-shadow:0 28px 80px rgba(0,0,0,.42);
    transition:box-shadow 900ms cubic-bezier(.22,.61,.36,1);
  }
  .v712-smooth-static-hero .designer-mugs-hero-frame::after{
    content:"";
    position:absolute;
    inset:-18% -42%;
    pointer-events:none;
    background:linear-gradient(108deg,transparent 37%,rgba(90,190,255,0) 43%,rgba(110,205,255,.20) 49%,rgba(255,255,255,.14) 52%,rgba(82,177,255,.12) 56%,transparent 64%);
    transform:translateX(-48%);
    opacity:0;
    transition:transform 1400ms cubic-bezier(.16,1,.3,1),opacity 320ms ease;
    will-change:transform,opacity;
  }
  .v712-smooth-static-hero .designer-mugs-hero-frame:hover{
    box-shadow:0 30px 86px rgba(0,0,0,.5),0 0 42px rgba(50,164,255,.22);
  }
  .v712-smooth-static-hero .designer-mugs-hero-frame:hover::after{
    transform:translateX(48%);
    opacity:1;
  }
  .v712-smooth-static-hero .designer-mugs-hero-frame img,
  .v712-smooth-static-hero .designer-mugs-hero-frame:hover img{
    display:block;
    width:100%;
    height:auto;
    transform:none!important;
    transition:none!important;
  }

  .v712-smooth-static-hero .catalogue-toolbar{align-items:center;padding-right:18px;overflow:visible}
  .v712-smooth-static-hero .sort-control{
    position:relative;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    width:auto!important;
    min-width:0!important;
    margin-left:auto!important;
    padding:0!important;
    white-space:nowrap;
    overflow:visible;
  }
  .v712-smooth-static-hero .sort-label{margin:0;padding:0;line-height:1.2;color:#f5f7fb;font-weight:700}
  .v712-smooth-static-hero .custom-sort{position:relative;width:220px;flex:0 0 220px}
  .v712-smooth-static-hero .custom-sort-trigger{
    width:220px;height:48px;padding:0 14px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    border:1px solid rgba(79,183,255,.42);border-radius:10px;
    background:#07162b;color:#f5f7fb;font:inherit;font-weight:700;text-align:left;
    box-shadow:none;outline:none;cursor:pointer;
  }
  .v712-smooth-static-hero .custom-sort-trigger:hover{border-color:rgba(90,195,255,.72)}
  .v712-smooth-static-hero .custom-sort-trigger:focus-visible{outline:2px solid rgba(90,195,255,.55);outline-offset:2px}
  .v712-smooth-static-hero .custom-sort-chevron{font-size:18px;line-height:1;transform:translateY(-1px);transition:transform .22s ease}
  .v712-smooth-static-hero .custom-sort.is-open .custom-sort-chevron{transform:rotate(180deg) translateY(1px)}
  .v712-smooth-static-hero .custom-sort-menu{
    position:absolute;z-index:80;top:calc(100% + 6px);left:0;width:220px;
    padding:6px;border:1px solid rgba(79,183,255,.35);border-radius:10px;
    background:#101827;box-shadow:0 18px 38px rgba(0,0,0,.48);
  }
  .v712-smooth-static-hero .custom-sort-menu[hidden]{display:none}
  .v712-smooth-static-hero .custom-sort-menu button{
    display:block;width:100%;padding:9px 12px;border:0;border-radius:7px;
    background:transparent;color:#f5f7fb;font:inherit;text-align:left;cursor:pointer;
  }
  .v712-smooth-static-hero .custom-sort-menu button:hover,
  .v712-smooth-static-hero .custom-sort-menu button[aria-selected="true"]{background:#2456b8}
  .v712-smooth-static-hero .native-sort-select{
    position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
    overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .v712-smooth-static-hero .designer-mugs-hero-frame,
  .v712-smooth-static-hero .designer-mugs-hero-frame::after{transition:none!important}
}


/* =========================================================
   Version 7.0.13 — Reference-style smooth hero animation
   with a genuinely static outer border.

   The latest artwork contains its own edge line. The image is
   slightly cropped at rest so that internal edge is never shown.
   The visible border belongs only to the frame and therefore
   cannot move while the image scales smoothly underneath it.
   ========================================================= */
@media (min-width:761px){
  .v713-static-border-smooth-hero .designer-mugs-hero-frame,
  .v713-static-border-smooth-hero .designer-mugs-hero-frame:hover{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(207,215,225,.34) !important;
    border-radius:24px;
    filter:none !important;
    transform:none !important;
    box-shadow:0 28px 80px rgba(0,0,0,.42) !important;
    transition:border-color 420ms ease,box-shadow 520ms ease !important;
  }

  .v713-static-border-smooth-hero .designer-mugs-hero-frame::after{
    display:none !important;
    content:none !important;
  }

  .v713-static-border-smooth-hero .designer-mugs-hero-frame img{
    display:block;
    width:100%;
    height:auto;
    transform:scale(1.022) !important;
    transform-origin:center center;
    transition:transform 800ms ease !important;
    will-change:transform;
  }

  .v713-static-border-smooth-hero .designer-mugs-hero-frame:hover img{
    transform:scale(1.037) !important;
  }

  .v713-static-border-smooth-hero .designer-mugs-hero-frame:hover{
    border-color:rgba(80,190,255,.34) !important;
    box-shadow:0 30px 86px rgba(0,0,0,.48),0 0 30px rgba(50,164,255,.12) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .v713-static-border-smooth-hero .designer-mugs-hero-frame img{
    transition:none !important;
  }
}


/* =========================================================
   Version 7.0.14 — Smooth hero animation in both directions

   Fixes a specificity conflict inherited from v7.0.12 where
   the hover state applied transition:none. The transition is
   now declared on both resting and hovered states, keeping the
   fixed outer frame/border completely stationary.
   ========================================================= */
@media (min-width:761px){
  .v714-smooth-bidirectional-hero .designer-mugs-hero-frame img,
  .v714-smooth-bidirectional-hero .designer-mugs-hero-frame:hover img{
    transition:transform 800ms cubic-bezier(.22,.61,.36,1) !important;
    will-change:transform;
  }

  .v714-smooth-bidirectional-hero .designer-mugs-hero-frame,
  .v714-smooth-bidirectional-hero .designer-mugs-hero-frame:hover{
    transform:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .v714-smooth-bidirectional-hero .designer-mugs-hero-frame img,
  .v714-smooth-bidirectional-hero .designer-mugs-hero-frame:hover img{
    transition:none !important;
  }
}

/* =========================================================
   Version 7.1.1 — Mobile QA: catalogue Sort By alignment
   Laptop rules remain untouched. On phones the custom control
   is stacked cleanly beneath the result summary and the hidden
   native select is removed from the visual flow.
   ========================================================= */
@media (max-width:760px){
  .v714-smooth-bidirectional-hero .catalogue-toolbar{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:16px !important;
    padding:16px !important;
    overflow:visible !important;
  }
  .v714-smooth-bidirectional-hero .catalogue-summary{
    width:100% !important;
  }
  .v714-smooth-bidirectional-hero .sort-control{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  .v714-smooth-bidirectional-hero .sort-label{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1.2 !important;
    text-align:left !important;
  }
  .v714-smooth-bidirectional-hero .custom-sort{
    position:relative !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }
  .v714-smooth-bidirectional-hero .custom-sort-trigger{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    min-width:0 !important;
    height:48px !important;
    margin:0 !important;
    padding:0 14px !important;
    border:1px solid rgba(79,183,255,.42) !important;
    border-radius:10px !important;
    background:#07162b !important;
    color:#f5f7fb !important;
    font:inherit !important;
    font-weight:700 !important;
    text-align:left !important;
    box-shadow:none !important;
    outline:none !important;
  }
  .v714-smooth-bidirectional-hero .custom-sort-menu{
    position:absolute !important;
    z-index:80 !important;
    top:calc(100% + 6px) !important;
    left:0 !important;
    width:100% !important;
    padding:6px !important;
    border:1px solid rgba(79,183,255,.35) !important;
    border-radius:10px !important;
    background:#101827 !important;
    box-shadow:0 18px 38px rgba(0,0,0,.48) !important;
  }
  .v714-smooth-bidirectional-hero .custom-sort-menu[hidden]{display:none !important;}
  .v714-smooth-bidirectional-hero .custom-sort-menu button{
    display:block !important;
    width:100% !important;
    padding:9px 12px !important;
    border:0 !important;
    border-radius:7px !important;
    background:transparent !important;
    color:#f5f7fb !important;
    font:inherit !important;
    text-align:left !important;
  }
  .v714-smooth-bidirectional-hero .custom-sort-menu button[aria-selected="true"]{
    background:#2456b8 !important;
  }
  .v714-smooth-bidirectional-hero .native-sort-select{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}

/* =========================================================
   Category Card Action Buttons (Add to Cart & Buy Now)
   ========================================================= */
.card-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  /* See style.css: auto pins the buttons to the card floor so equal-height cards
     stop leaving a blank strip underneath them. */
  margin-top: auto;
  padding-top: 12px;
  width: 100%;
}

.card-action-row .btn-card-atc,
.card-action-row .btn-card-buynow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.2s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  line-height: 1.1 !important;
}

.card-action-row .btn-card-atc {
  background: linear-gradient(135deg, rgba(14, 38, 72, 0.94), rgba(6, 20, 42, 0.98)) !important;
  color: #e2f1ff !important;
  border: 1px solid rgba(83, 198, 255, 0.4) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.card-action-row .btn-card-atc:hover,
.card-action-row .btn-card-atc:active {
  background: linear-gradient(135deg, rgba(22, 60, 114, 0.98), rgba(10, 32, 68, 0.98)) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 16px rgba(56, 189, 248, 0.35) !important;
  transform: translateY(-2px);
}

.card-action-row .btn-card-buynow {
  background: linear-gradient(135deg, #1fa2ff 0%, #1270e3 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(124, 212, 255, 0.45) !important;
  box-shadow: 0 4px 14px rgba(18, 112, 227, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.card-action-row .btn-card-buynow:hover,
.card-action-row .btn-card-buynow:active {
  background: linear-gradient(135deg, #38bdf8 0%, #1d7af0 100%) !important;
  border-color: #7dd3fc !important;
  box-shadow: 0 6px 22px rgba(18, 112, 227, 0.6), 0 0 18px rgba(56, 189, 248, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .card-action-row {
    gap: 6px;
    padding-top: 10px;
  }
  .card-action-row .btn-card-atc,
  .card-action-row .btn-card-buynow {
    min-height: 38px !important;
    padding: 6px 8px !important;
    font-size: 0.76rem !important;
  }
}

/* =========================================================
   Hero border — all six mug subcategory pages share
   .designer-mugs-hero-frame and carry the same grey wrapper
   border as the category hubs, keychain and fridge-magnet
   heroes. The Designer banner's own painted border is cropped
   away above, so only this one shows.
   ========================================================= */
.designer-mugs-hero-frame,
.designer-mugs-hero-frame:hover {
  border: 1px solid rgba(207,215,225,.34);
}