/* ============================================================
   PARCELLING LOVE — PRODUCT DETAIL
   Header/footer remain controlled by finalized global styles.
   ============================================================ */

.product-detail-page {
  background:#fbf6ee;
  color:#542711;
  overflow:hidden;
}

.product-detail-wrap {
  max-width:1400px;
  margin:0 auto;
  padding:154px 6% 70px;
}

.product-back {
  display:inline-block;
  margin-bottom:24px;
  color:#8d5c37;
  text-decoration:none;
  font:500 10px/1 Arial,sans-serif;
  letter-spacing:.12em;
}

.product-back:hover {
  color:#b87827;
}

.product-detail {
  display:grid;
  grid-template-columns:54% 46%;
  gap:60px;
  align-items:center;
}

.product-detail-visual {
  min-width:0;
}

.product-detail-image {
  position:relative;
  width:100%;
  aspect-ratio:1.08/1;
  overflow:hidden;
  background:#ead8be;
}

.product-detail-image img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.detail-badge {
  position:absolute;
  top:18px;
  left:18px;
  width:61px;
  height:61px;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:50%;
  background:#c78a2b;
  color:#fffaf3;
  font:700 8px/1.05 Arial,sans-serif;
  letter-spacing:.04em;
}

.detail-thumbs {
  display:flex;
  gap:9px;
  margin-top:10px;
}

.detail-thumb {
  width:74px;
  height:68px;
  padding:3px;
  border:1px solid #dfc29c;
  background:#fffaf3;
  cursor:pointer;
}

.detail-thumb.active {
  border:2px solid #542711;
}

.detail-thumb img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.product-detail-copy {
  padding:8px 4% 8px 0;
}

.product-detail-category {
  color:#b87827;
  font:500 10px/1 Arial,sans-serif;
  letter-spacing:.16em;
}

.product-detail-copy h1 {
  margin:14px 0 16px;
  color:#542711;
  font:500 clamp(54px,5vw,74px)/.88 var(--serif);
  letter-spacing:-.025em;
}

.product-detail-copy h1 em {
  color:#b87827;
  font:400 1em/1 var(--script);
  letter-spacing:0;
}

.detail-rating {
  display:flex;
  align-items:center;
  gap:13px;
  padding-bottom:18px;
  border-bottom:1px solid #e3ceb0;
}

.detail-rating span {
  color:#b87827;
  font-size:13px;
  letter-spacing:2px;
}

.detail-rating small {
  color:#8b6a50;
  font:12px/1 Arial,sans-serif;
}

.detail-description {
  max-width:560px;
  margin:21px 0;
  color:#6b4935;
  font:15px/1.75 Arial,sans-serif;
}

.detail-price {
  color:#542711;
  font:700 27px/1 Arial,sans-serif;
  margin-bottom:25px;
}

.detail-price span {
  margin-left:7px;
  color:#947760;
  font:11px/1 Arial,sans-serif;
}

.detail-options {
  border-top:1px solid #e3ceb0;
}

.detail-option {
  padding:18px 0;
  border-bottom:1px solid #e3ceb0;
}

.detail-option > span {
  display:block;
  margin-bottom:10px;
  color:#8f5c28;
  font:500 9px/1 Arial,sans-serif;
  letter-spacing:.14em;
}

.size-options {
  display:flex;
  gap:8px;
}

.size-option {
  padding:9px 15px;
  border:1px solid #d8bb92;
  background:transparent;
  color:#542711;
  cursor:pointer;
  font:500 10px/1 Arial,sans-serif;
}

.size-option.active {
  border-color:#542711;
  background:#542711;
  color:#fffaf3;
}

.detail-option input {
  width:100%;
  box-sizing:border-box;
  padding:8px 0;
  border:0;
  outline:0;
  border-bottom:1px solid #d8bb92;
  background:transparent;
  color:#542711;
  font:14px/1.4 Arial,sans-serif;
}

.quantity {
  display:flex;
  align-items:center;
  width:108px;
  border:1px solid #d8bb92;
}

.quantity button {
  width:35px;
  height:34px;
  border:0;
  background:transparent;
  color:#542711;
  cursor:pointer;
  font-size:17px;
}

.quantity strong {
  flex:1;
  text-align:center;
  font:500 13px/1 Arial,sans-serif;
}

.detail-add {
  width:100%;
  margin-top:22px;
  padding:16px 20px;
  border:1px solid #542711;
  background:#542711;
  color:#fffaf3;
  cursor:pointer;
  font:500 10px/1 Arial,sans-serif;
  letter-spacing:.12em;
}

.detail-add span {
  margin-left:12px;
  font-size:14px;
}

.detail-add:hover {
  background:#b87827;
  border-color:#b87827;
}

.detail-notes {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin-top:20px;
}

.detail-notes div {
  display:flex;
  align-items:center;
  gap:7px;
  color:#795a45;
  font:10px/1.35 Arial,sans-serif;
}

.detail-notes strong {
  color:#b87827;
  font-size:15px;
}

.detail-story {
  padding:70px 9%;
  display:grid;
  grid-template-columns:45% 55%;
  gap:60px;
  align-items:center;
  background:#f0dfc9;
  border-top:1px solid #e4caa8;
}

.detail-story-kicker {
  color:#b87827;
  font:500 10px/1 Arial,sans-serif;
  letter-spacing:.16em;
}

.detail-story h2 {
  margin:13px 0 0;
  color:#542711;
  font:500 50px/.92 var(--serif);
}

.detail-story h2 em {
  color:#b87827;
  font:400 1em/1 var(--script);
}

.detail-story p {
  max-width:580px;
  color:#6b4935;
  font:15px/1.75 Arial,sans-serif;
}

/* Mobile */
@media(max-width:780px) {
  .product-detail-wrap {
    padding:108px 20px 55px;
  }

  .product-detail {
    grid-template-columns:1fr;
    gap:34px;
  }

  .product-detail-copy {
    padding:0;
  }

  .product-detail-copy h1 {
    font-size:51px;
  }

  .detail-notes {
    grid-template-columns:1fr;
    gap:9px;
  }

  .detail-story {
    padding:58px 22px;
    grid-template-columns:1fr;
    gap:24px;
  }

  .detail-story h2 {
    font-size:44px;
  }
}

@media(max-width:430px) {
  .product-detail-wrap {
    padding-left:15px;
    padding-right:15px;
  }

  .product-detail-copy h1 {
    font-size:45px;
  }
}


/* ============================================================
   RELATED PRODUCTS
   ============================================================ */

.related-products {
  padding:78px 6% 82px;
  background:#fbf6ee;
  border-top:1px solid #e4caa8;
}

.related-heading {
  max-width:1400px;
  margin:0 auto 35px;
  text-align:center;
}

.related-heading h2 {
  margin:12px 0 8px;
  color:#542711;
  font:500 48px/.92 var(--serif);
}

.related-heading h2 em {
  color:#b87827;
  font:400 1em/1 var(--script);
}

.related-heading p {
  margin:0 auto;
  color:#765640;
  font:14px/1.6 Arial,sans-serif;
}

.related-grid {
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.related-card {
  overflow:hidden;
  background:#fffdf9;
  border:1px solid #e4cfb1;
  border-radius:14px;
  transition:transform .22s ease, box-shadow .22s ease;
}

.related-card:hover {
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(84,39,17,.09);
}

.related-image {
  position:relative;
  display:block;
  aspect-ratio:1.12/1;
  overflow:hidden;
  background:#ead9bf;
}

.related-image img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .4s ease;
}

.related-card:hover .related-image img {
  transform:scale(1.045);
}

.related-badge {
  position:absolute;
  top:12px;
  left:12px;
  padding:7px 9px;
  border-radius:20px;
  background:#c78a2b;
  color:#fffaf3;
  font:700 8px/1 Arial,sans-serif;
  letter-spacing:.06em;
}

.related-content {
  padding:17px 18px 18px;
}

.related-content > span {
  color:#b87827;
  font:500 9px/1 Arial,sans-serif;
  letter-spacing:.15em;
}

.related-content h3 {
  margin:8px 0 17px;
  color:#542711;
  font:500 22px/1.05 var(--serif);
}

.related-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:13px;
  border-top:1px solid #ead9c2;
}

.related-bottom strong {
  color:#b87827;
  font:700 17px/1 Arial,sans-serif;
}

.related-bottom a {
  color:#542711;
  text-decoration:none;
  font:500 9px/1 Arial,sans-serif;
  letter-spacing:.1em;
}

.related-bottom a b {
  margin-left:6px;
  font-size:13px;
}

.related-bottom a:hover {
  color:#b87827;
}

@media(max-width:1050px) {
  .related-grid {
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:780px) {
  .related-products {
    padding:60px 18px 65px;
  }

  .related-heading h2 {
    font-size:43px;
  }

  .related-grid {
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .related-content {
    padding:14px 12px 15px;
  }

  .related-content h3 {
    font-size:18px;
  }
}

@media(max-width:450px) {
  .related-grid {
    grid-template-columns:1fr;
  }
}


/* ============================================================
   ADD TO PARCEL MODAL
   ============================================================ */

.parcel-modal {
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:25px;
}

.parcel-modal.is-open {
  display:flex;
}

.parcel-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(45,20,10,.62);
  backdrop-filter:blur(4px);
}

.parcel-modal-dialog {
  position:relative;
  z-index:2;
  width:min(720px,100%);
  max-height:92vh;
  overflow:auto;
  padding:42px 42px 38px;
  background:#fffaf3;
  border:1px solid #e0c39c;
  box-shadow:0 28px 70px rgba(40,18,8,.28);
}

.parcel-modal-close {
  position:absolute;
  top:15px;
  right:17px;
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  color:#542711;
  cursor:pointer;
  font:300 30px/1 Arial,sans-serif;
}

.parcel-modal-heading {
  padding-right:35px;
  margin-bottom:25px;
}

.parcel-modal-heading > span {
  color:#b87827;
  font:500 9px/1 Arial,sans-serif;
  letter-spacing:.16em;
}

.parcel-modal-heading h2 {
  margin:11px 0 7px;
  color:#542711;
  font:500 43px/.95 var(--serif);
}

.parcel-modal-heading h2 em {
  color:#b87827;
  font:400 1em/1 var(--script);
}

.parcel-modal-heading p {
  margin:0;
  color:#765640;
  font:13px/1.6 Arial,sans-serif;
}

.parcel-form {
  display:flex;
  flex-direction:column;
  gap:0;
}

.parcel-form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.parcel-form label {
  display:block;
  margin-bottom:17px;
}

.parcel-form label > span {
  display:block;
  margin-bottom:7px;
  color:#8f5c28;
  font:500 9px/1 Arial,sans-serif;
  letter-spacing:.13em;
}

.parcel-form input,
.parcel-form textarea {
  width:100%;
  box-sizing:border-box;
  padding:11px 12px;
  border:1px solid #dbc29f;
  outline:none;
  border-radius:0;
  background:#fffdf9;
  color:#542711;
  font:13px/1.5 Arial,sans-serif;
}

.parcel-form textarea {
  resize:vertical;
  min-height:72px;
}

.parcel-form input:focus,
.parcel-form textarea:focus {
  border-color:#b87827;
}

.parcel-form input::placeholder,
.parcel-form textarea::placeholder {
  color:#a18b76;
}

.parcel-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:3px 0 18px;
  padding:15px 16px;
  background:#f3e4d0;
  border:1px solid #e5cfb1;
}

.parcel-summary span {
  display:block;
  margin-bottom:6px;
  color:#8f5c28;
  font:500 8px/1 Arial,sans-serif;
  letter-spacing:.13em;
}

.parcel-summary strong {
  color:#542711;
  font:500 14px/1.2 var(--serif);
}

.parcel-summary .modal-total {
  color:#b87827;
  font:700 20px/1 Arial,sans-serif;
}

.parcel-submit {
  width:100%;
  padding:15px 20px;
  border:1px solid #542711;
  background:#542711;
  color:#fffaf3;
  cursor:pointer;
  font:500 10px/1 Arial,sans-serif;
  letter-spacing:.12em;
}

.parcel-submit span {
  margin-left:12px;
  font-size:14px;
}

.parcel-submit:hover {
  background:#b87827;
  border-color:#b87827;
}

body.parcel-modal-open {
  overflow:hidden;
}

@media(max-width:600px) {
  .parcel-modal {
    padding:10px;
  }

  .parcel-modal-dialog {
    max-height:96vh;
    padding:34px 20px 24px;
  }

  .parcel-form-row {
    grid-template-columns:1fr;
    gap:0;
  }

  .parcel-modal-heading h2 {
    font-size:39px;
  }
}
/* Align product image and details at the same top edge */

.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: 55px;
}

/* Image column */
.product-detail-visual {
    min-width: 0;
    margin: 0;
    padding: 0;
}

.product-detail-image {
    margin: 0;
    padding: 0;
}

.product-detail-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Product information column */
.product-detail-copy {
    min-width: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: start;
}

/* Responsive layout */
@media (max-width: 768px) {
    .product-detail {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* FIX 1: Remove blank space below the main product image */
.product-detail-visual {
    min-width: 0;
    height: auto;
}

.product-detail-image {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}

.product-detail-image img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* FIX 2: Remove the unwanted right-side border */
.product-detail-image,
.product-detail-image img {
    border-right: none !important;
}

/* Keep thumbnails directly below the image */
.detail-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
/* PRODUCT MAKING VIDEO SECTION */

#product-making-section {
    display: block !important;
    width: 100% !important;
    padding: 35px 0 55px !important;
    margin: 0 !important;
    background: #fbf6ef !important;
    border-top: 1px solid #e8d3b9;
    box-sizing: border-box;
}

#product-making-section .making-video-container {
    width: 80% !important;
    max-width: 1250px;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 55px !important;
}

#product-making-section .making-video-left {
    width: 100% !important;
    min-width: 0;
    overflow: hidden;
    border-radius: 10px;
}

#product-making-section .making-video-left video {
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    max-width: none !important;
    object-fit: cover;
    background: #eadbc9;
}

#product-making-section .making-video-right {
    width: 100% !important;
}

#product-making-section .making-video-right h2 {
    font-family: Georgia, serif;
    font-size: 30px !important;
    font-weight: 600;
    color: #542b19;
    margin: 0 0 15px !important;
}

#product-making-section .making-video-right p {
    font-size: 16px;
    line-height: 1.7;
    color: #68452f;
    margin: 0 !important;
}

#product-making-section .making-video-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 70%;
    margin-top: 25px;
}

#product-making-section .making-video-divider span {
    height: 1px;
    flex: 1;
    background: #d9b991;
}

#product-making-section .making-video-divider i {
    color: #b98a55;
    font-size: 17px;
}

@media (max-width: 767px) {

    #product-making-section .making-video-container {
        width: 90% !important;
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    #product-making-section .making-video-left video {
        height: 250px !important;
    }

    #product-making-section .making-video-right h2 {
        font-size: 25px !important;
    }

    #product-making-section .making-video-right p {
        font-size: 14px;
    }
}
#product-making-section .making-video-right .making-video-title {
    margin: 0 0 18px;
    color: var(--brown);
    font-family: var(--serif);
    font-size: 42px;
    font-weight: 500;
    line-height: 1;
}

#product-making-section .making-video-right .making-video-title em {
    display: inline-block;
    color: var(--gold);
    font-family: var(--script);
    font-size: 1.15em;
    font-weight: 400;
    font-style: normal;
}

@media (max-width: 780px) {
    #product-making-section .making-video-right .making-video-title {
        font-size: 34px;
    }
}
/* Decorative heart divider */

#product-making-section .making-video-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 70%;
    margin-top: 25px;
}

#product-making-section .making-video-divider span {
    display: block;
    height: 1px;
    flex: 1;
    background: var(--line);
}

#product-making-section .making-video-divider .making-heart {
    display: inline-block;
    color: var(--gold);
    font-family: Arial, sans-serif;
    font-size: 21px;
    font-style: normal;
    line-height: 1;
}