@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: "Circular Std Book", system-ui, sans-serif !important;
    background-color: var(---background) !important;
  }
}

/* Global Heading Styles */
/* Global Heading Styles */
h1 {
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.75rem;
  color: #000;
}

h2 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.75rem;
  color: #000;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 2.4375rem;
  color: #000;
  /* color: var(--foreground);
  font-style: normal;
  padding: 10px 0px 8px 0px !important;
  margin: 0 !important; */
}

h4 {
  font-size: 1.375rem;
  font-weight: 600;
  color: #000;
  /* font-style: normal; */
  line-height: 2.0625rem;
  /* padding: 0 !important;
  margin: 0 !important; */
}
.sgBlogDetailsPage h4,
.sgBlogDetailsPage h5 {
  text-transform: unset !important;
  letter-spacing: unset !important;
}
.sgBlogDetailsPage blockquote {
  margin: 0;
  padding: 8px 16px;
  border: 0 solid rgb(228, 228, 231);
  border-left: 4px solid rgb(64, 64, 64);
  border-radius: 0 8px 8px 0;
  font-family: unset !important;
}
.blockquote h3 {
  margin: 0px !important;
  font-family: unset !important;
}
#sg-twoEngagements-container {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch !important;
  gap: 16px;
  height: 100% !important;
  font-family: unset !important;
}
#sg-twoEngagements-container #sg-twoEngagements-engagementCard {
  height: auto !important;
}
#sg-twoEngagements-container #sg-twoEngagements-engagementCard #sgEngagement1,
#sg-twoEngagements-container #sg-twoEngagements-engagementCard #sgEngagement2,
#sg-twoEngagements-container #sg-twoEngagements-engagementCard #sgEngagement3,
#sg-twoEngagements-container #sg-twoEngagements-engagementCard #sgEngagement4 {
  height: 100% !important;
}
#sg-shoppable-product-card-1,
#sg-shoppable-product-card-2,
#sg-shoppable-product-card-3,
#sg-shoppable-product-card-4 {
  height: 100% !important;
  padding-top: 0px !important;
}

h5 {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  font-family: unset !important;
  /* line-height: 26px;
  color: var(--foreground);
  font-style: normal;
  padding: 0 !important;
  margin: 0 !important; */
}
.sgBlogDetailsPage #sg-shoppable-product-card {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  height: 100% !important;
  font-family: unset !important;
}
.sgBlogDetailsPage #sg-product-details {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: unset !important;
}
#sg-product-details
  .flex.gap-1.py-\[2px\].whitespace-nowrap.flex-shrink-0.scroll-smooth.mb-2 {
  margin-bottom: 0px;
}
div#sg-shoppable-price-wrapper {
  height: 100%;
  align-items: end;
  font-family: unset !important;
}
#sg-shoppable-variant-selector-button.bg-black {
  background-color: #000;
  color: white;
  display: flex;
}
#sg-shoppable-product-card {
  max-width: 250px;
  width: 100%;
  min-width: 250px;
  font-family: unset !important;
}
#sg-bannerWithShare-image-container {
  position: relative;
  width: 100% !important;
  aspect-ratio: 16 / 6 !important;
  padding: 0px !important;
}
@media only screen and (max-width: 900px) {
  h1 {
    font-size: 1.375rem; /*22px*/
    font-weight: 400;
    line-height: 2.2rem; /*35.2px*/
  }

  h2 {
    font-size: 1.875rem; /*30px*/
    font-weight: 600;
    line-height: 2.2rem; /*2.8125rem;45px*/
  }

  h3 {
    font-size: 1.625rem; /*26px*/
    font-weight: 600;
    line-height: 2.2rem; /*2.4375rem ;39px*/
  }

  h4 {
    font-size: 1.375rem; /*22px*/
    font-weight: 600;
    line-height: 2.0625rem; /*33px*/
  }

  h5 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.1rem;
    margin-bottom: 6px;
    padding-bottom: 4px;
  }

  h6 {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 0.85rem;
  }
}
.sgBlogDetailsPage a {
  color: blue !important;
}
/* Paragraph Style */
p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 0 !important;
  margin: 0 !important;
  color: #2a2a2a;
}

/* List Item Style */
li {
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  color: var(--foreground);
  padding: 0 !important;
  margin: 0 !important;
  list-style-type: disc; /* Default bullet style */
  padding-left: 2px !important; /* Indent for better alignment */
}
ul {
  margin-left: 1rem;
}

/* Page Level Css */
.main-page {
  max-width: 1180px;
  margin: auto !important;
  width: 100% !important;
  padding: 0px 2% !important;
}

@media (max-width: 768px) {
  .main-page {
    padding: 0px 3% !important;
  }
}
#sg-search-listing-page > div:first-child,
#sg-plp-listing-page > div:first-child,
.sg-blog-listing-page > div:first-child,
.sg-blog-listing-page > div:nth-child(3) {
  /* width: 20% !important; */
  position: sticky;
  top: 0px;
  height: fit-content;
  padding: 16px 0px 0px 16px;
}
#sg-search-listing-page > div:first-child,
#sg-plp-listing-page > div:first-child {
  width: 25% !important;
}
#sg-search-listing-page > div:nth-child(2),
#sg-plp-listing-page > div:nth-child(2),
.sg-blog-listing-page > div:nth-child(2),
.sg-blog-listing-page > div:nth-child(3) {
  /* width: 60% !important; */
  margin-top: 0px;
  padding: 16px 0px 0px 16px;
}
.sg-blog-listing-page {
  margin-top: 1rem;
}

@media (max-width: 768px) {
  #sg-search-listing-page > div:first-child,
  #sg-plp-listing-page > div:first-child,
  .sg-blog-listing-page > div:first-child,
  .sg-blog-listing-page > div:nth-child(3) {
    width: 100% !important;
    padding: 0px;
    position: static;
  }

  #sg-search-listing-page > div:nth-child(2),
  #sg-plp-listing-page > div:nth-child(2),
  .sg-blog-listing-page > div:nth-child(2) {
    width: 100% !important;
    padding: 0px;
  }

  .sg-blog-list-item-1 {
    margin-bottom: 1rem;
  }

  .sg-blog-list-item-2 {
    margin-bottom: 2rem;
  }
}

/* Category List Widget */
#sg-categories-title {
  font-size: 24px;
  padding: 8px 0px;
  margin: 0px;
  line-height: 33px;
}

#sg-categories-container {
  width: 100%;
}

#sg-collection-list-widget-heading {
  font-size: 24px;
  padding: 8px 0px;
  margin: 0px;
  line-height: 33px;
  text-transform: uppercase;
}

#sg-collection-list-heading-border {
  height: 2.5px;
  background-color: black;
}

#sg-categories-sheet-content {
  background-color: white;
}

/* Single Blog Card Carousel */
#sg-singleBigCardCarousel-heading {
  font-size: 24px;
  padding: 2px;
}

#sg-singleBigCardCarousel-horizontal-line {
  margin-bottom: 8px;
}

#sg-singleBigCardCarousel-container {
  min-height: fit-content;
}

#sg-bigBlogCard-description * {
  font-size: 16px !important;
}
#sg-wfq-productDetailsQuantityWrapper {
  display: none !important;
}

#sg-wfq-addtocart-wrapper {
  width: 100% !important;
}
#sg-bannerWithPublishedDate-content-container {
  align-items: center !important;
}

#sg-bannerWithPublishedDate-categoryContainer {
  margin-bottom: 0px !important;
}

@media (max-width: 768px) {
  #sg-bigBlogCard-description * {
    font-size: 14px !important;
  }
}

/* Related Products Widget */
#sg-related-products-container {
  margin-top: 8px;
}

#sg-related-products-heading {
  padding-bottom: 8px;
}

/* Small Product Card */
#sg-small-product-card-image-container {
  width: 130px;
  height: 130px;
}

/* Big Blog Card */
#sg-bigBlogCard-title {
  font-size: 27px;
  margin-top: 6px;
  font-family: unset !important;
}

/* Banner With Published Date */
#sg-bannerWithPublishedDate-image-container {
  aspect-ratio: 16/6;
}

#sg-bannerWithPublishedDate-title {
  margin-bottom: 10px;
}

/* Default Carousel- trending products */
.sg-blog-page .sg-blog-item-11 #sg-defaultCarousel-container,
.sg-blog-page .sg-blog-item-13 #sg-defaultCarousel-container,
.sg-blog-page .sg-blog-item-12 #sg-defaultCarousel-container {
  max-width: 100%;
}

.sg-blog-page .sg-blog-item-11 #sg-defaultCarousel-heading,
.sg-blog-page .sg-blog-item-13 #sg-defaultCarousel-heading,
.sg-blog-page .sg-blog-item-12 #sg-defaultCarousel-heading {
  font-size: 32px !important;
}

.sg-blog-page .sg-blog-item-13 #sg-defaultCarousel-carouselItem,
.sg-blog-page .sg-blog-item-12 #sg-defaultCarousel-carouselItem {
  flex-basis: 25%;
  align-items: flex-start;
}
/* .sg-blog-page .sg-blog-item-13 #sg-defaultCarousel-content,
.sg-blog-page .sg-blog-item-12 #sg-defaultCarousel-content {
  transform: none !important;
} */

@media (max-width: 768px) {
  .sg-blog-page .sg-blog-item-11 #sg-defaultCarousel-heading,
  .sg-blog-page .sg-blog-item-13 #sg-defaultCarousel-heading,
  .sg-blog-page .sg-blog-item-12 #sg-defaultCarousel-heading {
    font-size: 24px !important;
  }

  .sg-blog-page .sg-blog-item-13 #sg-defaultCarousel-carouselItem,
  .sg-blog-page .sg-blog-item-12 #sg-defaultCarousel-carouselItem {
    flex-basis: 50%;
    align-items: flex-start;
  }

  .sg-blog-page .sg-blog-item-13 #sg-defaultCardWidget-container,
  .sg-blog-page .sg-blog-item-11 #sg-defaultCardWidget-container,
  .sg-blog-page .sg-blog-item-12 #sg-defaultCardWidget-container {
    scale: 1 !important ;
    transform: none;
  }

  .sg-blog-page .sg-blog-item-13 #sg-defaultCardWidget-content,
  .sg-blog-page .sg-blog-item-11 #sg-defaultCardWidget-content,
  .sg-blog-page .sg-blog-item-12 #sg-defaultCardWidget-content {
    transform: none !important;
  }

  .sg-blog-page .sg-blog-item-13 #sg-smallBlogCardWithDescription-container,
  .sg-blog-page .sg-blog-item-12 #sg-collection-card-container {
    height: fit-content;
  }
  #sg-defaultCarousel-carouselItem {
    padding-left: 0.75rem !important;
  }
}

/* Product card layout widget */
#sg-plp-page #sg-infiniteScrollProductCard-container {
  max-width: fit-content;
  margin: auto;
}

#sg-plp-page #sg-productCardLayout-title {
  display: none;
}

/* @media (max-width: 768px) {
  #sg-plp-page #sg-infiniteScrollProductCard-wrap {
    grid-template-columns: 1fr 1fr;
  }
} */

/* Two Engagement Widgets */
@media (max-width: 768px) {
  #sg-twoEngagements-container {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    gap: 1rem;
    overflow: auto;
  }
}

#sg-blog-list-two-column-section-heading {
  font-size: 24px;
  padding: 8px 0px;
  line-height: 33px;
  text-transform: uppercase;
}

#sg-full-content-seo-container p {
  color: rgb(126, 129, 140) !important;
}

#sg-full-content-seo-container h2 {
  color: rgb(126, 129, 140) !important;
  font-size: 2rem;
  font-weight: 500;
  line-height: 2.75rem;
}

#sg-full-content-seo-container h3 {
  color: rgb(126, 129, 140) !important;
  font-size: 1rem;
  font-weight: 500;
}
#sg-search-container {
  display: none;
}
/* #sg-search-container {
  position: absolute; 
  top: 6rem; 
  right: 8rem; 
}

#sg-search-container input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  #sg-search-container {
    position: absolute; 
    top: 9rem; 
    right: 2rem; 
  }
  #sg-search-container input {
    width: 80%;
  }
} */

#sg-leftContent-rightEngagement-engagementCard,
#sg-rightContent-leftEngagement-engagementCard {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ----------------------------------Right Engagement Left Content Widget----------------------- */
#sg-rightContent-leftEngagement-engagementCard {
  margin-right: 40px;
  width: fit-content !important;
  /* margin-bottom: 8px; */
}
@media (max-width: 768px) {
  #sg-rightContent-leftEngagement-engagementCard {
    width: 100% !important;
    margin-top: 20px;
    margin-bottom: 28px;
    margin-right: 0px;
  }
}

/* ----------------------------------Right Engagement Left Content Widget----------------------- */
#sg-leftContent-rightEngagement-engagementCard {
  margin-right: 40px;
  width: fit-content !important;
  /* margin-bottom: 8px; */
}
@media (max-width: 768px) {
  #sg-leftContent-rightEngagement-engagementCard {
    width: 100% !important;
    margin-top: 20px;
    margin-bottom: 28px;
    margin-right: 0px;
  }
  #sg-leftContent-rightEngagement-container {
    display: flex;
    flex-direction: column-reverse;
  }
  #sg-rightContent-leftEngagement-container {
    display: flex;
    flex-direction: column-reverse;
  }
}
/*Footer styles*/
footer .grid {
  display: unset !important;
}

footer li {
  list-style-type: unset !important;
  margin-bottom: 0.25em !important;
  padding-left: 0px !important;
  line-height: 19.0333px !important;
}

footer li a {
  font-size: 13.6px !important;
}

.footer__social li {
  display: inline-block;
  margin: 0 15px 15px 0 !important;
}

footer .footer__small-text {
  color: inherit !important;
}
.footer__collapsible > p {
  color: inherit !important;
  font-size: 13.6px !important;
  line-height: 19.0333px !important;
  margin: 0 0 15px !important;
}
/*Footer styles Ends here*/

#sg-breadcrumb-container-wrapper li {
  list-style-type: none !important;
}
#sg-product-details #sg-shoppable-product-url {
  margin-top: 50px !important;
}
.flex.gap-1.py-\[2px\].whitespace-nowrap.flex-shrink-0.scroll-smooth.mb-2 {
  margin-bottom: 0px !important;
}
/* Reset when variant selector is present */
#sg-shoppable-variant-selector ~ #sg-product-details #sg-shoppable-product-url {
  margin-top: 0px !important;
}

/* for extra css */
/* ==========================================================================
   GENERAL UTILITY & RESET
   ========================================================================== */

button:disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.link {
  color: inherit !important;
}

/* Remove background from header elements */
.header {
  background-color: unset !important;
}

/* Disable body scroll when drawer is open */
body.drawer-open {
  overflow: hidden;
}

/* ==========================================================================
   NAVIGATION & BREADCRUMBS
   ========================================================================== */

/* ==========================================================================
   MODAL & OVERLAY COMPONENTS
   ========================================================================== */

/* Quick View Modal */
#sg-quick-view-modal > div {
  overflow: hidden;
}

#sg-quick-view-modal::-webkit-scrollbar {
  display: none;
}

/* Quick View Close Button */
#sg-quick-view-close {
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  color: #ffffff;
  background-color: rgb(0, 0, 0);
  height: 50px;
  width: 50px;
  min-width: 50px;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

/* View Button */
#sg-view-button {
  cursor: pointer;
  padding: 12px;
}

/* Zoom Toggle */
#sg-zoom-toggle {
  display: none;
}

/* ==========================================================================
   CART FUNCTIONALITY
   ========================================================================== */

/* Cart Drawer */
#sg-cart-drawer {
  width: 0;
  transition: width 0.3s ease-in-out;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 9999999999 !important;
  display: none !important; /* Hidden by default */
}

#sg-cart-drawer.open {
  width: 400px;
}

/* Cart Overlay */
#sg-cart-overlay {
  z-index: 40;
}

#sg-cart-overlay.open {
  opacity: 0.5;
  pointer-events: auto;
}

/* Cart Items */
.cart-item {
  display: flex;
  padding: 2rem 0;
  border-bottom: 1px solid #eee;
}

.cart-item h4 {
  font-size: 16px !important;
}
div#sg-shoppable-product-card-4 {
  height: 100%;
}

.cart-item-image {
  max-width: 120px;
  object-fit: contain !important;
  margin-right: 1rem;
}

/* Quick Add to Cart */
#sg-quick-add-to-cart {
  border-radius: 20px;
}

#quick-qty {
  width: 50px;
  text-align: center;
}

/* Checkout Button */
#sg-checkout-button {
  cursor: pointer;
}

/* ==========================================================================
   PRODUCT CARDS & DISPLAY
   ========================================================================== */

/* Product Card Layout */
#sg-shoppable-product-card-1,
#sg-shoppable-product-card-2,
#sg-shoppable-product-card-3,
#sg-shoppable-product-card-4 {
  display: flex;
  margin: 0;
  justify-content: center;
  padding-top: 1rem;
}
#sg-shoppable-product-card {
  min-width: 364px !important;
  max-width: 364px !important;
  width: 100%;
}

/* Product Images */
#sg-shoppable-product-image {
  object-fit: cover;
}

#sg-defaultShopableCardWidget-image-container {
  width: 275.33px;
  height: 206.5px;
}

#sg-shoppable-image-wrapper {
  position: relative;
}

/* Image Zoom Effects */
#sg-shoppable-image-wrapper img {
  transition: transform 0.5s ease-in-out;
}

#sg-shoppable-image-wrapper.zoomed img {
  transform: scale(1.75);
}

/* Hide elements when zoomed */
#sg-shoppable-product-card-1.zoomed #sg-shoppable-product-title,
#sg-shoppable-product-card-1.zoomed #sg-shoppable-regular-price,
#sg-shoppable-product-card-1.zoomed #sg-sale-price,
#sg-shoppable-product-card-2.zoomed #sg-shoppable-product-title,
#sg-shoppable-product-card-2.zoomed #sg-shoppable-regular-price,
#sg-shoppable-product-card-2.zoomed #sg-sale-price,
#sg-shoppable-product-card-3.zoomed #sg-shoppable-product-title,
#sg-shoppable-product-card-3.zoomed #sg-shoppable-regular-price,
#sg-shoppable-product-card-3.zoomed #sg-sale-price {
  visibility: hidden !important;
  transition: transform 0.5s ease-in-out;
}

/* Product Titles */
#sg-shoppable-product-title {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 27px !important;
  font-weight: 500 !important;
  color: rgb(26, 24, 24) !important;
  font-family: inherit !important;
  min-height: 48px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#sg-shoppable-product-title:hover {
  text-decoration: underline;
}

h2#sg-shoppable-product-title {
  font-size: 25px;
}

/* Product Pricing */
#sg-sale-price {
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
}

#sg-shoppable-regular-price {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}

/* Add to Cart Button */
#sg-shoppable-add-to-cart-button {
  text-align: center;
  width: 100%;
  font-size: 16px;
  line-height: 22px;
  display: flex;
  background: black;
  color: white;
  cursor: pointer;
}

/* Variant Selector */
#sg-shoppable-variant-selector-button.border-black {
  border: 1px #000 solid;
  display: flex;
}

#sg-shoppable-variant-selector-button.bg-black {
  background-color: #000;
  color: white;
  display: flex;
}

/* ==========================================================================
   CAROUSEL & NAVIGATION
   ========================================================================== */

#sg-defaultCarousel-heading {
  padding-bottom: 0;
  font-size: 32px;
  line-height: 40px;
  color: #2a2a2a;
}

#prevBtn,
#nextBtn {
  display: block !important;
  background: rgb(245, 245, 245) !important;
}

/* ==========================================================================
   BLOG & CONTENT SECTIONS
   ========================================================================== */

/* Blog Container */
#sgBlogDetailsPage {
  max-width: 1180px;
  width: 100%;
  margin: auto;
}

.sgBlogDetailsPage ul {
  margin-left: 3rem;
}

/* Banner Components */
#sg-bannerWithShare-shareButton,
#sg-bannerWithPublishedDate-shareButton {
  display: none;
}

#sg-bannerWithShare-categoryName {
  font-weight: 700;
}

#sg-bannerWithPublishedDate-copyButton {
  display: none !important;
}

/* Banner Image Container */
.sg-bannerWithPublishedDate-image-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

#sg-bannerWithPublishedDate-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
}

/* Recommendation Images */
#sg-shopableBlogRecoImg {
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0;
  color: transparent;
}

/* Content Styling */
#sg-defaultShopableCardWidget-content {
  margin-top: 0 !important;

  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

#sgEngagement1 {
  height: fit-content !important;
}

/* Reset when variant selector is present */
#sg-shoppable-variant-selector ~ #sg-shoppable-product-url {
  margin-top: 0px !important;
}
#sg-isShoppablePlpContainer
  #sg-product-details
  #sg-shoppable-product-tags-container {
  margin-bottom: 6px !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: "Circular Std Book", system-ui, sans-serif !important;
}

/* Typography */
#sg-fullContent-container p {
  margin-bottom: 20px !important;
}

/* First paragraph (introduction) styling */
#sg-fullContent-container p:first-child {
  margin-bottom: 35px;
  text-align: justify;
}

/* Headings */
#sg-fullContent-container h2 {
  margin-top: 20px;
  margin-bottom: 20px;
}

#sg-fullContent-container h3 {
  margin-top: 30px;
  margin-bottom: 15px;
}

/* Blockquote styling */
#sg-fullContent-container .blockquote {
  margin: 30px 0;
}

#sg-fullContent-container .blockquote p {
  margin-bottom: 12px;
}

#sg-fullContent-container .blockquote p:first-child {
  margin-bottom: 15px;
}

/* Additional spacing improvements */
#sg-fullContent-container h2:first-of-type {
  margin-top: 25px;
}

#sg-fullContent-container p + h2 {
  margin-top: 45px;
}

#sg-fullContent-container p + h3 {
  margin-top: 35px;
}
#sg-fullContent-container strong {
  margin-bottom: 5px !important;
}