@media (min-width: 768px) {
  .col-md-4 {
    flex: 0 0 auto;
    width: 32.333333%;
  }
}

@media (min-width: 1200px) {
  .fs-4 {
    font-size: 40px !important;
  }

  .display-6 {
    font-size: 3.7rem;
  }

  .product-detail-page {
    padding-left: 0;
    padding-right: 0;
  }

  .product-detail-page + .container.mb-5 .col-lg-6:first-child {
    padding-right: 45px;
  }

  .product-detail-page + .container.mb-5 .col-lg-6:last-child {
    padding-left: 45px;
    padding-top: 30px;
  }

  .product-detail-page + .container.mb-5 .product-title {
    font-size: 48px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .product-detail-page {
    padding-left: 25px;
    padding-right: 25px;
  }

  .product-detail-page .breadcrumb-custom {
    margin-top: 25px;
    margin-bottom: 40px;
  }

  .product-detail-page + .container.mb-5 {
    padding-left: 25px;
    padding-right: 25px;
  }

  .product-detail-page + .container.mb-5 .product-title {
    font-size: 38px;
  }

  .product-detail-page + .container.mb-5 .col-lg-6:first-child {
    padding-right: 20px;
  }

  .product-detail-page + .container.mb-5 .col-lg-6:last-child {
    padding-left: 20px;
  }
}

@media (max-width: 1033px) {
 .view-products .views-row .views-field-variations-target-id {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    bottom: auto;
    margin: 0;
  }
.product-detail-page + .container.mb-5 > .row:first-child {
    padding-top: 40px;
}
.view-products .views-row .product-card {
    position: relative;
    overflow: visible;
    min-height: 511px;
}
.bg-white.px-3.py-2.rounded-2.shadow-sm.position-absolute.d-none.d-md-block {
    bottom: 22px !important;

}
.paragraph--type--badge-text {

    font-size: 18px;
    padding: 8px 8px;

}
#story .col-lg-7 p {
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: 1px;
}
.container {
    max-width: 925px;
}
.py-lg-6 .row.g-4.mb-5 {
    margin-bottom: 0rem!important;
}
.section-eyebrow {
    padding-top: 10px;

}
#crafts .py-5 {
    padding-bottom: 1rem!important;
}
  #block-impactbar .py-5 {
    padding-bottom: 0rem !important;
  }

  .display-6.makers-title h2 {
    margin-bottom: 1.5rem;
  }

  .view-id-products .g-4 {
    --bs-gutter-y: 0 !important;
  }

  form#views-exposed-form-products-block-1 {
    padding: 30px 0;
  }

  #story .col-lg-7 .display-6 {
    font-size: 45px;
  }

  #crafts .col-lg-7.text-white {
    padding-left: 30px;
  }

  #crafts .col-lg-7.text-white p.mb-0 {
    font-size: 28px !important;
  }

  #block-ourmission .py-5 {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
  }

  #crafts .py-5 {
    padding-top: 1rem !important;
    padding-bottom: 0;
  }

  #crafts .section-eyebrow {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  #crafts .mb-5 {
    margin-bottom: 28px !important;
    margin-top: 20px;
  }

  .hero h1 {
    font-size: 50px;
  }

  .hero {
    min-height: 28vh;
    background: linear-gradient(180deg, rgba(15,25,15,.15) 0%, rgba(15,25,15,.05) 40%, rgba(10,18,10,.6) 100%), url(/themes/custom/handicraft/assets/images/banner.png) center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
  }
}

@media (max-width: 991.98px) {
  
.views-exposed-form .js-form-item.form-item.js-form-type-select.form-item-sort-order.js-form-item-sort-order {
    float: none;
    position: relative;
    bottom: 0;
    right: 0;
    left: 10px;
}

.paragraph--type--badge-text {
    font-size: 16px;
    padding: 8px 8px;
}
.bef-link {

    font-size: 20px;

}
.view-id-products .views-exposed-form .form-select {
  
    font-size: 20px;

}
#views-exposed-form-products-block-1 .js-form-item.form-item.js-form-type-select.form-item-sort-by.js-form-item-sort-by {
    bottom: 52px;
    right: 16px;

}

#contact .h6, h6 {
    font-size: 2rem;
}
#block-handicraft-footerlogo .btn-brand-orange {
    font-size: 26px;
}
#block-handicraft-footerlogo p.text-white-100 {
    line-height: 1.5;
    letter-spacing: 1px;
     font-size: 16px;
    margin-bottom: 24px !important;
}
.col-md-3 {
    flex: 0 0 auto;
    width: 25% !important;
}
  footer {
    font-size: .85rem;
  }

  footer .small {
    font-size: .75rem;
  }

  #block-handicraft-footerlogo p.small {
    font-size: 24px;
    margin-bottom: 1.5rem !important;
  }

  #block-handicraft-footerlogo p.navbar-brand-title {
    font-size: 40px;
  }

  #block-handicraft-footercontact .text-content {
    font-size: 16px;
  }

  #block-handicraft-navigate ul {
    padding-left: 0;
  }

  #block-handicraft-navigate ul li a {
    font-size: 22px;
  }
.impact-item .impact-text {
   
    line-height: 1.5;
    letter-spacing: 1px;
}
.impact-bar .impact-item .fs-2 {
    font-size: 3rem!important;
}
#collection .py-5 {
    padding-top: 2rem!important;
    padding-bottom: 2rem!important;
}
.section-eyebrow {
    padding-top: 0px;

}
.view-products .product-card .card-body p {
    font-size: 24px;
}
.view-id-products .product-card .card-body .h6 a {
  
    font-size: 24px;
}
#story .col-lg-5 .fst-italic {
    font-size: 16px;
}
.bg-white.px-3.py-2.rounded-2.shadow-sm.position-absolute.d-none.d-md-block {
    bottom: 72px !important;
}
.paragraph--type--badge-text {
   
    padding: 7px 6px;
    
}
#story .col-lg-7 p {
    font-size: 22px;
}
#story .col-lg-7 .display-6 {
    font-size: 40px;
}
.mission-actions .small {
    font-size: 1.3rem;
    max-width: 210px;
}
.mission-actions .fs-6 {
    font-size: 38px!important;
}
#crafts .col-lg-5 {
    padding-right: 26px;
}
#crafts .py-5 {
    padding-top: 1rem!important;
}
 .row>* { 
    width: 50%;
}
  .layout-checkout-form {
    flex-direction: column;
  }

  .layout-region-checkout-secondary {
    position: static;
    width: 100%;
  }

  .navbar {
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
  }

  .navbar-brand-title {
    font-size: 1rem;
  }

  .navbar-brand-title small {
    font-size: .5rem;
  }

  .navbar-nav {
    gap: .15rem !important;
  }

  .navbar .nav-link {
    font-size: .62rem;
    padding: .2rem .25rem !important;
  }

  .navbar .btn {
    font-size: .62rem;
    padding: .3rem .65rem !important;
  }

  .hero {
    min-height: 480px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero-info-card {
    font-size: .72rem;
    padding: .55rem !important;
  }

  .hero-info-card .font-display {
    font-size: 1.25rem !important;
  }

  .reason-card {
    min-height: 145px;
    padding: 1rem .9rem;
  }

  .reason-num {
    font-size: 1.5rem;
    margin-bottom: 1rem !important;
  }

  .reason-card h3 {
   font-size: 1.9rem;
        line-height: 1.2;
  }

  .mission-actions {
    align-items: flex-end;
  }

  /* .mission-impact {
    max-width: 150px;
    font-size: .58rem;
  } */

  .mission-shop {
    width: 100% !important;
    font-size: 1.5rem !important;
  }

 

  .product-card .card-body {
    padding: .65rem;
  }

  .product-card h3 {
    font-size: .7rem;
  }

  .product-card .small {
    font-size: .55rem;
    line-height: 1.25;
  }

  .maker-photo {
    height: 300px;
  }

  .impact-item {
    min-height: 40px;
  }

  .impact-item .impact-text {
    font-size: 1.4rem;
  }

  footer {
    font-size: .65rem;
  }

  footer .navbar-brand-title {
    font-size: 1rem;
  }

  footer .small {
    font-size: .5rem;
  }
}

@media (max-width: 769px) {
.views-exposed-form .js-form-item.form-item.js-form-type-select.form-item-sort-order.js-form-item-sort-order {
    float: none;
    position: relative;
    bottom: 0;
    right: 0;
    left: 10px;
}
.view-id-products .views-exposed-form .form-select {
    font-size: 20px;
  }
  #edit-actions {
    margin-top: 42px;
    
}
.product-detail-page + .container.mb-5 .detail-tabs .nav-link {
    font-size: 24px;
}
img#mainImage {
    display: block;
    width: 86%;
    height: 270px;
    object-fit: cover;
    margin: 0;
}
#block-handicraft-footercontact .text-content {
    font-size: 14px;
}
#views-exposed-form-products-block-1 .js-form-item.form-item.js-form-type-select.form-item-sort-by.js-form-item-sort-by {
    float: none;
    bottom: 0;
    right: 0;
    clear: both;
    position: relative;
}
.bg-white.px-3.py-2.rounded-2.shadow-sm.position-absolute.d-none.d-md-block {
    bottom: 95px !important;
}
#story .col-lg-7 p {
    font-size: 16px;
}
#story .col-lg-7 .display-6 {
    font-size: 30px;
}
#crafts .col-lg-7.text-white p.mb-0 {
    font-size: 22px !important;
}
#crafts .text-start {
    text-align: left!important;
    gap: 10px;
}
  .product-detail-page {
    padding-left: 15px;
    padding-right: 15px;
  }

  .product-detail-page .breadcrumb-custom {
    margin-top: 20px;
    margin-bottom: 30px;
    gap: 5px;
    font-size: 24px;
  }

  /* Main product container */
  .product-detail-page + .container.mb-5 {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Image */
  .product-detail-page + .container.mb-5 .col-lg-6:first-child {
    padding-right: 0;
  }

  .product-detail-page + .container.mb-5 .col-lg-6:first-child > div:first-child img {
    height: 300px;
  }

  /* Thumbnails */
  .product-detail-page + .container.mb-5 .thumb-img {
    height: 70px;
  }

  /* Product info */
  .product-detail-page + .container.mb-5 .col-lg-6:last-child {
    padding-left: 0;
    padding-top: 25px;
  }

  /* Title */
  .product-detail-page + .container.mb-5 .product-title {
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.5px;
  }

  /* Price */
  .product-detail-page + .container.mb-5 .price-text {
    font-size: 20px;
  }

  /* Cart row */
  .product-detail-page + .container.mb-5 .col-lg-6:last-child > .d-flex {
    gap: 12px !important;
    margin-top: 25px !important;
  }

  .product-detail-page + .container.mb-5 .btn-add-cart {
    min-width: 150px;
  }

  /* Tabs */
  .product-detail-page + .container.mb-5 > .row.mt-5 {
    margin-top: 45px !important;
  }

  .product-detail-page + .container.mb-5 .detail-tabs {
    gap: 18px;
  }

  .product-detail-page + .container.mb-5 .detail-tabs .nav-link {
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  .cart.cart-form {
    padding: 14px;
    margin: 16px;
  }

  .cart.cart-form table.cols-5 thead {
    display: none;
  }

  .cart.cart-form table.cols-5,
  .cart.cart-form table.cols-5 tbody,
  .cart.cart-form table.cols-5 tr,
  .cart.cart-form table.cols-5 td {
    display: block;
    width: 100%;
  }

  .cart.cart-form table.cols-5 tr {
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 14px;
    padding: 10px;
  }

  .cart.cart-form table.cols-5 td {
    border-bottom: none;
    padding: 8px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .views-field-purchased-entity::before { content: "Item"; font-size: 12px; color: #999; }
  .views-field-unit-price__number::before { content: "Price"; font-size: 12px; color: #999; }
  .views-field-edit-quantity::before { content: "Qty"; font-size: 12px; color: #999; }
  .views-field-remove-button::before { content: ""; }
  .views-field-total-price__number::before { content: "Total"; font-size: 12px; color: #999; }

  #edit-actions {
    flex-direction: column;
  }

  #edit-submit,
  #edit-checkout {
    width: 100%;
  }

  #edit-login {
    flex-direction: column;
  }

  #edit-login fieldset {
    padding: 18px;
  }

  #edit-login-returning-customer-submit,
  #edit-login-guest-continue {
    width: 100%;
    align-self: stretch;
    text-align: center;
  }

  .commerce-checkout-flow-multistep-default {
    padding: 0 14px;
    margin: 20px auto;
  }

  .checkout-pane,
  .checkout-pane-order-summary {
    padding: 18px;
  }

  .address-container-inline {
    flex-direction: column;
  }

  .address-container-inline .js-form-item {
    flex: 1 1 100%;
  }

  .layout-region-checkout-footer #edit-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #edit-actions-next {
    width: 100%;
    text-align: center;
  }

  .link--previous {
    text-align: center;
  }
}

/* ===== Responsive ===== */
@media (max-width: 480px) {
div#block-handicraft-getintouch, div#block-handicraft-outletaddress {
    margin: 12px;
}
  .contact-message-form {
    max-width: 320px;
    margin: 0 auto 0px;
}
  #block-handicraft-primary-local-tasks ul {
    
     display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
   
}
  .pd-user-dropdown {
    
    right: 0;
}
.pd-right {
    padding-left: 0px;
}
#block-handicraft-primary-local-tasks ul li a.tabs__link.js-tabs-link {
    
    padding: 6px 10px;
    font-size: 16px;

}
.views-exposed-form .js-form-item.form-item.js-form-type-select.form-item-sort-order.js-form-item-sort-order {
    float: none;
    position: relative;
    bottom: 0;
    right: 0;
    left: 10px;
}
.view-id-products .views-exposed-form .form-select {
    
    right: 132px !important;
    
}
ul.pager__items.js-pager__items {
    gap: 0px;    
    padding-left: 0 !important;
}
.pager ul li a {
    
    padding: 0px 6px;
    font-size: 1rem;
}
div[data-drupal-messages] {
   
    width: 400px;
    left: 4%;
}
  .view-products .product-card .h-100 {
    min-height: auto;
  }
li.pager__item.pager__item--next, li.pager__item.pager__item--last {
    display: none;
}
.border-secondary .my-4{
    margin-top: 20px!important;
    margin-bottom: 28px!important;
}
.product-detail-page + .container.mb-5 .col-lg-6:last-child {
    padding-left: 12px;
    }
 .product-detail-page + .container.mb-5 .thumb-img {
    height: 100%;
    width: 50%;
  }
.impact-bar .impact-item .fs-2 {
    font-size: 2rem!important;
}
.impact-item .impact-text {
    font-size: 1rem;
}
.impact-bar .col-md-6:nth-child(2) .impact-item .impact-text {
    width: 186px;
}
footer .small {
    font-size: 1rem;
}
.col-md-3 {
    flex: 0 0 auto;
    width: 100% !important;
}
#block-handicraft-footerlogo .btn-brand-orange {
    font-size: 12px;
}
.bef-links ul {
    gap: 1.5rem !important;
}
#crafts .col-md-4 {
    flex: 0 0 auto;
    width: 100%;
}
#crafts .py-5 {
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
}
.display-6 {
    font-size: 44px;
}
#top .col-lg-5.mt-4.mt-lg-0 {
    width: 92%;
}
.row>* {
    width: 100%;
}
.hero h1 {
    font-size: 1.9rem;
}
.hero {
            min-height: 50vh;
}
/* .navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
  
    justify-content: space-around;
} */
  .user-register-form {
    padding: 22px;
  }
}
@media (max-width: 376px){
#block-handicraft-primary-local-tasks ul li a.tabs__link.js-tabs-link {
    padding: 6px 13px;
    font-size: 12px;
}
#block-handicraft-primary-local-tasks ul {
    gap: 14px;
}
div#block-handicraft-primary-local-tasks {
    padding: 30px 0;
}
/* .views-exposed-form .js-form-item.form-item.js-form-type-select.form-item-sort-order.js-form-item-sort-order {
    float: none;
    position: relative;
    bottom: 0;
    right: 0;
    left: 10px;
} */
.border-secondary .my-4{
    margin-top: 20px !important;
    margin-bottom: 28px !important;
}
.bef-link {
    font-size: 16px;
}
.bef-links ul {
    gap: 1.5rem !important;
}
div[data-drupal-messages] {
    position: fixed;
    top: 40px;
    background: orange;
    z-index: 9999;
    width: 350px;
    text-align: center;
    padding: 10px;
    left: 2%;
    right: 50%;
    box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.17);
    color: #fff;
    font-size: 18px;
}
#block-handicraft-footerlogo .btn-brand-orange {
    font-size: 12px;
}
}
/* =========================================================
   MAIN NAV - DESKTOP (992px and up)
========================================================= */
@media (min-width: 992px) {
  #mainNav.main-nav-wrap {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: center;
    position: static;
    transform: none;
    visibility: visible;
    height: auto;
    width: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  #block-handicraft-main-menu ul.header-main-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    margin: 0 0 0 224px;
    padding: 0;
  }

  /* #block-handicraft-main-menu ul.header-main-menu li:last-child {
    margin-left: 20px;
   
  } */
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #block-handicraft-main-menu ul.header-main-menu {
    margin-left: 40px;
  }
}

@media (min-width: 992px) and (max-width: 1033px) {

  #block-handicraft-main-menu ul.header-main-menu li a {
    font-size: 18px;
  }

  #block-handicraft-main-menu ul.header-main-menu li:last-child {
    margin-left: 0;
  }
}

/* =========================================================
   MAIN NAV - MOBILE / TABLET (991.98px and below)
========================================================= */
@media (max-width: 991.98px) {
  #block-handicraft-main-menu ul.header-main-menu > li.has-submenu > a::after {
   
    width: 12px;
    height: 12px;
    margin-left: 14px;
   
}
  #block-handicraft-main-menu ul.header-main-menu > li.has-submenu > .sub-menu {
        display: none;
    }

    #block-handicraft-main-menu ul.header-main-menu > li.has-submenu.is-open > .sub-menu {
        display: block;
    }

    #block-handicraft-main-menu ul.header-main-menu > li.has-submenu.is-open > a::after {
        transform: rotate(225deg);
    }

  #mainNav.main-nav-wrap {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85%;
    height: 100vh;
    height: 100dvh;
    padding: 70px 24px 24px;
    background: var(--bd-cream);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0.35s ease;
    z-index: 2000;
  }

  #mainNav.main-nav-wrap.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  #block-handicraft-main-menu ul.header-main-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin: 0;
    padding: 0;
  }

  #block-handicraft-main-menu ul.header-main-menu li a {
    font-size: 18px;
    padding: 4px 0;
  }

  #block-handicraft-main-menu ul.header-main-menu li:last-child {
    margin: 8px 0 0;
  }

  .nav-close-btn {
    display: block;
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: 0;
    padding: 0;
    font-size: 36px;
    line-height: 1;
    color: var(--bd-ink);
    cursor: pointer;
  }

  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1999;
  }

  .nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  body.nav-open {
    overflow: hidden;
  }
}