.tfw-newarrivals, .tfw-newarrivals *{ box-sizing:border-box; }
.tfw-newarrivals{
  --tf-na-view: 3;
  --tf-na-gap: 0px;
  --tf-na-speed: 450ms;
  font-family:'Bricolage Grotesque','Inter',sans-serif;
}
.tfw-newarrivals a{ color:inherit; text-decoration:none; }
.tfw-newarrivals button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
.tfw-newarrivals .container{ max-width:1440px; margin:0 auto; padding:0 40px; }
.tfw-newarrivals .section{ padding:78px 0; }

/* ---- header: heading / subtitle / Show-All on the left, arrows top-right ---- */
.tfw-newarrivals .section-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:38px; }
.tfw-newarrivals .section-head-text{ min-width:0; }
.tfw-newarrivals .section-head h2{
  font-family:'Playfair Display',Georgia,serif; font-size:40px; line-height:53px; font-weight:600; letter-spacing:1px;
  color:#0F0F0F; margin:0;
}
.tfw-newarrivals .section-sub{
  color:#000; font-size:14px; line-height:21px; font-weight:300; letter-spacing:1px; text-transform:uppercase;
  margin:5px 0 0; max-width:700px;
}
.tfw-newarrivals .btn-shopall-wrap{ padding-top:20px; margin-top:5px; }
.tfw-newarrivals .carousel-arrows{ display:flex; gap:16px; flex-shrink:0; }
.tfw-newarrivals .arrow-btn{
  width:35px; height:35px; padding:0; border-radius:50%; border:1px solid #E9E0D2; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#0F0F0F; background:#FFFBF2;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tfw-newarrivals .arrow-btn:hover, .tfw-newarrivals .arrow-btn:focus{ background:#0F0F0F; color:#fff; border-color:#0F0F0F; }
.tfw-newarrivals .arrow-btn svg{ width:16px; height:16px; display:block; }
.tfw-newarrivals .arrow-icon-img{ width:14px; height:14px; object-fit:contain; display:block; }

/* ---- Show All button: Figma gold button (all values overridable in Style → Shop-All Button) ---- */
.tfw-newarrivals a.btn-shopall{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 32px; font-size:16px; font-weight:500; line-height:24px; letter-spacing:1px; text-transform:none;
  border-radius:0; border:0; background:#C99E43; color:#FFFEFB; white-space:nowrap; cursor:pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.tfw-newarrivals a.btn-shopall:hover{ background:#B08A38; color:#FFFEFB; }
.tfw-newarrivals a.btn-shopall .arrow{ display:block; flex-shrink:0; width:14px; height:14px; transition: transform .25s ease; }
.tfw-newarrivals a.btn-shopall:hover .arrow{ transform:translateX(3px); }

/* ---- slider ---- */
.tfw-newarrivals .product-scroll{ overflow-x:hidden; overflow-y:visible; }
.tfw-newarrivals .product-grid{ display:flex; will-change: transform; }
.tfw-newarrivals .product-card{
  background:#FFFBF2; border:1.33px solid #CCCCCC; overflow:hidden; flex-shrink:0; min-width:0;
  margin-right:var(--tf-na-gap);
  transition: box-shadow .25s ease;
}
.tfw-newarrivals .product-media{ position:relative; aspect-ratio:1/1; background:#FFFBF2; overflow:hidden; }
/* Always full card width — a stray theme / "Additional CSS" height (e.g. the old
   `.product-media{height:300px}`) must never shrink the box and push it to the left. */
.tfw-newarrivals .product-card .product-media{ width:100%; height:auto; }
.tfw-newarrivals .product-media > a{ position:absolute; inset:0; display:block; }
/* The photo fills the whole image frame (frame = image size) and is never cropped
   (object-fit: contain), so the entire product shows at every screen width. Main +
   hover photo are stacked in the same box so the crossfade never shifts layout.
   "Image Space From Edges" (--tf-na-pad) is 0 by default and optional. */
.tfw-newarrivals .product-media img{
  position:absolute; display:block; max-width:none;
  top:var(--tf-na-pad,0px); left:var(--tf-na-pad,0px);
  width:calc(100% - 2 * var(--tf-na-pad,0px)); height:calc(100% - 2 * var(--tf-na-pad,0px));
  object-fit:contain !important; object-position:center;
}
.tfw-newarrivals .product-media-img-main,
.tfw-newarrivals .product-media-img-hover{ transition: opacity .35s ease; }
.tfw-newarrivals .product-media-img-hover{ opacity:0; }
/* Only swap on a real mouse hover (hover:hover + pointer:fine) — on a
   touchscreen there's no true hover state, so gating on the device's
   actual capability avoids the image getting "stuck" after a tap. */
@media (hover:hover) and (pointer:fine){
  .tfw-newarrivals .product-card:hover .product-media-img-hover{ opacity:1; }
  .tfw-newarrivals .product-card:hover .product-media-img-main{ opacity:0; }
}

/* ---- top row of the image: tag badge + heart (left), rating (right) ---- */
.tfw-newarrivals .media-header{ position:absolute; min-height:47.945px; top:10px; left:26.6px; right:26.6px; z-index:2; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.tfw-newarrivals .media-header > *{ pointer-events:auto; }
.tfw-newarrivals .media-header-left{ display:flex; align-items:center; gap:5px; min-width:0; }
.tfw-newarrivals .badge{
  font-size:12px; line-height:18px; font-weight:300; letter-spacing:1px; text-transform:uppercase;
  padding:12px 15px; color:#000; white-space:nowrap; display:inline-block;
}
.tfw-newarrivals .badge-sage{ background:#E7E6D0; }
.tfw-newarrivals .badge-mauve{ background:#E3CFCF; }
.tfw-newarrivals .badge-peach{ background:#FFE2A4; }
.tfw-newarrivals .heart-btn{
  width:40px; height:40px; padding:0; border-radius:50%; background:#FFFEFB; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#0F0F0F; transition: all .2s ease;
  border:0; box-shadow:none; overflow:hidden; position:relative;
}
/* Force ANY wrapper YITH's shortcode renders (its markup differs across
   plugin versions) to fill the circle instead of blowing its shape out
   with its own default padding/margin/width. */
.tfw-newarrivals .heart-btn > *{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.tfw-newarrivals .heart-btn svg{ width:20px; height:20px; display:block; }
.tfw-newarrivals .heart-btn:hover, .tfw-newarrivals .heart-btn.active{ color:#C9504A; }
.tfw-newarrivals .heart-btn.active svg{ fill:#C9504A; stroke:#C9504A; }

/* YITH WooCommerce Wishlist integration (Dynamic mode only — see
   new-arrivals.js for why the JS re-init call is needed). */
.tfw-newarrivals .heart-btn .yith-add-to-wishlist-button-block,
.tfw-newarrivals .heart-btn .yith-wcwl-add-to-wishlist-button-anchor-wrapper{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
}
.tfw-newarrivals .heart-btn .yith-wcwl-add-to-wishlist-button{
  all:unset; display:flex !important; align-items:center; justify-content:center;
  width:100% !important; height:100% !important; padding:0 !important; margin:0 !important;
  border:none !important; background:none !important; box-shadow:none !important;
  color:inherit; cursor:pointer;
}
.tfw-newarrivals .heart-btn .yith-wcwl-add-to-wishlist-button__label{ display:none !important; }
.tfw-newarrivals .heart-btn .yith-wcwl-icon-svg__wrapper{ display:flex; }
.tfw-newarrivals .heart-btn .yith-wcwl-icon{ width:20px; height:20px; }
.tfw-newarrivals .heart-btn .yith-wcwl-add-to-wishlist-button--added{ color:#C99E43; }

.tfw-newarrivals .rating{
  font-size:14px; line-height:21px; font-weight:400; color:#0F0F0F; flex-shrink:0;
  display:flex; align-items:center; gap:5.3px; letter-spacing:1px; text-transform:uppercase;
  background:transparent;
}
.tfw-newarrivals .rating svg{ color:#C99E43; width:15px; height:15px; flex-shrink:0; }

/* ---- text area ---- */
.tfw-newarrivals .product-info{ padding:26.6px; }
.tfw-newarrivals .product-titleblock h3{ font-size:18px; line-height:27px; font-weight:500; font-family:inherit; color:#0F0F0F; margin:0; }
.tfw-newarrivals .product-titleblock h3 a{ color:inherit; }
.tfw-newarrivals .product-sub{
  display:flex; flex-wrap:wrap; align-items:center; gap:6.7px; margin:0;
  font-size:14px; line-height:21px; font-weight:300; letter-spacing:1px; text-transform:uppercase; color:#757575;
}
.tfw-newarrivals .product-sub .sub-dot{ display:block; width:4px; height:4px; border-radius:50%; background:#757575; flex-shrink:0; }
/* swatches (material boxes) left, price right — one bottom line, so long
   product names never push the price away from the variation row. */
.tfw-newarrivals .product-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6.7px; }
.tfw-newarrivals .price{ font-weight:500; font-size:14px; line-height:21px; letter-spacing:1px; text-transform:uppercase; color:#757575; white-space:nowrap; }
.tfw-newarrivals .price del{ opacity:.55; margin-right:4px; }
.tfw-newarrivals .price ins{ text-decoration:none; background:none; }
.tfw-newarrivals .swatches{ display:flex; flex-wrap:wrap; gap:5.3px; }
.tfw-newarrivals .swatch{
  display:block; width:24px; height:24px; border-radius:50%; background-color:var(--c, #f8f5f2);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border:2.1px solid var(--b,#fff); cursor:pointer; position:relative;
}
.tfw-newarrivals .swatch.active{ border-width:1.1px; border-color:#000; }

@media (max-width:980px){
  .tfw-newarrivals .container{ padding:0 24px; }
  .tfw-newarrivals .section-head h2{ font-size:32px; line-height:42px; }
}
@media (max-width:720px){
  .tfw-newarrivals .section{ padding:32px 0; }
  /* Figma's mobile frame keeps the prev/next arrows on the SAME row as
     the heading, top-aligned, pinned right. */
  .tfw-newarrivals .section-head{ gap:12px; margin-bottom:22px; }
  .tfw-newarrivals .section-sub{ max-width:none; }
  .tfw-newarrivals .heart-btn{ width:26px; height:26px; }
  .tfw-newarrivals .heart-btn svg, .tfw-newarrivals .heart-btn .yith-wcwl-icon{ width:15px; height:15px; }
  .tfw-newarrivals .media-header{ left:8px; right:8px; top:8px; min-height:0; }
  .tfw-newarrivals .media-header{ gap:4px; }
  .tfw-newarrivals .media-header-left{ gap:4px; min-width:0; flex:1 1 auto; }
  .tfw-newarrivals .badge{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .tfw-newarrivals .badge{ font-size:8px; line-height:11px; padding:6px 7px; letter-spacing:.3px; }
  .tfw-newarrivals .rating{ font-size:11px; line-height:16px; gap:4px; letter-spacing:.3px; }
  .tfw-newarrivals .rating svg{ width:12px; height:12px; }
  .tfw-newarrivals .product-info{ padding:14px 12px 16px; }
  .tfw-newarrivals .product-titleblock h3{ font-size:14px; line-height:20px; }
  .tfw-newarrivals .product-sub{ font-size:10px; line-height:15px; gap:4px; letter-spacing:.5px; }
  .tfw-newarrivals .price{ font-size:11px; line-height:16px; letter-spacing:.5px; }
  .tfw-newarrivals .swatch{ width:18px; height:18px; }
  .tfw-newarrivals .swatches{ gap:4px; }
  .tfw-newarrivals .btn-shopall-wrap{ padding-top:14px; }
}