.clock-widget::before{
 content:"";
 position:absolute;
 inset:0;
 border-radius:50%;
 border-radius:13%;
 background:#000;
 z-index:0;
}

.clock-widget{
 position: relative;

 /* defaults */
 --clock-size: 120px;
 --u: 1;

 width: var(--clock-size);
 height: var(--clock-size);
}

/* Optional size helper classes (recommended) */
.clock-widget.size-60 { --clock-size: 60px; --u: 0.5; }
.clock-widget.size-90 { --clock-size: 90px; --u: 0.75; }
.clock-widget.size-120 { --clock-size: 120px; --u: 1; }
.clock-widget.size-240 { --clock-size: 240px; --u: 2; }

/* Dial (face image container) */
.clock-dial{
 position: absolute;
 inset: 0;
 border-radius: 999px;
 overflow: hidden;
 background-size: cover;
 background-position: center;
 z-index: 1;
}

/* Hand anchoring */
.clock-dial .hand{
 position: absolute;
 left: 50%;
 bottom: 50%;
 transform-origin: 50% 100%;
 transform: translateX(-50%) rotate(0deg);
 z-index: 3;
}

.clock-dial .pin{
 position:absolute;
 left:50%;
 top:50%;
 transform:translate(-50%,-50%);
 z-index:5;

 background: radial-gradient(circle at 30% 30%, #888, #222);
 box-shadow:
 0 0 calc(2px * var(--u)) rgba(0,0,0,0.6),
 inset 0 0 calc(2px * var(--u)) rgba(255,255,255,0.3);
}

.clock-dial{
 box-shadow:
 inset 0 0 calc(4px * var(--u)) rgba(0,0,0,0.35),
 inset 0 calc(2px * var(--u)) calc(6px * var(--u)) rgba(0,0,0,0.25);
}

/* Optional global “metal” look (styles below override as needed) */
.hand{
 background: linear-gradient(to right, #000, #444, #000);
 box-shadow: 0 0 calc(2px * var(--u)) rgba(0,0,0,0.35);
}

.hand.second{
 filter: drop-shadow(0 0 calc(1px * var(--u)) rgba(0,0,0,0.5));
}

.clocktextover,
.clocktextunder{
 position: absolute;
 text-align: center;
 z-index: 10;

 left: calc(10px * var(--u));
 width: calc(100px * var(--u));
 top: 0;

 border: 0;
 font-size: calc(12px * var(--u));
 font-weight: bold;
 color: #ffffff;
 background: transparent;

 border-top-left-radius: calc(16px * var(--u));
 border-top-right-radius: calc(16px * var(--u));
 border-bottom-left-radius: calc(16px * var(--u));
 border-bottom-right-radius: calc(16px * var(--u));
}

.clocktextunder{
 top: calc(107px * var(--u));
}

/* =========================
 3) HAND STYLES
 (only px-based details are scaled with var(--u))
 Heights remain % (auto-scales with clock size)
 ========================= */

/* --- plain --- */
.clock-widget[data-hands="plain"] .hand.hour { width: calc(5px * var(--u)); height: 20%; background:#111; border-radius: calc(2px * var(--u)); }
.clock-widget[data-hands="plain"] .hand.minute { width: calc(3px * var(--u)); height: 30%; background:#111; border-radius: calc(2px * var(--u)); }
.clock-widget[data-hands="plain"] .hand.second { width: calc(1px * var(--u)); height: 35%; background:#c00; }
.clock-widget[data-hands="plain"] .hand.second::before{
 content:""; position:absolute;
 bottom: calc(-10px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(1px * var(--u));
 height: calc(10px * var(--u));
 background:#c00;
}
.clock-widget[data-hands="plain"] .pin { width: calc(6px * var(--u)); height: calc(6px * var(--u)); background:#111; border-radius:50%; }

/* --- swiss --- */
.clock-widget[data-hands="swiss"] .hand.hour { width: calc(4px * var(--u)); height:20%; background:#000; }
.clock-widget[data-hands="swiss"] .hand.minute { width: calc(4px * var(--u)); height:30%; background:#000; }
.clock-widget[data-hands="swiss"] .hand.second { width: calc(1px * var(--u)); height:35%; background:#d00; }
.clock-widget[data-hands="swiss"] .hand.second::after{
 content:""; position:absolute;
 top: calc(-6px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(8px * var(--u));
 height: calc(8px * var(--u));
 background:#d00; border-radius:50%;
}
.clock-widget[data-hands="swiss"] .hand.second::before{
 content:""; position:absolute;
 bottom: calc(-10px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(4px * var(--u));
 height: calc(10px * var(--u));
 background:#d00; border-radius: calc(2px * var(--u));
}
.clock-widget[data-hands="swiss"] .pin { width: calc(6px * var(--u)); height: calc(6px * var(--u)); background:#000; border-radius:50%; }

/* --- grandfather --- */
.clock-widget[data-hands="grandfather"] .hand.hour{
 width: calc(8px * var(--u)); height:23%;
 background:#2a1b0f;
 clip-path: polygon(50% 0%, 70% 12%, 70% 100%, 30% 100%, 30% 12%);
 border-radius: calc(2px * var(--u));
}
.clock-widget[data-hands="grandfather"] .hand.minute{
 width: calc(6px * var(--u)); height:33%;
 background:#2a1b0f;
 clip-path: polygon(50% 0%, 72% 10%, 72% 100%, 28% 100%, 28% 10%);
}
.clock-widget[data-hands="grandfather"] .hand.minute::after{
 content:""; position:absolute;
 top: calc(-10px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(14px * var(--u));
 height: calc(14px * var(--u));
 border: calc(2px * var(--u)) solid #2a1b0f;
 border-radius:50%;
 background:transparent;
}
.clock-widget[data-hands="grandfather"] .hand.second{ width: calc(2px * var(--u)); height:35%; background:#9b1c1c; border-radius: calc(2px * var(--u)); }
.clock-widget[data-hands="grandfather"] .pin{
 width: calc(10px * var(--u)); height: calc(10px * var(--u));
 background:#2a1b0f; border-radius:50%;
 box-shadow: 0 0 0 calc(2px * var(--u)) #c9a46a inset;
}

/* --- baton --- */
.clock-widget[data-hands="baton"] .hand.hour{ width: calc(6px * var(--u)); height:18%; background:#111; border-radius: calc(6px * var(--u)); }
.clock-widget[data-hands="baton"] .hand.minute{ width: calc(4px * var(--u)); height:28%; background:#111; border-radius: calc(6px * var(--u)); }
.clock-widget[data-hands="baton"] .hand.second{ width: calc(2px * var(--u)); height:34%; background:#c00; border-radius: calc(6px * var(--u)); }
.clock-widget[data-hands="baton"] .pin{ width: calc(7px * var(--u)); height: calc(7px * var(--u)); background:#111; border-radius:50%; }

/* --- breguet --- */
.clock-widget[data-hands="breguet"] .hand.hour{
 width: calc(6px * var(--u)); height:18%;
 background:#1b1b1b; border-radius: calc(3px * var(--u));
 clip-path: polygon(50% 0%, 70% 10%, 70% 100%, 30% 100%, 30% 10%);
}
.clock-widget[data-hands="breguet"] .hand.minute{
 width: calc(4px * var(--u)); height:30%;
 background:#1b1b1b; border-radius: calc(3px * var(--u));
 clip-path: polygon(50% 0%, 70% 10%, 70% 100%, 30% 100%, 30% 10%);
}
.clock-widget[data-hands="breguet"] .hand.hour::after,
.clock-widget[data-hands="breguet"] .hand.minute::after{
 content:""; position:absolute;
 top: calc(-12px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(14px * var(--u));
 height: calc(14px * var(--u));
 border: calc(2px * var(--u)) solid #1b1b1b;
 border-radius:50%;
 background:transparent;
}
.clock-widget[data-hands="breguet"] .hand.second{ width: calc(2px * var(--u)); height:34%; background:#9b1c1c; border-radius: calc(2px * var(--u)); }
.clock-widget[data-hands="breguet"] .hand.second::before{
 content:""; position:absolute;
 bottom: calc(-10px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(6px * var(--u));
 height: calc(6px * var(--u));
 border: calc(2px * var(--u)) solid #9b1c1c;
 border-radius:50%;
 background:transparent;
}
.clock-widget[data-hands="breguet"] .pin{ width: calc(8px * var(--u)); height: calc(8px * var(--u)); background:#1b1b1b; border-radius:50%; }

/* --- cathedral --- */
.clock-widget[data-hands="cathedral"] .hand.hour{
 width: calc(10px * var(--u)); height:20%;
 background:#22160d;
 clip-path: polygon(50% 0%, 70% 12%, 62% 20%, 62% 100%, 38% 100%, 38% 20%, 30% 12%);
}
.clock-widget[data-hands="cathedral"] .hand.minute{
 width: calc(8px * var(--u)); height:32%;
 background:#22160d;
 clip-path: polygon(50% 0%, 72% 10%, 64% 18%, 64% 100%, 36% 100%, 36% 18%, 28% 10%);
}
.clock-widget[data-hands="cathedral"] .hand.minute::after{
 content:""; position:absolute;
 top:18%;
 left:50%; transform:translateX(-50%);
 width: calc(10px * var(--u));
 height: calc(10px * var(--u));
 border-radius:50%;
 background:rgba(255,255,255,0.25);
}
.clock-widget[data-hands="cathedral"] .hand.second{ width: calc(2px * var(--u)); height:33%; background:#9b1c1c; border-radius: calc(2px * var(--u)); }
.clock-widget[data-hands="cathedral"] .hand.second::before{
 content:""; position:absolute;
 bottom: calc(-14px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(10px * var(--u));
 height: calc(4px * var(--u));
 background:#9b1c1c;
 border-radius: calc(2px * var(--u));
}
.clock-widget[data-hands="cathedral"] .pin{
 width: calc(10px * var(--u));
 height: calc(10px * var(--u));
 background:#22160d;
 border-radius:50%;
 box-shadow: 0 0 0 calc(2px * var(--u)) rgba(201,164,106,0.9) inset;
}

/* --- railway --- */
.clock-widget[data-hands="railway"] .hand.hour{ width: calc(6px * var(--u)); height:18%; background:#111; border-radius: calc(2px * var(--u)); }
.clock-widget[data-hands="railway"] .hand.minute{ width: calc(4px * var(--u)); height:30%; background:#111; border-radius: calc(2px * var(--u)); }
.clock-widget[data-hands="railway"] .hand.second{ width: calc(2px * var(--u)); height:31%; background:#c00; border-radius: calc(2px * var(--u)); }
.clock-widget[data-hands="railway"] .hand.second::before{
 content:""; position:absolute;
 bottom: calc(-16px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(6px * var(--u));
 height: calc(16px * var(--u));
 background:#c00;
 border-radius: calc(3px * var(--u));
}
.clock-widget[data-hands="railway"] .pin{ width: calc(8px * var(--u)); height: calc(8px * var(--u)); background:#111; border-radius:50%; }

/* --- dauphine --- */
.clock-widget[data-hands="dauphine"] .hand.hour{
 width: calc(10px * var(--u)); height:18%;
 background:#111;
 clip-path: polygon(50% 0%, 70% 40%, 70% 100%, 30% 100%, 30% 40%);
}
.clock-widget[data-hands="dauphine"] .hand.minute{
 width: calc(8px * var(--u)); height:30%;
 background:#111;
 clip-path: polygon(50% 0%, 70% 30%, 70% 100%, 30% 100%, 30% 30%);
}
.clock-widget[data-hands="dauphine"] .hand.second{ width: calc(2px * var(--u)); height:34%; background:#c00; }
.clock-widget[data-hands="dauphine"] .hand.second::before{
 content:""; position:absolute;
 bottom: calc(-14px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(8px * var(--u));
 height: calc(14px * var(--u));
 background:#c00;
 border-radius: calc(3px * var(--u));
}
.clock-widget[data-hands="dauphine"] .pin{ width: calc(8px * var(--u)); height: calc(8px * var(--u)); background:#111; border-radius:50%; }
.clock-widget[data-hands="dauphine"] .hand.hour,
.clock-widget[data-hands="dauphine"] .hand.minute{
 background: linear-gradient(to right, #000 0%, #444 50%, #000 100%);
}

/* --- skeleton --- */
.clock-widget[data-hands="skeleton"] .hand.hour{
 width: calc(12px * var(--u)); height:20%;
 border: calc(2px * var(--u)) solid #111;
 background:transparent;
 border-radius: calc(6px * var(--u));
}
.clock-widget[data-hands="skeleton"] .hand.minute{
 width: calc(10px * var(--u)); height:32%;
 border: calc(2px * var(--u)) solid #111;
 background:transparent;
 border-radius: calc(6px * var(--u));
}
.clock-widget[data-hands="skeleton"] .hand.second{ width: calc(2px * var(--u)); height:34%; background:#a00; }
.clock-widget[data-hands="skeleton"] .hand.second::before{
 content:""; position:absolute;
 bottom: calc(-14px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(6px * var(--u));
 height: calc(14px * var(--u));
 background:#a00;
 border-radius: calc(3px * var(--u));
}
.clock-widget[data-hands="skeleton"] .pin{ width: calc(8px * var(--u)); height: calc(8px * var(--u)); background:#111; border-radius:50%; }

/* --- spade --- */
.clock-widget[data-hands="spade"] .hand.hour{ width: calc(6px * var(--u)); height:20%; background:#111; border-radius: calc(3px * var(--u)); }
.clock-widget[data-hands="spade"] .hand.hour::after{
 content:""; position:absolute;
 top: calc(-12px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(14px * var(--u));
 height: calc(14px * var(--u));
 border: calc(2px * var(--u)) solid #111;
 border-radius:50%;
 background:white;
}
.clock-widget[data-hands="spade"] .hand.minute{ width: calc(4px * var(--u)); height:32%; background:#111; border-radius: calc(3px * var(--u)); }
.clock-widget[data-hands="spade"] .hand.minute::after{
 content:""; position:absolute;
 top: calc(-14px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(16px * var(--u));
 height: calc(16px * var(--u));
 border: calc(2px * var(--u)) solid #111;
 border-radius:50%;
 background:white;
}
.clock-widget[data-hands="spade"] .hand.second{ width: calc(2px * var(--u)); height:34%; background:#b00; }
.clock-widget[data-hands="spade"] .hand.second::before{
 content:""; position:absolute;
 bottom: calc(-12px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(8px * var(--u));
 height: calc(12px * var(--u));
 background:#b00;
 border-radius: calc(3px * var(--u));
}
.clock-widget[data-hands="spade"] .pin{ width: calc(8px * var(--u)); height: calc(8px * var(--u)); background:#111; border-radius:50%; }

/* --- instrument --- */
.clock-widget[data-hands="instrument"] .hand.hour{ width: calc(10px * var(--u)); height:18%; background:#111; border-radius: calc(3px * var(--u)); }
.clock-widget[data-hands="instrument"] .hand.minute{ width: calc(4px * var(--u)); height:34%; background:#111; border-radius: calc(2px * var(--u)); }
.clock-widget[data-hands="instrument"] .hand.minute::after{
 content:""; position:absolute;
 top: calc(-6px * var(--u));
 left:50%; transform:translateX(-50%);
 width:0; height:0;
 border-left: calc(6px * var(--u)) solid transparent;
 border-right: calc(6px * var(--u)) solid transparent;
 border-bottom:calc(10px * var(--u)) solid #111;
}
.clock-widget[data-hands="instrument"] .hand.second{ width: calc(2px * var(--u)); height:36%; background:#ff2b2b; }
.clock-widget[data-hands="instrument"] .hand.second::before{
 content:""; position:absolute;
 bottom: calc(-16px * var(--u));
 left:50%; transform:translateX(-50%);
 width: calc(12px * var(--u));
 height: calc(4px * var(--u));
 background:#ff2b2b;
 border-radius: calc(2px * var(--u));
}
.clock-widget[data-hands="instrument"] .pin{
 width: calc(10px * var(--u));
 height: calc(10px * var(--u));
 background:#111;
 border-radius:50%;
 box-shadow: 0 0 0 calc(2px * var(--u)) #444 inset;
}

.clock-widget[data-hands="antique"] .hand.hour{
  width: calc(14px * var(--u));
  height: 22%;
  background: url("/images/antique-hour.svg") no-repeat center bottom / 100% 100%;
}

.clock-widget[data-hands="antique"] .hand.minute{
  width: calc(14px * var(--u));
  height: 34%;
  background: url("/images/antique-minute.svg") no-repeat center bottom / 100% 100%;
}

.clock-widget[data-hands="antique"] .hand.second{
  width: calc(14px * var(--u));
  height: 40%;
  background: url("/images/antique-second.svg") no-repeat center bottom / 100% 100%;
}

.clock-widget[data-hands="antique"] .pin{
 width: calc(10px * var(--u));
 height: calc(10px * var(--u));
 background:#111;
 border-radius:50%;
}

.clock-widget[data-hands="victorian"] .hand.hour{
  width: calc(14px * var(--u));
  height: 22%;
  background: url("/images/victorian-hour.svg") no-repeat center bottom / 100% 100%;
}

.clock-widget[data-hands="victorian"] .hand.minute{
  width: calc(14px * var(--u));
  height: 34%;
  background: url("/images/victorian-minute.svg") no-repeat center bottom / 100% 100%;
}

.clock-widget[data-hands="victorian"] .hand.second{
  width: calc(14px * var(--u));
  height: 40%;
  background: url("/images/victorian-second.svg") no-repeat center bottom / 100% 100%;
}

.clock-widget[data-hands="victorian"] .pin{
 width: calc(10px * var(--u));
 height: calc(10px * var(--u));
 background:#111;
 border-radius:50%;
}

.clock-widget[data-hands="bigben"] .hand.hour{
  width: calc(14px * var(--u));
  height: 22%;
  background: url("/images/bigben-hour.svg") no-repeat center bottom / 100% 100%;
}

.clock-widget[data-hands="bigben"] .hand.minute{
  width: calc(14px * var(--u));
  height: 34%;
  background: url("/images/bigben-minute.svg") no-repeat center bottom / 100% 100%;
}

.clock-widget[data-hands="bigben"] .hand.second{
/*  width: calc(14px * var(--u)); */
/*  height: 40%; */
/*  background: url("/images/bigben-second.svg") no-repeat center bottom / 100% 100%; */
}

.clock-widget[data-hands="bigben"] .pin{
 width: calc(10px * var(--u));
 height: calc(10px * var(--u));
 background:#111;
 border-radius:50%;
}

.clock-widget[data-hands="dorsay"] .hand.hour{
  width: calc(14px * var(--u));
  height: 22%;
  background: url("/images/dorsay-hour.svg") no-repeat center bottom / 100% 100%;
}

.clock-widget[data-hands="dorsay"] .hand.minute{
  width: calc(14px * var(--u));
  height: 34%;
  background: url("/images/dorsay-minute.svg") no-repeat center bottom / 100% 100%;
}

.clock-widget[data-hands="dorsay"] .hand.second{
/*
  width: calc(14px * var(--u));
  height: 40%;
  background: url("/images/dorsay-second.svg") no-repeat center bottom / 100% 100%;
*/
}

.clock-widget[data-hands="dorsay"] .pin{
 width: calc(10px * var(--u));
 height: calc(10px * var(--u));
 background:#111;
 border-radius:50%;
}

/* Image-hand sets: remove global gradient + shadows */
.clock-widget[data-hands="antique"] .hand,
.clock-widget[data-hands="bigben"] .hand,
.clock-widget[data-hands="dorsay"] .hand,
.clock-widget[data-hands="victorian"] .hand{
 background-color: transparent !important;
 background-image: none;
 box-shadow: none !important;
 filter: none !important;
 background-position: 50% 100% !important;
 background-repeat: no-repeat !important;
 background-size: 100% 100% !important;
}

/* Add a simple stem behind ornate SVG hour/minute hands so they don't "float" */
.clock-widget[data-hands="antique"] .hand.hour::before,
.clock-widget[data-hands="antique"] .hand.minute::before,
.clock-widget[data-hands="bigben"] .hand.hour::before,
.clock-widget[data-hands="bigben"] .hand.minute::before,
.clock-widget[data-hands="dorsay"] .hand.hour::before,
.clock-widget[data-hands="dorsay"] .hand.minute::before,
.clock-widget[data-hands="victorian"] .hand.hour::before,
.clock-widget[data-hands="victorian"] .hand.minute::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width: calc(1px * var(--u));
  height: 60%;
  background: #111;
  border-radius: calc(2px * var(--u));
  z-index: -1;
}

.clock_flag {
	z-index:0;
	width:24px;
	height:16px;
	top:12px;
	left:96px;
	border-top-right-radius:0px;
	position:absolute; 
}